Buku Tamu Bergaya Absolute Vertical Sliding Panel

Posted by adOeL Maret - 19 - undefined

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyUb2JUoP3iBJSk5wy6ciVDixrCWDmVpX5l54rUkPJ0bpJVYD592rMwFN7jBXk1KMMaeHpQd2vdyJpwc0uVMQQzalciENYiG6nOoKUePNZD9ltHehw-NobSk3E9n5rZnky5GREvjDUAMNK/s320/SlidingpanelFixed.jpg

Kali ini saya akan mengajak anda untuk membuat Absolute Vertical Sliding Panel. Apa itu Absolute Vertical Sliding panel? lihat gambar diatas dan perhatikan panel kecil bertuliskan Chatbox dikiri atas. Lalu apa maksud dari Absolute disini? saya beri nama Absolute karena Sliding tersebut hanya akan tetap diam dikiri atas dan tidak akan ikut berpindah jika anda melakukan scroll page blog anda.


Lantas bagaimana cara membuatnya?  ikuti panduan dibawah ini:

1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode seperti ini </head>
5. Lalu taruh Script Javascript 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>

6. Lalu cari kode ]]></b:skin>, dan letakkan kode CSS dibawah ini tepat diatas kode ]]></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}

7. Jika sudah, anda bisa meletakkan HTML dibawah ini pada Add Widget di Elemen Laman atau anda bisa meletakkannya diatas kode </body> di edit HTML:


<div class="panel">

Letakkan Script ChatBox Anda/ Bisa Diganti Dengan Tulisan Dan Widget Lain

</div>
<a class="trigger" href="">ChatBox</a>

8. Save Template anda...



Lihat juga artikel lainnya :)

Utta Melanikz

Post Author : Utta 'The Shelter'

Gue hanyalah seorang blogger pemula yang ingin belajar dan berbagi, Semua artikel bersumber dari pengalaman yang saya dapatkan dari dunia internet.Jika anda senang dengan Artikel ini, silahkan berlangganan gratis Via Email atau Feed Rss

Bagaimana Pendapat Anda??

Segera Laporkan apabila sobat menemukan Broken link (link rusak) atau ingin request dan bertanya, dengan meninggalkan pesan di bawah ini,dan Blog ini sudah DoFollow, namun tetap jaga kesopanan dengan tidak melakukan komentar spam yach.