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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO1KLbxrS5Zid9gR0aazSzm0GUw60Yj_i8D4Bf-kfYCafp15Tvu-kXpMSODNh67Ti5L9qVrdmaLXdvNrK9vCqdzTCinj3huGtBdHPg2-oXwcIE8eRf6kqMk8qvMm7UEMMI2ab74aopDLg/'/></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>
#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.
Tidak ada komentar:
Posting Komentar