Cara Membuat Widget Fans Page Facebook Melayang Di Blogger

Cara Membuat Widget Fans Page Facebook Melayang Di Blogger - Setelah sebelumnya telah membuat artikel tentang Cara Mudah Menambahkan Widget Fans Page Facebook di Blogger. Banyak masukkan dari teman-teman yang berkomentar tentang, bagaimana cara membuat Fans Page nya melayang. Memang perlu kita sadari sebagai para blogger bahwa trafic itu menjadi salah satu hal yang penting dalam situs kita. Salah satu cara untuk menambah trafic situs kita yaitu mempromosikannya lewat media sosial, seperti facebook. Jadi apabila kita menuliskan posting maka alangkah baiknya untuk share posting tersebut ke Fans Page Facebook yang kita miliki, sehingga orang-orang yang menyukai Fans Page Facebook kita akan mengetahui setiap postingan yang kita bagikan.

sumber

Ada Beberapa Langkah Untuk Membuat Widget Fans Page Facebook Melayang Di Blogger, ikuti langkah-langkahnya, tahap demi tahap agar anda bisa memasangkan widget nya tanpa kesalahan.

1. Buka Dasbor > Tata Letak

sumber

Masuklah ke situs Blogger yang anda miliki, kemudian buka dasbor situs anda, pada pojok kiri terdapat tulisan Tata Letak kliklah tulisan tersebut.

2. Tambahkan Gadget

sumber

Setelah muncul halaman Tata Letak, Klik tulisan berwarna biru Tambahkan Gadget.

3. Tekan Tambah pada Bagian HTML/JavaScript

sumber

Tekanlah tombol tambah yang berwarna biru pada kolom HTML/JavaScript di sebalah kanan.

4. Salin Kode Widget

sumber

Salinlah kode Widget dibawah ini kedalam kotak HTML/JavaScript,

<style type='text/css'>
/* Message Box */
#box-message {
position:fixed !important;
position:absolute;
top: 100%;
left:50%;
margin:0px 0px 0px -182px;
width:350px;
height:300px;
padding:16px;
background:#fff;
font:normal Dosis, Georgia, Serif;
color:#111;
border:2px solid #333;
-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;
}
#box-message a.close {
position:absolute;
top:-10px;
right:-10px;
background:#fff;
font:bold 16px Arial, Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#111;
border:2px solid #333;
-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:22px;
-moz-border-radius:22px;
border-radius:22px;
cursor:pointer;
}

</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type='text/javascript'>
$(window).bind("load", function() {
// Animate Top Value When Page Loaded Completed
$('#box-message').animate({top:"50px"}, 1000);
// Remove Mailbox When Close Button On Click
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='box-message'>
<!-- HTML Start -->
<center><a class="murub">Semoga Bermanfaat, Jangan Lupa like Yah</a></center>
<br/>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/deteknol?ref=hl&amp;width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;appId=371524026202784" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe>
</center>
<!-- HTML End -->
<br/>
<a class='close' href='#'>&times;</a>
</div>

5. Ganti Tulisan

sumber

Gantilah tulisan deteknol yang terlihat tebal.

href=https://www.facebook.com/deteknol?

sumber

 ganti tulisan tersebut dengan nama url Fans Page Facebook anda.

sumber

Setelah selesai tekanlah tombol Simpan.

sumber

Sekarang lihatlah Blog anda, maka Fans Page yang melayang akan terlihat.

Sekian artikel tentang Cara Membuat Widget Fans Page Facebook Melayang Di Blogger, semoga bermanfaat, mohon maap apabila terdapat perkataan yang kurang berkenang dan kurang dimengerti, apabila ada pertanyaan, kritik, dan saran silakan untuk menuliskannya dalam kolom komentar yang terlah disediakan. Terimakasih.

• Tweet
• Share
• Share
• Share
• Share