Widget
Widget Popup Fanspage versi Polos
Kali ini saya akan share Artikel tentang Widget, widget ini mungkin sering di jumpai para blogger saat berkunjung ke blog lain. Namun kali ini saya akan share Widget Popup Fanspage versi Polos yang mungkin masih jarang kalian temui. Kelebihannya widget ini tidak begitu berat dan juga tidak disertai dengan timer
Langsung saja ke pembahasan
1. Login ke Blogger sobat
2. Klik panah kecil (Opsi Lainnya), kemuian pilih Tata Letak
3. Tambahkan Gadget, pilih HTML/Javascript
4. Masukkan Kode berikut
<!-- 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;">Like Fanspage Kami,<blink> CoretaNewbiee!!</blink> </p>
<!-- Mulai --!>
<div class="fb-like-box" data-href="https://www.facebook.com/CoretaNewbiee" 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;" >
</p></div>
<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;">Like Fanspage Kami,<blink> CoretaNewbiee!!</blink> </p>
<!-- Mulai --!>
<div class="fb-like-box" data-href="https://www.facebook.com/CoretaNewbiee" 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;" >
</p></div>
- Keterangan:
Tulisan berwarna Merah ganti dengan terserah sesuai keinginan sobat
Tulisan berwarna Oranye ganti dengan link Fanspage anda
- Simpan & Selesai
Sekian Pembelajaran tentang Widget
Semoga bermanfaat, Terima Kasih
Post a Comment
2 Comments
kalo mau divariasi gmna gan?
ReplyDeleteUntuk sementara belum ada variasi
DeletePeraturan Berkomentar Di Coretanewbiee
HARAP MEMBACA TERLEBIH DAHULU
SEBELUM BERKOMENTAR
|| Dilarang Spam ||
|| Dilarang Meninggalkan Link Aktif ||
|| Diharapkan berkomentar Sesuai Dengan Post ||
|| Berkomentar Yang Mengarah Ke Sisi Positif ||
|| Utamakan Baca Artikel sebelum berkomentar ||
|| Dilarang SARA , PORN, atau sebagainya ||
|| Diharapkan berkomentar menggunakan bahasa yang sopan ||
Komentar Yang Melanggar Akan Segera DiHapus
Tertanda "CoretaNewbiee" ✔