Tampilkan Facebook dan Twitter Melayang Di Blog yang saya publikasikan ini merupakan update dari artikel yang telah lama. Widget ini tidak menggunakan iframe. Tapi, penggunaan widget
tersebut masih menggunakan tombol close dan bedanya 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 yang sangat maksimal.
Tampilkan Facebook dan Twitter Melayang Di Blog berikut ini ialah caranya:
1. Silakan anda login ke Akun Blogger Anda dan menuju ke 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" 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/NazarMursalin">Ikuti @Nazar Mursalin</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 dibawah postingan blog Anda 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 tersebut.
