shad0w-share

Posted by : Unknown Senin, 13 Februari 2012

Pada Postingan Kali ini Saya Kembali Mengajak Sobat Semua Belajar Tutorial Blogger Yang Bisa Membuat Blog Sobat Semua Menjadi Keren Dan Semenarik Mungkin. Jujur Saja Saya Tidak Tau Apa Nama Tutorial ini Karna Saya Tidak Sengaja Berjumpa Dengan Suatu Website Dan Melihat Ada Menu Yang Sangat Menarik Dihalamannya. Ya Dengan Memaksakan Diri Sambil Memutar Kepala Saya Coba Menelusuri Source Pada Template nya Dan Beberapa Jam Kemudian Akhirnya Sepenuhnya Saya Dapat Menirukan Menu Tersebut Dan Saya Namakan Sensitive Top Menu With JQuery.

Nah Buat Sobat Yang Penasaran Dengan Sensitive Top Menu With JQuery Bisa Melihat Demo Yang Sudah Saya Sediakan.

Bila Sobat Tertarik Dengan Sensitive Top Menu With JQuery Tersebut, Silahkan Simak Tutorial Dibawah ini Dengan Cermat.

Silahkan Login Ke Akun Blogger Sobat.
Masuklah Pada Rancangan Lalu Pilih Edit HTML Dan Awas Jangan Lupa Centeng Expand Template Widget.
Setelah itu Carilah Kode ]]></b:skin> Pada Template Sobat Dan Salinlah Semua Kode Dibawah ini Tepat Diatas ]]></b:skin> Tadi.

/*sensitive top menu filiex*/
#ssmenu{
top: .4em;
left:2em;
width:230px;
position: fixed;
z-index: 200;
}
#hitop {
margin:0 ;
padding:0;
height:55px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp86DovlXCWbMkcfDZIksQVrjqGATxGMeM9sfCugT0TsBQgLREYTwrroXEC-Ilbyk4UVvMJ2zYUqnAZ4zHfTss6mvowLieSvOOryMQjR7BQXYgOjQKpd7Z5_vlVoZp6rF5QO2dblIej7kK/s400/filiex-abstract.png) no-repeat 0 0;
border-bottom:1px solid #000;
}
#cnmenu{
margin:0 ;
padding:0;
width:230px;
background:url(https://lh4.googleusercontent.com/-QDHA9dSHGyg/TuyZtBjjnFI/AAAAAAAAF30/sEpK9nCYyYk/s800/malubg.png) repeat-y;
}
.hidown{
margin:0;
padding:0;
height:78px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp86DovlXCWbMkcfDZIksQVrjqGATxGMeM9sfCugT0TsBQgLREYTwrroXEC-Ilbyk4UVvMJ2zYUqnAZ4zHfTss6mvowLieSvOOryMQjR7BQXYgOjQKpd7Z5_vlVoZp6rF5QO2dblIej7kK/s400/filiex-abstract.png) no-repeat 0 -80px;
display:block;
border-top:1px solid #302F2F;
}
span.bootter,span.upter{
width:27px;
height:26px;
display:block;
margin-left:103px;
margin-top:35px;
}
span.bootter{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp86DovlXCWbMkcfDZIksQVrjqGATxGMeM9sfCugT0TsBQgLREYTwrroXEC-Ilbyk4UVvMJ2zYUqnAZ4zHfTss6mvowLieSvOOryMQjR7BQXYgOjQKpd7Z5_vlVoZp6rF5QO2dblIej7kK/s400/filiex-abstract.png) no-repeat 0 -158px;
}
span.upter{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp86DovlXCWbMkcfDZIksQVrjqGATxGMeM9sfCugT0TsBQgLREYTwrroXEC-Ilbyk4UVvMJ2zYUqnAZ4zHfTss6mvowLieSvOOryMQjR7BQXYgOjQKpd7Z5_vlVoZp6rF5QO2dblIej7kK/s400/filiex-abstract.png) no-repeat -27px -158px;
}

#cnmenu ul, #cnmenu li{
list-style-type:none;
}
#cnmenu ul li {
margin: 0;
padding : 5px;
border-top:1px solid #302F2F;
border-bottom: 1px solid #000;
}
#cnmenu ul li a {
padding-left:5px;
text-decoration:none;
display:block;
}
#cnmenu ul li:hover {
background-color:#212121;
}
/* sensitive top menu filiex*/

Selanjutnya Carilah Kode </head> Pada Template Sobat, Lalu Salinlah Kode Berikut Dan Taruh Tepat Diatasnya Kode </head> Tadi.

Nah Bila Langkah Diatas Sudah Selesai, Sekarang Sobat Bisa Save Atau Simpan Tempalte Sobat.
Setelah itu Silahkan Sobat Masuk Pada Elemen Laman Kemudian Klik Tambahkan Gatget Lalu Pilih Yang HTML/Javascript.

Bila Jendela HTML/Javascript Sudah Terbuka, Silahkan Sobat Salin Semua Kode Dibawah ini Lalu Simpan.

<div id="ssmenu">
<div id="hitop"></div>
<div id="cnmenu">
<ul>
<li><a href="#">Filiex Boy</a></li>
<li><a href="#">Cinema Area</a></li>
<li><a href="#">Somia Story</a></li>

<li><a href="#">Full Software</a></li>
<li><a href="#">Full Mega Game</a></li>
<li><a href="#">Blogger Tutorial</a></li>
<li><a href="#">Komputer tutorial</a></li>
<li><a href="#">Blogger template</a></li>
<li><a href="#">Google Plus</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
</ul>
</div>
<div class="hidown"><span class="bootter"> </span></div>
</div>