> > Cara Membuat Menu Horizontal

Cara Membuat Menu Horizontal

Posted on Minggu, 27 Januari 2013 by Unknown

Kali ini saya akan mempraktikkan cara membuat menu Horizontal pada Blog.Menu Horizontal ini sangat diperlukan agar pengunjung Blog dapat menemukan Artikel pada Blog Tersebut.
Tanpa Basa-Basi lagi saya mulai saja.

1. Pertama-tama login ke dashboard=>Template=>Edit HTML.Setelah itu centang Expand Widget Template,lalu cari kode berikut ]]></b:skin> lalu copy kode dibawah ini dan paste diatas ]]></b:skin :


Klik show untuk melihat
span style="background-color: white;">
ul.menu {list-style-type:none;width:auto;position:relative;display:block;height:33px;font-size:.6em;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix_any8HHo6y93BAJfSk5VeXlAStsszivPViIv-3f7wQG5-j7qrEAZpB3SurTFXd4fk-hJJ0VVXmjhdspwatBnMB1yt9mhgWgLZOJEZ8_3YDEGMNGz48zIejH86xoAL1yzZzVcomRfIaQ/s1600/bg.png") repeat-x top left;font-family:Verdana,Helvetica,Arial,sans-serif;border:1px solid #000;margin:0;padding:0;}ul.menu li {display:block;float:left;margin:0;padding:0;}ul.menu li a {float:left;color:#A79787;text-decoration:none;height:24px;padding:9px 15px 0;font-weight:normal;}ul.menu li a:hover,.current {color:#fff;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix_any8HHo6y93BAJfSk5VeXlAStsszivPViIv-3f7wQG5-j7qrEAZpB3SurTFXd4fk-hJJ0VVXmjhdspwatBnMB1yt9mhgWgLZOJEZ8_3YDEGMNGz48zIejH86xoAL1yzZzVcomRfIaQ/s1600/bg.png") repeat-x top left;text-decoration:none;}ul.menu .current a {color:#fff;font-weight:700;}/*Garis Merah*/ul.menu.red{background-color:#B11718;}ul.menu.red li a:hover, .menu.red li.current {background-color:#DE3330;}

Setelah itu klik save template.

2.Masuk ke Layout=>add gadget=>pilih HTML/Java Script,lalu copy kode dibawah ini :

Klik show untuk melihat
 <ul class="menu red">
<li class="current"><a href="http://eggijanitrablog.blogspot.com/" target="_self">Home</a></li>
<li><a href="http://eggijanitrablog.blogspot.com/search/label/Tutorial%20Blogger" target="_self">Tutorial Blog</a></li>
<li><a href="http://eggijanitrablog.blogspot.com/search/label/Cheat%20Facebook" target="_self">Cheat Game Facebook</a></li>
<li><a href="http://eggijanitrablog.blogspot.com/search/label/Software" target="_self">Software</a></li>
<li><a href="" target="_self"></a></li>
</ul>


Setelah itu klik Save.

Keterangan :
Silahkan ganti tulisan berwarna biru dengan kata - kata yang sobat inginkan, dan ganti juga tulisan berwarna merah dengan link url sobat.
Sekian dari saya.Jika ada pertanyaan silahkan comment dan jika suka pada artikel ini silahkan like.
Salam Blogger.


Category Article

One Response to “Eggi Janitra's Blog”

What's on Your Mind...

Jika ingin berkomentar,berkomentar lah yang sopan.Jika ada komentar yang menjelek-jelekan blog ini jangan salahkan jika kami menghapus komentar anda.

Diberdayakan oleh Blogger.