Membuat Popup Dengan CSS, HTML, JavaScript di Blog

Membuat Popup Dengan CSS, HTML, JavaScript di Blog - Popup dalam sebuah web atau blog sering kita jumpai ketika kita berkunjung ke blog yang menggunakan pop-up itu sendiri, namun setiap web atau blog menggunakan pop up dengan cara yang berbeda-beda, ada yang digunakan untuk menampilkan iklan, ada yang digunakan untuk promosi, atau bahkan digunakan untuk memberitahukan sesuatu kepada setiap pengunjung web atau blog tersebut.

Pada kesempatan kali ini saya ingin berbagi sedikit kode script untuk membuat kotak popup di blog dengan menggunakan bantuan jQuery, CSS, HTML, dan JavaScipt. Kode popup ini merupakan kode yang sangat mudah dan simpel untuk kita pelajari, dalam penggunaannya Anda hanya perlu menyiapkan kode yang akan di tampilkan pada jendela pop-up yang akan di pasang entah itu iklan, gambar, atau kode lainnya yang bisa Anda gunakan.

Biasanya popup yang disediakan oleh penyedia layanan iklan di internet dapat di blokir oleh pemblokir popup namun berbeda dengan ini, kode ini tidak dapat di blokir oleh aplikasi atau adons pemblokir iklan popup oleh karena itu sangat cocok sekali untuk digunakan memasang iklan. Tapi kembali lagi kepada Anda, bahwa widget popup ini juga sangat cocok digunakan untuk menampilkan gambar promosi karena desainnya yang sederhana dan terlihat elegan yang sangat cocok dipadukan dengan desain gambar yang elegan juga.

Untuk membuat popup sederhana ini sangatlah mudah dan tidak terlalu sulit untuk pemula asalkan mengikuti sesuai dengan langkah-langkah yang saya tulis. Langsung saja baca tutorial cara membuat popup di blog dibawah ini :

DEMO

1. Masuk ke Blogger.com
2. Klik Template > Edit HTML
3. Cari kode </head> caranya tekan tombol CTRL + F lalu ketik </head>
4. Masukkan kode dibawah ini, simpan di atas kode </head>

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>

Catatan : Jika sudah ada tidak perlu dipasang lagi, support versi 1.7.2 dan 1.8.2
5. Kemudian cari kode </style> atau </head>.
6. Simpan kode css dibawah ini, tepat dibawah kode </style> atau diatas kode </head>

<style type="text/css">
/* Popup 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/AVvXsEjQ3OtHWki8YLMzHsmkwI6IMAaqWU4jRxLeVlG3c2HGroXaOo2Lp9GEVs-4NTYnHe0Q2TVoN7rT70_dzKlShinmX4DsmZ4Fx_QGR_0H64iud5izCD__5y5Z8apqba3sidrLumSNeaPvZYgr/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>

7. Terakhir cari kode </body> kemudian simpan kode dibawah ini diatas kode </body>

<!-- 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="#URL-LINK" title="Judul Tautan"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj-_9unSefmB6EDPqHv_oqJrcGoR8Y0vFbryC8AUrxDbj5jq-EXs_s-6NTJQvdZolLsMsTQg4l_KhVg3r3vZS2Ifa3SU2BXaAXzhzdsyZl0bHhV8QEpFl30hOccyzI29fGLhMxrKygOkp9/s1600/SPACE-PROMOTE-600X400-PIXEL.png" alt="Judul Gambar" title="Judul Gambar"/></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 ] -->

Cara Setting :
1. #URL-LINK = Ganti dengan link atau url tujuan contoh : http://www.ficripebriyana.com
2. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj-_9unSefmB6EDPqHv_oqJrcGoR8Y0vFbryC8AUrxDbj5jq-EXs_s-6NTJQvdZolLsMsTQg4l_KhVg3r3vZS2Ifa3SU2BXaAXzhzdsyZl0bHhV8QEpFl30hOccyzI29fGLhMxrKygOkp9/s1600/SPACE-PROMOTE-600X400-PIXEL.png Silahkan Anda ganti dengan url atau link gambar yang Anda miliki.
3. Recommended image size 600x400 px
4. alt="Judul Gambar" dan title="Judul Gambar" dan title="Judul Tautan" silahkan diganti

Terimakasih : kangrian.com

Sekian artikel mengenai Membuat Popup Dengan CSS, HTML, JavaScript di Blog. Kurang lebihnya mohon maaf.
Semoga Bermanfaat...

Ficri Pebriyana

Blogger yang jarang nulis artikel :D

Bagikan Artikel ini