04/10/13

Cara membuat menu DROP DOWN

Kalu kita punya blog supaya kemas dan rapih serta mudah di pahami oleh ramai orang maka usahakan blog kita berbentuk drop down. kalau kursor di arahkan baru menu itu turun,ini akan mengurangkan blog anda penuh sesak dengan objek yang membuat orang malas melanjutkan membaca. sesimple blog ini tentu anda akan lebih mudah mencari bukan. simple bukan berarti tidak menarik,contoh google cuma begitu aja isinya tapi pengunjungnya luar biasa makanya untuk menjadi menarik tak semestinya awura awuran penuh sesak dengan artikel ga jelas dan menjadikan orang malas melanjutkan untuk membaca artikel lainnya.
bagaimana cara membuatnya?
mari ikuti langkah di bawah ini.

Kalau anda sudah punya blog menggunakan blogspot masuklah ke www.blogger.com kemudian LOG IN lah. setelah log in pilih "tata letak"
lihatlah gambar bawah ini.


Kemudia klik "tambah gadget"



Kemudian klik "HTML/Java script"



Kemudian kopi "kode HTML dropdown" di tabel bawah halaman ini (silahkan roll mouse anda kebawah habis) kmdian paste kan ke kolom HTML,kosongkan judulnya kemudian klik simpan kemudian klik "lihat blog"


maka template atau tampilan blog anda sudah berubah saat ini,trus bagaimana cara memasukan artikel postingan kedalam menu drop down?

Setelah anda menulis artikel di kolom post dan di publikasikan maka artikel anda sudah otomatis terpublish ke seluruh dunia tapi menu drop down anda masih tak berubah,bagaimana cara merubahnya?

pertama klik "lihat entry"

Kemudian klik "lihat" pada postingan yang akan di masukan ke drop down.

Kemudian pergi ke kolom address,blok,klik kanan dan copylah alamatnya.


 Kemudian klik edit drop downnya

Kemudian "Paste" kan alamat tadi ke tanda # dan rubah lah "Menu" dengan judul postingan.
kemudian klik simpan dan cobalah lihat hasilnya.



untul menambah lagi dropnya tinggal copy aja dan sambung kebawahnya terus menerus sampai puas. kalau berita sudah kadaluarsa bisalah di buang dan isi yang baru.

ok guys selamat berkreasi,jangan lupa saran kritik dan pertanyaan klik aja di situ.


NOTE:
tak semua template bawaan blogger support kode dropdown horicontal jadi kalian bisa mengaplikasikan atau menempatkannya di bagian tepi menggunakan kode drop down vertikal. contohnya di bawah ini.


Kode HTML Vertical drop down (untuk pinggir)
<style>
#menu
{
width: 100%;
margin: 0;
padding: 10px 0 0 0;
list-style: none;
background: #000000;
background: -moz-linear-gradient(#444, #000000);
background: -webkit-gradient(linear,left bottom,left top,color-stop(1, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: 0 2px 0px #9c9c9c;
-webkit-box-shadow: 0 2px 0px #9c9c9c;
box-shadow: 0 2px 0px #9c9c9c;
}
#menu li
{
float: left;
padding: 0 0 10px 0;
position: relative;
line-height: 0;
}
#menu a
{
float: left;
height: 25px;
padding: 0 25px;
color: #999;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a
{
color: #fafafa;
}
*html #menu li a:hover /* IE6 */
{
color: #fafafa;
}
#menu li:hover > ul
{
display: block;
}
/* Sub-menu */
#menu ul
{
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 35px;
left: 0;
z-index: 99999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
box-shadow: 0 0 2px rgba(255,255,255,.5);
-moz-border-radius: 5px;
border-radius: 2px;
}
#menu ul ul
{
top: 0;
left: 150px;
}
#menu ul li
{
float: none;
margin: 0;
padding: 0;
display: block;
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}
#menu ul li:last-child
{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul a
{
padding: 10px;
height: 10px;
width: 130px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
*html #menu ul a /* IE6 */
{
height: 10px;
}
*:first-child+html #menu ul a /* IE7 */
{
height: 10px;
}
#menu ul a:hover
{
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
}
#menu ul li:first-child > a
{
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
#menu ul li:first-child > a:after
{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
}
#menu ul ul li:first-child a:after
{
left: -8px;
top: 12px;
width: 0;
height: 0;
border-left: 0;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
border-right: 8px solid #444;
}
#menu ul li:first-child a:hover:after
{
border-bottom-color: #04acec;
}
#menu ul ul li:first-child a:hover:after
{
border-right-color: #04acec;
border-bottom-color: transparent;
}

#menu ul li:last-child > a
{
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
/* Clear floated elements */
#menu:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html #menu { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
</style>
<ul id="menu">

<li><a href='#' rel='nofollow' >Drop menu 2</a>
<ul>
<li><a href='#' rel='dofollow' >Menu 1</a></li>
<li><a href='#' rel='dofollow' >Menu 2</a></li>
<li><a href='#' rel='dofollow' >Menu 3</a>
<ul>
<li><a href='#' rel='dofollow' >Menu 3.1</a></li>
<li><a href='#' rel='dofollow' >Menu 3.2</a></li>
<li><a href='#' rel='dofollow' >Menu 3.3</a></li>
<li><a href='#' rel='dofollow' >Menu 3.4</a></li>
</ul>
</li>

</ul></li></ul>

Kode HTML Horizontal drop down (untuk Atas)

<style>
#menu
{
width: 100%;
margin: 0;
padding: 10px 0 0 0;
list-style: none;
background: #000000;
background: -moz-linear-gradient(#444, #000000);
background: -webkit-gradient(linear,left bottom,left top,color-stop(1, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: 0 2px 0px #9c9c9c;
-webkit-box-shadow: 0 2px 0px #9c9c9c;
box-shadow: 0 2px 0px #9c9c9c;
}
#menu li
{
float: left;
padding: 0 0 10px 0;
position: relative;
line-height: 0;
}
#menu a
{
float: left;
height: 25px;
padding: 0 25px;
color: #999;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a
{
color: #fafafa;
}
*html #menu li a:hover /* IE6 */
{
color: #fafafa;
}
#menu li:hover > ul
{
display: block;
}
/* Sub-menu */
#menu ul
{
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 35px;
left: 0;
z-index: 99999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
box-shadow: 0 0 2px rgba(255,255,255,.5);
-moz-border-radius: 5px;
border-radius: 2px;
}
#menu ul ul
{
top: 0;
left: 150px;
}
#menu ul li
{
float: none;
margin: 0;
padding: 0;
display: block;
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}
#menu ul li:last-child
{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul a
{
padding: 10px;
height: 10px;
width: 130px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
*html #menu ul a /* IE6 */
{
height: 10px;
}
*:first-child+html #menu ul a /* IE7 */
{
height: 10px;
}
#menu ul a:hover
{
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
}
#menu ul li:first-child > a
{
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
#menu ul li:first-child > a:after
{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
}
#menu ul ul li:first-child a:after
{
left: -8px;
top: 12px;
width: 0;
height: 0;
border-left: 0;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
border-right: 8px solid #444;
}
#menu ul li:first-child a:hover:after
{
border-bottom-color: #04acec;
}
#menu ul ul li:first-child a:hover:after
{
border-right-color: #04acec;
border-bottom-color: transparent;
}

#menu ul li:last-child > a
{
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
/* Clear floated elements */
#menu:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html #menu { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
</style>
<ul id="menu">
<li><a href='/'>Home</a></li>
<li><a href='#' rel='nofollow' >Drop menu</a>
<ul>
<li><a href='#' rel='dofollow' >Menu 1</a></li>
<li><a href='#' rel='dofollow' >Menu 2</a></li>
<li><a href='#' rel='dofollow' >Menu 3</a></li>
<li><a href='#' rel='dofollow' >Menu 4</a></li>
<li><a href='#' rel='dofollow' >Menu 5</a></li>
</ul>
</li>
<li><a href='#' rel='nofollow' >Drop menu 2</a>
<ul>
<li><a href='#' rel='dofollow' >Menu 1</a></li>
<li><a href='#' rel='dofollow' >Menu 2</a></li>
<li><a href='#' rel='dofollow' >Menu 3</a>
<ul>
<li><a href='#' rel='dofollow' >Menu 3.1</a></li>
<li><a href='#' rel='dofollow' >Menu 3.2</a></li>
<li><a href='#' rel='dofollow' >Menu 3.3</a></li>
<li><a href='#' rel='dofollow' >Menu 3.4</a></li>
</ul>
</li>
<li><a href='#' rel='dofollow' >Menu 4</a></li>
<li><a href='#' rel='dofollow' >Menu 5</a></li>
</ul>
</li>
<li><a href='#' rel='nofollow' >Drop menu 3</a>
<ul>
<li><a href='#' rel='dofollow' >Menu 1</a></li>
<li><a href='#' rel='dofollow' >Menu 2</a></li>
<li><a href='#' rel='dofollow' >Menu 3</a></li>
<li><a href='#' rel='dofollow' >Menu 4</a></li>
<li><a href='#' rel='dofollow' >Menu 5</a></li>
</ul></li></ul>
at