Kang Rian


4
Kang Rian
4/02/2014 12:35:00 AM
Basic Pembuatan Auto Popup di Blog
Basic Pembuatan Auto Popup di Blog


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="#">×</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 :
- 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 ) #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 -

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
pertamax milik saya
BalasHapushehe jangan dibawa kerumah yah :D . ntar takut next visitor ngamuk om :(
Hapus:iloveindonesia
Hapuskeduaxx...ijin praktek gan :)
BalasHapuswoke kang markus. good luck ! ^_^
HapusKetiga juga lumayan, izin pasang di blog saya ya Mas...
BalasHapusSilahkan kang gunawan, semoga bermanfaat yah :)
Hapusurang mah resep K pop Up dari pada Auto Popup :D
BalasHapushaha, seuseu'eur na mah adsense sampah nyak kang :D ngaririwa pisan pemandangan :D *sareukseuk . wkwkw
Hapussip nih kang tutorialnya.. boleh deh kapan-kapan di coba.. :)
BalasHapussilahkan kang ^_^
Hapuskalau atur posisi pop outnya bagaimana ya?
BalasHapusdi klik lari nya entah kemana...sama aja boong
BalasHapusbagus gan .. keep up ah
BalasHapusijin praktek gan
BalasHapusKomentar ini telah dihapus oleh pengarang.
BalasHapusHatur nuhun pisan kang.
BalasHapuswork di blog saya.
Tukeran link atuh sasami orang sunda :D
Deo Wibawa
atur lebar kotak pop up dimana ngubahnya kang?
BalasHapusthx kang Rian sharenya mantap banget... Kalau untuk nampilin pop up hanya di postingan tertentu cara gimana ya kang? hartur nuhun..
BalasHapuskang, 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
BalasHapusAkang, :D
BalasHapusitu pop up setiap ada kunjungan gitu ya?
kayak iklan iklan gitu kang, saya cari seperti ini,..
dengan tampilan profesional, jadi pengunjung tak bosan :)
:salahkamar
BalasHapuskang,,mau nanya,,,kalau pop up nya itu cuma tampil pas dia klik home aja gmana ya?
BalasHapusitu kan pop up nya kita klik di mana pun pasti pop up nya muncul,,hehehe
makasih kang,,
kang pop up na katindihan ku elemen lain kumaha atuh?
BalasHapusklo ganti gambar dengan tulisan gmna?
BalasHapusthanks gan info nya.. bermanfaat gan..
BalasHapuskunjungi Blog Ane gan..
nusantarapoker.blogspot.com
berhasil gan, makasih panduannya
BalasHapusinfonya manthap, terima kasih http://giribig.com/
BalasHapusgan..... pencerahan donk
BalasHapusbisa gak klik link terus muncul gmbar?
itu yg di demo kn klik gambar muncul gambar.
bantu yaaa....
kok ane loading mulu yak
BalasHapuswah nice artikel bro (y)
BalasHapusjangan lupa visit blog ane : dipa-artikel.blogspot.com
mantapkali gan tutorialnya... aku mau tanya. klo bikin iklan auto klik macam itu gimana gan..?
BalasHapusthx by infobola83.com
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
BalasHapusterimakasih , pencerahanya , bdw gan kalau di tambahkan animasi ? loading gmna
BalasHapuswww.free-ebooks.my.id
Gan gak ada yang otomatis ya ?
BalasHapusKang pop up saya knapa ya kok ada di belankangnya
BalasHapusmas bro tanya dong, biar loading popupnya cepet gimana yaaa,..... punya saya ko lambat yaa padahal ukuran gambar udah disesuaikan
BalasHapussatu pertanyaan lagi,.. agar popup hanya muncul pada halama awal saja bagaimana caranya,... ko tampilan di web saya muncul terus di semua halaman yaaa
BalasHapushttp://www.umrohpromo.co.id
@Husni Mubarok saya bantu jawab, mungkin kang rian sibuk :D.
BalasHapusmas 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
Mantap kang, keren!
BalasHapusKang, 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