Membuat Menu Horizontal di atas Navbar

Tampilan sangat mempengaruhi ketertarikan pembaca untuk lebih lama menikmati segala hal yang termuat di dalam sebuah blog. Selain keindahan, fasilitas yang memberikan kemudahan untuk menjelajah isi blog juga memberikan andil yang besar bagi betahnya pengunjung blog. Menambah "Menu Horizontal" sudah merupakan hal yang wajib bagi seorang blogger. Cuma satu hal yang perlu diperhatikan ; bagaimana mendapatkan sebuah menu horizontal yang memenuhi syarat untuk ditambahkan dalam blog. Di bawah ini kami sediakan sebuah menu horizontal yang sangat menarik, yang bila anda telaten bisa di modifikasi baik bentuk maupun warna serta besarnya. Silahkan dicoba untuk membuat blog anda menjadi lebih nyaman dilihat dan lebih mudah ditelusuri semua posting yang sudah anda buat dengan susah payah.



Langkah-langkahnya sebagai berikut :

1. Lakukan Login terlebih dahulu untuk masuk ke menu pengeditan HTML.
2. Lanjutkan masuk ke menu "Tata Letak".
3. 'Klik' "Edit HTML".
4. Lakukan pengamanan template anda terlebih dahulu dengan meng'klik' "Download Template Lengkap" dan simpan dalam folder anda.
5. Setelah yakin template orisinil tersimpan dengan baik, cari kode :
]] ></b:skin> (di atas </head>).
6. Copy paste kode HTML di bawah ini dan letakkan persis di atas kode :
]]></b:skin> .

/* top navbarblack

----------------------------------------------- */

#navbarblack {

height:27px;

background:#fff url(http://i36.tinypic.com/11t7ok1/BGS1.jpg)top repeat-x;

padding:5px;

}

#nav {

font-size:1.1em;

float:left;

}

#nav, #nav ul {

list-style: none;

line-height: 1;

}

#nav li {

float:left;

background: url(http://i38.tinypic.com/2v0lb92/BGS1.jpg) right repeat-y;

padding: 0 10px;

}

#nav a, #nav a:visited {

display:block;

color: #eabe64;

padding-bottom:6px;

border-bottom:2px solid #eae8d1;

}

#nav a:hover, #nav a:active,

#nav li.current-cat a, #nav li.current-cat a:visited {

display:block;

padding-bottom:2px;

color: #0c00fd;

border-bottom:12px solid #ea3131;

}

.shift:after {

display:block;

visibility:hidden;

clear:both;

height:0;

content:".";

}

.shift {

margin:0px auto;

display:inline-block

}

.shift {

display:block

}

7. Supaya tidak bikin pusing simpan terlebih dahulu dengan 'klik' "Simpan Template".

Saya kira setelah menarik nafas cukup panjang, mari lanjutkan pekerjaan kita dengan langkah berikut.

8. Kembali temukan : </head>
9. Letakkan kode berikut di bawahnya :

<div class='shift' id='navbarblack'>
<ul class='shift' id='nav'>

<li><a href='http://qutilkorep.blogspot.com/'>Home</a></li>
<li><a href='http://qutilkorep.blogspot.com/'>Tutorial Blogger</a></li>
<li><a href='http://qutilkorep.blogspot.com/'>Download</a></li>
<li><a href='http://qutilkorep.blogspot.com/'>Religi</a></li>
<li><a href='http://qutilkorep.blogspot.com/'>Tips dan Trik</a></li>
<li><a href='http://qutilkorep.blogspot.com/'>About Me</a></li>

</ul>
</div>
Kode dengan warna merah dan biru silahkan diganti sesuai dengan kebutuhan anda berkaitan dengan "Menu" yang akan di isikan beserta "Link Menu"-nya.

Menu Horizontal ini akan tampil lebih indah seandainya Navbar dihilangkan atau dibuat tersembunyi dan hanya muncul setelah tersentuh cursor. Untuk melakukannya silahkan anda cari di blog ini berupa "Menghilangkan Navbar" dan "Navbar Petak Umpet".

Selamat mencoba ! Semoga blog anda tampil lebih cantik!!!! Artikel Terkait Lainnya