Show/Hide Widget Followers Versi 2

Written By Enda Fivers on 06 February 2011 | Sunday, February 06, 2011

الحمد لله...
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(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 >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="http://lh6.ggpht.com/_yF0--u7KSSI/TN6RD4JoCmI/AAAAAAAABG0/bkYV2RML-qk/Follow-.png" 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



36 comments:

NINDAAA said...

wah bagus tuh :D

ehm kommunika said...

kereeen...mohon izin sedot sob...

iskaruji said...

Wah...tips yang sangat menarik...thanks for share!

sichandra said...

wah ada yang baru yaa.. mantaap nih bos. terimakash atas ilmunya ini :D

Majalah Masjid Kita said...

utk wp self hosting bisa gak mas ya!?!?!?

Enda Fivers said...

@Majalah Masjid Kita Silahkan dicoba saja mas,,saya ga pernah pake wp sih, jadi ga tau :D hehe...

Farix Sanquilicuor (Faris Hardiyanto 177) said...

untuk tidak menggunakan edit html memang menggunakan kode <style type="text/css">kode css</style> ini, oke keren juga sih :)

Soccer/足球新闻 said...

tutorial bagus Mas nanti saya mau coba

IF said...

nice post Mas, mau dicoba

lowongan kerja terbaru said...

tutorial kren sob, tks sharingnya

Asis Sugianto said...

sepertinya asyik juga jika tempat follow di buat seperti ini,,,

illusion design said...

thanks kunjungannya,,, udah aku follow sekalian sob.. follow balik yah?

cw said...

ajib..infonya sob

zuLiG said...

keren gan cocok pisan baut yang suka baergaya :D

Dea Punya | Blogger Ciamis said...

mantap gan... lagi musim nihh widget kaya gini.. ^_^

Cek Gu R12AL said...

pingin juga...

cahaya info said...

mantab bos. sudah saya praktekan

Beben said...

blognya full javascript nih, paten euy..ehehehehe gaya, full stylish, mantap, top markotop dah \m/

iMemovaz said...

Bagus sekali infonya sob.. thanks :)

Panduan PayPal

assyafieq said...

wuuuuih....canggih n keren juga nih widget followernya...save dulu ya...

aulianet online said...

manthab gan.... aku sudah membuat... lihat di
http://aulianet-online.blogspot.com/
pokoknya mas enda ist the best....

My Blogs said...

@iMemovazThanks info nya Gan. .. .Ijin nyedot Gan. . .

El-Pipichi said...

mantap gan...izin sedot ya...makasih...

Dea said...

wah.. tengkyu dech dah sharing..segera di praktekkan.. :)

Er'end said...

Mantap dan bermamfaat,saya sudah memasangnya,hasilnya memuaskan sekali.Salam kenal Gan,makasih!

...JRS Hacking.. said...

Sob....Mantap...Visit back.......

MARINDAJAYA said...

sob saya mau coba yg ini juga,soalnya twitter udah berhasil.terimakasih banyak sob atas sharingnya..dan sukses selalu

na2ngismail said...

Kereeeeeeeen sob ...........!!!!

Viyan Pradita said...

sangat Menarik sob, sudah saya praktekan :D

Ijin share boleh gak sob... pastinya dengan sumbernya ??

ikhsan said...

sorry sob, diblog saya ngga jalan, mohon petuahnya.. thanks

Bocah Nakal said...

Makasih tutorialnya gan sangat bermanfaat, ijin pakai bila ada yang cocok...
Trimakasih.....

Zufar Zan said...

bagus amatt bang...

Faiq Qushoyyi said...

wow ..
thank's gan .. widget'a memuaskan ..
sukses slalu ia ,, n jgan lpa visit back ..

begiloguide [dot] blogspot [dot] com

Endy said...

ini yang Z cari..makasih dah share yah...thanks...
btw, blogx bagus n b'sih...

Atjeh ONLine™ said...

salam..font postingn-a keren,,ble tw gk nma font-a?

gue-dedy.blogspot.com said...

makasih sob ,