Membuat Pop up Like Facebook hanya tampil di homepage (blogger)

Pop Up like facebook/subscribe masih jarang digunakan oleh berbagai blog. Biasanya para Noob Blogger akan menggunakan Pesan Alert saat pertamakali masuk blog. Sebenarnya, pesan seperti ini tidaklah bagus. Karena setiap ke halaman manapun akan muncul, dan hanya berupa pesan yang tampilannya tidak bisa dimodif. Setelah saya "Survey" di Mbah Google akhirnya saya menemukan tutorial "Membuat Pop up widget Like facebook di blog". Lalu saya praktekan dan ada hasilnya. Nah, karena itu saya tulis tutorial yang mirip seperti tutorial yang saya temukan yang tentunya hanya Intinya saya yang sama. Pop up di sini tidak hanya bisa untuk like facebook saja, bisa yang lainnya. Seperti Subscribe, pesan, login, daftar, apa saja. Selebihnya lagi Widget ini dapat dimodif, tidak seperti Pesan Alert. 

1. Masuk ke akun blogger sobat.

2. Masuk ke halaman "Template"

3. Klik "Edit HTML" > klik "Lanjutkan"

4. Copy dan Taruh kode berikut tepat diatas script "</head>"

<style media='all' type='text/css'>
#backgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:0px solid #cecece;
z-index:1;
}
#popupContact{
margin-top: 10%;
margin-left: 35%;
display: none;
position: fixed;
_position: absolute;
height: 369px;
width: 390px;
background: url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSo-anzeac_VZn-9-EEQfpgskaZ7h4d-EycSUp6YffIONP4CzBGhAuVHw);
border: 4px solid black;
z-index: 2;
padding: 12px;
background-size: 100%;
font-size: 13px;
}
#popupContact button {
background:black;
color:white;
border:2px solid #ccc;
#popupContact h1{
text-align: left;
color: black;
font-size: 15px;
font-weight: 700;
border-bottom: 0px dotted lightGrey;
padding-bottom: 2px;
margin-bottom: 20px;
}
#popupContactClose{
font-size:14px;
line-height:14px;
Right:12px;
Top:4px;
position:absolute;
color:#FF0000;
font-weight:700;
float:right;
}
<script src='http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js' type='text/javascript'/>
<script src='http://yensdesign.com/tutorials/popupjquery/popup.js' type='text/javascript'/>
  

5. Taruh kembali script berikut di bawah "<body>"


<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div id='popupContact'>
<a id='popupContactClose'><img src='http://www.teknojurnal.com/wp-content/uploads/2011/07/1254211922505px-OS_X-Logo.svg_.png' width='15px'/></a>
<h1>Selamat datang di BlogSeno!</h1>
<center>
Pesan Sobat di sini!
Script (Subscribe, Like Facebok box, dll)</center>
</div>
<div id='backgroundPopup'/>
</b:if> 
NB: Ganti teks Merah dengan pesan sobat, apa saja. Lalu ganti teks hijau dengan dengan script apa saja. Selamat Mencoba!
NB Sangat Penting!!: Jika ingin Pop up muncul terus menerus saat dibukannya Homepage, ganti script <body> menjadi <body onLoad='loadPopup()'>
     

Hasil:

12 comments :