Scairelys

*keterangan :
- Import blog : Alat untuk merestore blog / artikel blog
- Ekspor blog : Alat untuk membackup blog / artikel blog
- Delete blog : Ya pasti untuk menghapus blog

#headline {
z-index: 1000;
border-radius: 15px;
position: fixed;
width: 375px;
height: 130px;
background: rgba(41, 41, 43, 0.77);
border: 5px solid #f03;
color:#fff;
top: 100px;
right: -335px;
-webkit-transition:1s;
-moz-transition:1s;
-o-transition:1s;
-ms-transition:1s;
}
#headline:hover{
z-index: 1000;
border-radius: 15px;
position: fixed;
width: 375px;
height: 130px;
background: rgba(41, 41, 43, 0.77);
border: 5px solid #f03;
top: 100px;
right: 0px;
-webkit-transition:0.5s;
-moz-transition:0.5s;
-o-transition:0.5s;
-ms-transition:0.5s;
}
#headline h2{
font-family: cursive;
letter-spacing:1.5pt;
height: 10px;
width: 210px;
margin-bottom: 0px;
margin-left: -90px;
color:#fff;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
font-size: 14pt;
}
#headline li a:visited{color:#fff;}
#headline li{margin-bottom: 4px;
margin-left: 50px;
border-bottom: 1px dotted #f03;
padding: 0 0 0px 9px;
font-family: cursive;
}

Dan ini HTMLnya taro diatas </body>

<div id='headline'>
<h2>Headline</h2>
    <ul><li><a href='http://galpock.blogspot.com/2013/04/cara-mengetahui-posisi-seseorang-lewat.html'>Cara Mengetahui Posisi Seseorang Lewat Nomor HP</a></li>
<li><a href='http://galpock.blogspot.com/2013/04/cara-memasang-pika-billing.html'>Cara Memasang Pika Billing</a></li>
<li><a href='http://galpock.blogspot.com/2013/06/cara-transfer-uang-tanpa-punya-rekening.html'>Cara Transfer Uang Tanpa Punya Rekening Bank</a></li>
<li><a href='http://galpock.blogspot.com/2013/07/cara-mudah-mengedit-template-blog.html'>Cara Mudah Mengedit Template Blog</a></li>
<li><a href='http://galpock.blogspot.com/2013/06/cara-membuat-blog-seo-100-di-chkme.html'>Cara Membuat Blog SEO 100% Di Chkme</a></li>
</ul>

</div>

*Note :Warna biru : Url postingan yang dituju
Warna merah : Kata kata yang tampil dalam headline tersebut

Nah udah dulu ya cuma segini doang yang bisa saya posting dan demonya bisa diliat diblog ini atau di SINI

Ingat kalau mau copas dikasih sumbernya

Halo sobat .__. udah tau kan gw mau share apa? noh diatas ada :v kalo yg ga tau kebangetan :v :v lagian nih juga kayanya udah pada tau cara bikinnya :3 , udah ah langsung aja

<style type='text/css'>
/* Message Box */
#box-message {
position:fixed !important;
position:absolute;
z-index:999999999;
top:-1000px;
left:50%;
margin:0px 0px 0px -182px;
width:300px;
height:auto;
padding:16px;
background:#222; // Edit untuk mengganti warna backgroundnya .
font:normal Dosis, Georgia, Serif;
color:#fff;
border:3px solid #ff0030; // Edit untuk mengganti warna garis tepi widget .
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:#222; // Edit untuk mengganti warna backgroundnya closenya .
font:bold 16px Arial, Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#fff;
border:2px solid #ff0030; // Edit untuk mengganti warna garis tepi tombol close .
box-shadow: 0 00 5px #FF0000;
-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 src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(window).bind(&quot;load&quot;, function() {
// Animate Top Value When Page Loaded Completed
$(&#39;#box-message&#39;).animate({top:&quot;50px&quot;}, 1000);
// Remove Mailbox When Close Button On Click
$(&#39;a.close&#39;).click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='box-message'>
<!-- HTML Start -->
<center><a class='murub'>Tulisan yang muncul</a></center>
<center>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/pages/Scairelys/404630929641851&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' style='border:none;
overflow:hidden; width:292px; height:258px;'/>
</center>
<!-- HTML End -->
<br/>
<div class='twitter'>
<!-- Twitter --> <iframe class='twitterx-follow-button' frameborder='0' scrolling='no' 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=scuiszz&amp;show_count=&amp; show_screen_name=&amp;text_color=' style='width: 250px; height: 20px;' title=''/> </div>
<a class='close' href='#'>x</a>
</div>

4. Simpan template

Bisa lihat demonya DISINI

Keterangan :
- Warna merah = url fanspage
- Warna biru = teks yang akan muncul diwidget
- Warna hijau = username twitter ( tanpa pake @ )

Nah itulah Cara Membuat Like Box Fanspage Melayang Di Blog jika ada yang mau ditanyakan silakan berkomentar

Sumber scriptnya : kamar-rofie.blogspot.com