Cara Membuat Horizontal Menu Dropdown

Ttulisan lama saya angkat kedalam blog saya, sebenarnya saya agak malas menulis postingan ini, karena cukup panjang kode HTML-nya,  tapi berhubung ada beberapa pertanyaan dari sobat blogger di kolom shoutbox, yang menanyakan tentang cara membuat menu horizontal seperti yang ada di blog saya, makanya sekalian saja saya tuliskan tentang horizontal menu dropdown buat sobat blogger.

Menu ini cukup panjang dan berhubungan dengan template, jadi saya sarankan untuk membackup template sobat terlebih dahulu sebelum mencoba tutorial ini. Sepertinya saya terlalu panjang lebar ya, baiklah langsung saja kita menuju TKP.

1. Login ke Blogger.
2. Klik Tata Letak.
3. Klik Edit HTML.
4. Backup template sobat terlebih dahulu, silahkan klik Download Template Lengkap.
5. Contreng Expand Widget Template.
6. Cari kode

dan letakkan kode berikut sebelum kode

.jqueryslidemenu{
font: bold 12px Trebuchet MS; background: #414141; width: 100%;}

.jqueryslidemenu ul{
margin: 0; padding: 0; list-style-type: none;}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative; display: inline; float: left;}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #414141; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;}

.jqueryslidemenu ul li a:hover{
background: black; /*tab link background during hover state*/
color: white;}

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0; display: block; visibility: hidden;}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item; float: none;}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{top: 0;}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;color: black;}

/* CSS classes applied to down and right arrow images */

.downarrowclass{
position: absolute; top: 12px; right: 7px;}

.rightarrowclass{
position: absolute; top: 6px; right: 5px;}

Kemudian letakkan kode berikut sebelum kode

Pasang HTML Encode di Blogger

type='html'>Barangkali sudah banyak diantara sobat blogger yang sudah tahu tentang cara memasang HTML Enconde pada Blogger. Tidak ada salahnya saya kupas kembali tentang tentang cara parse HTML yang mudah dan praktis tanpa harus menggunakan fasilitas Parse HTML Online dari situs Parse HTML.

Seperti situs http://www.blogcrowds.com/resources/parse_html.php termasuk yang paling saya suka karena sudah banyak membantu saya dalam memparse kode HTML dalam setiap postingan yang akan saya buat.

Bagaimana jika fasilitas tersebut ada dalam blogger? tentunya akan sangat memudahkan kita dalam menulis kode HTML di setiap postingan. Untuk memasang HTML Encode Selection pada Blogger sangat mudah, berikut langkah - langkahnya :

1. Download dahulu Greasemonkey 0.8.20090123.1 yang ada pada https://addons.mozilla.org/en-US/firefox/addon/748 atau sobat bisa klik disini. Kemudian setelah selesai menginstall, sobat restart browser milik sobat.
   
   
2. Kemudian install JavaScript berikut ini :
   http://userscripts.org/scripts/source/42696.user.js
   
   atau klik saja disini
   
   
3. Selesai sudah, sobat tinggal menggunakannya. Untuk menggunakan HTML Encode Selection, sobat blok kode HTML yang ingin di parse kemudian klik tombol HTML Encode Selection.
   
   
   
   Tuing..muncullah kode HTML yang sudah di parse dan bisa sobat masukkan dalam postingan.

Sangat mudah dan praktis. Oke sob, selamat mencoba !