0 Cara Memperbagus Blog

Chyberart - 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/AVvXsEiXsj0uOhDsnQkILtkoN17zFI0rn81zHDNonJrPxmsGiFhp-6W8JgEwkZujX-WxWcA2-8O8zo-1gaWNnjwYihmsV7e54yzDUWgET938ryKYjXmR0AVvGCRaUFYR14hHwyIsuDWusQi7Jd2s/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/AVvXsEiXsj0uOhDsnQkILtkoN17zFI0rn81zHDNonJrPxmsGiFhp-6W8JgEwkZujX-WxWcA2-8O8zo-1gaWNnjwYihmsV7e54yzDUWgET938ryKYjXmR0AVvGCRaUFYR14hHwyIsuDWusQi7Jd2s/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/AVvXsEiXsj0uOhDsnQkILtkoN17zFI0rn81zHDNonJrPxmsGiFhp-6W8JgEwkZujX-WxWcA2-8O8zo-1gaWNnjwYihmsV7e54yzDUWgET938ryKYjXmR0AVvGCRaUFYR14hHwyIsuDWusQi7Jd2s/s400/filiex-abstract.png) no-repeat 0 -158px;
}
span.upter{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXsj0uOhDsnQkILtkoN17zFI0rn81zHDNonJrPxmsGiFhp-6W8JgEwkZujX-WxWcA2-8O8zo-1gaWNnjwYihmsV7e54yzDUWgET938ryKYjXmR0AVvGCRaUFYR14hHwyIsuDWusQi7Jd2s/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.

<script type='text/javascript'>//<![CDATA[

$(document).ready(function () {

$('#cnmenu').hide();
$(window).load(function () {
$('#cnmenu').slideDown(1500, function () {
$(this).slideUp(200);
});
});
$('#ssmenu').mouseenter(function () {
$('#cnmenu').slideDown(1000, function () {
$('.hidown span').removeClass('bootter').addClass('upter');
});
});
$('#ssmenu').mouseleave(function () {
$('#cnmenu').slideUp(200, function () {
$('.hidown span').removeClass('upter').addClass('bootter');
});
});

});
//]]>

</script>

• 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">&nbsp;</span></div>
</div>

• Terakhir Lihat Hasilnya.
• Selesai.

Anda sedang membaca artikel tentang Cara Memperbagus Blog dan anda bisa menemukan artikel Cara Memperbagus Blog ini dengan url http://team-cyberart.blogspot.com/2012/03/cara-memperbagus-blog.html,anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Cara Memperbagus Blog ini sangat bermanfaat bagi teman-teman anda,namun jangan lupa untuk meletakkan link Cara Memperbagus Blog sumbernya.