Cara Membuat Fanpage FB dan Twitter Melayang di Blog

Mungkin sobat blogger yang sudah berkecimpung di dunia blog pasti sudah tahu bagaimana cara membuat fanpage melayang di blog. Jadi, tips ini dishare bukan untuk para blogger yang sudah tahu ,tapi jika ingin tahu lagi tidak apa juga. :)

sebenarnya tipsnya ini dishare untuk orang-orang yang baru masuk ke dunia blogger dan bingung bagaimana cara membuat fanpage dan twitter melayang di blog.

untuk tidak memperlama, silahkan kamu langsung saja ikuti langkah-langkahnya :

1. Buka Dasbor Blog

2. Plih Tata Letak/ Layout

3. Klik HTML/Java Script

4. pastekan Kode Script Dibawah 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">Kalau Bermanfaat,Silahkan Dilke Ia</a></center>

<center>

<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/Kumpulansejarahdunia?ref=hl&amp;width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;appId=371524026202784" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe>

</center>

<!-- HTML End -->

<br/>

<div class="twitter">

<!-- Twitter --> <iframe title="" style="width: 250px; height: 20px;" class="twitterx-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351&amp; align=&amp;button=blue&amp;id=twitter_tweet_button_0&amp; lang=ID&amp;link_color=&amp;screen_name=kumpulansejarah&amp;show_count=&amp; show_screen_name=&amp;text_color=" frameborder="0" scrolling="no"></iframe> </div>

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

</div>

5. Silahkan Ganti Tulisan ini!
(NB : Editnya jangan sampai ada kode yang terhapus)

*yang berwarna merah: Tulisan atau pesannya
*yang berwarna biru : URL fanspage nya
*yang berwarna hijau: username twitternya, (misal @kumpulansejarah)

6.Save.
7.Cek Blog. Hasilnya nanti akan seperti gambar dibawah ini.