Cara Membuat Facebook Pop Up Responsive di Desktop dan Smartphone

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

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>.

<!--Kode Pop up Facebook -->

<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') {

    $('#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 class='mas_tamvan'>

<div id='tamvan-back'>

  <div id='tamvan-exit'> </div>

  <div id='tamvan-box'>

    <div class='tamvan-box-inner'>

      <div id='tamvan-close'>

        <img src=' " target="_blank">Cara Mudah Menampilkan FansPage Facebook di Blog 

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

Bagikan Artikel ini