AyoSantai: Menu ala VZine

Hallo sobat,kali ini saya mau share nih tutor yang buat menu di template blogazine.Menurut saya menu ini paling seringlah di gunakan oleh orang-orang blogazine,contohnya , blog jasri, Soroaqo, Eggi imcyber, dan lain lain.

CSSnya :

#inez {
  position:fixed;
  top:0px;
  left:0px;
  background:#333;
  border-bottom:2px solid #ccc;
  border-top:2px solid #ccc;
  font-family:'Electrolize',sans-serif;
  box-shadow:0 0 8px #ccc;
  width:100%;
}

#inez ul {
  padding:10px 0;
  padding-left:3%;
}

#inez li {
  display:inline;
}

#inez a:hover,#top-nav a.active {
  background-color:#422FD1;
  background-color:rgba(0,0,0,.05);
  -moz-box-shadow:inset 1px 1px 0 rgba(0,0,0,0.4),1px 1px 0 rgba(255,255,255,0.3);
  -webkit-box-shadow:inset 1px 1px 0 rgba(0,0,0,0.4),1px 1px 0 rgba(255,255,255,0.3);
  -o-box-shadow:inset 1px 1px 0 rgba(0,0,0,0.4),1px 1px 0 rgba(255,255,255,0.3);
  -ms-box-shadow:inset 1px 1px 0 rgba(0,0,0,0.4),1px 1px 0 rgba(255,255,255,0.3);
  box-shadow:inset 1px 1px 0 rgba(0,0,0,0.4),1px 1px 0 rgba(255,255,255,0.3);
  -moz-border-radius:17px;
  -webkit-border-radius:17px;
  -o-border-radius:17px;
  -ms-border-radius:17px;
  border-radius:17px;
}

#inez a.active {
  cursor:default;
}

#inez a {
  margin:0 10px 0 2px;
  font-size:14px;
  font-weight:bold;
  color:#ccc;
  padding:7px 13px 5px 15px;
  text-shadow:1px 0 0 #eee,-1px 0 0 #000,0 1px 0 #000,0 -1px 0 #000, 1px 1px 2px #000;
}

Silahkan taruh code di atas tepat di atas ]]></b:skin>

HTMLnya :

<b:if cond='data:blog.url == data:blog.homepageUrl'> 
<div id='inez'>
<ul class='lebar'>
<li><a href='/'><span style='color:#422FD1;'>&#10026;</span> Beranda</a></li>
<li><a href='/'><span style='color:#422FD1;'>&#9782;</span> Daftar Isi</a></li>
<li><a href='/'><span style='color:#422FD1;'>&#9993;</span> Kontak</a></li>
<li><a href='/'><span style='color:#422FD1;'>&#9785;</span> Tentang</a></li>
<li><a href='http://www.blogger.com/follow-blog.g?blogID=4199888640910560734' rel='nofollow' target='_blank'><span style='color:#422FD1;'>&#10004;</span> Ikuti</a></li>  
</ul>
</div>
</b:if> javascript:void(0)

Silahkan taruh code di atas,tepat di bawah <body>*Kami tidak menggunakan cara licik ( CTRL+U ) untuk mendapatkan code di atas,kami menggunakan template blogazine yang kami punya !!. Sumber : VegazZine

AyoSantai

Rabu, 20 Juni 2012

Menu ala VZine

6 komentar: