Saturday, March 3, 2012

Membuat Popup Likebok Facebook Dengan JQuery Untuk Blog











Ketika saya sedang main di rumah paman eh saya lihat Poup Likebok Facebook alias likebok facebook melayang ketika pengunjung masuk ke web atau blog kita, saya jadi tertarik dengan itu dan saya ingin berbagi dengan teman-teman semua terutama pengunjung setia blog urang sunda ini. Namun kode ini saya edit sedikit menambahkan berlangganan lewat rss ped lewat email. langsung saja yah kita bahas ke topik.



Masuk atau login ke akun blog sobat
Dari dasbor klik rancangan terus klik tambag gadget => html/ javascript
Dan selanjutnya simpan kode di bawah ini. Maf sob kodenya lumayan panjang.



<style>
    /* Jquery Facebook Likebox Popup  by THEANT    http://theant-budiana.blogspot.com 
    */ 
    #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/AVvXsEgOb6NEnGdvawn6sG33YaJ5DHoibGwD1R8YVZJMOfnfF18LSEgq10Q-QjJ_i2S3K2Ru1JiD1s9xXPlUcKoOzsFcZWI_DtxzwWJocLxVIneexb54cmiBgcDII9xJTVFA0V-KwO1W0QcTVKg/s1600/controls.png) no-repeat 0 0;} 
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIrQcai4QqEIo6S7dUYEwN6BZm0pWpo4rh_1Vmvt5QVhuAAnjadAfTYPi_2keBaeZHit0Iy34V_gkAIzLe85_pvP8d_fJRt5ATQhWUYks6Udafurdd0JQAS11o3dbb7PTAo_PreGSuBWQ/s400/border.png) repeat-x top left;} 
    #cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOb6NEnGdvawn6sG33YaJ5DHoibGwD1R8YVZJMOfnfF18LSEgq10Q-QjJ_i2S3K2Ru1JiD1s9xXPlUcKoOzsFcZWI_DtxzwWJocLxVIneexb54cmiBgcDII9xJTVFA0V-KwO1W0QcTVKg/s1600/controls.png) no-repeat -36px 0;} 
    #cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOb6NEnGdvawn6sG33YaJ5DHoibGwD1R8YVZJMOfnfF18LSEgq10Q-QjJ_i2S3K2Ru1JiD1s9xXPlUcKoOzsFcZWI_DtxzwWJocLxVIneexb54cmiBgcDII9xJTVFA0V-KwO1W0QcTVKg/s1600/controls.png) no-repeat 0 -32px;} 
    #cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIrQcai4QqEIo6S7dUYEwN6BZm0pWpo4rh_1Vmvt5QVhuAAnjadAfTYPi_2keBaeZHit0Iy34V_gkAIzLe85_pvP8d_fJRt5ATQhWUYks6Udafurdd0JQAS11o3dbb7PTAo_PreGSuBWQ/s400/border.png) repeat-x bottom left;} 
    #cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOb6NEnGdvawn6sG33YaJ5DHoibGwD1R8YVZJMOfnfF18LSEgq10Q-QjJ_i2S3K2Ru1JiD1s9xXPlUcKoOzsFcZWI_DtxzwWJocLxVIneexb54cmiBgcDII9xJTVFA0V-KwO1W0QcTVKg/s1600/controls.png) no-repeat -36px -32px;} 
    #cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOb6NEnGdvawn6sG33YaJ5DHoibGwD1R8YVZJMOfnfF18LSEgq10Q-QjJ_i2S3K2Ru1JiD1s9xXPlUcKoOzsFcZWI_DtxzwWJocLxVIneexb54cmiBgcDII9xJTVFA0V-KwO1W0QcTVKg/s1600/controls.png) repeat-y -175px 0;} 
    #cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOb6NEnGdvawn6sG33YaJ5DHoibGwD1R8YVZJMOfnfF18LSEgq10Q-QjJ_i2S3K2Ru1JiD1s9xXPlUcKoOzsFcZWI_DtxzwWJocLxVIneexb54cmiBgcDII9xJTVFA0V-KwO1W0QcTVKg/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/AVvXsEhpN1_Sp8WTOf69DwiFTE_npqtrESe5J2atGoaylJa_rcW27x9oDCrPH1uQQL5N0r7fFt_1_NVyGLpIEco9iDv2PJV_TLShB3c8CM3nuA0fmsprH_S5-Hh4xji-eSx58kKLog7yr8uk7z4/s400/loadingbackground.png) no-repeat center center;} 
        #cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKU5Fo32DuHEN43dlhEWRm3AdlNux74D_t8HcUlPjVVpEci9nvMzI1dJ8Zar864bw3s81goMPEttP8tGVVxS1I31S7ZEV6JCs7JgPN3E0euH6GWy1OOEG-tb9vBooS6IQKRrx7rLaM0Uw/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/AVvXsEgOb6NEnGdvawn6sG33YaJ5DHoibGwD1R8YVZJMOfnfF18LSEgq10Q-QjJ_i2S3K2Ru1JiD1s9xXPlUcKoOzsFcZWI_DtxzwWJocLxVIneexb54cmiBgcDII9xJTVFA0V-KwO1W0QcTVKg/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: #F66303; 
       font-size: 18px !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; 
    }
/* ---------THEANT Subscribe Form---------- */
    .box-title1 { 
    border:1px solid #ddd; 
    -moz-border-radius:6px; 
    -webkit-border-radius:6px; 
    border-radius:6px; 
    box-shadow: 5px 5px 5px #CCCCCC; 
        padding:10px; 
  margin: 10px 0; 
    }
    .enteryouremail{ 
background: #fff !important;
border: 1px solid #d2d2d2; 
padding: 0px 8px 0px 8px; 
color: #a19999; font-size: 12px; 
height: 25px; width: 165px; 
border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
margin:0px; 
}
    .submitbutton{ 
background:#F66303; 
border: 1px solid #F66303; 
text-shadow: 1px 1px 1px #333; 
box-shadow: 3px 3px 3px #666; 
font:bold 12px Arial, sans-serif; 
color: #fff; 
height: 25px; 
padding: 0 12px 0 12px; 
margin: 0 0 0 5px; 
border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
cursor:pointer;}
    </style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script> 
<script src="http://mybloggertricks.googlecode.com/files/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> 
  
  
        <div style='display:none'> 
       <div id='subscribe' style='padding:10px; background:#fff;'> 
            <h3 class="box-title"> Menerima semua pembaruan melalui Facebook.Hanya Klik Tombol Like Di bawah <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%2Ftheants.blog&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> 
<div class="box-title1 ">
<center> 
<h3 style="color:#F66303;"> Anda juga dapat menerima artikel lewat Email Gratis: </h3> 
    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bdXld', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="enteryouremail" name="email" value="Enter your email here..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="bdXld" name="uri" type="hidden" /><input value="Submit" class="submitbutton" type="submit" /></form>
</center> 
</div>
<!--Please Do not Remove the Credits --> 
    <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.theant-budiana.com">Blogger Widgets</a></p> 
    </div> 
    </div>
Catatan :
Ganti tulisan yang saya blok merah pada kode di atas dengan nama pengguna halaman facebook anda biasanya seperti ini punya saya http://www.facebook.com/theants.blog ambil dari akhiran url-nya.
Lihat lagi pada kode di atas sobat bisa lihat kode yang saya blok kuning itu adalah akhiran judul fed anda liahat url rss fed punya saya http://feeds.feedburner.com/blogspot/bdXld ambil dari akhiran url-nya.
Kode di atas saya rancang khusus alias akan tampil satu kali kepada pengunjung dan akan tampil lagi sebulan kemudian dan jika anda ingin mengubahnya menjadi satuminggu sekali sobat ganti tulisan yang saya blok biru *30 menjadi *7 dan kalo sobat ingin menampilkan tiap hari sobat ganti menjadi *1 catatan penting jika sobat menampilkan terlalu sering akan membuat pengunjung setia blog kita kesal dengan adanya popup tersebut.

Cukup sampai disini dulu postingan mengenai bagaimana membuat popup likebok facebook dan rss fed dengan jquery untuk blog atau cara membuat likebok facebook tampil melayang dan muncul ketika blog di buka. Jika sobat ingin mempostingkannya di blog sobat silahkan, asalkan cantumkan sumber halaman ini terimakasih atas penghargaan terhadap tulisan saya.
Theant Budiana

About the Guest Author:
Saya bukanlah orang yang ahli dalam dunia blogger tapi saya mencoba untuk berbagi ilmu dari apa yang saya ketahui dari paman saya, saya sangat suka blogging dan berbagi ilmu, tapi bukan berarti saya master blog salah besar jika sobat anggap saya hebat saya hanya seorang anak kampung yang mencoba untuk tidak kampungan dan tertinggal informasi alias GAPTEK, banyak artikel yang saya tulis di Blog Urang Sunda dan lihat juga blog saya satu lagi di Dunia Maya Saya dan klik disini untuk mengetahui lebih lanjut tentang saya


Kindly Bookmark this Post using your favorite Bookmarking service:
Technorati Digg This Stumble Stumble Facebook Twitter
warning

Anda bingung?
Jangan ragu untuk bertanya kepada saya lewat komentar di bawah, saya akan mencoba menjawabnya sesegera mungkin, bahkan jika sobat ada saran untuk saya silahkan jangan ragu untuk memberi saran kepada saya asalkan komentar no spam. Komentar anda, adalah bekal untuk kemajuan blog saya, saya akan kunjungi balik blog sobat jika sobat meninggalkan jejak sobat disini.

0 comments:

Comments
0 Comments
Facebook Comments Post by Blog Urang Sunda

Post a Comment

Sponsor BUS

Dapatkan juga sponsor untuk Blog anda dengan klik gambar di bawah, untuk mengetahui caranya KLIK DISINI. Kalo mau yang lebih tinggi penghasilannya KLIK DISINI Adsense Indonesia

Buat Blog

Alexa Rank

 

Info My Blog

cobi?
Yahoo bot last visit powered by MyPagerank.NetMsn bot last visit powered by MyPagerank.Net
Google PageRank Checker Powered by  MyPagerank.Net
SEO Stats powered by MyPagerank.Net
web log free

Recent Comment

| BLOG URANG SUNDA © 2009. All Rights Reserved | Template Style by My Blogger Tricks .com | Design by Brian Gardner | Back To Top |