Inilah Memasang Widget Like Box Facebook Melayang di Blog

Inilah Memasang Widget Like Box Facebook Melayang di Blog - Masih suasana bulan Ramadhan. Sebelumnya Bos Tutorial mengucapkan Selamat menunaikan Ibadah Puasa bagi yang merayakannya. Ok. Tetap semangat yah kawan-kawan.

Kembali kepada topik yaitu "Memasang Widget Like Box Facebook Melayang di Blog". Oh iya, sebelumnya Bos pernah membagikan kepada kawan mengenai Cara Memasang Fans Page Facebook Tersembunyi. Untuk tutotor kali ini berbeda namun hampir sama. Bingungkan. Maksudnya, Memasang Widget Like Box Facebook Melayang di Blog pengunjung diminta untuk mengklik sebuah kotak apakah dia mau menyukai halaman facebook kita atau tidak (tombol Close). Sementara Memasang Fans Page Facebook Tersembunyi, Widget Fans Page Facebook akan muncul ketika mouse di arahkan ke kotak Widget itu dan tidak perlu menutup kotak widget (tanpa tombol Close).

Inilah Memasang Widget Like Box Facebook Melayang di Blog

Tujuan Memasang Widget Like Box Facebook Melayang di Blog
Pada dasarnya tujuan Memasang Widget Like Box Facebook Melayang di Blog adalah agar para pengunjung blog mau menyukai halaman facebook yang kita kelola dengan memberikan jempolnya, sehingga halaman halaman facebook yang anda kelola semakin banyak. Kelebihan lain dari Widget ini dilengkapi dengan tombol close sehingga pengunjung bisa dengan mudah menutup Kotak Widget ini dan walau pun agak sedikit mengganggu pengunjung tapi masih bisa menutupnya tanpa susah payah.

Penasaran ingin Memasang Widget Like Box Facebook Melayang di Blog anda? Ikuti langkah-langkah dibawah ini.

Inilah Memasang Widget Like Box Facebook Melayang di Blog

1. Syarat utama : Memiliki Sebuah Halaman Facebook. Bila belum ada, silahkan buat dulu. Baca disini Cara Membuat Halaman Facebook. Setelah anda memiliki sebuah halaman facebook, ikuti langkah selanjutnya.
2. Buka Akun Blog yang anda kelola.
3. Pada Dasbor Blog anda, masuklah ke Elemen Tata Letak, pilih Add Widget / Tanmah Gadget
4. Lalu pilih HTML/Jawascript
5. Selanjutnya copylah kode script di bawah ini ke dalam Widget/Gadget Baru yang anda buat.
<!-- 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/NongkronglDiKedaiKopi" data-width="292" data-show-faces="true" data-stream="false" data-show-border="true" data-header="true"></div>

<!-- Selesai --!><a class='close' href='#'>&times;</a>
<p style=" float:right; margin-right:35px; font-size:10px;" >Powered By <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="http://kumpulan-adsen.blogspot.com/">Blogger Widget</a> and <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="http://bos-tutorial.blogspot.com/2013/07/inilah-memasang-widget-like-box.html">Get This Widget</a></p>
</div>
6. Simpat Widget/Gadget Baru yang anda buat tersebut.
7. Lihat hasilnya.

Perlu diperhatikan :
1. Tulisan berwarna Merah adalah Kode Script dari Halaman Facebook Kedai Kopi. Silahkan anda ganti Kode Script tersebut dengan Kode Script dari Halaman Facebook Anda.
2. Bila tidak berhasil, coba ulang dari awal.
3. Mohon Halaman Facebook Bos Tutorial di Like juga yah


Sebagai contohnya, silahkan lihat disini. Demikianlah tutorial ringan mengenai Inilah Memasang Widget Like Box Facebook Melayang di Blog, Selamat mencoba salam sukses. Salam. BOS TUTORIAL.

Cara Memasang Fans Page Facebook Tersembunyi

BOS TUTORIAL - Cara Memasang Fans Page Facebook Tersembunyi. Blog kesayangan kita ini baru saja memasang Fans Page Facebook secaara tersembunyi. Sepertinya terlihat bagus. Dan tentunya tidak mengganggu space halaman pada blog.

Tidak abdol rasanya apabila Bos Tutorial tidak membaginya kepada kawan-kawan semua. Pada kesempatan ini, saya mencoba berbagi kepada anda kawan.

Cara Memasang Fans Page Facebook Tersembunyi

Cara Memasang Fans Page Facebook Tersembunyi ini tidaklah susah, anda hanya menambah sedit script pada template blog anda. Namun ada syarat yang anda penuhi.

Syaratnya adalah :
1. Anda harus memiliki Akun Facebook (bisa juga minjam) sebaiknya punya sendiri lebih bagus.
2. Anda juga harus punya sebuah Halaman Facebook (Fans Page Facebook)

Apabila anda belum memiliki syarat di atas, abaikan dulu tutorial kali ini. Oh iya, bagaimana cara membuat facebook dan halaman facebook, nanti kita bahas selanjutnya yah.

Apabila anda sudah memiliki syarat-syarat di atas, langsung saja ikuti langkah-langkah bagaimana Cara Memasang Fans Page Facebook Tersembunyi di bawah ini.

Ada 2 Cara Memasang Fans Page Facebook Tersembunyi
Cara Pertama
1. Bukalah akun blog anda kawan
2. Masuk Elemen Template, lalu pilih Edit Widget, slanjutnya Centang : Expand Template Widget
3. Carilah kode </head> lalu copylah kode script di bawah ini tepat persis di atas kode </head> tadi
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
4. Simpan tempalate blog anda.

Catatan :
Apabila template anda sudah menyediakan kode script diatas, abaikan saja. Artinya anda tidak perlu memasukkannya lagi ke dalam template blog anda. Selanjutnya ikuti cara kedua.

Cara kedua
1. Apabila cara pertama sudah beres, maka masuklah ke Elemen Tata Letak, pilih Add Widget / Tanmah Gadget
2. Lalu pilih HTML/Jawascript
3. Selanjutnya copylah kode script di bawah ini ke dalam Widget/Gadget Baru yang anda buat.
<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/AVvXsEg4VOxsgOE7784dPqbFNmF9Lq5szmpJdbRJIZxzHMEJ6ujqJ4iBxZ-ZTtT_3aBipdA4y94IinEfj8FBQFDmCPLNEUzS5fyFnkpd2ok4wMAIjGwR9xWvoJaf0kq_xFoGMfIKaAzc7GvCcUg/s1600/fans-page-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" style=""><div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/BosTutorialBlog&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=330" scrolling="no" frameborder="0" style="border: medium none; overflow: hidden; height: 330px; width: 245px;background:#fff;"></iframe><span><a href="http://bos-tutorial.blogspot.com/2013/02/cara-memasang-fans-page-facebook.html">Get Widget Here</a></span></div></div>
4. Simpat Widget/Gadget Baru yang anda buat tersebut.
5. Lihat hasilnya.

Catatan :
1. Gantilah tulisan https://www.facebook.com/BosTutorialBlog dengan alamat / URL Halaman Facebook Anda.
2. Lihat contoh hasilnya di sebelah kanan blog ini.

Demikian tutorial kali ini mengenai Cara Memasang Fans Page Facebook Tersembunyi, semoga bermanfaat. Salam Blogger. Jangan lupa LIKE juga Halaman Facebook Bos Tutorial yah :

Bila anda belum memiliki Facebook, silahkan baca di bawah ini.
1. Cara Membuat Facebook di Facebook
2. Cara Membuat Halaman Facebook di Facebook