Membuat menu horisontal tanpa utak-utik template

Ada banyak cara membuat menu horisontal di blogspot, masing-masing punya kelebihan dan kekurangan. Itupun tergantung kesukaan si pemilik blog, ada yang suka tampak mewah namun ada suka yang ingin sederhana saja tanpa banyak variasi font ataupun backgroundnya. Tetapi mayoritas para pengunjung suatu akan lebih suka jika suatu blog tampak mewah dengan berbagai variasi menu maupun animasi. Misalnya dengan menambahkan efek marque, teks kerlap-kerlip, banner animasi, salju beterbangan dan sebagainya.

Membuat menu horisontal dilihat dari cara meletakkannya ada 2, yaitu pertama dengan langsung memasukkan kodenya ditemplate dan kedua cukup dengan memasukkannya pada widget baru.

1. Cara pertama terkadang akan membuat pusing para blogger yang masih pemula. Karena jika salah atau kurang sedikit saja kode yang disematkan maka kodepun tidak akan berjalan selebihnya template tidak mau menyimpan penambahan kode tersebut.
2. Untuk cara yang kedua ini lebih mudah dan tidak mengandung resiko yang fatal, sangat cocok bagi blogger pemula. Jika ada kode yang kurang resikonya menunya tidak akan tampak/berjalan dengan semestinya.

Seperti topik judul di atas, anda saya ajak bagaimana cara membuat menu horisontal tanpa harus utak-utik template yang beresiko fatal. Anda hanya tinggal menambah Gadget HTML baru dan memasukkan kode ke dalamnya, lalu anda membangun linknya, selesai.

Selengkapnya sebagai berikut:

1. Masuk ke account blog anda.

2. Dasbor > Rancangan > Tambah Gadget > HTML/JavaSript.

3. Biarkan HTML/JavaSript terbuka, lalu copy semua kode di bawah ini:

 

<style type="text/css">
#babi{background:url(http://lh3.googleusercontent.com/-ixgySORWjpg/T1_3miHt8RI/AAAAAAAAA_s/ZWUZBT78UNA/s35/catmenuhov.jpg); width:870px; height:32px; color:#5A6C8C; margin:0 auto; padding:0 3px; font:bold 8px Arial, Tahoma, Verdana; border-top:1px solid #666; border-bottom:1px solid #666;-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;}
#ngepet{width:700px; float:left; margin:0; padding:0;}
#jadah{margin:0; padding:0;}
#jadah ul{float:left; list-style:none; margin:0; padding:0;}
#jadah li{list-style:none; margin:0; padding:0; text-shadow:1px 1px 1px #000;}
#jadah li a, #nav li a:link, #nav li a:visited{color:#fff; display:block; text-transform:uppercase; margin:0; padding:8px 10px 8px; font:bold 11px Arial, Times New Roman;}
#jadah li a:hover, #jadah li a:active{background:url(http://lh3.googleusercontent.com/-oeHoTI_4VNk/T1_3Xt7xs3I/AAAAAAAAA_c/YZm8fsXKPyg/s284/widgettitle-bg.png);color:#fff; padding:9px 15px 9px; text-decoration:none;-moz-border-radius: 12px;
-webkit-border-radius: 12px;
-khtml-border-radius: 12px;
border-radius: 12px;}
#jadah li li a, #jadah li li a:link, #jadah li li a:visited{background:url(http://lh4.googleusercontent.com/-NTMvWa4PgBw/T14ZMOBJ_jI/AAAAAAAAA6E/aZlo0d1jynY/s300/ctmenu.png); width:150px; color:#e5e3e3; text-transform:capitalize;position:left; float:none; margin:0; padding:2px 5px; border-bottom:1px solid #151f23; border-left:px solid #151f23;border-right:2px solid #151f23; font:normal 14px Georgia, Times New Roman;-moz-box-shadow: 1px 1px 10px #888;
-webkit-box-shadow:1px 1px 10px #888;
-webkit-border-radius: 6px;-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;}
#jadah li li a:hover, #jadah li li a:active{background:url(http://lh3.googleusercontent.com/-oeHoTI_4VNk/T1_3Xt7xs3I/AAAAAAAAA_c/YZm8fsXKPyg/s284/widgettitle-bg.png); color:#fff; padding:3px 10px;-moz-border-radius: 12px;
-webkit-border-radius: 12px;
-khtml-border-radius: 12px;
border-radius: 12px;}
#jadah li{float:left; padding:0;}
#jadah li ul{z-index:9999; position:absolute; left:-999em; height:auto; width:170px; margin:0; padding:0;}
#jadah li ul a{width:140px;}
#jadah li ul ul{margin:-24px 0 0 170px;}
#jadah li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul{left:-999em;}
#jadah li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul{left:auto;}
#jadah li:hover, #nav li.sfhover{position:static;}
#top{background:#f6f6f6; margin:10px auto 0; padding:10px; width:918px; border:1px solid #ccc; word-wrap: break-word; overflow: hidden; font-size:13px;}
#top a, #top a:visited{font-weight: normal; color: #00338F; text-decoration: none;}
#top a:hover{color:#cc0000; text-decoration: underline;}
#top p {font-size: 14px; font-weight: bold; padding: 0; margin: 0;}
.topleft {width: 304px; float: left; margin: 0; padding:0;}
.topleft img a, .topleft img {border:1px solid #ccc; margin: 0; padding: 1px;}
.topright {width: 600px; float: right; margin:0; padding:0; text-transform: normal;}
</style>
<div id='outer'>
<div id='babi'>
<div id='ngepet'>
<ul id='jadah'>
<li><a href='alamat Blog Anda'>Home</a></li>


<li><a href='#'>Motivasi</a>
<ul>
<li><a href='#' target="_blank" >Si Otak kanan</a></li>
<li><a href='#' target="_blank" >Cinta</a></li>
<li><a href='#' target="_blank" >Rahasia wanita</a></li>
</ul></li>


<li><a href='#'>Tutorial</a>
<ul>
<li><a href='#' target="_blank" >CorelDraw</a></li>
<li><a href='#' target="_blank" >Efek Photoshop</a></li>
</ul></li>


<li><a href='#'>Technology</a>
<ul>
<li><a href='#' target="_blank">Aplikasi Perkantoran</a></li>
<li><a href='#' target="_blank">Handphone</a></li>
<li><a href='#' target="_blank">TuneUp</a></li>
</ul></li>


<li><a href='#'>Mp3</a>
<ul>
<li><a href='#' target="_blank">Gending Klasik</a></li>
<li><a href='#' target="_blank">Video</a></li>
<li><a href='#' target="_blank">Lirik</a></li>
</ul></li>


<li><a href='#'>Template</a>
<ul>
<li><a href='#'target="_blank">Template Cdr</a></li>
<li><a href='#'target="_blank">Template Kartu Nama</a></li>
<li><a href='#'target="_blank">Template Piagam</a></li>
<li><a href='#'target="_blank">Template Spanduk</a></li>
<li><a href='#'target="_blank">Template Undangan</a></li>
</ul></li>


<li><a href='#'>Download</a>
<ul>
<li><a href='#'target="_blank">Download Antivirus</a></li>
<li><a href='#'target="_blank">Download Ebook</a></li>
<li><a href='#'target="_blank">Download Logo</a></li>
<li><a href='#'target="_blank">Download Ornament</a></li>
</ul></li>


<ul>
<li><a href='#' target="_blank">Kode warna HTML</a></li>
</ul></li>
<ul>
<li><a href='#' target="_blank">DIJUAL</a></li>
</ul></li>
</ul>
</div>
</div>
</div>

 

4. Paste pada kotak Konten yang masih terbuka tadi.

5. Untuk mengeditnya:

- Warna ungu adalah background gambar, jika ingin melihatnya blog teks tersebut klik kanan lalu Buk a di. Anda dapat melihat di mana gambar muncul pada menu anda. Jika ingin mengganti dengan gambar anda sendiri ganti dengan URL gambar anda.

- Warna hijau adalah ukuran panjang dan tinggi menu, sesuaikan dengan lebar template anda.

- Warna biru URL artikel anda.

- Warna merah teks yang ingin anda munculkan di menu.
Untuk jenis atau warna font yang di inginkan silahkan utak-utik sendiri agar anda tambah pinter he hee...

5. Jika sudah, Simpan dan selesai.