Membuat Buku Tamu Bergaya Absolute Vertical Sliding Panel

http://2.bp.blogspot.com/_JX5QbXApsNQ/TNerESWj4sI/AAAAAAAABsg/s2PMrvPf1c4/s320/SlidingpanelFixed.jpg
Salam hangat sobat blogger , kali ini Dhecun Blog akan mengajak anda untuk membuat Absolute Vertical Sliding Panel.
Apa itu Absolute Vertical Sliding Panel..?
Lihat gambar diatas dan perhatikan panel kecil bertuliskan Chatbox di kiri atas.
Lalu apa maksud dari Absolute disini...?
Saya beri nama Absolute karena Sliding tersebut hanya akan tetap diam di kiri atas dan tidak akan ikut berpindah jika anda melakukan scroll page blog anda.
Dan ketika tombol Chatbox tersebut di klik maka tampilan gambarnya seperti dibawah ini :

Jika anda tertarik untuk membuatnya , silahkan ikuti langkah berikut ini :

1. Login ke akun Blogger anda
2. Pilih Template
3. Pilih Edit HTML
4. Centang Expand Widget Template
5. Tekan tombol Ctrl+F
6. Cari kode </head>
7. Masukkan script dibawah ini tepat diatas </head>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>
8. Kemudian cari kode ]]></b:skin>
9. Masukkan script dibawah ini tepat diatas ]]></b:skin>
.panel{position:absolute; top:50px; left:0; display:none; background:#000; border:1px solid #111; -moz-border-radius-topright:20px; -webkit-border-top-right-radius:20px; -moz-border-radius-bottomright:20px; -webkit-border-bottom-right-radius:20px; width:330px; height:auto; padding:30px 30px 30px 130px; filter:alpha(opacity=85); opacity:.85} .panel p{margin:0 0 15px 0; padding:0; color:#ccc} .panel a, .panel a:visited{margin:0; padding:0; color:#9FC54E; text-decoration:none; border-bottom:1px solid #9FC54E} .panel a:hover, .panel a:visited:hover{margin:0; padding:0; color:#fff; text-decoration:none; border-bottom:1px solid #fff} a.trigger{position:absolute; text-decoration:none; top:80px; left:0; font-size:16px; letter-spacing:-1px; font-family:verdana,helvetica,arial,sans-serif; color:#fff; padding:20px 40px 20px 15px; font-weight:700; background:#333 url(images/plus.png) 85% 55% no-repeat; border:1px solid #444; -moz-border-radius-topright:20px; -webkit-border-top-right-radius:20px; -moz-border-radius-bottomright:20px; -webkit-border-bottom-right-radius:20px; -moz-border-radius-bottomleft:0px; -webkit-border-bottom-left-radius:0px; display:block} a.trigger:hover{position:absolute; text-decoration:none; top:80px; left:0; font-size:16px; letter-spacing:-1px; font-family:verdana,helvetica,arial,sans-serif; color:#fff; padding:20px 40px 20px 20px; font-weight:700; background:#222 url(http://i785.photobucket.com/albums/yy131/djnand/plusbutton.png) 85% 55% no-repeat; border:1px solid #444; -moz-border-radius-topright:20px; -webkit-border-top-right-radius:20px; -moz-border-radius-bottomright:20px; -webkit-border-bottom-right-radius:20px; -moz-border-radius-bottomleft:0px; -webkit-border-bottom-left-radius:0px; display:block} a.active.trigger{background:#222 url(http://i785.photobucket.com/albums/yy131/djnand/minusbutton.png) 85% 55% no-repeat} .columns{clear:both; width:330px; padding:0 0 20px 0; line-height:22px} .colleft{float:left; width:130px; line-height:22px} .colright{float:right; width:130px; line-height:22px} ul{padding:0; margin:0; list-style-type:none} ul li{padding:0; margin:0; list-style-type:none}
10. Klik simpan template
11. Kemudian Pilih Tata Letak >> Tambah Gadget >> HTML/JavaScript
12. Masukkan script dibawah ini
<div class="panel">

Simpan Script Chatbox Anda Disini / Bisa Diganti Dengan Tulisan Dan Widget Lain

</div>
<a class="trigger" href="">Chatbox</a>
<div style="text-align: right;">
<a href="http://dhecun.blogspot.com/2012/11/membuat-buku-tamu-bergaya-absolute.html" target="_blank"><span style="font-size: xx-small;">[ Get Widget ]</span></a></div></div></div>
13. Klik simpan


Lihat hasilnya , kini buku tamu atau chatbox di blog anda lebih keren dan berbeda dengan blog punya milik orang lain...!

Catatan :
1. Ganti tulisan yang berwarna merah dengan script chatbox atau tulisan atau widget sesuai keinginan anda.
2. Anda bisa mengganti tulisan yang berwarna biru sesuai keinginan anda.

Semoga bermanfaat...!!!

Subscribe

2 Komentar Blogger
Komentar Facebook

2 komentar:

February 23, 2013 at 6:34 PM

maaf yah dik,, kayaknya sript dan css di atas sama persis di markolis template... salam yah teater88

February 24, 2013 at 12:40 PM

microsof office@ oh begitu yaaaaa...saya juga lupa nyantumin sumbernya dari mana...
tapi tidak apa2 lah yang penting tujuan saya nge share utk orang banyak bukan utk nyari keuntungan...!!!
Thank's...

Pasang Widget Otomatis



Submit Web / Blog Ke 20+ Search Engines

Cek Ukuran dan Kecepatan Loading Blog / Web

Masukkan URL blog max 10 URL
( Tools by Dhecun Blog : Get Widget )

Update Artikel Dhecun Blog

Berlangganan Artikel Gratis Lewat Email

Berlangganan artikel via email.

Dapatkan update artikel terbaru dari Dhecun Blog

yang akan dikirim ke email anda secara gratis...!

Jangan lupa buka Email anda untuk verifikasi.
RSS feeds















Space Iklan

Pasang Iklan

Pasang Iklan

Pasang Iklan

Pasang Iklan

Pasang Iklan

Kategori pasang iklan

Rp.10.000 per bulan
Rp.100.000 per tahun
Judul iklan
Deskripsi iklan
Gambar (220x150)

Iklan Sponsor 1

About Me

Profil Google+
My Facebook
Kirim SMS Gratis
Download Gratis
Print

Contact

Contact on Email
Contact on Facebook

Rekomendasi

Follow

RSS feeds

Widget Populer

Widget Zoom Detail Gambar

Widget Share Button Melayang

Share

Tukar Link

Traffic

Semua Artikel




Tampilkan semua artikel

10 Artikel Terbaru






Masukkan email anda

untuk berlangganan artikel




Dhecun Blog

Followers

Google+ Followers

Google+ Badge