Tutorial Membuat Pesan Pembuka Pop Up Spesial Ramadhan

Banyak yang menghiasi blog mereka dengan widget-widget ramadhan seperti banner,marquee,dan lain lain.Tetapi saya kali ini akan membahas tentang widget Pesan Pembuka Pop Up ini.Widget ini dilengkapi dengan tombol Follow Fan Page Facebook DanTombol Follow Twitter,Serta Pesan Pembuka Ini Sangat Simple.Simak Tutorialnya Berikut Ini :

1. Masuk ke Blogger > Tata Letak > Tambah Gadget

2. Lalu pilih HTML/Javascript

3. Masukkan Code widget dibawah ini kedalamn HTML/Javascript
<style type="text/css">
#aganpopupdiv{display:block;}}
* html #aganpopupdiv {position:absolute;}
#aganpopupdiv {z-index: 999999;display:block; top:0px; left:0px; width:100%; height:100%; position:fixed; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6I0bhDaXqIKrKg0Dma6Nm77GSh8AkqONkExsdTtSKTFKhSyWIPOQMlIIQPplU4YAWYA98x7m0FwX8Jx3ayf0KZJT-CEzme036nX8a0YyxPPchlSh37YZ_esWSLlrPiJ9NMh8ALZS6XQ/s128/exeideasopacity0.5.png');margin:0; overflow-y:auto;}
#aganpopup {background-color: #fff; overflow:none;}
.aganpopup {width:500px; height:375px; position:fixed; top:50%; left:50%; margin-top:-200px; margin-left:-250px;
background:url(https://lh5.googleusercontent.com/-7m6JoD09p7I/U6mAm6ZwkOI/AAAAAAAAFs4/D5Gk8nhOkdE/h1600/ramadhan+2014.jpg)no-repeat;border:2px solid #fff;}
</style>
<div id="aganpopupdiv">
<div id="aganpopup" class="aganpopup">
<center style="background:#fff;color:#000;cursor:pointer;float:left;margin-left:-2px;margin-top:-29px;padding:4px;font-family:Arial;font-weight:bold;" onmouseup="document.getElementById('aganpopupdiv').style.display='none'">
Tutup X
</center>
<div style='margin:354px 0px 5px 10px;'>
<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FTfvnBlogspot&amp;width&amp;layout=button&amp;action=like&amp;show_faces=false&amp;share=false&amp;height=35&amp;appId=288329154611945" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:35px;width:60px;" allowtransparency="true"></iframe></div>
<div style='margin:-45px 5px 5px 63px;'>
<!-- Twitter follow button start -->
<a href="http://twitter.com/alfryan_" class="twitter-follow-button"data-show-screen-name="false">Follow @alfryan_</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<!-- Twitter follow button end -->
</div>
<div style='margin:-30px 5px 5px 63px;float:right'>
<a href='http://t-fvn.blogspot.com/2014/07/tutorial-membuat-pesan-pembuka-pop-up.html' target='blank'>Get This Widget</a>
</div>
</div>
</div>

Silahkan ganti T-fvnBlogspot dengan Fan Page FB Sobat,dan ganti alfryan_ dengan alamat URL twitter sobat, dan jika ingin mengganti gambarnya ganti https://lh5.googleusercontent.com/-7m6JoD09p7I/U6mAm6ZwkOI/AAAAAAAAFs4/D5Gk8nhOkdE/h1600/ramadhan+2014.jpg dengan link gambar yang ingin dipasang

4. Langkah terakhir Klik Simpan

Pesan Pembuka Pop Up ini dijamin tidak akan memperlambat loading blog sobat.
Semoga Bermanfaat ...
Script Source
Support by :
URLCastle

8 komentar

wihh..
keren bang..
izin nyoba yak.. :D

Reply

Spesial ramadhan :v coba cepat

Reply

tutorial bagus, namun jujur saja saya kurang suka dengan menu pop up dikarenakan sedikit menggangu

Reply

haha .. ini ngak wajib kok, masih banyak cara lain selain Pop Up ini. Lagipula saya hanya memasangnya saat ramadhan saja :)

Reply

coba coba aja dulu gan ... biasanya sih sesuai template masing masing

Reply

Posting Komentar