Basic Pembuatan Auto Popup di Blog - Info Desain Web Terbaru!
Info Desain Web Terbaru!
4 Kang Rian 4/02/2014 12:35:00 AM Basic Pembuatan Auto Popup di Blog Basic Pembuatan Auto Popup di Blog

Basic Pembuatan Auto Popup di Blog

Oleh. Kang Rian  •  41  •      Edit
Basic Pembuatan Auto Popup di Blog
Basic Pembuatan Auto Popup di Blog
Sent Pin it!
POPUP-HOMEPAGE-Interface Alhamdulillah, ternyata saya masih diberi kesempatan untuk berbagi, dan malam ini saya ingin membahas tentang Basic Pembuatan POPUP Gambar di Blog dengan menggunakan sedikit bumbu CSS & JavaScript.
POPUP yang akan saya bagikan kali ini bersifat auto display! yang artinya begitu pengunjung mengunjungi blog sobat POPUP akan langsung di tampilkan semata-mata untuk memberitahukan kepada pengunjung baik Informasi, Berita, Iklan, maupun Kutipan sesuai dengan ingin sobat tampilkan.

Untuk Demo-nya sobat bisa lihat langsung disini : Demo Pop-up

Seperti yang sudah sobat lihat demo sebelumnya, berikut adalah langkah-langkah cara memasang POP-UP Banner di Halaman Awal Blog :

Cara Pemasangan

Langkah-1 : Pastikan sobat sudah memasang jQuery Library, versi berapapun itu. jika belum silahkan simpan script external dibawah ini tepat sebelum code </head> pada halaman Edit Template :
<!-- Library jQuery -->
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
Catatan : Pemasangan jQuery dalam Blog hanya boleh 1x saja, jika lebih dari 1 maka Efek-efek yang mengandalkan fungsi jQuery tidak akan berfungsi.

Langkah-2 : Simpan Bumbu CSS di bawah ini tepat sebelum kode </head>
<style type="text/css">
/* KangRian Box CSS */
@media (max-width:800px){ #kr-box { display:none; } }
#kr-box {
position:fixed !important;
position:absolute;
top:-700px;
left:39%;
margin:0px 0px 0px -182px;
font:normal Dosis, Georgia, Serif;
color:#333;
-webkit-box-shadow:0px 0px 10px #333;
-moz-box-shadow:0px 0px 10px #333;
box-shadow:0px 0px 10px #333;
background:#fff;
}
#kr-box a.close-popup {
position:absolute;
top:-25px;
right:0px;
font:25px Arial, Sans-Serif;
text-decoration:none;
text-align:center;
color:#f2f2f2;
cursor:pointer;
}
#kr-box a.close-popup:hover { color:#fff; }
#kr-box a.close-popup:active { opacity:0; }
#kr-box div.black-bg { background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW0KrSTpY842rfYoDP2f3ZaGHoQiWpz2f3pF0D2lgR4k80Q1FXfn4e6SbXYqR_QYWtO41yflZOFNNY6D5_2qm3Re3T39DSC7iIsRrLpz5O-WRlMwEetursYvLhIsFujAZqS53D6SdBE7eE/s1600/ajax-loader-apps.gif) no-repeat center;position:fixed;top:0px;left:0px;width:100%;height:100%;opacity:.6;z-index:-500; }
#kr-box div.gambar-space { border:5px solid #fff; position:relative; background:#fff;border-bottom:0px;}
#kr-box div.gambar-space img { width:600px; height:400px; }
</style>

Terakhir : Simpan kode JavaScript & HTML dibawah ini tepat di atas kode </body> , agar POPUP bisa di tampilkan.
<!-- jQuery KR-Box [ Begin ] -->
<div id="kr-box">
<a class="close-popup" href="#">&#215;</a>
<div class="black-bg kaluar"></div>
<div class="gambar-space">
<a href="#link"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQDJ7rvr_nWH1ipZ44ylg7c5qN7nfe7zEE1PLB3VATh-dBkJssq7RIGOW40RxBc7Xv7Q9ASM7aOWewlFPUNYptR_YWQWo7H6_JS_y7E1sg6zu9TuWOQHkPL3SpTue6OYjdoEOS1OsMrEin/s1600/SPACE-PROMOTE-600X400-PIXEL.png" alt="Judul"/></a>
</div>
</div>

<script type='text/javascript'>
// JavaScript KR-Box
$(window).bind("load", function() {
$('#kr-box').animate({top:"100px"}, 2000);
$('a.close-popup, .kaluar').click(function() {
$(this).parent().fadeOut(500);
return false;
});
});
</script>
<!-- jQuery KR-Box [ End ] -->

Keterangan tambahan untuk kode HTML di atas :
  1. Ganti alamat gambar :
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQDJ7rvr_nWH1ipZ44ylg7c5qN7nfe7zEE1PLB3VATh-dBkJssq7RIGOW40RxBc7Xv7Q9ASM7aOWewlFPUNYptR_YWQWo7H6_JS_y7E1sg6zu9TuWOQHkPL3SpTue6OYjdoEOS1OsMrEin/s1600/SPACE-PROMOTE-600X400-PIXEL.png
    dengan alamat gambar yang ingin sobat tampilkan. berukuran ( 600 x 400 pixel )
  2. #link dengan alamat Link yang di inginkan.

Sekian Tutorial tentang Cara Pembuatan Auto POPUP Banner Gambar di Blog dengan CSS dan JavaScript yang ingin saya bagikan. Semoga bermanfaat untuk sobat yang membutuhkan plugin ini, jika ada pertanyaan silahkan di tanyakan melalui form komentar dibawah ini, tak lupa saya ucapkan terima kasih karena sudah meluangkan waktu-nya untuk berkunjung di blog sederhana saya ini .
Salam Blogger, - Kang Rian -

Sent Pin it!

Kang Rian Ikuti

Web & Graphic Designer - Berpengalaman sejak 2010, fokus membantu Perusahaan / UMKM agar dikenal secara Global melalui Website Profesional & Desain yg Menjual.

Cek. Jasa-Design.web.id

       

41 komentar

  1. Cihan Namaku4/02/2014 11:53 AM

    pertamax milik saya

    BalasHapus
    Balasan
    1. Rian Nurherdian4/02/2014 1:23 PM

      hehe jangan dibawa kerumah yah :D . ntar takut next visitor ngamuk om :(

      Hapus
    2. Haerul Mutaaly6/23/2015 8:51 PM

      :iloveindonesia

      Hapus
  2. Markus Kono4/02/2014 12:25 PM

    keduaxx...ijin praktek gan :)

    BalasHapus
  3. Gunawan Eka Saputra4/02/2014 1:07 PM

    Ketiga juga lumayan, izin pasang di blog saya ya Mas...

    BalasHapus
    Balasan
    1. Rian Nurherdian4/02/2014 1:24 PM

      Silahkan kang gunawan, semoga bermanfaat yah :)

      Hapus
  4. Beben Koben4/02/2014 5:21 PM

    urang mah resep K pop Up dari pada Auto Popup :D

    BalasHapus
    Balasan
    1. Rian Nurherdian4/02/2014 5:26 PM

      haha, seuseu'eur na mah adsense sampah nyak kang :D ngaririwa pisan pemandangan :D *sareukseuk . wkwkw

      Hapus
  5. irpan sah4/02/2014 9:37 PM

    sip nih kang tutorialnya.. boleh deh kapan-kapan di coba.. :)

    BalasHapus
  6. Rozan Hilmy Abdul Hanif6/23/2014 12:05 AM

    kalau atur posisi pop outnya bagaimana ya?

    BalasHapus
  7. Minang Terkini7/24/2014 9:47 PM

    di klik lari nya entah kemana...sama aja boong

    BalasHapus
  8. Anonim8/11/2014 11:27 AM

    bagus gan .. keep up ah

    BalasHapus
  9. Just Call boim8/26/2014 1:17 PM

    ijin praktek gan

    BalasHapus
  10. Deo Wibawa10/25/2014 3:05 PM

    Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  11. Deo Wibawa10/25/2014 3:07 PM

    Hatur nuhun pisan kang.
    work di blog saya.

    Tukeran link atuh sasami orang sunda :D

    Deo Wibawa

    BalasHapus
  12. dito aji10/30/2014 9:55 AM

    atur lebar kotak pop up dimana ngubahnya kang?

    BalasHapus
  13. Afrianus Drajad P10/31/2014 10:15 AM

    thx kang Rian sharenya mantap banget... Kalau untuk nampilin pop up hanya di postingan tertentu cara gimana ya kang? hartur nuhun..

    BalasHapus
  14. Amier Hamzah11/05/2014 5:56 AM

    kang, makasih buat skripnya, tapi saya ada masalah sedikit, pop up saya muncul dibawah pop up gambar random, coba akang cek di www.jetset.fitnes mohon solusinya kang, makasih

    BalasHapus
  15. Nasrul Ma Arif11/14/2014 6:36 AM

    Akang, :D
    itu pop up setiap ada kunjungan gitu ya?
    kayak iklan iklan gitu kang, saya cari seperti ini,..
    dengan tampilan profesional, jadi pengunjung tak bosan :)

    BalasHapus
  16. Karya Pemuda Kampung12/15/2014 10:34 AM

    :salahkamar

    BalasHapus
  17. Alfa Shop12/15/2014 10:41 AM

    kang,,mau nanya,,,kalau pop up nya itu cuma tampil pas dia klik home aja gmana ya?
    itu kan pop up nya kita klik di mana pun pasti pop up nya muncul,,hehehe

    makasih kang,,

    BalasHapus
  18. kawalitv12/18/2014 12:03 PM

    kang pop up na katindihan ku elemen lain kumaha atuh?

    BalasHapus
  19. Izud Jr1/13/2015 4:51 PM

    klo ganti gambar dengan tulisan gmna?

    BalasHapus
  20. Ryan andrea2/17/2015 9:12 PM

    thanks gan info nya.. bermanfaat gan..

    kunjungi Blog Ane gan..
    nusantarapoker.blogspot.com

    BalasHapus
  21. Admin Rungan2/19/2015 5:47 AM

    berhasil gan, makasih panduannya

    BalasHapus
  22. Jek Brom3/21/2015 9:52 AM

    infonya manthap, terima kasih http://giribig.com/

    BalasHapus
  23. Alexander Rizky YP3/21/2015 11:29 AM

    gan..... pencerahan donk
    bisa gak klik link terus muncul gmbar?
    itu yg di demo kn klik gambar muncul gambar.

    bantu yaaa....

    BalasHapus
  24. Achmad Naufal Ghifari3/30/2015 11:16 PM

    kok ane loading mulu yak

    BalasHapus
  25. Dipa Artikel4/08/2015 8:58 PM

    wah nice artikel bro (y)

    jangan lupa visit blog ane : dipa-artikel.blogspot.com

    BalasHapus
  26. SEO Judionline5/08/2015 10:10 AM

    mantapkali gan tutorialnya... aku mau tanya. klo bikin iklan auto klik macam itu gimana gan..?
    thx by infobola83.com

    BalasHapus
  27. Rico Kurniawan6/22/2015 10:45 PM

    Salam Kenal kang. terima kasih tutorial pop up nya. cuman kenapa image di tempat saya gak bisa center alias di tengah. trus yang kedua kalau di scrool kebawah imagenya berada di bawah icon icon image posting. Mohon pencerahan. mungkin bisa dibantu mampir ke www.ricokurniawanjourney.com .. Hatur nuhun kang

    BalasHapus
  28. kang fatah7/11/2015 8:52 PM

    terimakasih , pencerahanya , bdw gan kalau di tambahkan animasi ? loading gmna

    www.free-ebooks.my.id

    BalasHapus
  29. andri desmana7/22/2015 9:49 PM

    Gan gak ada yang otomatis ya ?

    BalasHapus
  30. muhammad alfan jauhari7/25/2015 3:46 PM

    Kang pop up saya knapa ya kok ada di belankangnya

    BalasHapus
  31. Unknown9/02/2015 1:36 PM

    mas bro tanya dong, biar loading popupnya cepet gimana yaaa,..... punya saya ko lambat yaa padahal ukuran gambar udah disesuaikan

    BalasHapus
  32. Husni Mubarok9/02/2015 3:57 PM

    satu pertanyaan lagi,.. agar popup hanya muncul pada halama awal saja bagaimana caranya,... ko tampilan di web saya muncul terus di semua halaman yaaa

    http://www.umrohpromo.co.id

    BalasHapus
  33. Achmad Maulana Septiyan10/30/2015 1:49 PM

    @Husni Mubarok saya bantu jawab, mungkin kang rian sibuk :D.
    mas husni coba buka tutorial kang rian yg ini https://rian-nurherdian.blogspot.com/2013/05/cara-menampilkan-widget-pada-halaman.html.
    Terus masukin kode di antara Kode JavaScript & HTML.:thumbup

    BalasHapus
  34. Anonim12/27/2015 2:25 PM

    Mantap kang, keren!

    BalasHapus
  35. Anonim12/27/2015 10:04 PM

    Kang, kalo pengen munculnya based on cookies, gimana ya? Misalnya kalo yang udah pernah berkunjung, minimal dalam satu hari yang sama, visitor berkunjung lagi, pop upnya ga muncul, ada saran kah?

    BalasHapus
Utama Basic CSS JavaScript Plugin Basic Pembuatan Auto Popup di Blog

Terpopular! Minggu ini..

×

Konversi Bersihkan