Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts

Saturday, 15 June 2013

MENGENAL INPUT FORM DILENGKAPI DENGAN PLACEHOLDER

Asalamualaikum...
sobat tutor Bagaimana kabarnya?
lama juga saya tidak menyapa kalian dengan postingan-postingan yang bermaanfaati ini.
maklumlah, saya lagi sibuk dengan persiapan masuk perguruan tinggi.

kali ini saya akan berbagi tentang membuat input placeholder.
apa itu input placeholder? temen-temen semua pernahkan login atau daftar pada website?
misalkan twitter, nah di dalam form inputnya tersebut ada tulisan berwarna buram didalam.
yang ketika kita klik tulisan tersebut masih ada, tetapi sesudah kita tuliskan sesuatu didalam inputboxnya, maka secara otomatis text tersebut hilang.
seperti pada di bawah ini nih.


seperti itu kira-kira.



oke sekarang saya akan membagikan scriptnya.

<form action="demo_form.asp">
  <input type="text" name="user" placeholder="username"><br>
  <input type="password" name="pass" placeholder="password"><br>
  <input type="submit" value="Submit">
</form>

untuk melihat lengkapnya klik disini

Saturday, 18 May 2013

MENU DROPDOWN CSS SEDERHANA

Dropdown menu berfungsi saat kita membutuhkan sub menu untuk menu utama. Pada posting kali ini saya akan mencoba membuat menu dropdown sederhana dengan menggunakan css (Cascading Style Sheet). Disini saya akan membuat dua buah file yaitu style.css yang berfungsi untuk mengatur tampilan dari code html dan yang kedua adalah dropdown.html yang akan tampil di dalam browser internet. Kedua file ini harus diletakkan dalam folder yang sama.

Baiklah, berikut ini adalah file style.css nya :
Buka notepad anda, tulis atau copy paste code di bawah, lalu save as style.css.


/* CSS Document */
#menu { position: relative; width: 100%; height: 40px; background: #6699cc; border: 1px solid #000000;
}
#menu ul{ margin: 0; padding: 0; list-style: none;
}
#menu ul li{ position: relative; float: left;
}
#menu ul li a{ display: block; text-decoration: none; color: #ffffff; padding: 10px; float: left; border-right: 1px solid #000000;
}
#menu ul li a:hover{ background-color: #000000; }
#menu ul li ul { display: none;}
#menu ul li:hover ul { display: block; position: absolute; top: 41px; left: 0px;
}
#menu ul li:hover ul li a{ display: block; background: #6699cc; color: #ffffff; width: 130px; border-left: 1px solid #000000;
}
#menu ul li:hover ul li a:hover { background: #000000; color: #ffffff;
 }

Lalu file dropdown.html nya adalah :

Buka notepad kembali, copy paste code di bawah, lalu save as dropdown.html.


<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dropdown menu</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="menu">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Kejuruan</a>
<ul>
<li><a href="">Akuntansi</a></li>
<li><a href="">Adper</a></li>
<li><a href="">Perhotelan</a></li>
<li><a href="">Pemasaran</a></li>
<li><a href="">TKJ</a></li>
<li><a href="">RPL</a></li>
</ul></li>
<li><a href="">Contact</a>
<ul>
<li><a href="">Tsoleh@gmail.com</a></li>
<li><a href="//taufikerst.net/">taufikerst</a></li>
</ul></li>
<li><a href="">Post Feed</a>
<ul>
<li><a href="">Via Web</a></li>
<li><a href="">Via Phone</a></li>
<li><a href="">Via Rss</a></li>
</ul></li></ul>
</body>
</html>
Simpan kedua file dalam folder yang sama. Setelah selesai coba ditest dengan membuka file dropdown.html dengan browser kesayangan anda. Bila berhasil maka akan terlihat seperti gambar di bawah ini :


*untuk download source code-nya klik icon download di bawah*



Tuesday, 22 January 2013

EMBED HTML KASKUS RADIO

EMBED HTML RADO KASKUS
Bang Tutor - Hallo sahabat Tutor. gimana kabarnya nih??
kebetulan malam ini saya baru bikin blog, dan kepikiran pengen menggunakan widget Radio Online.
untuk itu saya mencari Radio Online yang paling populer, selama saya ingat dengan KaskusRadio. Itu adalah salah satu radio Online yang Poluler menurut saya, dan siaranya juga mengasikan. 
Nah untuk itu, supaya kegiatan nge-Blog kalian lebih seru pasang <embed> KaskusRadio di Blog atau Website anda. 
solahkan copy paste Code <embed> berikut.

My Website