DON'T LIKE ME

Membuat Widget Follow Melayang


 ----------------------------------------------------------------------------------


Salam persahabatan, kali ini trik blogger share bagaimana membuat widget follower Google Friend Connect melayang dengan mode show/hide.
Trik ini hampir sama dengan membuat buku tamu tersembunyi dan hanya sedikit modifikasi script, bagaimana penasaran ingin membuatnya?
 Sahabat pencinta bloger tentunya pengen membuat blognya semenarik mungkin.. salah satunya dengan asesoris dan tampilan yang berbeda dari yang lainnya...sahabat bloger saya mengajak sahabat untuk menerapkan tutorial yang satu ini, karna bang udin pengen sahabat pencinta bloger, mengembangkan blognya dan mempercantik tampilannnya...
jika mau silahkan ikutin caranya sahabat tanks...


Ok, mari kita ikuti langkah-langkah membuat widget Follower melayang sebagai berikut :


1.     Sobat login dahulu ke Blogger

2.    Pilih Design >> Page Elemens >> Add Gadget Html/Java Script

3.    Copy dan pastekan kode berikut ke dalam Gadget sobat
    <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://trik-blogger-andreas.blogspot.com/2011/03/membuat-widget-follow-melayang.html"target=_blank"><div style="color: #444444;">
    <span style="font-size: xx-small;">By Trik 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>
4.    Ganti tulisan Kode Widget Follow Disini yang berwarna  dengan kode Widget Follow sobat
5.    Setelah itu simpan gadget sobat
6.    kemudian sobat pilih tab Edit HTML
7.    Cari kode  <body>  dan paste code di bawah ini  tepat diatas kode <body>
    <a href="javascript:showHideFL()"/><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnrl0En14C5RomSui8n-jUF5h3DZV1bgWESJiHE1b1i4uNaR9lG-N9SDXkVCamdbEvEALEWnr5F7pMebDFi7H0thu1wmmYYFqdxhVDh9td5PX6AftOH0xfx1aKdByJaIdWR1bvWXwmyepR/" alt="Fivers" title="Klik untuk membuka kotak Follow" style="display:scroll;position: fixed; top:35px;left:0px;cursor:pointer;style=" opacity:1;filter:alpha(opacity="100)&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>
8.    Simpan template sobat dan lihat hasilnya
Semoga mencoba dan semoga berhaasil
Sumber http://exeloph.blogspot.com/
By : Bang Udin
----------------------------------------------------------------------------------
Gunakan ----{ CTRL + F }---- Untuk Mencari Artikel
----------------------------------------------------------------------------------
Postingan Baru :
TERIMAKASIH SUDAH BERKOMENTAR


Comments
11 Comments

11 komentar:

nova13 mengatakan... Reply To This Comment

thanks gan cara tutorialnya...
bermanfaat banget.. hehe

kalo berkenan, komen balik yah.. :D

Anonim mengatakan... Reply To This Comment

mantap euy... saya...bisa coba juga ne follow melayangnya....ada follow yg bisa terbang ngk bang...

filemmove mengatakan... Reply To This Comment

nova13 :
sama2 nova semoga bermanfaat ya tanks atas kunjungannnya.

filemmove mengatakan... Reply To This Comment

mang juhai :
silahkan di coba aja semoga bermanfaat ya sahabat tanks.

Sandiarah mengatakan... Reply To This Comment

awalny blog aku jlek bgt...
stlh knal bang Udin, jdi lbih mnarik.
skali lgi mkasih bang !!!

filemmove mengatakan... Reply To This Comment

Insomnia :
sahabat makasih ya..semoga blognya makin bagus dan banyak yang...berkunjung...
teruskan blognya sahabat.

FCORP21 mengatakan... Reply To This Comment

thnx,gan...haha

FCORP21 mengatakan... Reply To This Comment

mogga blognya makin manteb

Mr.Alex mengatakan... Reply To This Comment

nice blog i like it follow me back i will follow you gan

filemmove mengatakan... Reply To This Comment

FCORP21 --( : makasih gan atas doanya semoga belog sahabat makan sukses juga,.... blog sahabat saya kunjungin juga..sukses selalu sahabat... By. Bang Udin

filemmove mengatakan... Reply To This Comment

Mr. Alex --(: maksih atas kunjungannnya dan komentarnya... dan saya sudah follow sahabat juga...

Posting Komentar