Tutorial Membuat widget likebox diblog

Tutorial Membuat Widget likebox diblog

Pertama tama marilah kita panjatkan puji syukur kehadirat allah SWT,yang telah melimpahkan karunianya. lah kok jadi pidato sih min :D gpp kan pembukaan wkwk

langsung aja copy 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: #ffffff;

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: #2015ff ;

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">Yang ngelike dan follow dapet pahala aminn</a></center>

<center>

<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/fathan.my.id&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=fathan_izzudin&amp;show_count=&amp; show_screen_name=&amp;text_color=" frameborder="0" scrolling="no"></iframe> </div>

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

<br />

<div style="text-align:center">

<span style="float:right; color: #ff15f4;">Get this <a target="_blank" href= "http://www.fathan.my.id/search/label/Kisah%2025%20Nabi/p/kisah-25-nabi.html"> Pergi Ke Blog </a></span>

</div>

</div>

<script type="text/javascript">

var gb = document.getElementById("gb");

gb.style.right = (50-gb.offsetWidth).toString() + "px";

</script>

Ket: 1. Untuk Yang Berwarna Merah isi dengan alamat url fanspage kamu

        2. Dan Yang Berwarna Kuning isi dengan id twittermu

sekian tutorial membuat widget likebox diblog.Semoga bermanfaat.

jangan lupa kunjung balik lagi ya.

Blog:http://www.fathan.my.id/