Vertical Menu keren Untuk Blog Anda

Diposkan oleh Imron fhatoniLabel: Tips dan Trik Bloggerdi 06.43

kali ini saya akan share mengenai cara membuat menu veertical keren untuk blog menu vertical indah akan segera mewarnai tampilan blog anda hanya dengan beberapa tambahan kode CSS saja jika anda tertarik menggunakannya silahkan ikuti langkah langkah dibawah ini...

Masuk ke blog anda
pilih menu template/edit html
kemudian cari kode ]]></b:skin> gunakan ctrl + f  untuk memudahkan sobat
jika sudah ketemu letakan kode dibawah ini diatas tag ]]></b:skin>

<style type="text/css">

.urbangreymenu{
width: 190px; /*width of menu*/
}

.urbangreymenu .headerbar{
font: bold 13px Verdana;
color: white;
background: #606060 url(http://img407.imageshack.us/img407/6162/arrowstop.gif) no-repeat 8px 6px; /*last 2 values are the x and y coordinates of bullet image*/
margin-bottom: 0; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 7px 0 7px 31px; /*31px is left indentation of header text*/
}

.urbangreymenu ul{
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 0; /*bottom spacing between each UL and rest of content*/
}

.urbangreymenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}

.urbangreymenu ul li a{
font: normal 12px Arial;
color: black;
background: #E9E9E9;
display: block;
padding: 5px 0;
line-height: 17px;
padding-left: 8px; /*link text is indented 8px*/
text-decoration: none;
}

.urbangreymenu ul li a:visited{
color: black;
}

.urbangreymenu ul li a:hover{ /*hover state CSS*/
color: white;
background: black;
}

</style>

Setelah itu silahkan simpan template anda terlebih dahulu
kemudian kita beralih ke menu tata letak/add gadged
letakan semua kode dibawah ini pada box yang tersedia

<div class="urbangreymenu">

<h3 class="headerbar">EMP_Blog</h3>
<ul>
<li><a href="http://informasiblloger.blogspot.com">Tutorial Blogger</a></li>
<li><a href="http://informasiblloger.blogspot.com">Template</a></li>
<li><a href="http://informasiblloger.blogspot.com">Tips and Trik</a></li>
<li><a href="http://informasiblloger.blogspot.com">Widged</a></li>
<li><a href="http://informasiblloger.blogspot.com">Komentar</a></li>
<li><a href="http://informasiblloger.blogspot.com">Animation</a></li>
<li><a href="http://informasiblloger.blogspot.com">Download</a></li>
<li>
<ul>
<li><a href="http://informasiblloger.blogspot.com" >lainnya</a></li>
<li><a href="http://informasiblloger.blogspot.com">Kode Warna</a></li>
<li><a href="http://informasiblloger.blogspot.com">Tukar Link</a></li>
<li><a href="http://informasiblloger.blogspot.com">Back Link</a></li>
<li><a href="http://informasiblloger.blogspot.com">Sitemap</a></li>
<li><a href="http://informasiblloger.blogspot.com">Disclaimer</a></li> 
</ul>

</li></ul></div>

Catatan : silahkan sesuaikan kode tersebuat dengan nama dan URL tujuan menu masing masing
               kode berwarna merah merupakan nama menu dan yang berwarna kuning URL tujuan

Saya kira penjelasannya sudah cukup jelas silahkan dicoba semoga bermanfaat....

Penulis : Imron fhatoni Lokasi : NTB, SUMBAWA

Artikel Vertical Menu keren Untuk Blog Anda, ditulis oleh Imron fhatoni. Semoga artikel ini dapat menambah wawasan Kita. Silahkan tinggalkan jejak pada form Komentar untuk mempermudah Imron fhatoni berkunjung kembali ke blog sobat.(Wassalam)

Share on Google Plus

About Unknown