Membuat Pesan Pembuka Pop Up Spesial Ramadhan Untuk Blog

Sekarang banyak blog-blog yang membuat widget-widget pesan pembuka di blognya mengenai bulan Ramadhan, Mulai dengan tulisan menggunakan marquee, dialog box, banner, dan lain-lain.

Sekarang saya akan membahas mengenai widget pesan pembuka spesial Ramadhan yang satu ini, widget ini berbasis Pop Up dan dilengkapi dengan like box Facebook dan juga tombol Follow Twitter, sebelumnya saya sudah membahas mengenai cara membuat pesan pembuka spesial Ramadhan dengan tampilan full screen, widget yang satu ini juga menggunakan gambar sebagai isinya, jadi bisa sobat ubah gambarnya dan juga bisa di edit lagi gambarnya, tentunya jangan menggunakan gambar yang memiliki size besar, karena bisa memperlambat loading blog sobat, oke jika sobat tertarik ingin memasangnya di blog sobat berikut caranya :

1. Masuk ke Blogger > Tata Letak > Tambah Gadget

2. Lalu pilih HTML/Javascript

3. Masukkan kode widget dibawah ini kedalamnya

<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://lh3.googleusercontent.com/-rUv4L_9nz-8/T9sfSSJaZNI/AAAAAAAACf0/ETEgFKt-rR4/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%2FAganTutorial&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/Safryannoor7" class="twitter-follow-button"data-show-screen-name="false">Follow @Safryannoor7</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://agan-tutorial.blogspot.com/2014/06/membuat-pesan-pembuka-pop-up-spesial-ramadhan-di-blog.html' target='blank'>Get This Widget</a>
</div>
</div>
</div>

Silahkan ganti AganTutorial dengan ID fanspage facebook sobat, dan ganti Safryannoor7 dengan ID 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

Semoga Bermanfaat.

Related Post