Cara Membuat Like Box Facebook Melayang Di Blog

 Blog, Tutorial

Selamat malam sobat Caritahu. Postingan kali ini akan membahas mengenai Cara Membuat Like Box Facebook Melayang di Blog. Sobat bisa lihat contohnya di bawah ini :

Cara memasang like box Facebook melayang di blog
Cara memasang like box Facebook melayang di blog

1. Login ke akun Blogger sobat.
2. Masuk ke TATA LETAK lalu klik ADD A GADGET (Tambahkan Gadget) dan pilih HTML/JAVASCRIPT.
3. Setelah itu, copy dan pastekan kode berikut di dalam HTML/Javascript sobat :

<style>
/* ColorBox Core Style: The following CSS is consistent between example themes and should not be altered. */
#colorbox,
#cboxOverlay,
#cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;} #cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft,
#cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay,
#cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious,
#cboxNext, #cboxClose,
#cboxSlideshow{cursor:pointer;} .cboxPhoto{float:left; margin:auto; border:0; display:block;} .cboxIframe{width:100%; height:100%; display:block; border:0;}

/* User Style: Change the following styles to modify the appearance of ColorBox. They are ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;opacity:0.5 !important;}
#colorbox{
box-shadow:0 0 15px rgba(0,0,0,0.4);
-moz-box-shadow:0 0 15px rgba(0,0,0,0.4);
-webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);
}
#cboxTopLeft{width:14px; height:14px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) no-repeat 0 0;} #cboxTopCenter{height:14px; background:url(http://1.bp.blogspot.com/-TcJGMnSfOCY/TxrtzzHDLVI/AAAAAAAAFWc/mdndgrisRuA/s1600/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) no-repeat -36px 0;} #cboxBottomLeft{width:14px; height:43px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) no-repeat 0 -32px;} #cboxBottomCenter{height:43px; background:url(http://1.bp.blogspot.com/-TcJGMnSfOCY/TxrtzzHDLVI/AAAAAAAAFWc/mdndgrisRuA/s1600/border.png) repeat-x bottom left;} #cboxBottomRight{width:14px; height:43px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) no-repeat -36px -32px;} #cboxMiddleLeft{width:14px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) repeat-y -211px 0;}
#cboxContent{background:#fff; overflow:visible;}
#cboxLoadedContent{margin-bottom:5px;}
#cboxLoadingOverlay{background:url(http://1.bp.blogspot.com/-PPvu-446sn4/Txrt1QsGH1I/AAAAAAAAFWw/_jWYVoR1HX8/s1600/loading-background.png) no-repeat center center;} #cboxLoadingGraphic{background:url(http://1.bp.blogspot.com/-31strss_1-E/Txrt1J6NThI/AAAAAAAAFWo/4P12CJPj924/s1600/loading.gif) no-repeat center center;} #cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;} #cboxPrevious, #cboxNext, #cboxClose,
#cboxSlideshow{position:absolute; bottom:-29px;
background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) no-repeat 0px 0px;
width:23px; height:23px; text-indent:-9999px;}
#cboxPrevious{left:0px; background-position: -51px -25px;}
#cboxPrevious.hover{background-position:-51px 0px;}
#cboxNext{left:27px; background-position:-75px -25px;}
#cboxNext.hover{background-position:-75px 0px;}
#cboxClose{right:0; background-position:-100px -25px;}
#cboxClose.hover{background-position:-100px 0px;} .cboxSlideshow_on
#cboxSlideshow{background-position:-125px 0px; right:27px;} .cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;} .cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;} .cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}
/*———————————————————————————–*/
 /* Facebook Likebox popup For Blogger /*———————————————————————————–*/
#subscribe {
font: 12px/1.2 Arial,Helvetica,san-serif; color:#666; }
#subscribe a,
#subscribe a:hover,
#subscribe a:visited { text-decoration:none;
}
.box-title {
color: #3B5998; font-size: 20px !important;
font-weight: bold; margin: 10px 0; border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px; box-shadow: 5px 5px 5px #CCCCCC;
padding:10px; line-height:25px; font-family:arial !important; }
 .box-tagline { color: #999; margin: 0; text-align: center;
}
#subs-container { padding: 35px 0 30px 0; position: relative; } a:link, a:visited { border:none; } .demo { display:none; } </style>
<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js’></script>
<script src=”http://yourjavascript.com/11215013191/jquery.colorbox-min.js”></script>
<script type=”text/javascript”> jQuery(document).ready(function(){ if (document.cookie.indexOf(‘visited=true’) == -1) { var fifteenDays = 1000*60*60*24*30; var expires = new Date((new Date()).valueOf() + fifteenDays); document.cookie = “visited=true;expires=” + expires.toUTCString(); $.colorbox({width:”400px”, inline:true, href:”#subscribe”}); } }); </script> <!– This contains the hidden content for inline calls –>
<div style=’display:none’> <div id=’subscribe’ style=’padding:10px; background:#fff;’> <h3 class=”box-title”>Klik LIKE Untuk Dapatkan Update Informasi Terbaru Caritahu.com<center><p style=”line-height:3px;” >▼</p></center></h3> <center> <iframe src=”//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FCaritahucom&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258″ scrolling=”no” frameborder=”0″ style=”border:none; overflow:hidden; width:300px; height:258px;” allowtransparency=”true”></iframe>
 </center>
<p style=” float:right; margin-right:35px; font-size:9px;” >Powered By | <a style=” font-size:9px; color:#3B78CD; text-decoration:none;” href=”http://www.spiceupyourblog.com”>Blog Gadgets</a> Via <a style=” font-size:9px; color:#3B78CD; text-decoration:none;” href=”http://www.mybloggertricks.com”>Blogger Widgets</a></p>
</div>
</div>

4. Ubah kode berwarna Merah dengan pesan sobat dan kode warna Biru dengan nama fan page sobat. Ambil nama belakang saja seperti https://www.facebook.com/Caritahucom, cukup diambil Caritahucom dan ganti kode warna biru tersebut.

5 Setelah itu SIMPAN TEMPLATE dan lihat hasilnya.

                                                                              * * * * * * * *

Sumber kode :Idseoblog

Related Posts

2 Responses

  1. Agus DaudJan 19, 2015 at 4:08 amReply

    makasih infonya, langsung buat nih

  2. Apotek Herbal ACE MAXSApr 11, 2015 at 2:46 amReply

    makasih banyak buat infonya…

    http://goo.gl/YlMLud

Leave a Reply