Cara Membuat POPUP Like Facebook di Blogspot

Terkait dengan masalah membuat popup like facebook di wordpress beberapa waktu lalu.

Menggunakan plugin facebook like promoter lightbox, kita dapat membuat popup fans like box di blog wordpress dengan mudah tanpa perlu keahlian skill coding.

Banyak pertanyaan yang muncul, bagaimana cara membuat popup like facebook tersebut ke platform blogspot ?

Tutorial berikut saya temukan di halaman ini, dengan memodifikasinya dan mengganti script feedburner dengan script fans like box. Dan ternyata bisa bekerja dengan baik memunculkan popup like facebook hanya satu kali kunjungan visitor baru. (tergantung waktu expire yang ditentukan)

Persyaratan utama yang harus teman-teman persiapkan antara lain :

  1. Telah memiliki script iframe fans like box dengan ukuran 292 x 258 (optional >> bisa tentukan sendiri)
  2. Membackup terlebih dahulu file xml, themes blogspot yang sedang digunakan. Jika terjadi sesuatu yang tidak diinginkan, teman-teman bisa mengembalikan dengan mudah ke settingan sebelumnya, ^^

Lanjut gan,,

Langkah pertama, Silahkan terlebih dahulu login ke akun blogger Anda.

Langkah kedua, Saat berada di dashboard blogspot pilih blog, kemudian klik “template” klik “edit html”

memasang pop up di blogspot

membuat pop up di blogspot

Langkah ketiga,  Beri tanda ceklist pada expand widget templates

Langkah keempat, Cari dan temukan kode di bawah ini dengan cara menekan CTRL + F untuk membantu Anda dalam pencarian cepat

[php]]]></b:skin>[/php]

Langkah kelima, Copy dan paste script di bawah ini tepat di atas kode ]]></b:skin>

[php]#popupContactClose{

cursor: pointer;

text-decoration:none;

}

#backgroundPopup{

display:none;

position:fixed;

_position:absolute; /* hack for internet explorer 6*/

height:100%;

width:100%;

top:0;

left:0;

background:#000000;

border:1px solid #cecece;

z-index:1;

}

#popupContact{

display:none;

position:fixed;

_position:absolute; /* hack for internet explorer 6*/

height:384px;

width:408px;

background:#FFFFFF;

border:2px solid #cecece;

z-index:2;

padding:12px;

font-size:13px;

}

#popupContact h1{

text-align:left;

color:#6FA5FD;

font-size:22px;

font-weight:700;

border-bottom:1px dotted #D3D3D3;

padding-bottom:2px;

margin-bottom:20px;

}

#popupContactClose{

font-size:14px;

line-height:14px;

right:6px;

top:4px;

position:absolute;

color:#6fa5fd;

font-weight:700;

display:block;

}[/php]

Langkah keenam, Cari dan temukan kode di bawah ini dengan cara menekan CTRL + F untuk membantu Anda dalam pencarian cepat

[php]</head>[/php]

Langkah ketujuh, Lalu copy paste script di bawah ini tepat di atas atau sebelum tag </head>

[php]<!–Pop Up Subscription–>

<script src=’https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js’ type=’text/javascript’/>

<script src=’http://dinhquanghuy.110mb.com/jquery.cookie.js’ type=’text/javascript’/>

<script type=’text/javascript’>

var popupStatus = 0;

 

//loading popup with jQuery magic!

function loadPopup(){

centerPopup();

//loads popup only if it is disabled

if(popupStatus==0){

$(&quot;#backgroundPopup&quot;).css({

&quot;opacity&quot;: &quot;0.7&quot;

});

$(&quot;#backgroundPopup&quot;).fadeIn(&quot;slow&quot;);

$(&quot;#popupContact&quot;).fadeIn(&quot;slow&quot;);

popupStatus = 1;

}

}

 

//disabling popup with jQuery magic!

function disablePopup(){

//disables popup only if it is enabled

if(popupStatus==1){

$(&quot;#backgroundPopup&quot;).fadeOut(&quot;slow&quot;);

$(&quot;#popupContact&quot;).fadeOut(&quot;slow&quot;);

popupStatus = 0;

}

}

 

//centering popup

function centerPopup(){

//request data for centering

var windowWidth = document.documentElement.clientWidth;

var windowHeight = document.documentElement.clientHeight;

var windowscrolltop = document.documentElement.scrollTop;

var windowscrollleft = document.documentElement.scrollLeft;

var popupHeight = $(&quot;#popupContact&quot;).height();

var popupWidth = $(&quot;#popupContact&quot;).width();

var toppos = windowHeight/2-popupHeight/2+windowscrolltop;

var leftpos = windowWidth/2-popupWidth/2+windowscrollleft;

//centering

$(&quot;#popupContact&quot;).css({

&quot;position&quot;: &quot;absolute&quot;,

&quot;top&quot;: toppos,

&quot;left&quot;: leftpos

});

//only need force for IE6

 

$(&quot;#backgroundPopup&quot;).css({

&quot;height&quot;: windowHeight

});

 

}

 

 

//CONTROLLING EVENTS IN jQuery

$(document).ready(function(){

if ($.cookie(&quot;anewsletter&quot;) != 1) {

 

//load popup

setTimeout(&quot;loadPopup()&quot;,5000);

}

//CLOSING POPUP

//Click the x event!

$(&quot;#popupContactClose&quot;).click(function(){

disablePopup();

$.cookie(&quot;anewsletter&quot;, &quot;1&quot;, { expires: 7 });

});

//Click out event!

$(&quot;#backgroundPopup&quot;).click(function(){

disablePopup();

$.cookie(&quot;anewsletter&quot;, &quot;1&quot;, { expires: 7 });

});

//Press Escape event!

$(document).keypress(function(e){

if(e.keyCode==27 &amp;&amp; popupStatus==1){

disablePopup();

$.cookie(&quot;anewsletter&quot;, &quot;1&quot;, { expires: 7 });

}

});

});

</script>[/php]

Langkah kedelapan, Cari dan temukan kode di bawah ini dengan cara menekan CTRL + F untuk membantu Anda dalam pencarian cepat

[php]</body>[/php]

Langkah kesembilan, Lalu copy paste script di bawah ini tepat di atas atau sebelum tag </body>

Catatan Penting :

Ganti script iframe facebook like box di bawah ini dengan Fans like box milik Anda.

[php]<div id=’popupContact’>

<a id=’popupContactClose’>x</a>

<h1>join to my fans at facebook</h1>

<iframe allowTransparency=’true’ frameborder=’0′ scrolling=’no’ src=’//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fadhaniblog&amp;width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;appId=111025998997409′ style=’border:none; overflow:hidden; width:292px; height:258px;’/>

</div>

<div id=’backgroundPopup’/>[/php]

Langkah sepuluh, Jika sudah selesai jangan lupa untuk menyimpan, dan refresh salah satu halaman artikel blogspot Anda, dan lihat perubahan yang terjadi

Demo : Notnetbook.blogspot.com

contoh popup like box fans facebook di blogspot

contoh popup like box fans facebook di blogspot

Catatan lain :

Jika menggunakan shortcode di atas, visitor akan melihat popup Anda satu kali dan tidak akan melihatnya lagi hingga 7 hari. Teman-teman bebas mengganti waktu expire { expires: 7 }); dengan mengganti angka 7 menjadi angka lain.

7 untuk tujuh hari, 14 untuk empat belas hari, 30 untuk tigapuluh hari. Bahkan jika diset ke angka 0, popup akan muncul setiapkali halaman artikel blospot Anda diakses.

Saya sarankan jangan set ke angka 0. Sebab, tidak semua orang suka popup. Seperti yang saya katakan sebelumnya, PopUp tidak enak seperti makan popcorn dan minum popice (upsss promosi… hehehe)

Baca juga,

Satu Cara Blackhat Method Meningkatkan Like Facebook Fans Page

Cara Lain Meningkatkan Facebook Like dengan Jebakan batman

Semoga Bermanfaat, ^^

Tags: #Blogspot #fans facebook #popup facebook #popup fans page #tutorial memasang popup

author
Seorang yang masih belajar dari segala sesuatunya. Punya hobby di internet sebagai blogger, menyukai games pc dan tertarik berkecimpung di internet marketing.
5 Langkah Remove Aplikasi Facebook
5 Langkah Remove Aplikasi Facebook
Bagi Anda yang sering menggunakan Facebook, mungkin
Game Facebook yang bikin lupa Ngeblog
Dari dulu aku sudah mewanti-wanti jangan sampai
Cara Asik Main Facebook dengan Facebook Messenger
Facebook Messenger itu apa sih? Facebook Messenger
Buat Sampul Cover Facebook Timeline
Mencari cara membuat cover facebook timeline ?
  1. author

    Blog Berita8 years ago

    Pengaruh ke Seo BLog gak nih mas? 🙁

    Reply
    • author
      Author

      Adhani Blog8 years ago

      Saya kira tidak, sebab pop up hanya muncul satu kali per visitor unik (tergantung set up waktu expire,,, jadi load fans like box lebih sedikit ketimbang memasangnya permanen di sidebar..
      tapi kembali lagi ke masing-masing,, pop up banyak tidak disukai oleh orang.. sebab mengganggu.. 🙂

      Reply
  2. author

    AsyArieL Gate8 years ago

    mantap br0 infonya……….!!!!!!!!!!!!!

    Reply
  3. author

    NNZR Blog8 years ago

    thanks infonya gan

    langsung praktek……….

    Reply
  4. author

    MUXLIMO8 years ago

    kOK gak muncul pop upnya di blog ane ya, Gan.. ;((

    Reply
    • author
      Author

      Adhani Blog8 years ago

      di blogspot ane muncul tuh gan,, silahkan cek ke notnetbook.blogspot.com, nanti jurgan akan melihat pop up facebooknya ^^

      Reply
  5. author

    TandichasGalih8 years ago

    Om saya minta pertanyaan nih , kan klo kaga float gitu jadinya malah ngalangin dan ga bisa klik yg lain selain pop up tadi , kadang kan pop up itu munculnya belakangan apalagi buat yg koneksi internetnya pas2an , coba direvisi om gimana caranya biar pop up itu mem float meski di scrool kebawah , makasi om sebelumnya , klo ada waktu mampir ya ke blog ane
    makasi om 😀

    Reply
  6. author

    kevin8 years ago

    kok sy set expire nya ke 0 tetap gk nongol

    Reply
  7. author

    kutulis8 years ago

    ijin nyimak dulu yah om.. nanti kalo sudah ngerti baru deh ane pasang… terima kasih infonya om,.. semoga bermanfaat untuk semuanya..

    Reply
  8. author

    a8 years ago

    SKRIP JELEK NOT WORKING.. MASA ADA DI DALAM TAG HEAD

    Reply
    • author
      Author

      Adhani Blog8 years ago

      bekerja dengan baik kok, di blogspot saya,,
      mungkin script di atas ada yang salah, mohon diperbaiki, karena yang buat bukan saya, silahkan ke sumber rujukan untuk investigasi lebih lanjut

      disini saya hanya membahas dengan bahasa yang mudah dimengerti,

      Reply
  9. author

    Amalul Ahli8 years ago

    makasih, saya sudah menggunakan cara ini, dan alhamdulillah berhasi…. blogwalking nih, kunjungi blog saya ya..

    Reply
  10. author

    Mas Arie8 years ago

    Info bagus,,ijin untuk dicoba,,

    Reply
  11. author

    Peluang Usaha8 years ago

    mantep nich… mau coba dulu…. tq infonya gan!

    Reply
  12. author

    Berbagi Kreativitas8 years ago

    Liat Script banyak gitu kira-kira bikin berat blog gak ya sob di lihat dari loading blog-Nya??

    Reply
    • author
      Author

      Adhani Blog8 years ago

      iya, buat berat

      Reply
      • author

        Berbagi Kreativitas8 years ago

        Mungkin bisa kasih tau kode yang lebih sederhananya saja?? Tapi cara kerjanya sama or sedikit lebihnya menyerupai. 🙂

      • author
        Author

        Adhani Blog8 years ago

        script di atas saya temukan di simpledesign (bisa anda temukan linknya di atas)
        mengenai menyederhanakan kode, maaf atas keterbatasan yang saya miliki.
        tapi sudah banyak kok mas, script2 pop up untuk blogspot, dan saya lihat juga bervariasi.

  13. author

    Adhi Ibra8 years ago

    Thank’s infonya gan.

    Reply
  14. author

    BlogMitologi8 years ago

    bro.. kalo mau Like Box letaknya di tengah gimana ya?

    Reply
  15. author

    k8 years ago

    scriptnya jelek not working…

    Reply
  16. author

    wahyu8 years ago

    Masih Bingung Gan ..

    Reply
  17. author

    zhanaz487 years ago

    Itu Udah saya pake di blog saya sobbb…

    Reply
  18. author

    ilham7 years ago

    Mas , mau ngopy scriptnya gimana caranya ? ane kesulitan , mohon bantuanya mas . .

    Reply
    • author
      Author

      Adhani Blog7 years ago

      arahkan pointer mouse ke script yang ingin di copy, kemudian klik view plain (sudut kanan atas), maka Anda bisa mengcopynya

      Reply

Leave a reply "Cara Membuat POPUP Like Facebook di Blogspot"


Top