HOMECara Membuat Pops Up Facebook Like di Blogger Menggunakan Jquery
Posted on - 3:44:00 AM with No comments
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
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>
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>
Ganti Sharetipsdancara dengan facebook fan page nama pengguna.
9. Simpan template Anda
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('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"});
}});</script>
<script type='text/javascript'>
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"});
}});</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/AVvXsEiDQTolnMLb1J5r-GgMMT4CmpEXfrUbVpmZXI0iks7793iepmdso59X8iTbanynmkYu4SrqcWSojUmy8e-aOP-_HkIU9XNL7uRtir6hP7G4z4EPDVapqjVVkvL1xo_fYT_7fF_lCwHVV-xf/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/AVvXsEicUQr2x1OCuLQYFOBHebg8rnB9bwD-Dup70fiZOnW_7maDlym7HH_D68WZre410uImcoQsnEG0pfGP8XUYXgTHAGCpSPd37QR0DD14iaOZo7WmDpXMpnukcbluufU_XpLlj3XKk1r1Q3Da/s130/controls.png) no-repeat top center; width: 38px; height: 19px; text-indent: -9999px; }
#cboxClose:hover { background-position: bottom center; }
#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/AVvXsEiDQTolnMLb1J5r-GgMMT4CmpEXfrUbVpmZXI0iks7793iepmdso59X8iTbanynmkYu4SrqcWSojUmy8e-aOP-_HkIU9XNL7uRtir6hP7G4z4EPDVapqjVVkvL1xo_fYT_7fF_lCwHVV-xf/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/AVvXsEicUQr2x1OCuLQYFOBHebg8rnB9bwD-Dup70fiZOnW_7maDlym7HH_D68WZre410uImcoQsnEG0pfGP8XUYXgTHAGCpSPd37QR0DD14iaOZo7WmDpXMpnukcbluufU_XpLlj3XKk1r1Q3Da/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: 'Source Sans Pro', 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&width=342&height=300&show_faces=true&colorscheme=light&stream=false&show_border=false&header=false&appId=' style='border:none; overflow:hidden; width:342px; height:300px;'/>
</div>
</div>
</div>
<div id='facebook-popup' style='background:#fff;position:scroll;z-index:99999;'>
<div style='text-align:center;padding-top:15px'> <h3 style='font-family: 'Source Sans Pro', 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&width=342&height=300&show_faces=true&colorscheme=light&stream=false&show_border=false&header=false&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
Jika Anda menyukai Artikel di blog ini, Silahkan
klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips & Cara
 |
Artikel Terkait Dengan "Cara Membuat Pops Up Facebook Like di Blogger Menggunakan Jquery "
No comments:
Ketentuan Berkomentar:
1. Menautkan link aktif (anchor text) pada komentar secara otomatis akan kami hapus
2. Gunakan fasilitas Name/URL untuk menempatkan link anda
3. Dilarang berkomentar diluar topik artikel (SARA, pornography, provokasi,promosi produk)
4. Dilarang komentar spam
5. Berkomentarlah dengan baik dan sopan
6. Komentar yang tidak sesuai dengan poin diatas tidak akan dipublikasikan
Admin Tips & Cara