Trik Pertama
By Widarto uji K
<p>Your browser does not support iframes.</p>
Widget Like Box Fans Facebook memang sudah tidak asing lagi nama itu
bagi para blogger selain berguna sebagai penghubung blog dengan jejaring
sosial facebook ini , widget ini juga berguna sebagai sarana melihat
berapa banyak yang menyukai blog tersebut dengan melihat jumlah like
dari pengguna facebook , semakin banyak like yang di dapat berarti
semakin banyak yang menyukai blog tersebut .
Kemarin saya juga sudah pernah berbagi tentang cara memasang like box facebook di blog dengan judul
Cara Pasang Like Box Facebook Di Bawah Postingan Blog
yaitu like fan page facebook nya di letakan di bawah postingan blog
atau di atas form komentar blog dan kali ini saya berbagi lagi hal
serupa tapi tak sama yaitu widget ini akan di tempatkan tersembunyi di
samping blog , like box fan page nya akan berfungsi pada saat cursor
melalui button widget tersebut seperti contoh di samping kanan blog ini (
lalui cursor sobat ke button/ tombol yang ada tulisan facebook nya dan jagan lupa sekalian di like ya....!!! )
Kalau sobat ingin mencoba Cara Membuat Widget Like Box Fans Facebook Tersembunyi Di Blog sobat ikuti lah cara nya di bawah ini :
- Login dulu ke blogger.
- Pilih Template di dasbor blog.
- Pilih Edit HTML
- Centang dulu Expand Template Widget.
- Cari kode </head> di Template blog .
- pasang kode di bawah ini sebelum kode atau diatas kode </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
- Simpan Template.
- Pilih Tata Letak di dasbor blog
- Klik Salah satu tambah gadged/add a gadged.
- Pilih HTML/Javascript .
- Pasang kode di bawah ini ke halaman HTML/Javascript
<script type="text/javascript">
//<!--
$(document).ready(function()
{$(".floatinglikebox").hover(function() {$(this).stop().animate({right:
"0"}, "medium");}, function() {$(this).stop().animate({right: "-250"},
"medium");}, 500);});
//-->
</script>
<style type="text/css">
.floatinglikebox{background:
url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggzCKbcQPWpHC0P53Vjftyo-w7bF-6sqj46B8Fb4wsYK_WCea1eV-utntfNHaHH5_iKh81eVh_ehPsRRie5NeyXoY6bvpqACOLXoeHEnSIVcN1bjI6Mj7zvy0WCemcZMD0f3W1VaX1GY3C/s1600/floatingfbpng1.png")
no-repeat scroll left center transparent !important;display:
block;float: right;height: 270px;padding: 0 5px 0 40px;width:
245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.floatinglikebox div{border:none;position:relative;display:block;}
.floatinglikebox span{bottom: 10px;font:
10px tahoma,verdana,arial,sans-serif;position: absolute;right:
6px;text-align: right;z-index: 99999;}
.floatinglikebox span a{color: #808080;text-decoration:none;}
.floatinglikebox span a:hover{text-decoration:underline;}
</style><div
class="floatinglikebox" style=""><div><iframe
src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/pages/Blog-rangga/***************&width=251&height=270&colorscheme=light&show_faces=true&border_color=%23cccccc&stream=false&header=false&appId=159468740772399"
scrolling="no" frameborder="0" style="border:none; overflow:hidden;
width:251px; height:270px; background:#ffffff;"
allowtransparency="true"></iframe><span><a
href="http://blog-rangga.blogspot.com/2013/01/cara-membuat-like-box-fans-facebook.html"
target="_blank">Get
Widget</a></span></div></div>
- Terakhir Klik simpan kode
Trik Kedua
By Widarto uji K
hy
, gan makasih ya udah berkunjung ke blog saya, mohon apa bila nanti
meninggalkan blog saya tinggalkan jejak ya,, biar saya kunjungi balik
oke....
bagi sobat yang ingin tau caranya silahkan lanjutkan membacanya
heheheheee
langsug ajah deh, nih tutorialnya
1. masuk blogger''
2..rancangan/ design
3. elemen laman
4. add gadget
5. pilih HTML/java script
masukin script nya
<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("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%;}
.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">
<div>
<iframe frameborder="0" scrolling="no"
src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/ahmadbjblogs/%0A&width=245&colorscheme=light&show_faces=true&connections=9&stream=false&header=false&height=250"
style="background: #fff; border: medium none; height: 250px; overflow:
hidden; width: 245px;"></iframe></div>
</div>
</div>
kemudian ganti http://3.bp.blogspot.com/-KdSAuv-K7HM/To_WXoWHzJI/AAAAAAAAGvg/5UvL10LUe_k/facebook.png dengan
url gambar yang anda ingin kan, untuk url bisa di cari di google gambar
cari gambar yang anda inginkan copy URL nya buat mengganti url di
atas,,
atau juga gambar nya bisa buat sendiri kemudian di upload di photobucket ambil url gambar nya buat mengganti url di atas
ganti http://www.facebook.com/ahmadbjblogs/ dengan
alamat fans page blog anda , oh ya gak di ganti juga gak papa biar fans
page blog saya di blog anda hehehee just kidding,,,,
oh ya kalau belum punya fans page blog di facebook silahkan buat dulu nih cara buat nya bisa liat di sini
Tutorial membuat fans page Blog di fb dan menampilkanya pada blog
6. oke kemudian
save,,,
tunggu dulu ini belum selesai
nah selanjutnya
7. masuk ke EDIT HTML
cari kode </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
copy paste kode tersebut di atas </head>
7. simpan Template
ettzzzzz tunggu dulu belum selesai selanjutnya anda harus coment heheheheheeeee
3. Kopi script kodenya di atasnya.
3. Kopi script kodenya di atasnya.
