Cara Menampilkan Facebook dan Twitter Melayang di Blog
Cara Menampilkan Facebook dan Twitter Melayang di Blog yang akan saya publikasikan ini merupakan update dari artikel cara baru andie yang telah lama. 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 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/Andieshinigamiblogspotcom" 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/AndieShinigami">Ikuti @AndieShinigami</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='#'>×</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
Mudah sekali bukan untuk membuat orang lain mengikuti artikel kita yang tujuan utama dari cara ini adalah memperbanyak pelanggan blog, sehingga blog semakin meningkat trafiknya, bicara soal meningatkan trafiik blog, Cara Membuat Artikel Terkait di Bawah Posting yang dahulu saya posting juga berdampak naiknya page view per day lho, silakan dicoba
Sekian tutorial saya mengenai Cara Menampilkan Facebook dan Twitter Melayang di Blog pada kesempatan kali ini, Semoga membantu anda yang sedang mencari cara untuk melakukan hal itu. Terima kasih sudah bersedia membaca di blog saya.
