Membuat Show-Hide Widget Followers Keren Abis

Viyan Pradita Sabtu, April 09, 2011

Hmm... Lama juga neh gak update blog, coz seminggu kemarin sibuk sama urusan offline.
Oke, pada kesempatan kali ini saya akan membahas mengenai widget followers di blog, tepatnya "membuat widget followers keren abis" Sobat pasti tahu kan seperti apa itu widget followers di blog ?? tapi yang akan saya share kali ini pastinya beda dengan membuat followers biasa sob, yang pasti lebih menarik dan keren!! Selain itu juga saya rasa dengan adanya widget followers yang akan kita buat kali ini, membuat berat blog lebih ringan, itu bila dibandingkan dengan widget followers biasa.

Berminat ?? Yowes, berikut cara membuatnya:

1. Login dengan akun blogger sobat
2. Masuk rancangan/design
3. Pilih Tata Letak/Layout
4. Klik Add a gadget, dan pilih HTML/Javascript
5. Selanjutnya, Copy Paste kode berikut didalamnya:

<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(http://lh3.ggpht.com/_yF0--u7KSSI/TKIlkEJwkEI/AAAAAAAAAtg/uFf3eLsXlyg/fire2.gif)#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://kode-blogger.blogspot.com/2011/04/membuat-show-hide-widget-followers.html"target=_blank"><div style="color: #444444;">
<span >By kode-blogger</span></div></a></font>
</div>
</div>
<script type="text/javascript">
var fl = document.getElementById("fl");
fl.style.bottom = (-100-fl.offsetWidth).toString() + "px";
</script>

Jangan disimpan dulu sob, masih ada langkah berikutnya neh

6. Sekarang sobat membuat kode widget followers-nya dengan google friend connect, untuk mengambil kode widget follownya silahkan masuk ke link ini http://www.google.com/friendconnect
Screenshot

7. Setelah masuk Pilihlah blog sobat yang akan dipasang widget follow-nya
8. Klik "Tambahkan Gadget Anggota"
9. Aturlah ukuran, warna dsb... menurut selera sobat/sesuaikan dengan blog sobat
10. Klik "Buat kode"
11. Copy dan Pastekan kode Widget Follow tadi (Gantikan kode yang berwarna merah dengan kode Widget Follow yang sudah dicopy tadi)
12. Lalu Save
13. Terakhir, Masih pada "Elemen Halaman" Tambahkan gadget HTML/Java Script, Kemudian copy paste-kan kode berikut ini:

<a href="javascript:showHideFL()"/><img border="0" src="http://lh6.ggpht.com/_yF0--u7KSSI/TN6RD4JoCmI/AAAAAAAABG0/bkYV2RML-qk/Follow-.png" alt="kode" 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>

14.
Save dan lihatlah hasilnya.


Selamat mencoba, semoga bermanfaat :)

Ditulis Oleh :

Artikel Membuat Show-Hide Widget Followers Keren Abis ini dipublish pada hari: Sabtu, April 09, 2011. Semoga artikel ini bermanfaat untuk Anda. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

35 komentar
Terjun Ke Kolom Komentar

  1. iyah keren euy...mantap dah...sip sip

    BalasHapus
  2. BUSET menarik nih infonya!

    Gabung di sini ya www.busetforum.co.cc

    BalasHapus
  3. @All : Makasih Kommennya Sob...

    BalasHapus
  4. It works gan :2thumbup
    thanks banget tutorialnya :)

    BalasHapus
  5. good article post gan and many thanks for share info

    BalasHapus
  6. Askum...
    Thanks ya boss atas info nya...
    kalau ada waktu singgahlah di blog aku untuk melihat kalau aku telah menerapkan hasil postingan agan...
    Salam Bloger..
    Waskum..

    BalasHapus
  7. @dragon : Sama2 Sob

    @fikry : Ok, Makasih Sob...

    BalasHapus
  8. Sob, aku mohon izin posting widget followers mu yang keren abis ini di blog ku....
    Tenang, Sumbernya pun pasti aku ikut sertakan..

    BalasHapus
  9. brow, gmna cranya buat info kayak di samping kiri blog agan,..
    blz ny di mr.form@yahoo.com

    sbenrnya mau follow, tpi koq gg ada gadgetnya

    BalasHapus
  10. @Rizki Fawqo: klik widget Info-nya, bagian paling atas sudah ada caranya sob, klik aja "make own" caranya sudah saya share, cari saja.
    Untuk widget Followers emank dari kemarin lg error kalo gak salah, coz kadang nongol kadang nggak. :))

    BalasHapus
  11. t'kash join la blog ini http://islamicbarakah.blogspot.com

    BalasHapus
  12. Kalo saya sich munculnya di atas truz tombolnya di bawah.. :D

    BalasHapus
  13. @blogger: Ok, makasih ya :) salam kenal

    @zhanaz45: Sip deh sob :D

    BalasHapus
  14. sob,widget.a masih sering error gak? pgen nyoba tapi masih ragu2

    BalasHapus
  15. @nC: Kadang iya, tp sekarang jarang koq sob?? saya juga masih menggunakannya neh :)

    BalasHapus
  16. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  17. Bosetttttttttt....:-o keren buanget brow...!!!
    Thanks ya, dan salam kenal dr aku ==>> ;) :))

    BalasHapus
  18. wah..aku dah nyoba bro...mantap..kren euy.. :))

    BalasHapus
  19. wah kok kode di ane gak jalan ya?? ada yang salah kali y? jagi coma pake code yg dari google doang.. tapi itu jugah dah ok


    tq atas postingannya

    BalasHapus
  20. thanks infonya sangat bermanfaat.....

    BalasHapus
  21. thanks buat info nya yach gan,

    sangat berguna banget bwt ane yg masih nuwbie di dunia blogging.

    so, klo ada wktu jgn lupa mmpir ke blog ane.ok

    Dhon2008 Indonesia

    BalasHapus
  22. saya ingin tapi kan sekarang tidak berlaku lagi ke http://www.google.com/friendconnect/
    jadi gimana

    BalasHapus
  23. makasih banyak gan code HTMLnya ! mbantu banget nih ! THANKS A LOT !

    BalasHapus
  24. thanx sob, infonya sangat bermanfaat xD

    BalasHapus
  25. keren bro :-bd search by google :: naufalthedarkness :::

    BalasHapus
  26. Wahhh Bagus tu....Pengen nyoba dulu
    Heeeeee...maksi Mas tutorialnya

    BalasHapus
  27. keren gan,

    Mampir di blog seputar palembang : oncak-nian.blogspot.com

    BalasHapus

Catatan:
Link hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS DI SINI...</i>


web design blogs Bloggers - Meet Millions of Bloggers