Assalamu'alaikum! Halo sobat, kali ini saya ingin posting yang baru saja saya praktekan pada blog saya ini. Trik kali ini adalah menambahkan widget follower. Tapi, widget follownya tidak sembarangan loh .. Soalnya kali ini widget followernya terbang alias melayang alias floating.
Fungsi dari widget ini adalah sebagai hiasan. itu hanya salah satu dari banyak manfaatnya. Dan juga itu hanya dilihat dari satu sudut pandang. Kalau dilihat dari sudut pandang yang lain, pasti masih ada banyak lagi manfaat/fungsi dari widget ini.
Saya menggunakan widget ini pun karena menurut saya lebih bagus dari pada widget follower yang biasa. Kemudian, selain itu, saya sedang mencari topik untuk artikel untuk diterbitkan di blog saya. Jadi, setelah praktek pada blog saya ini berhasil, saya tulis artikel ini ^^ . Yuk sob langsung ke TKP saja ...
Langkah I
1. Dasbor > Rancangan
2. Add Gadget > HTML/JavaScript
3. Copy kode berikut
<style type="text/css">
#fl{
position:fixed;
left:150px;
z-index:+1000;
}
* html #fl{position:relative;}
.flcontent{
float:left;
border:2px solid #676767;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVaD1VYv9NtvfanzyoKrk630VEvDCa6pzYr-XVmCW74Cx80OQDrywRIGL5t2biZLbIhzPE6IawnQJF-0oRGX7R6Y7yiW9rcKzHBUEJOJl1QF62WYFllDJyRileOcjyymD2ic9XofdLbXY-/)#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">
----------------Kode Widget Follow Disini-------------------
<div style="text-align: right;">
<a href="javascript:showHideFL()">
[Tutup]
</a></div>
<font size="2"><a href="http://www.berbagidisini.com/2010/10/memasang-widget-follow-showhide.html"target=_blank"><div style="color: #444444;">
<span >By enda fiVers</span></div></a></font>
</div>
</div>
<script type="text/javascript">
var fl = document.getElementById("fl");
fl.style.bottom = (-100-fl.offsetWidth).toString() + "px";
</script> 4. Jangan disimpan dulu, sobat langsung kunjungi link ini
5. Kemudian pilih yang mana blog sobat
6. Klik "Tambahkan gadget anggota"
7. Kemudian silahkan tentukan warna widget follower, jika sudah Buat kode
8. Copy kode tersebut dan paste di kalimat yang berwarna merah pada kode no.3
Langkah II
1. Dasbor > Rancangan > Edit HTML
2. Cari kode <body>
3. Letakkan kode dibawah ini tepat sebelum (di atas) kode <body>
Simpan Template !
Mudahkan sob? Mudah dong kan cuma mengikuti instruksi. Kalau sobat suka mengedit-edit HTML, mungkin sobat juga akan bisa mengganti gambar FOLLOW dengan sesuka hati sobat. Coba aja sendiri ya, soalnya artikel saya cuma sampai di sini. Wassalam! ^^
Fungsi dari widget ini adalah sebagai hiasan. itu hanya salah satu dari banyak manfaatnya. Dan juga itu hanya dilihat dari satu sudut pandang. Kalau dilihat dari sudut pandang yang lain, pasti masih ada banyak lagi manfaat/fungsi dari widget ini.
Saya menggunakan widget ini pun karena menurut saya lebih bagus dari pada widget follower yang biasa. Kemudian, selain itu, saya sedang mencari topik untuk artikel untuk diterbitkan di blog saya. Jadi, setelah praktek pada blog saya ini berhasil, saya tulis artikel ini ^^ . Yuk sob langsung ke TKP saja ...
Langkah I
1. Dasbor > Rancangan
2. Add Gadget > HTML/JavaScript
3. Copy kode berikut
<style type="text/css">
#fl{
position:fixed;
left:150px;
z-index:+1000;
}
* html #fl{position:relative;}
.flcontent{
float:left;
border:2px solid #676767;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVaD1VYv9NtvfanzyoKrk630VEvDCa6pzYr-XVmCW74Cx80OQDrywRIGL5t2biZLbIhzPE6IawnQJF-0oRGX7R6Y7yiW9rcKzHBUEJOJl1QF62WYFllDJyRileOcjyymD2ic9XofdLbXY-/)#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">
----------------Kode Widget Follow Disini-------------------
<div style="text-align: right;">
<a href="javascript:showHideFL()">
[Tutup]
</a></div>
<font size="2"><a href="http://www.berbagidisini.com/2010/10/memasang-widget-follow-showhide.html"target=_blank"><div style="color: #444444;">
<span >By enda fiVers</span></div></a></font>
</div>
</div>
<script type="text/javascript">
var fl = document.getElementById("fl");
fl.style.bottom = (-100-fl.offsetWidth).toString() + "px";
</script>
5. Kemudian pilih yang mana blog sobat
6. Klik "Tambahkan gadget anggota"
7. Kemudian silahkan tentukan warna widget follower, jika sudah Buat kode
8. Copy kode tersebut dan paste di kalimat yang berwarna merah pada kode no.3
Langkah II
1. Dasbor > Rancangan > Edit HTML
2. Cari kode <body>
3. Letakkan kode dibawah ini tepat sebelum (di atas) kode <body>
<a href='javascript:showHideFL()' style='display:scroll;position: fixed; bottom:5px;left:5px;' title='Follow'><img src='http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/flwr.png'/></a>
Simpan Template !
Mudahkan sob? Mudah dong kan cuma mengikuti instruksi. Kalau sobat suka mengedit-edit HTML, mungkin sobat juga akan bisa mengganti gambar FOLLOW dengan sesuka hati sobat. Coba aja sendiri ya, soalnya artikel saya cuma sampai di sini. Wassalam! ^^
makasih gan infonya.. segera ke TKP mau di coba :D
ReplyDelete@1923427862544667407.0
ReplyDeleteSeep gan, silahkan dicoba dulu ..
@8233959245007133063.0
ReplyDeleteOke gan, jangan bosen mampir lagi ^^
terima kasih info yg sangat bermanfaat ini..
ReplyDelete#Semoga sehat selalu
susah klo gk ad gmbarx ya mas ;P
ReplyDeletemksh infonya
ReplyDeleteterima kasih atas infonya
ReplyDelete