ads
Home » » Widget Facebook Bisa Muter

Widget Facebook Bisa Muter

Written By Ramadhan Fnw on Sep 27, 2011 | 5:12 PM

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
Share this article :

34 komentar:

Admin - Sc Zone said...

lumayan tuh buat nambah ilmu hahaha

visit back Ari Software

Share Our Knowledge said...

@Sc Zone: Oke,, :D

Shinobi said...

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

LaNo HTC said...

Keren Juga Nih Gan.....

Upha ! said...

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

Share Our Knowledge said...

@Shinobi: Silahkan dicoba sob, hehe

Share Our Knowledge said...

@LaNo HTC: Thx gan.. hehe

Share Our Knowledge said...

@Upha !: Oke. sama" gan. :D

lintaslirik.blogspot.com said...

thanks infonya...

Mr. Nya' said...

mantabs,
eh ini mas Ladida kah ?

Share Our Knowledge said...

@lintaslistrik: oke sama"

Share Our Knowledge said...

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

Bisnis Online Blog said...

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

Share Our Knowledge said...

@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).

Ladida said...

wah, kyknya ini utor udah nyebar kemana2 yah, ehehee

makasih infonya ^^

Share Our Knowledge said...

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

How To Be Vegetarian said...

Keren gan!
langsung k TKP buat nyobanya :D

Share Our Knowledge said...

@How To Be Vegetarian: oke,, :D

How To Be Vegetarian said...

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

Share Our Knowledge said...

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

How To Be Vegetarian said...

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

niche blog | apa itu niche ? said...

keren nih, sob :)

Share Our Knowledge said...

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

Share Our Knowledge said...

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

Uda_Cucanto said...

Tutorialku ui! :D

Share Our Knowledge said...

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

BlogS of Hariyanto said...

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

Share Our Knowledge said...

BlogS of Hariyanto: thx kawan.. hehe

How To Be Vegetarian said...

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)

Share Our Knowledge said...

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

Rama88 said...

keren juga tuh sob,, thx atas infonya,, :D

Share Our Knowledge said...

Rama88: OKe sob.. :D

zusmart said...

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

Share Our Knowledge said...

@zumart: iya gan,, :D

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Share Our Knowledge - All Rights Reserved
Template Modify by Creating Website Inspired Wordpress Hack
Proudly powered by Blogger