Selasa, 21 Juni 2011

Membuat Floating Badge Facebook

Hallo Blogger, salam sahabat.
Postingan tentang Floating Image di Pojok Blog, saya ganti judul, dengan judul dengan Membuat Floating Badge Facebook. tapi masih menggunakan tips-trik blognya mas kendhin dan juga terinspirasi dari postingan Bang Naisen di blog tentang Membuat Facebook Floating Badge untuk wordpress.


Liat kan di pojok kanan atas Blog ini? ada badge FB? Nah, berikut ini adalah langkah-langkahnya

1. Login ke blogger trus klik "Layout -->> Edit HTML
2. Cari kode ini ]]></b:skin> kalo dah ketemu taru kode berikut ini di atasnya.
#badge_fb {
position:fixed;_position:absolute;top:0px; right:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
3. Text yang dicetak tebal adalah posisinya, Jika ingin ganti di posisi pojok kanan atas tinggal text "right" diganti dengan "left". Begitu juga tulisan "top", jika pingin di posisi bawah bisa diganti dengan "bottom".
4. Langkah selanjutnya yaitu letekkan script berikut ini sebelum kode </body>

<div id="badge_fb">
<a href="http://facebook.com/profile.php">
<img src="http://oemarnitip.xp3.biz/images/facebook.png" border="0" /></a>

</div>
http://facebook.com/profile.php ganti dengan url facebook anda, atau terserah anda.
http://oemarnitip.xp3.biz/images/facebook.png, bisa menggunakan gambar lain yang anda sukai.

5. Selain gambar anda juga bisa mengganti dengan jam/kalender/hit counter/widget-widget yg lain, maka ganti text yang berwarna merah dengan script widget-widget tersebut.
6. Simpan hasil kerja kamu dan lihat hasilnya.
...

4 komentar:

  1. wuiiih manteb tuh badgenya... siip mas, sgt berguna nih

    BalasHapus
  2. @Naufal Aminur Rahman ah, bisa aja. cuma praktekin trik dan tutorial dari sahabat. dan di share disini.

    makasih udh berkunjung.
    salam sahabat :D

    BalasHapus
  3. kalau ndak punya fb gmn sob ? heheehe :D

    BalasHapus
  4. @amPuzz bisa link ke yang lain atau widget lain. jadi gambar untuk di pojoknya tinggal di ganti. sesuai yang sahabat suka.

    makasih kunjungannya..
    salam sahabat :)

    BalasHapus