Cara Mudah Membuat Pop Up Like Facebook Di Blog

Cara Mudah Membuat Pop Up Like Facebook Di Blog Beberapa blogger menggunakan Pop Up Like Facebook untuk meningkatan jumlah view di fanspage ...

Cara Mudah Membuat Pop Up Like Facebook Di Blog

Beberapa blogger menggunakan Pop Up Like Facebook untuk meningkatan jumlah view di fanspage dan blog mereka. Namun, tak jarang pula, cara ini sedikit mengganggu pengunjung yang mampir di blog mereka.Itu adalah sebagian yang kubaca ketika mendapatkan script kode ini dari salah satu blog yang kemarin aku kunjungi. Script widget ini pun juga banyak sekali di share oleh beberapa blogger yang sememangnya memasang kode tersebut pada blog mereka. Dan, sebelum mengeshare script ini, tentu aku telah mencobanya terlebih dahulu di blogku. Biar dikira nggak gagal gitulah. Rada gimana gitu kalau pas dicobain orang lain ternyata scripsnya malah nggak working.

Widget Pop Up Like Fanspage yang aku pasang ini dijamin nggak bakalan menggangu para pengunjung yang singgah di blog kita. Karena, pop up yang aku gunakan, hanya muncul sekali dalam sehari pada viewer yang sama. Jadi, nggak bisa berkali-kali muncul seperti yang sering digunakan pada blog berita itu. Karena, biasanya para pengunjung itu kurang suka atau kemungkinan takut ngelike fanspage kita. Itu yang banyak kubaca dari keluhan para viewer lain. Atau bisa jadi, mereka pikir itu link virus yang membuat mereka enggan lagi berkunjung. Soalnya kan mendadak muncul gitu.




Pop up ini akan muncul beberapa saat setelah blog kalian di buka. Aku sudah mengatur timingnya agar pas buka blog kita nggak langsung ikutan muncul juga. Ketika  pop up terbuka, pada sisi bagian belakang akan terlihat gelap dan tampilan depan pop up  yang kita gunakan akan terlihat terang. Karena script kodenya hampir sama, jadi semua tampilan akan terlihat sama. Selain itu, Widget ini juga memiliki tampilan yang berbeda, yakni dengan menggunakan dua tombol close dan like. Nanti pengunjung tak perlu takut, jika ingin like ya bisa di like. Atau jika tak mau ya tinggal di close sesuai panah silangnya itu saja.

Lalu gimana caranya untuk membuat Pop Up Like Facebook di Blog? Mudah banget. Simak tutorial berikut ini.

Cara Membuat Pop UP Like Facebook Di Blog


  • Seperti biasa, Login ke akun blogger.com kalian
  • Pada bagian Tata Letak (Layout), Klik Tambahkan Gadget (pilih tempatnya sesuai dengan  yang kalian inginkan), Lalu pilih HTLM/Java Script. Dan setelah itu, masukan kode di bawah ini.


 <script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<style>
#fanback {
display:none;
background:rgba(0,0,0,0.8);
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:99999;
}

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

#fanbox {
background:white;
width:420px;
height:270px;
position:absolute;
top:58%;
left:63%;
margin:-220px 0 0 -375px;
-webkit-box-shadow: inset 0 0 50px 0 #939393;
-moz-box-shadow: inset 0 0 50px 0 #939393;
box-shadow: inset 0 0 50px 0 #939393;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: -220px 0 0 -375px;
}

#fanclose {
float:right;
cursor:pointer;
background:url(http://3.bp.blogspot.com/-NRmqfyLwBHY/T4nwHOrPSzI/AAAAAAAAAdQ/8b9O7O1q3c8/s1600/fanclose.png) repeat;
height:15px;
padding:20px;
position:relative;
padding-right:40px;
margin-top:-20px;
margin-right:-22px;
}

.remove-borda {
height:1px;
width:366px;
margin:0 auto;
background:#F3F3F3;
margin-top:16px;
position:relative;
margin-left:20px;
}

#linkit,#linkit a.visited,#linkit a,#linkit a:hover {
color:#80808B;
font-size:10px;
margin: 0 auto 5px auto;
float:center;
}
</style>
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// key and at least value given, set cookie...
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() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}

// key and possibly options given, get cookie...
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;
};
//]]>
</script>

<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_facebook_like') != 'yes'){
$('#fanback').delay(5000).fadeIn('medium');
$('#fanclose, #fan-exit').click(function(){
$('#fanback').stop().fadeOut('medium');
});
}
$.cookie('popup_facebook_like', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='fanback'>
<div id='fan-exit'></div>
\
<div id='fanbox'>
\
<div id='fanclose'></div>
<div class='remove-borda'></div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/blogdandesaintutorial&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false' style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe>
</div>
</div>




Catatan :


  • Jika kalian memasang script kode di atas, maka tampilannya hanya akan muncul dalam 7 hari sekali untuk 1 pengunjung aktif. Untuk merubahnya kalian tinggal ganti Kode 7 Menjadi 1. Lihat kode warna biru seperti ini $.cookie('popup_facebook_like', 'yes', { path: '/', expires: 7 }); atau kalian bisa menghapusnya. Biasanya akan muncul setiap waktu. Tapi, aku rasa ini nggak efisien. Soalnya, ya sekali udah di klik sama pengunjung, buat apa ditampilin lagi. Saranku sih, biar pengunjung nggak terganggu.



  • Jangan lupa untuk mengubah delay atau tampilan pop up. Jika kalian tidak merubahnya, maka pop up ini akan muncul pada detik kelima. Untuk pengaturan pop up tampilan blog, silahkan ganti kode ini delay(5000). Untuk per 1000 = 1 detik. Jadi ketika kalian menggantinya menjadi 5000 maka pop up akan otomatis keluar saat detik kelima. Untuk membuatnya sedikit lebih lama, kalian bisa menggunakan delay yang lebih. Misal : 
                                                  1000 = 1 detik 
                                                  5000 = 5 detik
                                                 10000 = 10 detik

  • Selain merubah kode-kode di atas, kalian juga bisa mengatur tampilan pop up sesuai keinginan kalain sendiri. Entah mau ganti warna tepian pop up atau sekedar mengganti panjang dan lebarnya.  Untuk pemilihan warna kalian bisa lihat di kode warna HTML di sini


  • Jika semua proses telah selesai, silahkan klik Save atau simpan dan sekarang kalian bisa melihat hasilnya. Jika kurang puas, kalian bisa menyuruh teman untuk melihat hasilya. Jika kurang paham, kalian bisa lihat foto di bawah ini.
Cara Memasukan Script Kode Pop Up




Cukup mudah kan? Bisa langsung di coba di Blog kalian ya. Diharapkan setelah mencoba tidak mencopas tulisan ini kecuali script kodenya.

Jika kalian suka dengan tutorial ini, jangan lupa buat add dan like fanspage Blog Tuturial & Desain Grafis.  Tambahkan aku di akun G+ kalian juga, biar kita bisa saling BW an. Silahkan komen jika ada perntanyaan dan biasakan membacanya sampai tuntas. Salam emak-emak GO-BLOG.

COMMENTS

Nama

ADSENSE,4,AFTER EFFECT,2,BAHASA ASING,3,Bahasa Inggris,1,BLOG,24,BNI,3,Brand Local,2,ceritaku,3,CERPEN,6,CorelDraw,1,Curhat,12,DOKTER,2,Dokter Gigi,1,Dokter Hongkong,2,DOKTER KANDUNGAN,2,Dokter Mata,1,Dokter Umum,1,EKSPEDISI,3,EMAIL,1,ENDORSE,1,FILM PENDEK,3,Flash Fiction,1,Gigi,5,GMAIL,1,Halal,1,Hongkong,15,Ilmu Komputer,3,INDONESIA,1,INFO,8,INFO BMI,22,INFO DOKTER,7,JASA PAKET,3,JP BAI,3,JPBAI,4,Kandungan,3,Kecantikan,1,KESEHATAN,1,KOSMETIK,1,KULINER,2,Kulit,4,Kursus Gratis,1,LAKON,6,Lipstik,1,liputan,1,LUAR NEGERI,4,Masakan,1,Masker,1,Microsoft Excel,1,Microsoft Word,2,MODUS,1,MURAH,1,Opini,1,PAKET,3,PENIPUAN,1,Photoshop,2,Produk Local,1,QQP,10,QQP JASA PAKET,13,QQP JASA PAKET LUAR NEGERI,13,Rambut,1,rubik,1,Seputar BMI,25,Seputar Hongkong,22,Sound Effect Music,1,Tips & Trik,1,Tips & Trik Blog,7,TRAVELING,4,Tubuh,2,UNBOXING,1,UNDANGAN PERNIKAHAN DIGITAL,1,Virus,1,Wajah,1,Wardah,1,Widget,2,youtube,2,
ltr
item
Zhiang Zie Yie: Cara Mudah Membuat Pop Up Like Facebook Di Blog
Cara Mudah Membuat Pop Up Like Facebook Di Blog
https://2.bp.blogspot.com/-CM9ArqgW-pU/Wm8whEERnaI/AAAAAAAAVog/XiSv3uD7Fv4m1udO8mo9cGtx85RweYwxgCLcBGAs/s640/2018-01-28_222812.jpg
https://2.bp.blogspot.com/-CM9ArqgW-pU/Wm8whEERnaI/AAAAAAAAVog/XiSv3uD7Fv4m1udO8mo9cGtx85RweYwxgCLcBGAs/s72-c/2018-01-28_222812.jpg
Zhiang Zie Yie
https://www.zhiangzieyie.com/2018/01/cara-mudah-membuat-pop-up-like-facebook.html
https://www.zhiangzieyie.com/
https://www.zhiangzieyie.com/
https://www.zhiangzieyie.com/2018/01/cara-mudah-membuat-pop-up-like-facebook.html
true
3263550911380837102
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy