Cara Membuat Facebook Pop Up Responsive di Desktop dan Smartphone ~ Secercah Ilmu

Pada postingan kali ini admin ingin berbagi ilmu mengenai cara membuat fanspage facebook melayang di blog pada saat loading/dijalankan.

cara membuat facebook pop responsive di desktop dan smartphone

Barangkali sudah banyak yang share tutorial ini, walaupun begitu admin juga ingin share ilmu tentang turial ini, semoga bermanfaat bagi rekan-rekan sekalian.

Pada tutorial ini admin ingin membuat sebuah tampilan facebook pop yang simple seperti gambar diatas. Awalnya tutorial ini admin dapatkan dari sebuah blog yaitu https://mastamvan.blogspot.co.id/. Dari sekian banyak blog yang telah admin surfing, tutorial pada blog ini lah yang akhirnya memberikan solusi yang sangat responsive.

Untuk hasilnya rekan-rekan bisa check di:

https://romansahidupku.blogspot.com/

Cara Membuat Pop Up Responsive di Blog

1.Silahkan login ke Blogger.com

2.Pilih menu Tema/Template > Klik Edit HTML > Lalu cari kode </body>

3.Selanjutnya, masuk di halaman edit HTML lalu cari kode </body> menggunakan CTRL+F dan pastekan kode dibawah ini tepat diatas </body>.

//<![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') {

$('#tamvan-back').delay(400).fadeIn("fast"); // options slow or fast

$('#tamvan-close, #tamvan-exit').click(function () {

$('#tamvan-back').stop().fadeOut("fast"); // options slow or fast

});

}

//initiate popup function by setting up the cookie expiring time

$.cookie('popup_fb', 'yes', { path: '/', expires: 5 });

});

//]]>

</script>

</div>

</div>

</body>

Ingat!!!

(1)Silahkan ganti kode https://www.facebook.com/Romansa-Puisi-1403876916390564/ ini dengan URL Fanspage facebook kalian.

(2)Jika kalian ingin disetiap membuka halaman blog muncul pop up facebook silahkan ganti kode expires: 5 menjadi expires: 0. Tapi admin sarankan sebaiknya tetap menggunakan expires: 5 agar tidak mengganggu kenyamanan pengunjung di blog kita.

4.Selanjutnya masih dihalaman edit HTML, copy dan pastekan lah kode berikut ini tepat diatas </head>.

#tamvan-back{display:none;background:rgba(0,0,0,0.8);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999}

#tamvan-exit{width:100%;height:100%}

.tamvan-box-inner{width:266px;position:relative;mas_tamvan:block;padding:20px 0 0;margin:0 auto;text-align:center}

#tamvan-close{cursor:pointer;position:absolute;top:1px;right:-17px;font-size:18px;font-weight:700;color:#000;z-index:99999;mas_tamvan:inline-block;line-height:18px;height:18px;width:18px}

#tamvan-close:hover{color:#06c}

#tamvan-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){.mas_tamvan{position:fixed;top:50%;left:50%}#tamvan-box{min-width:310px;min-height:240px;transform:scale(0.67);-webkit-transform:scale(0.67);-o-transform:scale(0.67);-ms-transform:scale(0.67);-moz-transform:scale(0.67)}.tamvan-box-inner{width:266px}#tamvan-close{right:-17px}}

#tamvan-back iframe{transform:scale(0.920);-webkit-transform:scale(0.920);-o-transform:scale(0.920);-ms-transform:scale(0.920);-moz-transform:scale(0.920);transform-origin:top left;-webkit-transform-origin:top left;-o-transform-origin:top left;-ms-transform-origin:top left;-moz-transform-origin:top left}</style>

</head>

5.Jika semuanya sudah selsai, tinggal klik Simpan Tema. Silahkan check blog rekan-rekan. Jika sudah muncul seperti gambar dibawah ini, berarti anda telah berhasil memasang facebook pop up.

Catatan :

Jika pada blog anda facebook pop up tidak berhasil muncul atau tidak bisa di close, silahkan copy dan pastekan kode dibawah ini tepat diatas </head>

//<![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>

Selanjutnya, jika rekan-rekan ingin menampilkan fanspage facebook di halaman blog menggunakan widget , silahkan baca tutorial berikut:

Cara Mudah Menampilkan FansPage Facebook di Blog

Demikianlah tutorial cara membuat facebook pop responsive di desktop dan smartphone. Semoga bermanfaat dan terimakasih.

Secercah Ilmu

Cara Membuat Facebook Pop Up Responsive di Desktop dan Smartphone

Related Post