Sep 27, 2011

Widget Facebook Bisa Muter

Post kali ini saya akan berbagi tips membuat Widget Facebook Bisa Muter. Bingung dengan judul di atas, oke langsung saja ke demonya. Itu blog teman saya yang sudah mempraktekkan tips ini. Langsung saja deh ke tata caranya.

Pertama buka akun blogger kalian.
Masuk ke Rancangan
Pilih Edit HTML lalu centang tombol "Expand Template Widget"
Cari kode
]]></b:skin>
Lalu copy paste kode CSS dibawah ini tepat diatas kode tersebut.
.infotips_facebook:hover{opacity:0;background:none}
.infotips_facebook{-webkit-transition:all .4s ease-out;-moz-transition:all .4s ease-out;-o-transition:all .4s ease-out}
.infotips_facebook,.infotips_facebook{-webkit-transition:all .4s ease-out;-moz-transition:all .4s ease-out;-o-transition:all .4s ease-out}
.infotips_facebook:hover{-ms-transform:rotate(370deg);-webkit-transform:rotate(370deg);-o-transform:rotate(370deg);-moz-transform:rotate(370deg)}
Lalu "Simpan Template"

Langkah terakhir copy kedua kode dibawah ini ke "Rancangan -> Elemen Laman -> Tambah Gadget -> HTML/ Javascript"
Pertama
<div style="bottom: 175px; position: absolute;">
<div style="background: url('http://icons.iconarchive.com/icons/yootheme/social-bookmark/128/social-facebook-box-white-icon.png')no-repeat; height: 160px; margin-left: 25px; margin-top: 20px;">
</div>
</div>
Kedua
<a href="http://facebook.com/ramadhanfnw19" target="_blank" title="Add FBku" rel="facebookku">
<img alt="Add Me" class="infotips_facebook" style="background:url('http://icons.iconarchive.com/icons/yootheme/social-bookmark/128/social-facebook-box-blue-icon.png');" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSnHXnS3IdtJXapy-QE5WhquHwnv7E7xbEiYdjbKEUtVEQgQcJXMwtYxRPz8jxCOG3bjfZtUj2zrH_I3Tk03yCS9lFRWcGh3wlHGgvyPEg0Tin_EBaax2L_qX6To7c9R9uITm33x5D4sX3/s1600/ladida-jebakan.gif" width="128" height="128"/></a>
<center><a href='http://infotips-rama.blogspot.com'>Sumber</a></center>

NB: Copy kedua kode itu dalam tempat berbeda (Double) dan ganti teks berwarna biru dengan URL facebook kalian.
Oke, done. silahkan lihat hasilnya.
GOOD LUCK


Terinspirasi oleh teman saya

34 comments:

  1. lumayan tuh buat nambah ilmu hahaha

    visit back Ari Software

    ReplyDelete
  2. boleh nih dicoba...
    thank's for info .....

    ReplyDelete
  3. Wah Yang Saya Cari-cari nih...udah ditungguin dari dlu cumnan nunggu sahabat ngesahare...akhirnya ada jiga yang post thx ya gan....

    ReplyDelete
  4. @Mr Nyariadi: siapa? saya? bukan, saya Mas Fnw. :D

    ReplyDelete
  5. sangat menarik gan, sebelum masuk ke edit HTML data apa harus di back up dulu ya?

    ReplyDelete
  6. @Bisnis Online Blog: menurut saya, gak usah. coz itu hanya nambah kode sedikit. jadi kalo gak berhasil bisa dicari kodenya lalu dihapus (biar gk memberatkan blog).

    ReplyDelete
  7. wah, kyknya ini utor udah nyebar kemana2 yah, ehehee

    makasih infonya ^^

    ReplyDelete
  8. @ladida: oke,, :D
    thx kunjungan baliknya mas ladida..

    ReplyDelete
  9. gan udah saya pasang linknya
    di bagian footer blog saya (bagian bawah dkt credit)

    pasang di sana boleh ngak (mnta di bwah footer seperti saya pasang punya anda gan, boleh ngak?)

    hhe makasih saya tunggu balasan linknya :D

    ReplyDelete
  10. @How To Be Vegetarian: Maaf gan, saya pasang link teman di bagian atas (dibawah header)

    ReplyDelete
  11. udh gan
    dri tdi :D
    bsa psang scepatnya kan?
    hhe :)

    ReplyDelete
  12. @How To Be Vegetarian: Sudah saya pasang gan,, :)

    ReplyDelete
  13. @Niche blog | apa itu niche ?: Thx sob. :)

    ReplyDelete
  14. @Uda: :D ,, sudah ane bedain 80%.. :D kn sudah ijin. sudah ane cantumin juga tuh.. :)

    ReplyDelete
  15. info yang menarik hati untuk dicoba kawan :) terimakasih sudah berbagi

    ReplyDelete
  16. sori lagi mw komentar lagi wkwkwkw
    skalian kunjungan harian :D

    klo sempat main2 ke blog saya yah :D

    kok ngak ad update lagi gan... (ngak sbar niih)

    ReplyDelete
  17. @How To Be Vegetarian: Oke gan. :D
    sorry,, agak sibuk belakangan ini.. hehe

    ReplyDelete
  18. keren juga tuh sob,, thx atas infonya,, :D

    ReplyDelete
  19. mantap gan, asal jgn kepala aja yg muter2. puyeng. hehe

    ReplyDelete

Terima kasih telah berkunjung. Mohon beri komentar jika ada yang kurang.