Cara Membuat Navigasi Menu DropDown Pada Blog

Dipostkan Oleh. BlogTerms
Navigasi Menu DropDown Blog
Mudah-Mudahan Tips ini salah satu yang teman blogger cari, sehingga saya tidak merasa kecewa untuk menuliskan artikel tips blog untuk "Cara Membuat Navigasi Menu Drop Down Pada Blog" ini.
Beberapa Template blog memang sengaja tidak menyediakan Widget yang satu ini, entah apa alasanya, seperti pada Blog "Lowongan Kerja" dan Template standart Blog juga tidak menyediakan Widget Navigasi Menu ini.
Jika kita memiliki template seperti itu dan tidak ingin mengganti template, dibawah ini bisa jadi bahan percobaan anda untuk mengedit Template membuat Navigasi Menu.

Langkah-langkah yang perlu anda lakukan sebagai berikut :

Pertama, login pada blog anda.

Kedua, Pilih Design => Page Elemen => Edit HTML =>
Expand Widget Templates.
Perhatian:
Sebelum melakukan Pengeditan Sebaiknya Simpan Dulu Template awal anda dengan cara "BackUp / Restore Template" Download Full Template. Maksudnya agar menjaga jika terjadi kesalahan, Jika Template Error, anda bisa mengembalikan ke bentuk semula dengan Template yang anda download tadi.

Ketiga, Cari Code berikut in, Code : [[></b:skin> or ]]></b:skin>
Untuk mempermudah anda melakukan Pencarian Code diatas, Gunakan Alternative lewat Keyword anda dengan Ctrl + F lalu masukkan Code diatas dan Enter, maka anda akan lebih mudah menemukan Code diatas.

Keempat, Copy Code Di Bawah ini Dan Pastekan di Atas atau Sebelum Code [[></b:skin>

Code :
menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Arial", Arial;
font-size:14px;
font-weight:bold;
}
.menu ul{
background:#333333;
height:35px;
list-style:none;
margin:0;
padding:0;
font-size:14px;
font-weight:bold;
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#333333 url("http://i47.tinypic.com/qp53sw.jpg") bottom right no-repeat;
color:#cccccc;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a{
background: #2580a2 url("http://i49.tinypic.com/13zbc53.jpg") bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}
.menu li ul{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
background:url('http://i45.tinypic.com/nvxxqg.jpg') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
.menu li:hover li a{
background:none;
}
.menu li ul a{
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#2580a2 url('http://i50.tinypic.com/66elwh.jpg') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
.menu p{
clear:left;
}

Kelima, Save Template anda.

Keenam, Setelah Selesai melakukan Pengeditan di halaman HTML, sekarang kita menuju Page Elemen.

Ketujuh, Dihalaman Page Elemen, Pilih dimana Anda akan meletakkan Posisi Navigasi Menu DropDown tersebut, setelah memilih lokasi yang tempat, Klik "Add Widget" => "HTML / JavaScript".

Kedelapan, Copy Code Berikut ini Tepat di Halaman "HTML / JavaScript"

Code :
<div class="menu"><ul><li><a href="#"> Nama Link </a></li><li><a href=" # "> Nama Link </a><ul><li><a href=" # "> Nama Link </a></li><li><a href=" # "> Nama Link </a></li><li><a href=" # "> Nama Link </a></li><li><a href=" # "> Nama Link </a></li></ul></li><li><a href="#"> Nama Link </a><ul><li><a href="#"> Nama Link </a></li><li><a href="#"> Nama Link </a></li></ul></li><li><a href="#">Nama Link</a></li></ul></div>
Keterangan :
Pada Code yang Berwarna Hijau anda Letakkan Code Link
Pada Code yang Berwarna Kuning Anda Letakkan Nama Link

Kesembilan, Save HTML / JavaScript anda.

Kesepuluh, Lihat Hasilnya di Halaman Blog Anda.
Sekian Dulu Tips "Cara Membuat Navigasi Menu DropDown Pada Blog" Dari Blogterms, Mudah-mudahan Bisa Bermanfaat Bagi Sahabat Blogger.

Posted by : BlogTerms ~ SEO | Backlinks | Website | Widget | Ads

Artikel Cara Membuat Navigasi Menu DropDown Pada Blog diposting oleh BlogTermsThursday, September 6, 2012. Terima kasih atas kunjungannya. Mohon Di Share Melalui Widget dibawah ini :

0 comments

Labels: , ,

0 comments:

Post a Comment