Formulir Kontak

Nama

Email *

Pesan *

Memasang Widget Like Box Melayang di Blog

Aizzan Blog -- Inilah tutorial cara memasang widget like box facebook, google plus, dan twitter melayang di blog dengan kode script yang sangat sederhana sehingga para sobat semuanya bisa dengan mudah memasang kode script berikut ini untuk membuat widget like box melayang di blog. Nah, selain itu banyak manfaat yang di berikan oleh widget ini antara lain semua orang yang akan berkunjung ke blog sobat mengetahui bahwa blog milik sobat juga mempunyai fans page di jejaring sosial dan yang lebih pasti akan lebih banyak pengunjung atau dapat menambah visitor blog sobat sendiri.

Memasang widget like box melayang di blog
Klik pada gambar untuk memperbesar
Diatas adalah screenshot dari widget like box melayang di blog, sedangkan demonya bisa di lihat di DEMO yang sudah saya sediakan. Untuk tutorialnya silahkan mengikuti tahap - tahap berikut ini :

1. Loggin ke akun blogger sobat
2. Masuk ke "Tata :Letak"
3. Klik "Tambahkan Gadget", terserah dimana letaknya
4. Pilih dan tambahkan "HTML/JavaScript"
5. Copy kode di bawah ini
    <style type='text/css'>
/* Alimadura.com */
#box-message {
position:fixed !important;
position:absolute;
top:-1000px;
left:35%;
margin:0px 0px 0px -182px;
width:620px;
height:auto;
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;
}
#twitterx {
background: #EEF9FD;
padding: 10px;
text-align:center;
border: 1px solid #C7DBE2;
border-top: 0;
}
</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><h3 class='mdbox-title'>Receive all updates via Facebook, Google + and Twitter. Just Click the Like Button and Follow Below...</h3></center>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/afanieshare&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>
<div class="g-plus" data-action="followers" data-height="300" height="258" data-href="https://plus.google.com/u/0/110515590190805743840/" data-source="blogger:blog:followers" data-width="310">
</div>
<script type="text/javascript">
(function() {
window.___gcfg = {'lang': 'en'};
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
</center>
<!-- HTML End -->
<br/>
<div class="twitter">
<center><iframe title="" style="width: 250px; height: 20px;" class="twitterx-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351&amp; align=&amp;button=blue&amp;id=twitter_tweet_button_0&amp; lang=ID&amp;link_color=&amp;screen_name=afanie_028&amp;show_count=&amp; show_screen_name=&amp;text_color=" frameborder="0" scrolling="no"></iframe></center> </div>
<a class='close' href='#'>&times;</a>
</div>
Keterangan :
  • Kalimat di dalam kode <h3 class='mdbox-title'> dapat di sobat ganti dengan keinginan
  • Ganti afanieshare pada facebook, sobat ganti dengan fan page dari blog sobat
  • Angka 110515590190805743840 pada google plus, sobat ganti dengan angka pada akun google plus milik sobat
  • Ganti afanie_028 pada twitter, sobat ganti dengan akun twitter dari blog maupun milik sobat sendiri
6. Dan pastekan ke dalam gadget "HTML/JavaScript"
7. Kemudian "Simpan" dan Lihat blog

Semoga artikel diatas dapat membantu dan bermanfaat buat sobat sekalian, jika ada kendala, kritik maupun saran silahkan kirim melalui form kolom komentar di bawah artikel dan juga bisa melalui form Contact us yang sudah saya sediakan.
Previous
Next Post »
0 Komentar