RSS
Twitter
Facebook
Sobat blog trik dan tips, kebetulan saya ada waktu sedikit untuk memposting artikel yang menarik. Tentunya kita akan membuat widget facebook fan page like yang melayang disamping blog, atau biasanya disebut floating facebook fan page. Script jquery yang kita gunakan ini akan memberikan efek yang manarik yaitu sliding efek ketika didekatkan dengan cursor, dan akan menutup apabila cursor menjauh. Previewnya dapat anda lihat pada gambar disamping. Dengan memasang widget ini pada blog dijamin facebook anda akan semakin banyak fannya alias penggemarnya. Untuk memasang script ini sangat mudah, hanya membutuhkan beberapa langkah saja. Jadi bagaimana tertarik untuk membuatnya....? Kalau begitu ikuti tutorialnya berikut ini:1. Pada blog anda masuk ke Design --> Edit HTML
2. Carilah kode </head>
3. Letakan script jquery dibawah ini diatas kode </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>4. Simpan template anda
5. Masuk ke Elemen Halaman lalu klik Tambah Gadjet
6. Pilih HTML/Javascript
7. Masukkan kode berikut ini:
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2acQ7cYzcquntGgCiFkKftpKT97M1mFmXc5IM4gxjnPQyp-K-GqBsNaGrNeWen0yrh6cTxdfn_AgPd0BwKjgIIuXRwEukfUsgNCApnqWMExHqkcktJytkJjTJoMoOjZOz6Qbw-wTBVl55/s150/w2b_facebookbadge.pn") 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%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fblogtrikdantips&width=245&colorscheme=light&show_faces=true& connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe><span style="color:#fff;">Widget by: <a style="color:#fff; font-weight:bold" href="http://www.blogtrikdantips.blogspot.com">Indra</a></span></div></div>
8. Ganti tulisan berwarna merah dan nama fan page anda
9. Simpan gadjetnya
Sobat bagaimana dengan hasilnya...semoga dengan kode ini akan membuat blog anda menjadi lebih menarik dan bertambah pengunjung dan fannya...semoga bermanfaat.
bagus, namun nama dan fun page nya belum faham di mana harus digantinya ? trimakasih .. inta penjelasan lanjut. ok
ReplyDeletekaga nongol cuy ,
ReplyDeleteIlyas Abdullah: DISINI SOB FAN PAGENYA http://www.facebook.com/pages/create.php :)
ReplyDeleteEdi Nugraha: Bagaimana SOB?
Sebelumnya makasih sob atas kunjungannya dan komentarnya di salah satu artikel blog saya yaitu http://agungtalaga.blogspot.com/2012/04/memasang-floating-fan-page-facebook.html. Untuk Widget yg di atas, saya copy aja dulu scriptnya untuk dijadikan koleksi kode Widget Fan Page facebook. :) :) :)
ReplyDeleteSaya sdh coba tes kode widgetnya sob tapi kok nda bisa atau nda muncul ya.... Mohon penjelasannya sob...
ReplyDeletebisa sob saya udah tes lagi di blog saya hasilnya oke....kalo ditemplate sobat udah instal JQUERY sebaiknya jangan diinstal lagi....krn nantinya efek jquery yang lain gak muncul...trims buat pertanyaannya
Deleteoke, makasih...
ReplyDelete