Read more: Cara Membuat READMORE Otomatis di Blogspot http://ojelhtc.blogspot.com/2011/12/cara-membuat-readmore-otomatis-di.html#ixzz1hdcbARLj Under Creative Commons License: Attribution Non-Commercial Share Alike Chit Chat: MEMBUAT MENU VERTIKAL CANTIK PADA BLOG

Sabtu, 17 Desember 2011

MEMBUAT MENU VERTIKAL CANTIK PADA BLOG

Kalau pada pengen tampilan menu vertikal yang cantik, kayak gini...

oke deh.... langsung aja !
masuk ke blog seperti biasa,
lalMasuk pada Tata Letak dan Edit HTML

Masukan kode di bawah ini 
<left><div id="menu"> 
<ul> 
<li><a class="current" href="http://just-silah.blogspot.com//">home</a></li> 
<li><a href="http://about.com">Sepintas Tentangku</a></li> 
<li><a href="http://twitter.com/#!/atsilahhenderni">Twitter</a></li>  
<li><a href="http://www.facebook.com/profile.php?id=100001026044333">Facebook</a></li>
</ul> 
</div> 
<style> 


/* -------------------------- 
AUTHOR : STYLED MENUS 
URL : http://www.styledmenus.com 
Copyrights by STYLED MENUS 
Widget From http://www.ardi33.web.id/ 
----------------------------*/ 
*{ 
margin:0; 
padding:0; 



#menu{ 
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMxFQQD1hsUUiE14GfNdITxyZRO_sZyv8DFxROazD_TBzkCmX3DAxUAqHRLFZTbeHVgJQ07uGUZDDbhpvaWNZTA54RpxxG6guXtM7r-tYxMzgfEMDwFIQqGOC7iKc-WEmxrNG_QLfuRqE/s1600/menu_026_bg.jpg) no-repeat; 
width:172px; 
height:191px; 
padding:15px; 

#menu ul{ 


list-style:none; 
padding:0 0 0 8px; 

#menu li{ 
list-style:none; 
display:block; 
padding:10px 0; 

#menu li a{ 


list-style:none; 
display:block; 
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh36UKXDRqF5_FSK6MT0y0JQceT_JtOHNnoKqjrIPXOAQL6E_sQl7mo_ciR1g3GcMFo4sMMNaL5gyRbReR5y3kcMxKCMUXcpQ2OL9Dg7QXB9XrQsG4xjgzLX_zWwymqwvJaLFnUcx4xIJ4/s1600/menu_026_b.gif) no-repeat left center; 
color:#ffe991; 
font-weight:bold; 
text-transform:uppercase; 
font-size:11px; 


line-height:1.2em; 
text-decoration:none; 
padding:0 5px 0 25px; 

#menu li a:hover{ 
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaws6-8WbFr4KK2sDAIc0j8yGEqglhv3_vwu80MJny20ASWfyCo9iaRWmNYSEcsI0T_MjLmSdi_TDnacmJahotKsmYYue0-DmaPFY9kpjHXRQPb6LmPmpXnMzr-FIp50zBEe8qCFKSNVs/s1600/menu_026_h.gif) no-repeat left center; 
color:#fff; 
text-decoration:none; 



#menu li .current{ 
list-style:none; 
display:block; 
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaws6-8WbFr4KK2sDAIc0j8yGEqglhv3_vwu80MJny20ASWfyCo9iaRWmNYSEcsI0T_MjLmSdi_TDnacmJahotKsmYYue0-DmaPFY9kpjHXRQPb6LmPmpXnMzr-FIp50zBEe8qCFKSNVs/s1600/menu_026_h.gif) no-repeat left center; 
color:#fff; 
font-weight:bold; 
text-transform:uppercase; 


font-size:11px; 
text-decoration:none; 
padding:0 5px 0 25px; 

#menu li a.current, #menu li a:hover.current{ 
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaws6-8WbFr4KK2sDAIc0j8yGEqglhv3_vwu80MJny20ASWfyCo9iaRWmNYSEcsI0T_MjLmSdi_TDnacmJahotKsmYYue0-DmaPFY9kpjHXRQPb6LmPmpXnMzr-FIp50zBEe8qCFKSNVs/s1600/menu_026_h.gif) no-repeat left center; 
color:#fff; 
text-decoration:none; 



</style></left>
Ganti nama Link dan Menu sesuai pilihan mu
SEMOGA SUKSES :)

Related Post:

Tidak ada komentar:

Posting Komentar

Hanya buat sharing aja....