HORIZONTAL SIDE MENU
Horizontal Side Menu adalah widget navigasi yang terletak di sisi template. Widget ini sama fungsinya dengan menu navigasi lainnya, namun bentuk dan tampilannya cantik dan menarik untuk dipasang diblog anda. Widget ini juga menggunakan CSS3 disertai efek hover untuk menambah gaya dan tingkat atraksi, sehingga membuat tampilannya berbeda dengan lainnya. Baiklah, sekarang mari kita bahas cara pasang horizontal side menu.
Ikuti Langkah-langkah di bawah berikut ini :
1. Login ke blog kalian
2. Klik Rancangan
3. Klik Edit HTML
4. Masukkan kode di bawah ini di atas kode ]]></b:skin>
#hor{list-style:none; padding:0; margin:0}
#hor li{float:left; padding:5px}
#hor a{display:block; height:12px; text-indent:-999em}
#hor a.home{width:46px; background:url(vHome.gif) no-repeat 0 0}
#hor a.download{width:94px; background:url(vDownload.gif) no-repeat 0 0}
#hor a.contact{width:74px; background:url(vContact.gif) no-repeat 0 0}
#ver{list-style:none; padding:0; margin:0}
#ver li{padding:2px}
#ver li a{display:block; height:12px; text-indent:-999em}
#ver a.home{width:47px; background:url(hHome.gif) no-repeat 0 0}
#ver a.download{width:95px; background:url(hDownload.gif) no-repeat 0 0}
#ver a.contact{width:74px; background:url(hContact.gif) no-repeat 0 0}
.clear{clear:both}
*{margin:0; padding:0}
#navigationMenu body{font-size:14px; color:#666; background:#111 no-repeat; background-image:-moz-radial-gradient(center -100px 45deg,circle farthest-corner,#444 150px,#111 300px); background-image:-webkit-gradient(radial,50% 0,150,50% 0,300,from(#444),to(#111)); font-family:Arial,Helvetica,sans-serif}
#navigationMenu li{list-style:none; height:39px; padding:2px; width:40px}
#navigationMenu span{width:0; left:38px; padding:0; position:absolute; overflow:hidden; font-family:'Myriad Pro',Arial,Helvetica,sans-serif; font-size:18px; font-weight:bold; letter-spacing:0.6px; white-space:nowrap; line-height:39px; -webkit-transition:0.25s; -moz-transition:0.25s; transition:0.25s}
#navigationMenu a{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9nJxnODfvIn2qZ4lUn7x5j4tzXD8QpvhyKAwZToEMp8qC-Lf031GC5dGbUcetYyqy0Lvmq2bKlDJLUwClFOK8tEevb_Adl5h3fOJy8M_E1KXeXenhrVfqLV6H84mZefxnkmuQcrqzcEk/s1600/navigation.jpg') no-repeat; height:39px; width:38px; display:block; position:relative}
#navigationMenu a:hover span{width:auto; padding:0 20px; overflow:visible}
#navigationMenu a:hover{text-decoration:none; -moz-box-shadow:0 0 5px #9ddff5; -webkit-box-shadow:0 0 5px #9ddff5; box-shadow:0 0 5px #9ddff5}
#navigationMenu .home{background-position:0 0}
#navigationMenu .home:hover{background-position:0 -39px}
#navigationMenu .home span{background-color:#7da315; color:#3d4f0c; text-shadow:1px 1px 0 #99bf31}
#navigationMenu .about{background-position:-38px 0}
#navigationMenu .about:hover{background-position:-38px -39px}
#navigationMenu .about span{background-color:#1e8bb4; color:#223a44; text-shadow:1px 1px 0 #44a8d0}
#navigationMenu .services{background-position:-76px 0}
#navigationMenu .services:hover{background-position:-76px -39px}
#navigationMenu .services span{background-color:#c86c1f; color:#5a3517; text-shadow:1px 1px 0 #d28344}
#navigationMenu .portfolio{background-position:-114px 0}
#navigationMenu .portfolio:hover{background-position:-114px -39px}
#navigationMenu .portfolio span{background-color:#d0a525; color:#604e18; text-shadow:1px 1px 0 #d8b54b}
#navigationMenu .contact{background-position:-152px 0}
#navigationMenu .contact:hover{background-position:-152px -39px}
#navigationMenu .contact span{background-color:#af1e83; color:#460f35; text-shadow:1px 1px 0 #d244a6}
Selanjutnya klik Simpan Template
> Klik Lagi Rancangan
> Klik Tambah Gadget
> Pilih HTML/ Javascript
Masukkan kode berikut di HTML/Javascript
<div style='position: fixed; top: 40%; left: 0%;'/>
<ul id="navigationMenu">
<li>
<a class="Home" href="#">
<span>Beranda</span>
</a>
</li>
<li>
<a class="about" href="#" target="_blank">
<span>About</span>
</a>
</li>
<li>
<a class="services" href="#" target="_blank">
<span>Edit Template</span>
</a>
</li>
<li>
<a class="daftar isi" href="#" target"_blank">
<span>Daftar Isi</span>
</a>
</li>
<li>
<a class="contact" href="#" target="_blank">
<span>Contact Me</span>
</a>
</li>
</ul>
</div><a href="#" target="_blank"><small>by blogonol | blogger tutorial</small></a>
Save template dan lihat hasilnya.
Semoga bermanfaat dan Selamat mencoba
Keterangan : Code yang di beri warna Merah ( # ) Edit sesuia keinginan kalian masing-masing
>
Show
0 Comments
prev
next