Mungkin kamu sedang mencari cara membuat popup 100% responsive, dan saya pikir banyak sekali bertebaran tutorial tutorial cara membuat popup box fanspage Facebook kamu. Namun kamu belum menemukan yang cocok untuk diterapkan di blog kamu. Dan kamu putuskan sendiri, menurut saya pribadi bahwa penggunaan popup ini sangat mengganggu para pembaca blog kamu. Tapi jika kamu ingin meningkatkan like Facebook ini cocok dipakai.
Pada postingan ini saya akan share bagaimana cara membuat popup box untuk fanspage Facebook sukses 100% responsive di segala ukuran devices. Anda akan melihat demontrasinya yang sudah saya terapkan pada blog-blog saya. Tapi saya kasih contoh satu saja ya ... heeeee...
Sudah lihat demo nya... Nah sekarang ikuti step by step tutorial buat popup responsive nya.
Pertama silahkan kamu buka blog kamu blogger.com
Kemudian pilih "TEMA" atau dalam bahasa inggris "THEME"
Pilih "HTML"
Cari dan simpan code CSS dibawah ini diatas </head>
Kemudian simpan code dibawah ini diatas tag </head> juga
Cari dan simpan code dibawah ini letakan diatas </body>
Klik Simpan.
Dan coba lihat hasilnya.
Cukup mudah kan membuat popup box responsive di blogger. Jika ada pertanyaan silahkan tinggalkan di kolom komentar. Salam.....
Kamu suka cari blog-blog zombie, ini saya berikan cara mencari blog zombie dengan mudah.
Read more
 |
| Popup box responsive |
Pada postingan ini saya akan share bagaimana cara membuat popup box untuk fanspage Facebook sukses 100% responsive di segala ukuran devices. Anda akan melihat demontrasinya yang sudah saya terapkan pada blog-blog saya. Tapi saya kasih contoh satu saja ya ... heeeee...
Pertama silahkan kamu buka blog kamu blogger.com
Kemudian pilih "TEMA" atau dalam bahasa inggris "THEME"
Pilih "HTML"
Catatatan: Sebelum anda membuka tema editor ada baiknya kamu backup dahulu tema kamu sebelumnya.
Cari dan simpan code CSS dibawah ini diatas </head>
#aink-back{display:none;background:rgba(0,0,0,.8);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999}#aink-exit{width:100%;height:100%}.aink-box-inner{width:266px;position:relative;aink_gandaria:block;padding:20px 0 0;margin:0 auto;text-align:center}#aink-close{cursor:pointer;position:absolute;top:1px;right:-17px;font-size:18px;font-weight:700;color:#000;z-index:99999;aink_gandaria:inline-block;line-height:18px;height:18px;width:18px}#aink-close:hover{color:#06c}#aink-box{min-width:310px;min-height:240px;position:absolute;top:50%;left:50%;margin:-220px 0 0 -170px;-webkit-box-shadow:0 0 16px #000;-moz-box-shadow:0 0 16px #000;box-shadow:0 0 16px #000;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;background:#fff;max-height:253px}@media (max-width:380px){.aink_gandaria{position:fixed;top:50%;left:50%}#aink-box{min-width:310px;min-height:240px;transform:scale(.67);-webkit-transform:scale(.67);-o-transform:scale(.67);-ms-transform:scale(.67);-moz-transform:scale(.67)}.aink-box-inner{width:266px}#aink-close{right:-17px}}#aink-back iframe{transform:scale(.92);-webkit-transform:scale(.92);-o-transform:scale(.92);-ms-transform:scale(.92);-moz-transform:scale(.92);transform-origin:top left;-webkit-transform-origin:top left;-o-transform-origin:top left;-ms-transform-origin:top left;-moz-transform-origin:top left}
Tambahkan tag <style>.........code css........</style>Kemudian simpan code dibawah ini diatas tag </head> juga
<script type='text/javascript'>
//<![CDATA[
if (typeof(jQuery) == 'undefined') {document.write("<scr" + "ipt type=\"text/javascript\" src=\"//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js\"></scr" + "ipt>");}
//]]>
</script>
//<![CDATA[
if (typeof(jQuery) == 'undefined') {document.write("<scr" + "ipt type=\"text/javascript\" src=\"//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js\"></scr" + "ipt>");}
//]]>
</script>
Cari dan simpan code dibawah ini letakan diatas </body>
<script type='text/javascript'>
//<![CDATA[
//grab user's browser info and calculates/saves first visit
jQuery.cookie = function (key, value, options) { if (arguments.length > 1 && String(value) !== "[object Object]") { options = jQuery.extend({}, options); if (value === null || value === undefined) { options.expires = -1; }
if (typeof options.expires === 'number') { var days = options.expires, t = options.expires = new Date(); t.setDate(t.getDate() + days); } value = String(value); return (document.cookie = [encodeURIComponent(key), '=', options.raw ? value : encodeURIComponent(value), options.expires ? '; expires=' + options.expires.toUTCString() : '', options.path ? '; path=' + options.path : '', options.domain ? '; domain=' + options.domain : '', options.secure ? '; secure' : ''].join('')); }
options = value || {}; var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent; return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null; };
// the pop up actions
$(function ($) {
if ($.cookie('popup_fb') != 'yes') {
$('#aink-back').delay(400).fadeIn("fast"); // options slow or fast
$('#aink-close, #aink-exit').click(function () {
$('#aink-back').stop().fadeOut("fast"); // options slow or fast
});
}
//initiate popup function by setting up the cookie expiring time
$.cookie('popup_fb', 'yes', { path: '/', expires: 0 });
});
//]]>
</script>
<div class='aink_gandaria'>
<div id='aink-back'>
<div id='aink-exit'> </div>
<div id='aink-box'>
<div class='aink-box-inner'>
<div id='aink-close'>
<img src='https://upload.wikimedia.org/wikipedia/commons/4/44/Curation_bar_icon_close.png'/>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/NamaFanspageAnda/&width=290&height=275&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false' style='border: 0 none; overflow: hidden; width: 290px; height: 270px;text-align:center;margin:0 auto;'/>
</div>
</div>
</div>
</div>
Kemudian ganti huruf NamaFanspageAnda dengan Fanspage kamu.//<![CDATA[
//grab user's browser info and calculates/saves first visit
jQuery.cookie = function (key, value, options) { if (arguments.length > 1 && String(value) !== "[object Object]") { options = jQuery.extend({}, options); if (value === null || value === undefined) { options.expires = -1; }
if (typeof options.expires === 'number') { var days = options.expires, t = options.expires = new Date(); t.setDate(t.getDate() + days); } value = String(value); return (document.cookie = [encodeURIComponent(key), '=', options.raw ? value : encodeURIComponent(value), options.expires ? '; expires=' + options.expires.toUTCString() : '', options.path ? '; path=' + options.path : '', options.domain ? '; domain=' + options.domain : '', options.secure ? '; secure' : ''].join('')); }
options = value || {}; var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent; return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null; };
// the pop up actions
$(function ($) {
if ($.cookie('popup_fb') != 'yes') {
$('#aink-back').delay(400).fadeIn("fast"); // options slow or fast
$('#aink-close, #aink-exit').click(function () {
$('#aink-back').stop().fadeOut("fast"); // options slow or fast
});
}
//initiate popup function by setting up the cookie expiring time
$.cookie('popup_fb', 'yes', { path: '/', expires: 0 });
});
//]]>
</script>
<div class='aink_gandaria'>
<div id='aink-back'>
<div id='aink-exit'> </div>
<div id='aink-box'>
<div class='aink-box-inner'>
<div id='aink-close'>
<img src='https://upload.wikimedia.org/wikipedia/commons/4/44/Curation_bar_icon_close.png'/>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/NamaFanspageAnda/&width=290&height=275&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false' style='border: 0 none; overflow: hidden; width: 290px; height: 270px;text-align:center;margin:0 auto;'/>
</div>
</div>
</div>
</div>
Klik Simpan.
Dan coba lihat hasilnya.
Cukup mudah kan membuat popup box responsive di blogger. Jika ada pertanyaan silahkan tinggalkan di kolom komentar. Salam.....
Kamu suka cari blog-blog zombie, ini saya berikan cara mencari blog zombie dengan mudah.
