Membuat Pesan Pembuka Pop Up Spesial Ramadhan Untuk Blog ~ Agan Tutorial
Friday, June 27, 2014

Membuat Pesan Pembuka Pop Up Spesial Ramadhan Untuk Blog


Membuat Pesan Pembuka Pop Up Spesial Ramadhan Untuk Blog

Pesan Pembuka
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

Tata Letak

2. Lalu pilih HTML/Javascript

Tambah Gadget

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.

Membuat Pesan Pembuka Pop Up Spesial Ramadhan Untuk Blog

19 komentar

Baru aja request ehh langsung di kasih deeh,
Thanks Yaa Gan :)

Sama-sama gan :D, asalkan saya bisa dan ada waktu luang pasti saya bikinin :)

gan kalau ganti fotonya gmn gan? apa yang diganti.
trimakasih btw

hehe maaf gan, lupa ngasih tau sebelumnya :D, tinggal ganti ini https://lh5.googleusercontent.com/-7m6JoD09p7I/U6mAm6ZwkOI/AAAAAAAAFs4/D5Gk8nhOkdE/h1600/ramadhan+2014.jpg dengan link gambar yang ingin dipasang :D

terimakasih banyak ya gan, langsung ane pasang ahhh :)

Sama-sama gan, silahkan dipasang :D hehe

kalo mau nambahin google plus kaya pnya ente gimana?

Tinggal tambahin aja <div class='g-plusone' data-count='true' data-href='http://agan-tutorial.blogspot.com/' data-size='medium' data-width='100'></div>

upgered aja gan saya masih newbie jd bingung

nih

<div class='widget-content'>
<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 class='g-plusone' data-count='true' data-href='http://agan-tutorial.blogspot.com/' data-size='medium' data-width='100'></div>
</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></div>

buat sambut ramadhan, blog barunya ada GA mantap :D

Sebenarnya itu akun lama kang :D udah bertaun" tapi jarang kepake, isinya ada $7, eh hari ini pertama puasa malah dibanned :(

mantab sob, sangat membantu... thanks

http://herbalkuacemaxs.com/

No comment moderation in this page,
Do not put the link in this comment, I'll make it disappear forever
I hate when people play cheat to increase their blog, meanwhile everyone else do it politely and honestly.