0 Cara Menampilkan Facebook dan Twitter Melayang di Blog

Widget ini tidak menggunakan iframe. tetapi penggunaan widget tersebut masih menggunakan tombol close dan bezanya ditambahi dengan tombol Follow untuk Twitter anda.

Widget ini juga tidak mengandung script iframe sehingga tidak akan mengurangi kualitas template / blog anda yang sudah mencapai seo maksimal.

Cara Menampilkan Facebook dan Twitter Melayang di Blog

1. Silakan anda login ke Akun Blogger Anda dan menuju dashboard
2. Pilih Tata Letak
3. Klik Add Widget dan Pilih Javascript / Kode HTML
    
4. Setelah keluar jendela baru, Masukkan kode berikut ini kedalamnya
   
   <style type='text/css'> 

   /* Message Box */ 

   #box-message { 

   position:fixed !important; 

   position:absolute; 

   top:-1000px; 

   left:50%; 

   margin:0px 0px 0px -182px; 

   width:300px; 

   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><a class="murub">Jangan Lupa di Like Ya Sobat</a></center> 

   <center> 

   <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like-box href="https://www.facebook.com/KevinCheater" width="250" show_faces="true" border_color="" stream="false" header="true"> 

   </fb:like-box></center> 

   <!-- HTML End --> 

   <br/> 

   <div class="twitter"> 

   <!-- Twitter --> <a class="twitter-follow-button" data-lang="id" data-show-count="true" href="https://twitter.com/KevinMasterzz">Ikuti @KevinMasterzz</a> 

   <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </div> 

   <a class='close' href='#'>&times;</a> 

   </div>
5. Ganti beberapa item dengan milik anda seperti :
   Ganti huruf yang berwarna Merah dengan Kata - kata anda sendiri
   Ganti huruf yang berwarna Biru dengan Akun Fanspage Anda
   Ganti huruf yang berwarna Hijau dengan Akun Twitter Anda
6. Setelah selesai semua, Klik Simpan dan Lihat hasilnya pada blog anda

Selamat Mencoba :D

PERINGATAN! Hargai Artikel orang lain, Jika ingin Copy Paste silahkan Cantumkan Link Sumber nya, Salam Kevin Cheater Terimakasih.