Wednesday, March 14, 2012

Pasang Show Hide Widget With Button Customizable Di Blog.

Bagaimana cara membuat Show hide Widget dengan tombol klik yang dapat kita sesuaikan sendiri tempat dan icon nya? Terus gimana tuh bentuk nya? Untuk melihat Demo nya, silah klik tombol di kiri samping blog ini, atau Klik Disini.

Seperti biasa, saya mengandalkan Javascript untuk membuat ini, juga CSS untuk mengatur tata letaknya. Berikut Tutorialnya :

1. Login ke Blogger sobat.
2. Masuk ke menu "Rancangan", pilih tab "Edit Html"
3. Cari tag <body> Letakkan Code berikut di bawahnya :

<a href='javascript:showHideFL()' style='display:scroll;position: fixed; top:100px;left:0px;' title='KLIK DISINI!'><img src='http://lh5.ggpht.com/_MXyM1BUWkZk/TURQhhB-blI/AAAAAAAAArw/r7vcqZQ-zFc/logo.png'/></a>

dan Save.

4. Pilih tab "Elemen Laman", Tambhakan Gadget, dan pilih "Html/Javascript".
5. Copy paste code berikut ( silahkan edit sendiri sesuai selera Sobat, mohon jangan hapus link saya ) :

<style type="text/css">
#fl{
position:fixed;
right:40px;
z-index:+1000;
}
* html #fl{position:relative;}

.fltab{
height:32px;
width:270px;
float:top;
cursor:pointer;
background:url('') no-repeat;
}
.flcontent{
float:right;
border:2px solid #676767;
background:url()#000000 repeat-x bottom center scroll;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideFL(){
var fl = document.getElementById("fl");
var w = fl.offsetWidth;
fl.opened ? moveFL(0, -100-w) : moveFL(20-w, 0);
fl.opened = !fl.opened;
}
function moveFL(x0, xf){
var fl = document.getElementById("fl");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
fl.style.bottom = x.toString() + "px";
if(x0!=xf){setTimeout("moveFL("+x+", "+xf+")", 10);}
}
</script>
<div id="fl">
<div class="fltab" onclick="showHideFL()"> </div>
<div class="flcontent">
<font color="white">

<iframe align="left" frameborder="0" src="https://8397469931666359649-a-1802744773732722657-s-sites.googlegroups.com/site/kangandrysite/file-cabinet/andry_yunan_system.swf?attachauth=ANoY7cpeXd7YQu1EqL19JHZQQFKE8Yw_gHXS1QcX_jQV2IQw6nXYPaLUbwBgDx4yN_MObo0nvMSrybRsEzhnWSgumq4vsxf1MWA5G-b0f-om-ZWiWuiUgBstG4l3PZyS7MOeh-yQmMecpAbDbRNgVh_Nswl3lUFbwYK8SArJbVfzdycpUTqzKZ7eby6YvVF3F-X3C5OsjWyxpliVCUyk449R5g5urQw3d8iTdKOHtxtHoKWKbbhWGk4%3D&attredirects=0%2F" width="900" height="700" scrolling="YES"> </iframe>

</font>
<div style="text-align: right;">

<a href="javascript:showHideFL()">
[Tutup]
</a></div>
<font size="2"><a href="http://blog-thinker.blogspot.com/"><div style="color: #444444;">
<span >Blog-Thinker Admin</span></div></a></font>
</div>
</div>
<script type="text/javascript">
var fl = document.getElementById("fl");
fl.style.bottom = (-200-fl.offsetWidth).toString() + "px";
</script>


SELESAI. Silahkan modifikasi sendiri sesuka Sobat.

Bagi sobat yang masih bingung gimana mengcustumizenya agar sesuai dengan template blog sobat, silahkan tinggalkan pertanyaan di Komentar, insyaallah saya bantu.

4 comments:

sheena said...

Hi, cool post. I have been thinking about this topic,so thanks for sharing. I will probably be subscribing to your blog. Keep up great writing!!!
2008 Mazda 5 Series AC Compressor

Cholis Setyawan said...

Gan,, klo buat gadget yang disamping kiri tuh gmn ya ?

Andry Yunan said...

@Cholis Setyawan Nah tuh tutor nya ada diatas...

100 DOCUMENT TRIK GRATIS BUAT MESIN UANG GRATIS 100% FREE said...

post and your article is very interesting for me become more knowledge, I hope you keep your blog so I can visit again to see your blog posts and articles later, thanks for the info

Post a Comment

:) :(;):D;;-):-/:x:P:-*=((:-OX(:7B-):-S#:-S7:):((:)):|/:)=))O:-):-B=;I-)8-|L-):-a:-$[-(:O)8-}2:-P(:|=P~:-?#-o=D7:-SS@-):^o:-w7:P2):):-c:)]~X(:-h:-t8-7X_X:!!m/:-q:-bd^#(^Blog Thinker