Cara pasang like box facebook di blog lengkap

Oleh agus

Saturday 17 January 2015

Bagikan :

Tweet

Bagaimana cara pasang like box facebook di blog?

Like box Facebook adalah kotak terdapat tombol like yang terhubung denga facebook fanspage yang kita miliki. Like box juga berisi para penggemar blog kita. Jika anda memasang facebook fans page di blog, makablog akan mendapatkan trafik yang lebih. Karena facebook fanspage merupakan cara yang cepat untuk mendapatkan penggemar blog kita.

Berikut contoh facebook fans page yang dimiliki oleh carawoles.blogspot.com. Jangan lupa like ya bro.

Cara pasang like box facebook di blog

Lalu bagaimana cara pasang like box facebook di blog? berikut langkah-langkah bagaimana cara memasang like box facebook di blog dengan sangat mudah.

• Pertama dan paling pertama sobat harus mempuyai halaman facebook atau facebook page untuk blog anda. Jika belum punya silahkan kesini: cara membuat halaman di facebook
• Jika sudah mempunyai halaman Silahkan sign in dulu ke facebook.com kemudian anda menuju http://developers.facebook.com/docs/reference/plugins/like-box/
• Masukkan URL facebook page anda di kolom pertama kemudian, lebar (width), tinggi (height), Pada colour scheme pilih jenis warna like box light atau dark. Lihat contoh berikut.

• Kemudian klik Get Code. Pilih dan copy semua code yang terdapat pada kolom HTML5, Copy code pertama dan kedua. Kemudian satukan. Lihat contoh gambar

• Untuk memasang di sidebar blog. Silahkan sign in di blogger.com. Kemudian klik Layout, apda side bar klik add a gadget. Kemudian cari HTML/Java Script lalu klik icon tambahkan. Lihat gambar.

• Kemudian copy dan paste kedua kode tadi dalam kolom yang besar kemudian beri judul Fans Page. Kemudian Save

Cara pasang like box facebook melayang di blog

Pasang like box facebook di blog - Memasang like box facebook di blog melayang merupakan cara yang paling bagus untuk dapatkan penggemar dengan cepat. Karena like box facebook akan otomatis muncul sebelum pembaca melihat blog kita. Like box facebook ini juga dilengkapi dengan tombol close di bawahnya. 

Lihat Demo

Ikuti langkah-langkah cara memasang like box facebook melayang di blog berikut ini:

• Sign in ke blogger.com dan buka blog anda. 
• Klik layout dan kemudian klik add a gadget. 
• Cari HTML/JavaScript lalu klik icon tambahkan. Isi kolom yang besar dengan code berikut ini

/* 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzYkh6DKIaOZ-0SzvvI8C-p7rNRybk40kdI3l__Rc0xgwFruVoPmzrYucnAqNSsjpiPeCwZZaluMg3zYTQ1Xh1G2xBN64or0vz5g7BLzVMgK0QDk0XF8wd3FeR5ItGWFvTrSI5KsoGAVWS/s1600/controls.png) no-repeat 0 0;} #cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvHzfLAfmc7GjyMZu9XfYxFKisAbkRPobsM3FDvEbtqGporlUZSWWoJQp0qT1VlQADqsTjbhrmItfWi7jbew46iy5OyFusAIexvJT1AIDT_oa94GHV8-Zl0S1788_WsP1lsrOByRsHMoNO/s1600/border.png) repeat-x top left;} #cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzYkh6DKIaOZ-0SzvvI8C-p7rNRybk40kdI3l__Rc0xgwFruVoPmzrYucnAqNSsjpiPeCwZZaluMg3zYTQ1Xh1G2xBN64or0vz5g7BLzVMgK0QDk0XF8wd3FeR5ItGWFvTrSI5KsoGAVWS/s1600/controls.png) no-repeat -36px 0;} #cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzYkh6DKIaOZ-0SzvvI8C-p7rNRybk40kdI3l__Rc0xgwFruVoPmzrYucnAqNSsjpiPeCwZZaluMg3zYTQ1Xh1G2xBN64or0vz5g7BLzVMgK0QDk0XF8wd3FeR5ItGWFvTrSI5KsoGAVWS/s1600/controls.png) no-repeat 0 -32px;} #cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvHzfLAfmc7GjyMZu9XfYxFKisAbkRPobsM3FDvEbtqGporlUZSWWoJQp0qT1VlQADqsTjbhrmItfWi7jbew46iy5OyFusAIexvJT1AIDT_oa94GHV8-Zl0S1788_WsP1lsrOByRsHMoNO/s1600/border.png) repeat-x bottom left;} #cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzYkh6DKIaOZ-0SzvvI8C-p7rNRybk40kdI3l__Rc0xgwFruVoPmzrYucnAqNSsjpiPeCwZZaluMg3zYTQ1Xh1G2xBN64or0vz5g7BLzVMgK0QDk0XF8wd3FeR5ItGWFvTrSI5KsoGAVWS/s1600/controls.png) no-repeat -36px -32px;} #cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzYkh6DKIaOZ-0SzvvI8C-p7rNRybk40kdI3l__Rc0xgwFruVoPmzrYucnAqNSsjpiPeCwZZaluMg3zYTQ1Xh1G2xBN64or0vz5g7BLzVMgK0QDk0XF8wd3FeR5ItGWFvTrSI5KsoGAVWS/s1600/controls.png) repeat-y -175px 0;} #cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzYkh6DKIaOZ-0SzvvI8C-p7rNRybk40kdI3l__Rc0xgwFruVoPmzrYucnAqNSsjpiPeCwZZaluMg3zYTQ1Xh1G2xBN64or0vz5g7BLzVMgK0QDk0XF8wd3FeR5ItGWFvTrSI5KsoGAVWS/s1600/controls.png) repeat-y -211px 0;} #cboxContent{background:#fff; overflow:visible;} #cboxLoadedContent{margin-bottom:5px;} #cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioD8CadB0xayr8qreMGgiW6ux3NIczL3Ki4eQ5mJoALURUACNSDn7cudwZ8Y-Svrr2ZV6Xb8sGKnWQabT4QyyD_5tTQ6cQ2otT9XeQiK0XMrQDywvE_ay1Ih5nf7_aplVZYlK9KqZneNeR/s1600/loading-background.png) no-repeat center center;} #cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh9wAJFtkdXvmttpzk3KoFfRZ4UNv9aENNK1pQbbvTMtNk_2g9WpKeoJF1Jw34joqnDKEQki3rX792vPgH_hsWJD74CV6rE_HTezmYlvj7KDfYOCxqMtmU2-SJE7z0ebAoc6fTZOBL6EhS/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzYkh6DKIaOZ-0SzvvI8C-p7rNRybk40kdI3l__Rc0xgwFruVoPmzrYucnAqNSsjpiPeCwZZaluMg3zYTQ1Xh1G2xBN64or0vz5g7BLzVMgK0QDk0XF8wd3FeR5ItGWFvTrSI5KsoGAVWS/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 carawoles.blogspot.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%2Fcarawoles&width=300&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false&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>

• Penting..! Silahkan ganti tulisan "Klik LIKE Untuk Dapatkan Update Informasi Terbaru carawoles.blogspot.com dengan kalimat yang anda inginkan. Kemudian ganti tulisan yang warna carawoles dengan nama fanspage sobat. Misalnya https://www.facebook.com/carawoles maka saya mengantinya dengan carawoles. Kemudian save.

Demikian cara pasang like box facebook di blog semoga bermanfaat

Tag : Tutorial blog