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/AVvXsEhXPSdgWeNoyjXpdgR7BWaZ00ur4hiSca59-rJKlSdkrZhyphenhyphenkeHk-YjBbVSRyWz3MRQlE-levuGYynasnwBP0FMoRiSBnpnwHQM8uVq2ozxYU_oQA3O2DqPXqGyZbiglY0IE9Y7Vn0sDPvE/'/></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.
:)
:(
;)
:D
;;-)
:-/
:x
:P
:-*
=((
:-O
X(
:7
B-)
:-S
#:-S
7:)
:((
:))
:|
/:)
=))
O:-)
:-B
=;
I-)
8-|
L-)
:-a
:-$
[-(
:O)
8-}
2:-P
(:|
=P~
:-?
#-o
=D7
:-SS
@-)
:^o
:-w
7:P
2):)
:-c
:)]
~X(
:-h
:-t
8-7
X_X
:!!
m/
:-q
:-bd
^#(^
4 comments:
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
Gan,, klo buat gadget yang disamping kiri tuh gmn ya ?
@Cholis Setyawan Nah tuh tutor nya ada diatas...
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