CARA MEMBUAT POPS UP FACEBOOK LIKE DI BLOGGER MENGGUNAKAN JQUERY

Cara Membuat Pops Up Facebook Like pada Blogger Menggunakan Jquery - Pada kesempatan kali ini aku akan share mengenai cara membuat widget like Pops up Facebook. Widget ini bisa dijadikan patokan seberapa banyak pengguna Facebook yang menyukai tautan menurut blog anda, selain itu jua bisa menambah blog semakin manis. Setelah kemarin aku posting tentang cara membuat widget pops up langganan email yang cara pembuatannya hampir sama, pembuatan widget inipun terbilang gampang. Saya akan mengungkapkan secara jelas cara membuat widget like facebook ini. Apabila anda melakukan semua langkah yang saya share dengan benar maka tampilan widget tersebut akan misalnya 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 beragam 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 pada Blogger
1. Masuk ke akun Dashboard Blogger anda>> Template >> Edit HTML
2. Cari kode head> di template anda buat lebih mempermudah lakukan pencarian dengan klik Ctrl+ F
3. Paste kode ini dia sebelum / pada atas kode head> yang saya sebutkan diatas

   
    jQuery(document).ready(function()
    if (document.cookie.indexOf('visited=true') == -1)
    var setDays = 1000*60*60*24*7;
    var expires = new Date((new Date()).valueOf() + setDays);
    document.cookie = "visited=true;expires=" + expires.toutCString();
    $.colorbox(width:"400px", height:"430px", inline:true, href:"#facebook-popup");
    );

Catatan: * 7 Menetapkan nilai ini akan mensugesti refresh. Menetapkan LikeBox buat muncul sekali pada pengunjung dan LikeBox akan ada lagi selesainya 1 minggu adlah hal yg lebih baik. Gunakan pengaturan default misalnya yang aku tulis diatas.
4. Sekarang Cari ]]> b: skin>
5. Paste kode 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/AVvXsEiPJzv20nJ-YUkX6xW0ajzgfZgzqHpkmDyA3Kyc-YYK9RDpRXCsxlhhG9_XXoUU9wre2byLwrRZkelLGseXqoXYM7jR3Me0Gt0psoo2b3iAz1dfHIba5oJaUsQXni9oFpcza7JYQI1lXeAY/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(//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(//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/AVvXsEiXpuz137Ot1QheAx2rKNGtF0jdZGBTEzKf-RQEJFCPgM_RMevseoGpLgKMIZFxmyO96FRU7evORM4-d82jZhqjn_Okt1ruD2n8aiQfhfDpYyZ6AnOiETCEkf8dvW5Gi_VrK1WoaOL1-vUD/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 kode berikut body>
8. Paste kode berikut sebelum tag body>

 

   

   

Receive All Free Updates Via Facebook.

   

Ganti Sharetipsdancara menggunakan facebook fan halaman nama pengguna.
9. Simpan template Anda