di tutorial pagi ini kita akan membahas mengenai " Cara Membuat Facebook Fanspage melayang Di Web "
kenapa saya bilang di web? disini karena bisa fleksibel di mana - mana asal tau masangnya seperti blogger, Web buatan sendiri, atau dengan CMS seperti Wordpress dan kelebihan tutorial primasaja.com kali ini menekankan terdapat unsur " Responsive ", yang dimaksud responsive disini yaitu dapat tampil dengan baik di dalam handphone, tablet, maupun web
facebook fanspage ini dapat membuat pengunjung anda mengetahui halaman fans situs, produk maupun yang lainnya di website anda bukan hanya dapat membuat pengunjung mengetahuinya tetapi juga dapat langsung like atau menyukai halaman fanspage facebook anda langsung dari web milik anda
mungkin bagi anda yang menginginkan fitur ini didalam website anda yang sedang membutuhkan sekali fitur menarik ini sudah sangat menanti - nanti bukan? baiklah dibawah ini adalah scriptnya
<!-- FB melayang tombol close --!>
<style type='text/css'>
#kotak-facebook {
position:fixed !important;
position:absolute; /* IE6 */
bottom:-1000px;
z-index: 1;
left: 56%;
right:5%;
margin:0px 0px 0px -182px;
width:280px;
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:"8px"}, 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;">Salam Hangat,<blink>Like Dan Ikuti Info Terbaru Website kami Dari Fanspage Facebook Dibawah ini </blink> </p>
<!-- Mulai --!>
<div class="fb-like-box" data-href="https://www.facebook.com/pages/Jaka-prima-maulana-blog/691841597545944?fref=ts" 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;" >Fanspage Like <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="http://www.jakaprimamaulana.blogspot.com">jakaprimamaulana.blogspot.com</a> </p>
</div>
by jakaprimamaulana at primasaja.com
<style type='text/css'>
#kotak-facebook {
position:fixed !important;
position:absolute; /* IE6 */
bottom:-1000px;
z-index: 1;
left: 56%;
right:5%;
margin:0px 0px 0px -182px;
width:280px;
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:"8px"}, 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;">Salam Hangat,<blink>Like Dan Ikuti Info Terbaru Website kami Dari Fanspage Facebook Dibawah ini </blink> </p>
<!-- Mulai --!>
<div class="fb-like-box" data-href="https://www.facebook.com/pages/Jaka-prima-maulana-blog/691841597545944?fref=ts" 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;" >Fanspage Like <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="http://www.jakaprimamaulana.blogspot.com">jakaprimamaulana.blogspot.com</a> </p>
</div>
by jakaprimamaulana at primasaja.com
Catatan: ganti yang berwarna merah dengan alamat fanspage anda
di tutorial x ini saya akan coba menjelaskan cara memasang script tersebut di blogger.com berikut langkah - langkah demi langkahnya
1. buka www.blogger.com lalu login dengan memasukkan email dan password anda
2. didalam website anda pilih tataletak > tambahkan gadget > Html/Javacript
3. masukkan coding yang sudah saya berikan diatas tadi
4. Selesai
tes
BalasHapus