Cara Menciptakan Pops Up Facebook Like Di Blogger Memakai Jquery

Cara Membuat Pops Up Facebook Like di Blogger Menggunakan Jquery - Pada kesempatan kali ini saya akan share ihwal cara menciptakan widget like Pops up Facebook. Widget ini dapat dijadikan patokan seberapa banyak pengguna Facebook yang menyukai tautan dari blog anda, selain itu juga dapat menambah blog semakin cantik. Setelah kemarin saya posting ihwal cara menciptakan widget pops up langganan email yang cara pembuatannya hampir sama, pembuatan widget inipun terbilang mudah. Saya akan menjelaskan secara terperinci cara menciptakan widget like facebook ini. Jika anda melaksanakan semua langkah yang saya share dengan benar maka tampilan widget tersebut akan menyerupai gambar dibawah ini:

Baca Juga widget artikel terkait lainnya:
- Membuat navigasi no urut halaman
- Membuat search box keren
- Membuat Widget Paypal Donation 
- Membuat widget Pagerank
- Membuat majemuk popular post
- Membuat widget Alexa rank terbaru
- Membuat Menubar Navigasi tanpa edit HTML
- Membuat Floating RSS langganan Email

Cara Membuat FB fans like pops up di Blogger

1. Masuk ke akun Dashboard Blogger anda>> Template >> Edit HTML
2. Cari aba-aba </ head> di template anda untuk lebih mempermudah lakukan pencarian dengan klik Ctrl+ F
3. Paste aba-aba berikut ini sebelum / di atas aba-aba </ head> yang saya sebutkan diatas

    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script><script src='http://yourjavascript.com/69231961363/jquery-colorbox-min.js' type='text/javascript'/>
    <script type='text/javascript'>
    jQuery(document).ready(function(){
    if (document.cookie.indexOf(&#39;visited=true&#39;) == -1) {
    var setDays = 1000*60*60*24*7;
    var expires = new Date((new Date()).valueOf() + setDays);
    document.cookie = &quot;visited=true;expires=&quot; + expires.toUTCString();
    $.colorbox({width:&quot;400px&quot;, height:&quot;430px&quot;, inline:true, href:&quot;#facebook-popup&quot;});
    }});</script>

Catatan: * 7 Menetapkan nilai ini akan mensugesti refresh. Menetapkan LikeBox untuk muncul sekali kepada pengunjung dan LikeBox akan muncul lagi sesudah 1 ahad adlah hal yang lebih baik. Gunakan pengaturan default menyerupai yang saya tulis diatas.

4. Sekarang Cari ]]></ b: skin>
5. Paste aba-aba berikut sebelum css di atas ]]></ b: skin>

 /* 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; -webkit-overflow-scrolling: touch; }
#cboxTitle { margin: 0; }
#cboxLoadingOverlay, #cboxLoadingGraphic { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow { cursor: pointer; } .cboxPhoto { float: left; margin: auto; border: 0; display: block; max-width: none; -ms-interpolation-mode: bicubic; } .cboxIframe { width: 100%; height: 100%; display: block; border: 0; }
#colorbox, #cboxContent, #cboxLoadedContent { box-sizing: content-box; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; }
/* User Style: Change the following styles to modify the appearance of Colorbox. They are ordered and tabbed in a way that represents the nesting of the generated HTML. */
#cboxOverlay { background: #000; }
#colorbox { outline: 0; } #cboxContent { margin-top: 20px; background: #000; }
.cboxIframe { background: #fff; } #cboxError { padding: 50px; border: 1px solid #ccc; }
#cboxLoadedContent { border: 5px solid #123D60; background: #fff; box-shadow: 3px 3px 3px #fff; } #cboxTitle { position: absolute; top: -20px; left: 0; color: #ccc; }
#cboxCurrent { position: absolute; top: -20px; right: 0px; color: #ccc; }
#cboxLoadingGraphic { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2VFkmfcHgRGoqEtRpVqwQ80B3GbYkBbASVcdDorqizP8JgL8oz7lUt7F95Fki10J7BerudHuIIIsTDVHsON3TNheIzg7r9NQECHevuP442vYND-MJLJePIC0PzoA0iB1yGYjx4HDQ5IEZ/s32/loading.gif) no-repeat center center; }
/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose { border: 0; padding: 0; margin: 0; overflow: visible; width: auto; background: none; }
/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active { outline: none; }
#cboxSlideshow { position: absolute; top: -20px; right: 90px; color: #fff; }
#cboxPrevious { position: absolute; top: 50%; left: 5px; margin-top: -32px; background: url(https://sites.google.com/site/techprevue/home/controls.png) no-repeat top left; width: 28px; height: 65px; text-indent: -9999px; }
#cboxPrevious:hover { background-position: bottom left; } #cboxNext { position: absolute; top: 50%; right: 5px; margin-top: -32px; background: u(https://sites.google.com/site/techprevue/home/controls.png) no-repeat top right; width: 28px; height: 65px; text-indent: -9999px; }
#cboxNext:hover { background-position: bottom right; } #cboxClose { position: absolute; top: 5px; right: 5px; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKK_ZUPS21ty-9611uyzrCHJl5B-AKgsNkS00dXp3WJXBNj5BKr_VV-SjrjyqEXE2SQ9LRxtKfypgHp-FKeNgDh05tAoBuNczpZHolzHONrgTl4xrGFiiwUjcrQIpB0YloZ52Vg0Ms9Ghy/s130/controls.png) no-repeat top center; width: 38px; height: 19px; text-indent: -9999px; }
#cboxClose:hover { background-position: bottom center; }

6. Simpan template Anda dan tinggal dua langkah terakhir! Kunjungi blog Anda untuk melihatnya bekerja sempurna.
7. Temukan aba-aba berikut </ body>
8. Paste aba-aba berikut sebelum tag </ body>

 <div style='display:none'>
    <div id='facebook-popup' style='background:#fff;position:scroll;z-index:99999;'>
    <div style='text-align:center;padding-top:15px'> <h3 style='font-family: &apos;Source Sans Pro&apos;, Sans Serif; Font-size: 18px; font-weight: 300px; '>Receive All Free Updates Via Facebook.</h3>
    <iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FSharetipsdancara&amp;width=342&amp;height=300&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;show_border=false&amp;header=false&amp;appId=' style='border:none; overflow:hidden; width:342px; height:300px;'/>
      </div>
      </div>
        </div>

Ganti Sharetipsdancara dengan facebook fan page nama pengguna.

9. Simpan template Anda

Share this post