Cara Memasang Fanspage Like Box Melayang Di Blog - Sebelumnya saya telah membuar artikel mengenai cara memasang fanspage like box di blog, tapi like box tersebut tidak melayang. Nah kali ini saya akan membagikan bagaimana membuat like box melayang. Apakah like box tersebut yang sobat cari ? Sobat bisa membayangkan begitu keren WEB ataupun BLOG saat dipasang seperti itu. Tentu akan memberikan penampilan menjadi lebih menarik. Seperti biasanya tujuan dari pada like box sendiri untuk mendapatkan like atau jempol dari para pengunjung yang dengan senang hati memberikannya. Tujuan lainnya juga bisa sebagai cara promosi jitu untuk WEB ataupun BLOG kita makin terkenal.
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.
Cara memasang like box melayang nya seperti berikut :
1. Login dulu ke Blog
2. Pilih menu Tata Letak pada Blog, kemudian klik Tambah Gadget dan pilih HTML/Javascript
3. Copy KODE dibawah ini ke HTML/Javascript
<!-- 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;">Join disini dulu ya,<blink> Like This !!!</blink> </p>
<!-- Mulai --!>
<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;">Join disini dulu ya,<blink> Like This !!!</blink> </p>
<!-- Mulai --!>
<div class="fb-page" data-href="https://www.facebook.com/varsinformasi" data-width="350" data-height="250" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/varsinformasi"><a href="https://www.facebook.com/varsinformasi">VarsInformasi</a></blockquote></div></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="http://ekorudianta.blogspot.com">Blogger Widget</a> and <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" http://ekorudianta.blogspot.com/2015/02/cara-membuat-like-box-fanspage-facebook.html">Get This Widget</a></p>
</div>
4. Ganti Kode Script yang berwana MERAH tersebut dengan kode script Fanspage Facebook sobat
5. Setalah itu simpan dan lihat hasilnya... pasti terlihat keren !
Nah itulah tutorial cara memasang fanspage like box melayang di blog. Semoga dengan ini bisa menambah wawasan dan bermanfaat buat sobat sekalian. Jika ini bisa bermanfaat buat yang lainnya silahkan di Share !!! "Berbagi Itu Indah"
Terimakasih kepada www.ekorudianta.blogspot.com yang sudah mengizinkan saya untuk mengcopy script HTML sehingga saya bisa membuat Tutorial like box melayang tersebut.
5. Setalah itu simpan dan lihat hasilnya... pasti terlihat keren !
Nah itulah tutorial cara memasang fanspage like box melayang di blog. Semoga dengan ini bisa menambah wawasan dan bermanfaat buat sobat sekalian. Jika ini bisa bermanfaat buat yang lainnya silahkan di Share !!! "Berbagi Itu Indah"
Terimakasih kepada www.ekorudianta.blogspot.com yang sudah mengizinkan saya untuk mengcopy script HTML sehingga saya bisa membuat Tutorial like box melayang tersebut.
0 Response to "Cara Memasang Fanspage Like Box Melayang Di Blog"
Post a Comment