Membuat Panel Menu Slide Dengan jQuery

Tweet

Tampilan blog sangat dibutuhkan untuk menarik perhatian para pengunjung agar betah dan kembali pada blog kita. Sebab dengan makin banyaknya pengunjung pada blog kita akan semakin meningkatnya trafickrank yang diperoleh oleh blog.

Bahkan banyak kalangan blogger selalu SEO dalam blog. Untuk itulah, mari kita tingkatkan SEO pada blog kita dengan mempercantik tampilan blog. Salah satu yang bisa diterapkan pada blog anda adalah membuat info yang buka/tutup (show/hidden). Untuk lebih jelasnya silakan liat Demo Disini.

Jika tertarik ikuti langkah tutorial ini :

Langkah Pertama

• Masuk  Blogger;
• Klik tombol Rancangan dan pilih Edit HTML;
• Cari kode ]]></b:skin>
• Dan copy paste kode dibawah sebelum kode diatas

.panel{position:fixed;top:20px;left:0;background:#000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;border:1px solid #444;width:330px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:30px 30px 30px 100px}
.panel p{color:#ccc;margin:0 0 15px;padding:0}
.panel a,.panel a:visited{color:#9FC54E;text-decoration:none;border-bottom:1px solid #9FC54E;margin:0;padding:0}
.panel a:hover,.panel a:visited:hover{color:#fff;text-decoration:none;border-bottom:1px solid #fff;margin:0;padding:0}
a.trigger{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#333 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.trigger:hover{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#222 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.active.trigger{background:#222 url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDvxbreOI/AAAAAAAAD2M/Cz3Q2r5pdTM/d/minus.png) 85% 55% no-repeat}
.columns{clear:both;width:330px;line-height:22px;padding:0 0 20px}
.colleft{float:left;width:130px;line-height:22px}
.colright{float:right;width:130px;line-height:22px}
a:focus{outline:none}
.panel img{background-color:#262626;border:1px solid #333;float:right;margin:3px 3px 6px 8px;padding:5px}
.panel h3{border-bottom:1px solid silver;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#FFF;font-size:12px;font-weight:700}
.columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}

• Sekarang copy paste kode berikut diatas </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js'type='text/javascript'/>

• Simpan Template.

Langkah yang kedua

• Pilih Rancangan;
• Klik tab Tambahkan Elemen (Gadget)
• Pilih HTML/JavaScript;
• Copy paste kode dibawah kedalam HTML tersebut;
• Lalu Simpan, selesai.

<div class='panel'>
<h3>Selamat Datang</h3>
<p style='text-align:justify'>Selamat datang di Zona Online. Semoga blog ini bermanfaat bagi anda semua <a href='http://kang-fathur.blogspot.com/' title='Zona Online'> Selengkapnya tentang Zona Online </a></p>

<h3>Sepintas Tentang Portal Blog</h3>
<img height='73px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmS7Su-tgXSr7uZ835R1G3pfUkJrnW07NvXfwAGmdf8kCkOeXcq-Bc0UHIU7c74UssDrbEXgUgfOKJMp0UQ2asx451Tyxq6Q5K619HeNv8h4gSSVcgFGnbHeOBk8O65WiraTYCtsVpfppP/s1600/kang%252Bfathor.png' width='73px'/>
<p>Kang Fathur hanya seorang pria yang berkehidupan di desa dan kota terpencil, dan kehidupan kesahariaannya mengabdi pada rakyat demi terciptanya masyarakat yang mandiri menuju kehidupan yang madani. </p>

<div style='clear:both;'/>

<div class='columns'>
<div class='colleft'>
<h3>Menu</h3>
<ul>
<li><a href='http://kang-fathur.blogspot.com/' title='home'>Home</a></li>
<li><a href='http://kang-fathur.blogspot.com/' title='about'>About</a></li>
<li><a href='http://kang-fathur.blogspot.com/' title='contact'>Contact</a></li>
<li><a href='http://kang-fathur.blogspot.com/' title='blog'>Blog</a></li>
</ul>
</div>

<div class='colright'>
<h3>Bookmark</h3>
<ul>
<li><a href='http://facebook.com/onk009' title='Facebook'>Facebook</a></li>
<li><a href='http://www.blogger.com/profile/1901876173851946743' title='About Me'>About Me</a></li>
<li><a href='mailto:fathor009@gmail.com' title='Gmail'>Gmail</a></li>
</ul>
</div>
</div>
<div style='clear:both;'/>
</div>
<a class='trigger' href='#'>Info</a>

Keterangan :

Ganti huruf yang berwarna biru
Jika blog anda sudah memasang kode<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
maka ganti kode tersebut denagn kode dibawah ini:

<script type="text/javascript">
$(document).ready(function(){
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>

Semoga berhasil....

Jika Anda menikmati posting ini dan ingin dihubungi setiap kali posting baru diterbitkan, maka pastikan Anda subscribe to our regular Email Updates!

Please...!!! Bookmark artikel ini melalui layanan Bookmarking favorit Anda: