Memasang Widget Follow - Show/hide

Written By Enda Fivers on 03 October 2010 | Sunday, October 03, 2010



Follow...follow...mungkin tak asing lagi kata-kata ini bagi sobat-sobat blogger, tapi trik yang satu ini mungkin masih jarang ditemukan...hohoho..mungkin yaa...

Baiklaah...kali ini akan saya share bagaimana cara membuat widget follower melayang dengan mode show/hide. Postingan ini merupakan permintaan dari beberepa sobat blogger (hehehe..sebenarnya saya sudah berniat memposting sebelumnya).

Trik ini merupakan pengembangan dari Script untuk membuat show/hide Cbox, hehe..Cbox lagi Cbox lagi,,yasudahlah yang penting Follownya bisa show/hide. Mau tau caranya?? mari ikuti langka langkah berikut :

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(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://www.berbagidisini.com/2010/10/memasang-widget-follow-showhide.html"target=_blank"><div style="color: #444444;">
<span style="font-size: xx-small;">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)

9. Save..
hohoho...ternyata tidak cukup sampai disini, masih ada 1km perjalanan lagi

10. Untuk memasang tombol Navigasinya, silahkan masuk ke :
Perancangan>>Edit HTML.

11. Cari kode <body> dan paste code brikut tepat diatas kode <body>

<a href='javascript:showHideFL()' style='display:scroll;position: fixed; bottom:5px;left:5px;' title='Follow'><img src='http://lh4.ggpht.com/_yF0--u7KSSI/TKWWpZF5MKI/AAAAAAAAAu4/E18Axu8eACI/Follow.png'/></a>

12. Simpan template
lihat hasilnya... "Semoga Berhasil"

hmmm,,,akhirnya sempe juga....

Catatan : "Jika sobat tertarik buat posting tulisan ini, jangan lupa untuk mengingat saya" hehehee
Silahkan bertanya kalau ada yang kurang jelas
Facebook : http://www.facebook.com/enda.fivers

64 comments:

Mr.Kelpo said...

Thx berat ya !!! :D

Cyntia said...

wowww.. info br neiii setalah skian lama vakum ngeblog... mksh y kak udh sharing ;)

vini vidi vucinic said...

Nice info Sob, ijin copas ntar kalo senggang ane coba.

BRI Jakarta Veteran said...

mantabs sob ijin copas tuk dipelajari, salam

yan said...

wah ini juga' keren sob..!!! v.. saya lebih pengen buat cbox yang kaya' punya sobat...!!! kalo bisa di posting sob cara bikin buku tamu kaya' punya sobat..!!! di tunggu..!!

BeDa said...

Tutorial yang bagus. Blogger makin inovatif.

Salam ukhuwah

Parenting said...

Keren nih. Bisa dipraktikan.

Dhana/戴安娜 said...

salam sahabat
ehm bagus bisa makin keren yang ini goid louck yach

Zetsu-kun ゼツ said...

thanks sob,,

lulu said...

makin keren aja ni blognya mas (ngiri mode on) makasi infonya saya coba ikutin lagi heheh

enda fiVers said...

@yan : ok sob,,saya usahakan posting cboxnya dalam waktu dekat ini... :) mohon bersabar yaa :)

enda fiVers said...

@All : Terimakasih :) kalian membuat saya semakin bersemangat :)

Zetsu-kun ゼツ said...

maen jga dong sob ke blogg qu http://moy4n.blogspot.com

sda said...

makasih tutorialnya ya.

narti said...

jadi harus pakai follow yang bentuk kode html ya? bukan yg bawaan blogger?

enda fiVers said...

@narti : iya,,betul sekali :) sebenarnya sih follownya sama saja kok,,cuma bedanya kita copas kode aja :)

Skydrugz said...

dari dulu kupasang :D

z33s said...

tips yang bagus sob...
terus lanjutkan perjuanganmu

sahabatmu akan selalu mendukungmu

salam sahabat | salam fivers

kisah abu nawas said...

thanks widgetnya sob

dee said...

ikut baca2,,,nich....blognya keren! go fivers..

secangkir teh dan sekerat roti said...

oow..
boleh juga..
tapi kalo udah ada cboxnya apa ntar gak nabrak kodenya ya..?

enda fiVers said...

@secangkir teh dan sekerat roti : Ga bakalan nabrak kok,, kodenya sudah dibedain sama kode Cbox...buktinya saja di blog saya ini :)

kartu kredit said...

salam sukses sobat...keren contentnya

Ladida said...

sangat kreatif kawan !!!

keep ur blog on !!!

Prapatan Kertek said...

Info yang sangat menarik,sekalian ijin tulis ulang sob.!

sibutiz said...

saya dh psang mbah...
makasaih y gan....

zonabelajar said...

mantap coyyy makasih bro

kiterkitikitu said...

wah! hebat nih sob... mau cuba :))

IF Info News /如果信息新 said...

bagus sob ijin copas utk dipelajari, thanks.. nice post

Soccer/足球新闻 in bundes liga said...

tks widgetnya sob...

Iryns said...

waduh bagaimana ini caranya..
saya buat kok xdatangkan hasil..
saya budak baru belajar..

pN.rOs said...

tapi bila buat semua follower lama jadi ilang ya? sila jawab di blog saya ya
http://mrsaqur.blogspot.com

BUKAN PORNO said...

sudah dicoba dan berhasil, thanks infonya gan..
ditunggu kunjungan dan follownya...
sekalian izin compas nih...

MERTHA DINATA GUNAWAN said...

sudah dicoba dan berhasil, thanks infonya gan..
ditunggu kunjungan dan follownya...
sekalian izin compas nih...

JUN said...

kok ane ga berhasil ya gan?

zaenal said...

tancap langsung... dah jadi nih...
Thanks sob...
Langsung ane follow ya...

yusuf Habibi said...

ntar jadinya kayak gimana kk ?

enda fiVers said...

@yusuf Habibi nanti jadinya seperti di blog saya ini. :) silahkan dicoba.. :)

nick.adika said...

like~

afri vhd d'castro said...

thanks bro...
klu ada postkan cara membuat beranda ya?
maklum..
blogger baru

afri vhd d'castro said...

thanks bro...
klu ada postkan cara membuat beranda ya?
maklum..
blogger baru

Khairul Umam said...

Gan,kode body d edit HTML sy kok gk ada y?

Spenda'z Blog said...

gan ,
Aku boleh minta tolong g ?
kasih widget follow d blog aku , plzz

Sarah Sayuri Hartnett said...

thanks

LutFiiy Lavhalitya said...

thx mas bro.... http://akudanhanyaakusaja.blogspot.com/

smilenet4u said...

makasih sob infonya langsung ane coba

Huda Cah Pucanglaban said...

thank's artikelnya.....
lumayan bingung juga c....

Pradisz Wardhana said...

Wow.. nice info sobat :D saya lihat banyak blogger yang menggunakan teknik ini. Eh, ternyata dari sobat :D Sukses ya !! btw ane sundul !!

exa smile said...

nice info sob

duniaku said...

knapa follownya ngga bisa di click y...?

Taufiq Azhari said...

Wah thanks banget nih buat tips nya:D

cosarosta said...

sangat bermanfaat banget tips'nya.........thanks

zuraini said...

kenapa nggak bisa di save..kacewa sih..

MUXLIMO said...

Ajeb, Gan!

dila_Que said...

mksh infonya tp ada yg kurang gan, posisi follewernya kurang pas..mwnya di sebelah kiri atas. gmna tuh???

Muhammad Muchlis said...

segera diterapkan, makasih tutornya.. hee

UDRI said...

tengkyu uda di terapin nie

Afifah Mahdiata said...

maaf, aku udah nyoba beberapa kali. tapi hasilnya, ada follow di pojok kiri, tapi ngga bisa di klik.
trus di rancangan >> edit HTML juga ngga ada -body- nya.
jadi bingung...

sprei said...

thaks Gan your blog baggus info and useful, greetings and salutations successful blogger

Andriansyah said...

bro.. ada contohnya kaga neh.. ane ragu2 buat nyobanye.. takut kaga tertarik ntar kalo gg tertarik dicopot lagi ribet... lewat email ya andree23.tsm@gmail.com atau lewat fb aj.. facebook.com/ansyah3

Fajar Sidik said...

tanks for you and this trick 100% works, (mesinopat.blogspot.com)

Nurrohmat Triatmojo said...

Absen minggu pagi nih, tetap semangat y sob.
Sukses selalu jangan lupa komen balik..

Salam
http://nurrohmattriatmojo.blogspot.com/

diitra said...

thanks ya tutornya .
udah saya coba dan berhasil .
membantu banget buat meringankan blog

sherlina halim said...

Pengen yang lebih seru ...
Ayo kunjungi www.asianbet77.com
Buktikan sendiri ..

Real Play = Real Money

- Bonus Promo Red Card pertandingan manapun .
- Bonus Mixparlay .
- Bonus Tangkasnet setiap hari .
- New Produk Sabung Ayam ( minimal bet sangat ringan ) .
- Referal 5 + 1 % ( seumur hidup ) .
- Cash Back up to 10 % .
- Bonus Royalty Rewards setiap bulan .

untuk Informasi lebih jelasnya silahkan hubungi CS kami :
- YM : op1_asianbet77@yahoo.com
- EMAIL : asianbet77@yahoo.com
- WHATSAPP : +63 905 213 7234
- WECHAT : asianbet_77
- SMS CENTER : +63 905 209 8162
- PIN BB : 2B4BB06A / 28339A41

Salam Admin ,
http://asianbet77.com/