Cara Membuat Menu Blogger


Menu horizontal merupakan kumpulan beberapa link yang diletakkan secara horizontal dan biasanya ditempatkan di bawah header. Pada kesempatan ini, kita akan mengulas trik blogger tentang membuat menu horizontal secara sederhana. Mengapa dikatakan sederhana.....?
Karena jika kita optimasi lebih mendalam, ternyata terdapat beberapa varian dari menu horizontal tersebut. Fungsi dari trik blogger ini adalah sebagai salah satu navigasi dalam blog agar memberikan layanan kemudahan shortcut link bagi pengunjung blog kamu.
Caranya :

    * Login ke account blogger kamu.
    * Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

    * Cari Kode kode ]]></b:skin> dan Copy-Paste kode berikut di atasnya.

Tips : Kalau susah mencarinya, centang kolom Expand Template Widget, kemudian coba tekan ctrl + f (secara bersamaan). kamu tinggal memasukkan kode diatas kedalam kotak pencariannya.
/*=== Navigasi pulldown ===*/
body{ behavior:url("csshover2.htc"); }
.NavMenuPD {
float:left;
padding:0;
margin:0;
color: #FFFFFF;
background: transparent;
width:100%;
border:solid 1px #004080; clear:both;} /*Warna Navigasi Utama*/
.NavMenuPD a, .NavMenuPD a:visited {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-style:normal;
font-weight:bold;
font-size:12px;
color: #FFFFFF;
background-color: transparent;
text-decoration: none;}
.NavMenuPD ul {list-style-type:none;padding:0; margin:0;}
.NavMenuPD ul li {float:left; position:relative; z-index:auto !important ; z-index:1000 ; border-right:solid 1px #004080; border-left:solid 1px #004080;}
.NavMenuPD ul li a {color: #FFFFFF;background: transparent;float:none !important ; float:left ; display:block; height:30px; line-height:30px; padding:0 10px 0 10px; text-decoration:none; }
.NavMenuPD ul li ul {display:none; border:none;color: #FFFFFF;background: #000000; width:1px}
.NavMenuPD ul li:hover a {background-color:#C0C0C0; text-decoration:none; color:#000000;} /*Warna main cells mode hover */
.NavMenuPD ul li:hover ul {display:block; position:absolute; z-index:999; top:29px; margin-top:1px; left:0;}
.NavMenuPD ul li:hover ul li a {display:block; width:100px; height:auto; line-height:1.3em; margin-left:-1px; padding:5px 10px 5px 10px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#C0C0C0; color:#FFFFFF;} /*warna subcells mode normal */
.NavMenuPD ul li:hover ul li a:hover {background-color:#808080; text-decoration:none;color:#FFFF00;} /*Warna subcells mode hover*/
.NavMenuPD ul li a:hover {background-color:#C0C0C0; text-decoration:none;color:#0000FF;} /*warna main cells mode hover */
.NavMenuPD ul li a:hover ul {display:block; width:100px; position:absolute; z-index:999; top:29px; left:0; }
.NavMenuPD ul li ul li a:visited { background-color:#C0C0C0; color:#FFFFFF;} /*Warna subcells normal mode*/
.NavMenuPD ul li a:hover ul li a {display:block; width:100px; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#C0C0C0; color:#FFFFFF;}
.NavMenuPD ul li a:hover ul li a:hover {background-color:#00FFFF; text-decoration:none;color:#FFFF00;} /*Color subcells hovering mode*/
/*= by bangnes url blog: http://bangnesdotcom.blogspot.com =*/

Catatan :

Agar menu horizontal sesuai dengan template blog, kamu perlu mengganti kode-kode dan sesuaikan dengan blog kamu.

* Kemudian cari kembali kode seperti di bawah ini.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'
showaddelement='no'>
<b:widget id='Header1' locked='true' title='test
(Header)' type='Header'/>

... dan seterusnya ...

</b:section>
</div>


* Copas kode berikut tepat di bawah kode yang berwarna hijau atau berwarna merah (sesuaikan dengan template blog kamu).
<div class='NavMenuPD'>
<ul><li><a href='/'>BERANDA</a>
</li></ul>

<ul><li><a href='http://bangnesdotcom.blogspot.com/search/label/Informasi'>INFORMASI</a>
</li></ul>

<ul><li><a href='#'>TIPS dan TRIK</a>
<ul>
<li><a href='http://bangnesdotcom.blogspot.com/search/label/Tips%20dan%20Trik%20Internet'>Tips dan Trik Internet</a></li>
<li><a href='http://bangnesdotcom.blogspot.com/search/label/Tips%20dan%20Trik%20Komputer'>Tips dan Trik Komputer</a></li>
<li><a href='http://bangnesdotcom.blogspot.com/search/label/Tips%20Blog'>Tips dan Trik Blog</a></li>
<li><a href='http://bangnesdotcom.blogspot.com/search/label/Tips%20dan%20Trik%20HP'>Tips dan Trik HP</a></li>
</ul>
</li></ul>

<ul><li><a href='#'>BLOG</a>
<ul>
<li><a href='http://bangnesdotcom.blogspot.com/search/label/SEO'>SEO</a></li>
<li><a href='http://bangnesdotcom.blogspot.com/search/label/CSS'>CSS</a></li>
</ul>
</li></ul>

<ul><li><a href='#'>SOFTWARE</a>
<ul>
<li><a href='http://bangnesdotcom.blogspot.com/search/label/Anti%20Virus'>Anti Virus</a></li>
<li><a href='http://bangnesdotcom.blogspot.com/search/label/Audio'>Audio</a></li>
<li><a href='http://bangnesdotcom.blogspot.com/search/label/Video%20Software'>Video</a></li>
<li><a href='http://bangnesdotcom.blogspot.com/search/label/Internet%20Sofware'>Internet Software</a></li>
<li><a href='http://bangnesdotcom.blogspot.com/search/label/Design%20Graphic'>Graphic Design</a></li>
<li><a href='http://bangnesdotcom.blogspot.com/search/label/Tools'>Tools</a></li>
<li><a href='http://bangnesdotcom.blogspot.com/search/label/Utility'>Utility</a></li>
</ul>
</li></ul>

<ul><li><a href='#'>HANDPHONE</a>
<ul>
<li><a href='http://bangnesdotcom.blogspot.com/search/label/Aplikasi%20HP'>Aplikasi HP</a></li>
<li><a href='http://bangnesdotcom.blogspot.com/search/label/Game%20HP'>Game HP</a></li>
</ul>
</li></ul>

<ul><li><a href='http://bangnesdotcom.blogspot.com/search/label/Komputer'>KOMPUTER</a>
</li></ul>
</div>

kemudian jangan lupa di Save.
NB : silahkan ganti alamat URL nya dengan alamat URL punya kamu.


Salam Blogger..


Bangga Indonesia
Bangnes Updated at:
Get Free Updates:
*Please click on the confirmation link sent in your Spam folder of Email*

 
back to top