
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.
5. Masih di Editor HTML, cari kode </head>
.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}
6. Copy paste script di bawah ini tepat di atas kode tersebut
* 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.<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(){$(".trigger").click(function(){$(".panel").toggle("fast");$(this).toggleClass("active");return false;});});</script>
7. Cari kode </body>, lalu copy paste script di bawah ini.
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.<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>
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
17 Comments for "Membuat Guestbook Melayang Keren Dengan Jquery"
nice sob, ijin nyoba..
Mantef nih bang..moga full ya puasanya.
Good Sob.., Nice Shared...
Kapan" Mampir ke Blog ku Juga yah... :)
Salam Blogger
Keren sob.... :D
Silahkan di coba sob.....
ok, sobat......
siip sob....
salam blogger juga....
Thanks sob.....
thanks for share....
visit http://bocahdoko.co.cc/
sama-sama....
thanks ya atas kunjungannya....
wah thxs tutornya,nanti akan saya coba.
Silahkan di coba....
Semuga bermanfaat....
keren sob, terimakasih udah share
@Rizal uyeok, sama-sama sob... :).
banyak bener gan skripsinya.., -_-" punya syaya jg pake tapi gk sebanyak ini (dulu).
dukung blogku disini >> http://project29-blogku.blogspot.com
oke gan, langsung ke tkp..... :D
Silahkan sobat blogger berkomentar namun dilarang dengan keras menyisipkan link hidup maupun link mati !!!! demi kenyamanan kita bersama.
Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.