Cara Memasang Widget Like Box Facebook Melayang Di Blogger
October 29, 2018Selamat Datang di IMAMKUN BLOG - Hai sobat semuanya apa kabarnya ni? Beberapa hari ini saya tidak sempat membuat artikel dan pada kali ini saya aktif lagi membuat artikel khususnya untuk blog ini. Nah pada Kesempatan kali ini saya akan membagikan tutorial "Cara Memasang Widget Like Box Facebook Melayang di Blogger".
Tutorial kali ini berguna untuk sobat yang ingin memasang Widget Like Box Facebook untuk dipasang di blog sobat agar para pengunjung blog sobat meng klik LIKE Fan Pages Facebook sobat, dan sehingga halaman yang sobat kelolah tersebut akan semakin banyak untuk dibagikan ke para visitor blog sobat.
Baiklah, kita langsung memulai saja cara pemasangan widget Like Box Facebooknya, cobat cukup ikuti caranya dibawah ini sampai selesai dan sobat bacanya dengan teliti agar mudah untuk dipahami.
Cara Pemasangan Widget Like Box Facebook Secara Melayang
- Pastikan sobat sudah memiliki Halaman Facebook (Fan Pages)
- Sobat login ke Blogger sobat
- Dan ketika di dasbor blog sobat, maka selanjutnya sobat pilih Tata Letak (Layout)
- Dan Kemudian sobat pilih Add Widget / Tambahkan Gadget
- Selanjutnya sobat Pilih HTML/Javascript
- Nah, Selanjutnya sobat Copy dan Pastekan kode dibawah ini ke dalam Widget/Gedget baru yang barusan tadi dibuat.
<!-- FB melayang tombol close --!>
<style type='text/css'>
#kotak-facebook {
position:fixed !important;
position:absolute; /* IE6 */
bottom:-1000px;
right:40%;
margin:0px 0px 0px -182px;
width:310px;
height:auto;
padding:16px;
-webkit-box-shadow: 0px 0px 7px #222;
-moz-box-shadow: 0px 0px 7px #222;
box-shadow: 0px 0px 7px #222; background-color:#FFFFFF; font:normal 1em Cambria,Georgia,Serif;
color:#111;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomright: 20px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;}
#kotak-facebook a.close {
position:absolute;
top:-10px;
right:-10px;
background:#333;
font:bold 16px Arial,Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#fff;
border:2px solid #fff;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
cursor:pointer;
}
</style>
<script type='text/javascript'>
$(window).bind("load", function() {
// animasikan nilai top saat halaman telah selesai dimuat
$('#kotak-facebook').animate({bottom:"50px"}, 1000);
// hilangkan kotak pesan saat tombol (x) di klik
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='kotak-facebook'>
<p style=" margin-right:10px; font-size:15px; color:#000000;">Please Bantu Saya,<blink> Like This !!!</blink> </p>
<!-- Mulai --!>
<div class="fb-like-box" data-href="https://www.facebook.com/imamkunblog" data-width="292" data-show-faces="true" data-stream="false" data-show-border="true" data-header="true"></div>
<!-- Selesai --!><a class='close' href='#'>×</a>
<p style=" float:right; margin-right:35px; font-size:10px;" >Powered By <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="https://www.imamkunblog.me/">Blogger Widget</a> and <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="https://www.imamkunblog.me/2018/10/cara-memasang-widget-like-box-facebook.html">Get This Widget</a></p>
</div>- Jika sobat sudah memasang widget/Gedgetnya maka selanjutnya sobat klik SAVE / SIMPAN
- Dan lihat hasilnya
NOTE:
- Sobat ganti tulisan yang saya tandai dengan warna Merah dengan kode script Halaman Facebook yang sobat buat.
Sekian untuk tutortial blogger kali ini mengenai "Cara Memasang Widget Like Box Facebook Melayang Di Blogger" semoga artikel ini bisa membantu sobat. Nantikan artikel menarik lainnya seputar blogger dan dunia internet lainnya.
Happy Blogging!!
0 komentar