Cara Membuat Pops Up Facebook Like di Blogger Menggunakan Jquery - Hallo sahabat trick terbaru, Pada Artikel yang anda baca kali ini dengan judul Cara Membuat Pops Up Facebook Like di Blogger Menggunakan Jquery, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Blogging, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Cara Membuat Pops Up Facebook Like di Blogger Menggunakan Jquery
link : Cara Membuat Pops Up Facebook Like di Blogger Menggunakan Jquery

Cara Membuat Pops Up Facebook Like di Blogger Menggunakan Jquery

Cara Membuat Pops Up Facebook Like di Blogger Menggunakan Jquery - Pada kesempatan kali ini saya akan share tentang cara membuat widget like Pops up Facebook. Widget ini bisa dijadikan patokan seberapa banyak pengguna Facebook yang menyukai tautan dari blog anda, selain itu juga bisa menambah blog semakin cantik. Setelah kemarin saya posting tentang cara membuat widget pops up langganan email yang cara pembuatannya hampir sama, pembuatan widget inipun terbilang mudah. Saya akan menjelaskan secara terperinci cara membuat widget like facebook ini. Jika anda melakukan semua langkah yang saya share dengan benar maka tampilan widget tersebut akan seperti 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 bermacam-macam 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 kode </ head> di template anda untuk lebih mempermudah lakukan pencarian dengan klik Ctrl+ F
3. Paste kode berikut ini sebelum / di atas kode </ 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 mempengaruhi refresh. Menetapkan LikeBox untuk muncul sekali kepada pengunjung dan LikeBox akan muncul lagi setelah 1 minggu adlah hal yang lebih baik. Gunakan pengaturan default seperti yang saya 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/AVvXsEiWPO2LDRmZ05e2P3iYtzKpAGqHcL5tETqEFz040EsvvcMyBHTLMwLpCXcyA7O129X7rVVUauI_4qQSoPxKQTGGg30XLBZvb6ApvNCfDBGwv9sBATG_e7t0DOovUJk9UtjHQHtHGI0V-OCt/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/AVvXsEhRUTbq6p6Q7gZc_OF32JfHP1Iuijn_Zp5zygR6LPDeCFz7_CZWGFm_pceapVN08q3pfQDZFks5vI3u6BQHhTiqepqNK_Tdll6G2fwRTmN3MTgzM2_sFXmjq6XSdmSxE7I_nAzXdYRSzzQ0/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>

 <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

Demikianlah Artikel Cara Membuat Pops Up Facebook Like di Blogger Menggunakan Jquery

Sekianlah artikel Cara Membuat Pops Up Facebook Like di Blogger Menggunakan Jquery kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Cara Membuat Pops Up Facebook Like di Blogger Menggunakan Jquery dengan alamat link http://trickterbaruagar.blogspot.com/2014/09/cara-membuat-pops-up-facebook-like-di.html

Tweet