Membuat Guestbook Melayang Keren Dengan Jquery

Share :

Tweet

Hallo sobat..... pada postingan sebelumnya saya sudah membahas tentang cara membuat tab accordion, hari ini saya akan share tentang Membuat Guestbook Melayang Keren Dengan Jquery. Jika sobat berminat Membuat Guestbook Melayang Keren Dengan Jquery bisa mengikuti langkah-langkah di bawah ini :


1. Login ke akun blogger sobat.
2. Klik Rancangan >> Edit template.
3. Cari kode </b:skin>
4. Copy paste script di bawah ini tepat di atas kode tersebut.

.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;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}

5. Masih di Editor HTML, cari kode </head>
6. Copy paste script di bawah ini tepat di atas kode tersebut

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

<script type='text/javascript'>

$(document).ready(function(){

$(&quot;.trigger&quot;).click(function(){

$(&quot;.panel&quot;).toggle(&quot;fast&quot;);

$(this).toggleClass(&quot;active&quot;);

return false;

});

});

</script>

* Penting!!!!Kode yang saya garis bawahi itu adalah kode jquery. jika di editor HTML sobat sudah terdapat kode jquery maka tinggalkan kode yang saya garis bawahi.

7. Cari kode </body>, lalu copy paste script di bawah ini.

<div class='panel'>

<h3 style='text-align:center'>Selamat Datang di Aspar69 Blog <br/> Tinggalkan Jejak Sobat di Sini....</h3>

KODE CBOX SOBAT

</div>

<a class='trigger' href=''>Guest Book</a>

8. Ganti kode yang saya beri label MERAH dengan  kode cbox sobat. ganti juga kode yang saya beri label HIJAU dengan sesuai dengan keinginan sobat.

9. Yang terakhir klik Simpan Template


Mungkin itu saja yang bisa saya sampaikan di dalam postingan Membuat Guestbook Melayang Keren Dengan Jquery ini, jika ada yang belum jelas bisa ditanyakan di komentar. Terimakasih...... :)

Tag : Blogging