Show/Hide Widget Followers Versi 2

Sempat juga untuk posting, semoga postingan ini mengakhiri kevakuman saya selama ini(*dalam hal blogging). Meskipun tulisan ini saya buat jam 4 subuh dan sisela-sela kesibukan saya sebagai mahasiswa, saya sangat senang sekali karna tulisan ini saya buat tidak lain hanyalah untuk sobat-sobat blogger smua.

Baiklah, langsung saja kita masuk pada pembahasannya membuat "Show/Hide Widget Follower Versi2". Sebenarnya ini tidak jauh berbeda dengan versi pertama, hanya saja pada versi 2 ini kita tidak lagi bermain pada "Edit HTML" melainkan pada "Elemen Halaman" saja. Tujuannya tidak lain hanyalah untuk mempermudah dalam menerapkannya pada blog. Berikut caranya :

1. Pastinya login Blogger terlebih dahulu

2. Masuk ke Perancangan>>Elemen Laman

3. Tambahkan Gadget Html/Java Script

4. Copas 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/AVvXsEhkDHgAfn1yhPYy8_5bDJOhpWQOCL7CkSqWELU9Gmx5SBwPq6RIPSRtfuvoTOXo8M_JEmiuYAPFoELMMO6skhHoqG_-38VfT0qMcOQGND4d2tPrFW_vuc4YZ862ye-MBThg3ud9zMTV3y3u/)#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>

Eits..jangan disave dulu, mari lanjut ke langkah selanjutnya

6. untuk mengambil kode widget follownya silahkan masuk ke link ini [http://www.google.com/friendconnect]

7. Lihat Gambar dibawah

-[1] Pilih blog sobat yang akan dipasang widget follownya
-[2] Klik "Tambahkan gadget anggota"
-[3] Silahkan diatur ukuran, warna dll nya..
-[4] Klik "Buat kode"
-[5] Silahkan Copy kodenya, dan ikuti langkah selanjutnya

8. Paste kode Widget Follow tadi pada kode nomor 4 (*Gantikan kode yang berwarna merah dengan kode Widget Follow yang sudah dicopy tadi) Save..

New

9. Masih pada "Elemen Halaman" tambahkan gadget HTML/Java Script kemudian copas kode berikut :

<a href="javascript:showHideFL()"/><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOHU-hxK6Y6wkHaIqTBUTWEUvw7eYiM5_-YUlxHfdNANDizfZqndtZX460oFR8jnZcc9SSfvvLWhAsqvlxxuA0rVcVKF75yYrjeFuxqClvQpysyRspxxRF_pPLMWSzPkm4HDNsEU5pREkI/" alt="Fivers" title="Klik untuk membuka kotak Follow" style="display:scroll;position: fixed; top:150px;right:0px;cursor:pointer;style=" opacity:1;filter:alpha(opacity="100)&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" ;" height="130px" width="40px" /></a>

Save.

10. Lihat Blog. Selesai.

Semoga bermanfaat

Artikel Terkait di Bawah posting