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>"
5. Taruh kembali script berikut di bawah "<body>"
NB Sangat Penting!!: Jika ingin Pop up muncul terus menerus saat dibukannya Homepage, ganti script <body> menjadi <body onLoad='loadPopup()'>
Hasil:
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'>NB: Ganti teks Merah dengan pesan sobat, apa saja. Lalu ganti teks hijau dengan dengan script apa saja. Selamat Mencoba!
<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 Sangat Penting!!: Jika ingin Pop up muncul terus menerus saat dibukannya Homepage, ganti script <body> menjadi <body onLoad='loadPopup()'>
Hasil:
nice tutor sob mudah dipahami pula :D
ReplyDeleteya, thx bro :)
DeleteMantef bang Seno tutornya trims ya bang..hahhayy
ReplyDeletesama-sama brow.. :)
Deletebelum pernah nyoba klo yg kayak gini kang, kapan2 mau di coba ah, mantep kayaknya klo dibuat pop up like fb nya... makasih kang .. :)
ReplyDeletecoba aja mas... sama kyk di blog ini (cuma tampilannya aja beda jauh, bisa diedit lgi kok) (y)
Deletekeren gan postingax,,,,plus" sucess dah
ReplyDeletethx sob atas tutorialnya,...
ReplyDeletebang untuk edit di html harus di expand gk
ReplyDeleteHarus gan... :)
DeleteMantaaap gan
ReplyDeleteartikelnya bermanfaat gan
ReplyDelete