navigasi menu

Friday, February 21, 2014

Cara Menampilkan Facebook dan Twitter melayang di Blog

Caranya mudah banget .....
  1. Silakan anda login ke Akun Blogger Anda dan menuju dashboard
  2. Pilih Tata Letak / Layout
  3. Klik Add Widget dan Pilih Javascript / Kode HTML
  4. Masukan kode scrib di bawah ini
<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 Gabung ya Sob</a></center>
<center>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like-box href="https://www.facebook.com/Fatma.pasha" 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/Fatmaluxaz">Ikuti @Fatmaluxaz</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 yang anda miliki seperti :
  • Tulisan yang berwarna merah anda ganti sesukanya
  • Ganti huruf yang berwarna Biru dengan Akun Fans Page Facebook Anda
  • Ganti huruf yang berwarna Hijau dengan Akun Twitter Anda
6. Contoh tampilan dibawah ini
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, silakan dicoba !!!

No comments:

Post a Comment