Facebook Like Box Popup Blogger

Sebagian besar blog telah menerapkan kotak popup jquery pada blog mereka, entah itu formulir berlangganan (yang saya akan posting nanti) ataupun facebook seperti likebox. Ini bekerja ketika Anda mengunjungi sebuah blog dan tiba tiba akan muncul popup yang berupa Facebook likebox. Saya yakin ini adalah cara yang bagus untuk memaksa pengunjung blog Anda untuk berlangganan isi dari blog Anda.
Hari ini saya akan menunjukkan cara untuk menambahkan jquery Facebook likebox popup untuk blog Anda. Saya yakin anda akan menyukainya dan Saya akan berbagi widget ini yang saya peroleh dari MyBloggerTrik, dengan sedikit editing yang saya.

Menambahkan Facebook Likebox Popup!

1. Pergi ke Desain> Blogger.
2. Tambah Gadget dan pilih HTML / JavaScript.
3. Tambahkan kode berikut untuk didalam formnya. <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 generatedHTML. */ #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/AVvXsEhKEBvQY-5u5mjJvUKJYdN-OYs6eYqqX24dJQSarnf-cjUjFXIPytOdAi7ShM3sWuKGnIO6PJrRNLjL8xJRQcwYTG4EORITSYk7xa7cMN67NHn3WPFSJDFfHgmfb7vmXktY0Rglj3S0F18/s1600/controls.png) no-repeat 0 0;} #cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8_WtPdeEuoi22VfUawIr6yeiFqJgZ0y6yaEjYZkL_CnA96RSw8-wsR-hv67FO2liHzopc_RmiccekM8QcvE2q1tLRAS1Wrs2tI2BAGLWIZVUHogsqkSQ8De-qA9CB-OG3KAkx4HzrpcY/s400/border.png) repeat-x top left;} #cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKEBvQY-5u5mjJvUKJYdN-OYs6eYqqX24dJQSarnf-cjUjFXIPytOdAi7ShM3sWuKGnIO6PJrRNLjL8xJRQcwYTG4EORITSYk7xa7cMN67NHn3WPFSJDFfHgmfb7vmXktY0Rglj3S0F18/s1600/controls.png) no-repeat -36px 0;} #cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKEBvQY-5u5mjJvUKJYdN-OYs6eYqqX24dJQSarnf-cjUjFXIPytOdAi7ShM3sWuKGnIO6PJrRNLjL8xJRQcwYTG4EORITSYk7xa7cMN67NHn3WPFSJDFfHgmfb7vmXktY0Rglj3S0F18/s1600/controls.png) no-repeat 0 -32px;} #cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8_WtPdeEuoi22VfUawIr6yeiFqJgZ0y6yaEjYZkL_CnA96RSw8-wsR-hv67FO2liHzopc_RmiccekM8QcvE2q1tLRAS1Wrs2tI2BAGLWIZVUHogsqkSQ8De-qA9CB-OG3KAkx4HzrpcY/s400/border.png) repeat-x bottom left;} #cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKEBvQY-5u5mjJvUKJYdN-OYs6eYqqX24dJQSarnf-cjUjFXIPytOdAi7ShM3sWuKGnIO6PJrRNLjL8xJRQcwYTG4EORITSYk7xa7cMN67NHn3WPFSJDFfHgmfb7vmXktY0Rglj3S0F18/s1600/controls.png) no-repeat -36px -32px;} #cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKEBvQY-5u5mjJvUKJYdN-OYs6eYqqX24dJQSarnf-cjUjFXIPytOdAi7ShM3sWuKGnIO6PJrRNLjL8xJRQcwYTG4EORITSYk7xa7cMN67NHn3WPFSJDFfHgmfb7vmXktY0Rglj3S0F18/s1600/controls.png) repeat-y -175px 0;} #cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKEBvQY-5u5mjJvUKJYdN-OYs6eYqqX24dJQSarnf-cjUjFXIPytOdAi7ShM3sWuKGnIO6PJrRNLjL8xJRQcwYTG4EORITSYk7xa7cMN67NHn3WPFSJDFfHgmfb7vmXktY0Rglj3S0F18/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/AVvXsEj9nxaY0uo6kiSM-mJps1ouWCPNxPPpLSbXIk_DIv6jNJpLl1zZtSAo91Wz-DlUyOh7Nd5UDzMszDhsB6GnCvw3fXVzeDzkSRKm58Uz6J4xwpiFuQgI0XE3C4MbObxOhIKXeU6jtzTsB-w/s400/loadingbackground.png) no-repeat center center;} #cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuMBT2P_Iz06xdZGeXRPtADvr07X2zpcoedPqUTwItcvvaCOHK97EAIFE0fcCDccUal8ghnu82oh1_NkoE2vRWR90vCAoy9ccXcwslO5Rp6gVxYkVp7U46_8WHNpe7hW7__-BVA9M9XbY/s400/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/AVvXsEhKEBvQY-5u5mjJvUKJYdN-OYs6eYqqX24dJQSarnf-cjUjFXIPytOdAi7ShM3sWuKGnIO6PJrRNLjL8xJRQcwYTG4EORITSYk7xa7cMN67NHn3WPFSJDFfHgmfb7vmXktY0Rglj3S0F18/s1600/controls.png) no-repeat0px 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:-150px0px;} .cboxSlideshow_off#cboxSlideshow{background-position:-150px -25px; right:27px;} .cboxSlideshow_off#cboxSlideshow.hover{background-position:-125px0px;} /*-----------------------------------------------------------------------------------*/ /* 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: #2554C7; 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='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script> <script src="http://yourjavascript.com/2021211453/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; 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">Receive all updates via Facebook. Just Click the Like ButtonBelow<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%2Fbu-Ogle&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;" >By | <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://bu-ogle.blogspot.com">Blogger Widgets</a> via <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://bu-ogle.blogspot.com">BuOgle</a></p> </div> </div>
4. Silahkan disesuaikan dengan nilai Anda sendiri, Kemudian klik simpan dan selesai.

Jika Anda sudah memilikiscript jQuery di template anda, anda cukup menghapus code ini:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>

• Tweet

Judul: Facebook Like Box Popup Blogger
Rating: 100% based on 99998 ratings. 5 user reviews.
Ditulis Oleh De.Aripin 8:28 PM

Artikel Terkait Blogger, Blogging :