.

Tuesday, December 20, 2016

Navigation Bar Style

Hasil gambar untuk harry potter tumblr gif
Hai. Tutorial ini di req oleh Zahra Alodia. Yuk, cekidot
  • Blogger > Tata Letak > Add Gadget > HTML/JavaScript
  • Copy kode di bawah ini
<style>
.shafia{
width:60px;
padding:15px;
margin-top:15px;
box-shadow:2px 2px 4px #FEDFE5;
background: #fff;
font:11px Century Gothic;
text-align:center;
Text-decoration:none;
color:#aaa;
text-transform:uppercase;
display:block;
-webkit-transition:All 0.5s ease;
-moz-transition:All 0.5s ease;
-o-transition:All 0.5s ease;
border-left:1px dashed green;
-webkit-border-top-right-radius: 333px;
-webkit-border-bottom-right-radius: 333px;
-moz-border-radius-topright: 333px;
-moz-border-radius-bottomright: 333px;
border-top-right-radius: 333px;
border-bottom-right-radius: 333px;
}

.shafia:hover{
width:66px;
border: 1px solid mistyrose;
border-radius: 222px;
border-radius: 222px;
background: transparent;
}

.shafia1{
width:60px;
padding:15px;
margin-top:15px;
box-shadow:2px 2px 4px #FEDFE5;
background:#fff;
font:11px Short Stack;
text-align:center;
Text-decoration:none;
color:#fff;
text-transform:uppercase;
display:block;
-webkit-transition:All 0.2s ease;
-moz-transition:All 0.2s ease;
-o-transition:All 0.2s ease;
border :1px solid mistyrose;
-webkit-border-top-right-radius: 333px;
-webkit-border-bottom-right-radius: 333px;
-moz-border-radius-topright: 333px;
-moz-border-radius-bottomright: 333px;
border-top-right-radius: 333px;
border-bottom-right-radius: 333px;
}

.shafia1:hover{
width:66px;
background: transparent;
border-left:10px solid #FEDFE5;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-right:1px dashed #FEDFE5;
border-top:1px dashed #FEDFE5;
border-bottom:1px dashed #FEDFE5;
}</style>
<div style="position:fixed; top:100px;left:0px;width:100px; color:#aaa;">
<a class="shafia" href="URL BLOG"title='Home'>Home</a>
<a class="shafia1" href="URL ABOUT"title='About'>Owner</a>
<a class="shafia" href="URL STUFFS"title='Stuffs'>Stuffs</a><a class="shafia1" href="URL LINKIES"title='Friends'>Linkies</a>
<a class="shafia1" href="http://www.blogger.com/follow-blog.g?blogID=BLOG ID KAMU"title='Click'><b>FOLLOW</b></a></div>


  • Lalu edit-edit dulu yang kuberi warna merah menyala.
  • Klik save template.

2 comments: