Modifikasi Tampilan Facebook Like Box dengan CSS

Modifikasi Tampilan Facebook Like Box dengan CSS
Facebook merupakan salah satu Situs Jejaring Sosial terbesar saat ini, Tak aneh jika Facebook menyediakan beragam widget Facebook untuk Blog/Website salah satunya adalah Like Box Fans Page Facebook, meskipun Fans Page Facebook tidak mutlak di khususkan untuk Blog/Website, namun jika suatu Blog/Website memiliki FansPage Facebook dapat juga dijadikan sarana untuk promosi dan meningkatkan traffik Blog kita..
Kali ini saya akan sedikit berbagi bagaimana Modifikasi Tampilan Facebook Like Box dengan CSS karena mungkin sobat semua sudah bosan dengan tampilan Like Box Fans Page yang biasa-biasa saja. Oke langsung saja silahkan sobat lihat Demonya berikut ini :



Gimana apkah sobat tertarik dengan tampilan Tampilan Facebook Like Box yang sudah dimodifikasi ini? jika tertarik silahkan ikuti CaraGampang berikut :
Perhatikan kode berikut
<script src='http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US' type='text/javascript'/>
<script type='text/javascript'>FB.init(&quot;&quot;);</script>
<fb:fan connections='10' css='http://caragampangcom.googlecode.com/files/FB.css' header='0' height='200px' logobar='0' profile_id='175220759192447' stream='0' width='300px'/>
Silahkan pasang kode di atas sesuai kehendak sobat di Blog masing-masing..
Keterangan : silahkan di ganti kode berikut
  • Angka 10 : menunjukan jumlah thumbnail yang tampil.. 
  • 200 dan 300 : menunjukan tinggi dan lebar
  • Tulisan Merah : itu kode CSS-nya jika sobat bisa mengedit silahkan di edit, jika tidak bisa, gunakan saja CSS milik saya itu.
  • 175220759192447 : itu adalah ID Fans Page Facebook saya , silahkan diganti dengan ID Fans Page Facebook milik sobat masing-masing..
Contoh ID Fans Page facebook : 
http://www.facebook.com/CaraGampangCom/175220759192447
angka yang di akhir adalah ID Fans Page Facebook..
Mungkin cukup itu saja, jika ada yang tidak dimengerti silahkan berkomentar di bawah ini, selamat mencoba Memodifikasi Tampilan Facebook Like Box dengan CSS.

38 komentar

thx tips2x sob.., btw fb like box itu membuat blog terasa berat.., mgkn terasa ringan klo dimasukkan sj ke dlm postingan..,

happy blogging.. *smile

hallo mas, saya mau nanya nih, buat banner buat nya pake software apa ya? dan upload nya gmna caranya ya mas? tolong bantu donk mas.... bales di blog saya ya/

@Rohis Facebook yuppss,, betul banget bro makanya saya masukinnya ke dalam Postingan.. :) hehe

@zondim Saya kalo ngolah Gambar suka pake PHOTOSOP CS-3 , baik Banner ataupun yang lainnya..
Untuk cara Upload sama saja seperti upload gambar pada postingan Blog ,, tapi tidak di terbitkan biarkan menjadi Draf...

dapat pengetahuan baru deh hehe :D

nice info nya sob... bisa di praktekan nih

gan,,saya izin minta template nya boleh gak,,!!
persis seperti blog ini..soalnya bagus banget,,!!
di kasih ya gan,,, plisss..

thanks,,
>> javakahuripan@gmail.com

mantap nih.. :D

saya bikin page dulu kalo begitu.. :D

Maknyus... manteb Triinya Mas Bro... :D
Ijin aplikasiiin triknya,,, Thanks
Hadir perdana di mari, bawa oleh2 MP3 Kisah Inspiratif Bag. XV, reviewnya ditunggu Sob... Thanks,

@Admin ./Boriel Cyber == Silahkan di praktekin gan :d Happy Blogging...

@Nur Kholis hehehe.., insyaalloh deh kapan-kapan saya bagikan, kebetulan ada beberapa orang juga yang minta..

@affanibnu Silahkan bro bikin dulu Fans Pagenya :d happy Blogging

@SANG PEMBELAJAR Silahkan di aplikasikan mas ,, terimakasih sudah berkunjung :) saya segera meluncur kesana :d

@Rulita.park hehe.. makasih yaa sudah berkunjung ke sini :d

Asslm. Pha kabar nich? Tutorial yang menarik. Aku tadi ngunjungin Maskolis, disitu aku liat aa Solah bikinin banner yang bagus2 buat Maskolis. Aku mau dong dibikinin. Hehehe maklum aku ga tau pake photoshop. Aku pengen Tittle 1001 Ebook diganti pake Gambar, terus aku pengen ada Banner 1001 ebook di fotter yang panjangnya selebar footer. Gambarnya disesuain aja dengan Blognya. Bisa ga aa Solah bikinin? Kalo sempet aja. Makasih ya sebelumnya.

@Faiz Naufal Wa'alaikumslm.. Alhamdulilah kabar rruarbiasa sehat..hehe
Insyaallah saya bisa buatkan ,, tapi saya bingung ukuran gambarnya berapa Pixel ya.. hehe nanti kalo saya asal bikin takut kegedean takut kekesian...

ternyata bisa juga dimodifikasi ya

ajib..infonya sangat menarik kawan

gimana cara pasang facebook fan page di sebelah 'related article' di atas ya? terima kasih

trik yang mantab
mampir juga yuk kesini :)

Info bagus gan..Terima kasih tipsnya. Ditunggu kunjungan baliknya..

bagus sob... tapi saya gag punya fanspage..heheh

aa sholah,,, saya ijin pake template dari caragampang.com yang di sahre sama mas kolis,, saya mau tanya tentang fanspage itu di pasangnya dimana ya,, saya cari di edit html ko ga ada ya,, saya mau ganti fans pagenya tapi ga ketemu-ketemu,, apa di widget ya

Komentar ini telah dihapus oleh pengarang.

wah keren euy tampilan facebook likenya :D

@Kang_adesilahkan mas tinggal dipake templatenya..
untuk memasang FansPagenya gak usah ribet-ribet tingal cari angka ini 175220759192447 di Edit HTML (jangan lupa di klik Expand Template Widget) terus ganti dengan ID FansPage milik agan..

Mas, bole gak minta kode Auto like facebook? mohon pencerahan-a ya mas ( email taufikalief@yahoo.co.id )

@Taufikcoba di googling bang taufik , saya rasa sudah bnyak.. :)

Mas, bisa kirim ke email kode auto like-a ? mohon bantuan-a ya .saya sudah coba tapi malah berkurang LIKE-a.

Mohon Pencerahan-a yoo Mas

Mas sudah 1 bulan lebih saya nunggu kode ke email tapi kok gak masuk2 ya. apakah saya tidak dapat pencerahan dari mas bro solah ?

Bagus tampilannya, ada modifikasi lain lagi tdk?

Mas broo, kasih pencerahan sikit donk, auto like js-a kok mengunlike pada kunjungan ke-2.

Tampilannya jadi lebih simpel yah gan :)
Manteb deh, apa-apa kalo dipadu ama CSS hasilnya indah sepertinya.
Hehehe

keren gan,, cuma aku belum buat fans grup seperti kebanyakan blogger aja

ini blog pelit, nggak bisa copas.

Blogwalking sobat. Blognya makin cakep aja, hehe :D Makasih tipsnya ya sob, nanti atau kapan saya akan praktikkan tipsnya di atas :)

thanks infonya sob . .
izin coba , ,

Komentar anda sangatlah berarti bagi kami, silahkan berkomentar dengan bijak dan sopan. Komentar dengan mencantumkan Link aktif akan kami hapus.