DASHBOARD HOME TUTORIAL TEMPAHAN MY DESIGN

Tutorial Tab Menu Cute Di tepi Background Blog

Assalamualaikum....
Dah lama tak buat tutorial...Hari nie nak share tutorial dengan korang tab menu yg cute nie....tgk gambar di bawah

Okey tutorialnya senang jer korang just copy coding di bawah..

<style>.satu {border-radius: 10px 10px 10px 10px;width:30px;
padding:80px;
border: 3px solid #ffffff;
height:46px;
margin-top:-34px;
margin-left:25px;
background: #ffc0cb;
color:black;
font-size:12px;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
}
#dua {
position:fixed;
border-top:2px solid #ffffff;
border-bottom:2px solid #ffffff;
width:40px;
top:50px;
height:23px;
padding:1px;
text-align:center;
left: 0px;
font-size:10pt;
font-family:verdana;
background-color:#7F4E52;
color:transparent;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
}
#dua:hover {
left:-px;
}
</style>
<center><div id="dua"><div class="satu"></div>
<div style="margin-top: -200px; margin-left:70px;">
<img src='http://i985.photobucket.com/albums/ae340/ameliaaaaaaaa/sitewelcome.png'/>
-
<style>
.float {
cursor: url(http://www.ilona.com.br/blog01263.gif),  progress;
background:#7f4e52;
border:3px solid white;
display:inline-block;
padding:6px;
width:80px;
margin:3px;
color:#fff;
font:8px short stack;
text-transform:uppercase;
letter-spacing:2PX;
text-align:center;
box-shadow:inset 0px 0px 0px #848484,inset 0px 0px 0px #848484;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
}

.float:hover {
color:#fff;cursor: url(http://media.tumblr.com/tumblr_m2umkqvNUT1qfamg6.gif),auto;box-shadow:inset 0px 14px 0px #ccc,inset 0px -14px 0px #ccc;}

</style>
<center>
<a href="http://hairuliza-anakku.blogspot.com/"><div class="float"><div id="left">Home</div></div>
<a href="https://www.blogger.com/home"><div class="float"><div id="left">Dashboard</div></div></a>
<a href="http://hairulizatutor.blogspot.com/2014/01/santai-tutorial.html"><div class="float"><div id="left">Tutorial</div></div>
</a><a href="http://hairuliza-anakku.blogspot.com/search/label/Tempahan"><div class="float"><div id="left">Tempahan</div></div></a>
</a></center></div></div></center>

Dah copy...Kalau dah Copy,paste jer kod tue dekat "html" kalau tak tahu ikut step di bawah...

Klik Layout,Add a Gadget pastu pilih

HTML/JavaScript

paste jer kod kat dalam tue...pastu save...senang jer....korang cuma tukar warna dan url yg ada jer...

TERIMA KASIH SUDI BACA DAN KOMEN

1 comment:

Kasih Salina said...

menarik juga tab menu tu..