Tips Blogger sebelumnya "Membuat Widget Tombol Like Facebook di Blog", kali ini juga hampir sama. Hanya beberapa cara dan bentuknya sedikit berbeda, widget ini letaknya tersembunyi di sisi kanan halaman blog, akan hide
and show bila dilalui cursor. Trik ini akan membuat widget terlihat sangat menarik dan tentunya menghemat ruang
pada blog. Jika anda tertarik menerapkan widget ini di blog, berikut :
and show bila dilalui cursor. Trik ini akan membuat widget terlihat sangat menarik dan tentunya menghemat ruang
pada blog. Jika anda tertarik menerapkan widget ini di blog, berikut :
Cara Menambahkan Tombol Like Facebook Hide and Show di Blogger
2. Cari kode <head>
3. Untuk memudahkan pencarian kode, tekan Ctrl+ F pada keyboards.
4. Copy lalu paste kode di bawah berikut setelah (di bawah) kode <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
5. Save Template dan tutup panel Edit HTML.
6. Sekarang masuk ke Tata Letak/Layout > Add Gadget > Tambah HTML/Javascript. Untuk judul, kosongkan saja.
7. Copy dan paste kode di bawah berikut ke dalam Gadget yang ditambahkan tadi.
<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://lh4.googleusercontent.com/-zbDw9p8R20o/T8mpaxK77yI/AAAAAAAAB-Y/pDsYMYlDi5M/s136/floatingfb.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/Odyck-Dnero/276410729061095&width=250&height=260&colorscheme=light&show_faces=true&border_color=%23cccccc&stream=false&header=false&appId=339941006059696" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:260px; background:#fff;" allowtransparency="true"></iframe><span><a href="http://odyckdnero.blogspot.com/" target="_blank">Blogger Widget</a></span></div></div>
//<!--
$(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://lh4.googleusercontent.com/-zbDw9p8R20o/T8mpaxK77yI/AAAAAAAAB-Y/pDsYMYlDi5M/s136/floatingfb.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/Odyck-Dnero/276410729061095&width=250&height=260&colorscheme=light&show_faces=true&border_color=%23cccccc&stream=false&header=false&appId=339941006059696" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:260px; background:#fff;" allowtransparency="true"></iframe><span><a href="http://odyckdnero.blogspot.com/" target="_blank">Blogger Widget</a></span></div></div>
8. Ganti url (warna biru) di atas dengan url halaman facebook anda.
9. Atur tinggi dan lebar widget sesuai keinginan dengan mengubah nilai yang berwarna merah pada kode.
10. Save Gadget dan lihat hasilnya.
Beri Kami +1 Agar Terus Semangat Menulis Untuk Anda :
Hati-Hati Jika ingin Copy-Paste (15 Blog Sudah TERHAPUS Akibat DMCA Takedown)..!
Pastikan Menyertakan Link Aktif Dofollow Dengan URL :
http://odyckdnero.blogspot.com/2013/01/tambah-like-button-facebook-hide-and.html
0komentar:
Post a Comment
*Silahkan tinggalkan komentar, saran atau kritik sesuai topik untuk kemajuan blog ini.
*Komentar anda secepat mungkin direspon, karena saya tidak selalu online.
*KOMENTAR TIDAK SOPAN, BERIKLAN, VULGAR, MELECEHKAN, SARA atau PROVOKATIF akan dianggap SPAM, dan berakhir di Tong Sampah..!!!