Menu Slide Out ini posisinya pada Top blog Menu akan muncul bila cursor menyentuhnya artinnya gak usah pakai diklik , Contohnya?demonya Seperti menu diatas
Menurut saya menu slide out ini praktis dan simple. Hanya menggunakan Csss dan Image tentunya tidak terlalu berat.
Nah kalau gitu langsung aja ikuti langkah-langkahnya Sobat ;
* Login ke akun Blogger sobat
* Klik Rancangan pilh Edit HTML
* Centang Expand Template Widget Lalu cari kode ]]></b:skin>
* Lalu copy Kode CSS dibawah ini dan letakkan di atas kode ]]></b:skin>
Selamat mencoba semoga bermanfaat,,,,!!!!
Menurut saya menu slide out ini praktis dan simple. Hanya menggunakan Csss dan Image tentunya tidak terlalu berat.
Nah kalau gitu langsung aja ikuti langkah-langkahnya Sobat ;
* Login ke akun Blogger sobat
* Klik Rancangan pilh Edit HTML
* Centang Expand Template Widget Lalu cari kode ]]></b:skin>
* Lalu copy Kode CSS dibawah ini dan letakkan di atas kode ]]></b:skin>
/*MENU*/Selanjutnya letakkan kode HTML dibawah ini tepat dibawahnnya kode <body>
#navixed{position:fixed;left:0;padding:0px;top:0px;z-index:999999;width:100%;
}
#navixed ul{width:550px;position:relative;padding:0;margin:0 auto;
}
#navixed li {width: 103px;display:inline;margin:0;
}
#navixed li a{font:12px Verdana;color:#fff;display:block;float:left;margin: -80px 2px 0;width: 100px;height:auto;background-color:#666;background-repeat:no-repeat;background-position:50% 10px;background-size:90px 60px;border:2px solid #ddd;box-shadow:0 0 3px 1px #000;border-radius:0px 0px 10px 10px;text-decoration:none;padding:80px 0 10px 0;text-align:center;transition:all 0.5s;-webkit-transition:all 0.5s;
}
#navixed li a:hover{margin-top:-2px;background-color:#000;
}
#navixed .home a{background-image: url(http://3.bp.blogspot.com/-aXrFVyf4QsA/TZBebt8Z8jI/AAAAAAAAAgY/wHMKwyDH86g/s1600/home.png);
}
#navixed .cueros a{background-image: url(http://2.bp.blogspot.com/-84f0jEeeffc/TZBehJq90AI/AAAAAAAAAgs/w4UaF1VPgLs/s1600/search.png);
}
#navixed .blogspot a{background-image: url(http://i1206.photobucket.com/albums/bb455/binkbenk/CopyofAol128.png);
}
#navixed .dot a{background-image: url(http://i1206.photobucket.com/albums/bb455/binkbenk/Copyofgreen-bird-icontwitter-1.png);
}
#navixed .com a{background-image: url(http://i1206.photobucket.com/albums/bb455/binkbenk/Copyoffacebook-logo-2.png);
}
<div id="navixed">
<ul>
<li class="home"><a href="http://draft.blogger.com/http;//cuerosmasih.goblok.pool/">Home</a></li>
<li class="cueros"><a href="http://draft.blogger.com/http;//cuerosmasih.goblok.pool/">My Menu</a></li>
<li class="blogspot"><a href="http://draft.blogger.com/http;//cuerosmasih.goblok.pool/">About Me</a></li>
<li class="dot"><a href="http://draft.blogger.com/http;//cuerosmasih.goblok.pool/">My Twiter</a></li>
<li class="com"><a href="http://draft.blogger.com/http;//cuerosmasih.goblok.pool/">My Facebook</a></li>
</ul>
</div>
Selamat mencoba semoga bermanfaat,,,,!!!!
Posted On : 10 September 2011 Time : 17.45
