Tutorial membuat tampilan facebook fan page keren di bloger

Tutorial Blog goperpus : Kali ini saya akan berbagi tutorial Cara membuat facebook fanpage keren untuk ditampilkan diblog sobat (Contohnya seperti gambar diatas) Jika Mouse di arahkan ke tulisan facebook, maka fanpage'nya akan muncul, dan otomatis akan sembunyi jika mouse kita menuju ke arah yang lain.
Okey Langsung aja, Sebelum kita mulai, Pertama - tama yang harus kita siapkan adalah Doa menurut kepercayaan agama masing-masing agar kita berhasil membuat facebook fanpage bisa muncul di blog kita, Berdoa Mulai...  hehehee... :)

Langkah 1:
Pertama-tama silahkan buka notepad anda (pastikan sebelum anda paste ke blog, paste'lah terlebih dahulu ke notepad), setelah itu login ke blog anda.
Buka dashboard  > design/template  > edit HTML
Menggunakan fungsi find, (ctrl + F), cari kode </head>
Copy  kode di bawah ini dan paste SEBELUM kode </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

Selanjutnya klik Save Template.
contoh:



Keterangan: Jika anda menemukan kode di atas sudah ada dalam template blog anda, abaikan langkah 1, dan pergi ke dapur untuk membuat secangkir kopi dan setelah itu melanjutkan ke langkah 2. heheheee....

 Langkah 2:

A. Dari dashboard > design > page element > add a gadget > HTML/javascript
B. Copy Kode di bawah ini dan paste di dalam kolom HTML/javascript yang telah anda buka

<script type="text/javascript"><br />//<!--<br />$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});<br />//--><br /></script><br /><style type="text/css"><br />.w2bslikebox{background: url("http://3.bp.blogspot.com/-KdSAuv-K7HM/To_WXoWHzJI/AAAAAAAAGvg/5UvL10LUe_k/facebook.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}<br />.w2bslikebox div{border:none;position:relative;display:block;}<br />.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}<br />.w2bslikebox span a{color: #808080;text-decoration:none;}<br />.w2bslikebox span a:hover{text-decoration:underline;}<br /></style><div class="w2bslikebox" style=""><div><br /><br /><iframe src="http://www.facebook.com/plugins/likebox.php?href=<b>URL Fanpage Facebook Anda</b>&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=330" scrolling="no" frameborder="0" style="border: medium none; overflow: hidden; height: 330px; width: 245px;background:#fff;"></iframe><span><a href="http://goperpus.blogspot.com/2012/04/tutorial-membuat-tampilan-facebook-fan.html">Tutorial Here</a></span></div></div>

Keterangan :

• Ganti tulisan yang berwarna merah dengan  "URL FACEBOOK FANPAGE ANDA"
• Untuk mengcopy silahkan tekan Select All Text lalu tekan Ctrl + c

Setelah itu klik save dan lihatlah hasilnya....
Deng - denggg..... gimana?? jadi kan?? heheheee...
Selamat mencoba dan semoga sukses...!!!

Posted by pur on - Rating: 4.5

Title : Tutorial membuat tampilan facebook fan page keren di bloger
Description : Tutorial Blog goperpus : Kali ini saya akan berbagi tutorial Cara membuat facebook fanpage keren untuk ditampilkan diblog sobat (Cont...

Tweet