Cara Menampilkan Facebook dan Twitter Melayang di Blog

Cara Menampilkan Facebook dan Twitter Melayang di Blog yang akan saya publikasikan ini merupakan dari hoby saya ngeblog. Widget ini tidak menggunakan iframe. tetapi penggunaan widget tersebut masih menggunakan tombol close dan bezanya ditambahi dengan tombol Follow untuk Twitter anda.

pada artikel sebelumnya saya sempat menerbitkan CARA MEMBUAT WIDGET MELAYANG DI BLOG atau Fanspage Facebook Tampil Melayang di Blog yang hanya berisi like untuk halaman penggemar facebook saja, kali ini saya akan menambahkan script dari twitter yang fungsinya untuk memfollow twetter blog ataupun twitter anda sendiri. 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/radarcellular" 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/RadarCell">Ikuti @RadarCell</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