Sedikit Info Seputar
Basic Pembuatan Auto Popup di Blog
Terbaru 2017
- Hay gaes kali ini team Free Template BLogspot.Com, kali ini akan membahas artikel dengan judul Basic Pembuatan Auto Popup di Blog, kami selaku Team Free Template BLogspot.Com telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Free Template BLogspot.Com. semoga isi postingan tentang
Artikel Basic,
Artikel CSS,
Artikel JavaScript,
Artikel Plugin, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul:
Berbagi Info Seputar
Basic Pembuatan Auto Popup di Blog
Terbaru
link: Basic Pembuatan Auto Popup di Blog
Berbagi Basic Pembuatan Auto Popup di Blog Terbaru dan Terlengkap 2017
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'/>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/AVvXsEg9g2Bj5vkzUC6ehFFbVgDFKeUk_ZTomWylcahpjAh8Su81MJjsVpSxgOy0MGm_NZUNDugyvcpdJG0IUspC7CJTCnSFHqa7uL_JjdI4iyHH16yrUH3H_M3db5E9YrCutbEFM9Babz5bA_tz/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/AVvXsEiS-b8fa7gOgeTDBv_-gwpJz0QEWyLp5mIr9p3im8yONPMnBOv0j3e_nMRnroFuH-IZj_x6BjcBLaBlLvApL68BuMxXd3HFz-zuUTikmhscfiakxfCfhfIKpRIagthU3dOzFVzWJwdRgQ9Q/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/AVvXsEiS-b8fa7gOgeTDBv_-gwpJz0QEWyLp5mIr9p3im8yONPMnBOv0j3e_nMRnroFuH-IZj_x6BjcBLaBlLvApL68BuMxXd3HFz-zuUTikmhscfiakxfCfhfIKpRIagthU3dOzFVzWJwdRgQ9Q/s1600/SPACE-PROMOTE-600X400-PIXEL.png
dengan alamat gambar yang ingin sobat tampilkan. berukuran ( 600 x 400 pixel ) #linkdengan 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 -