Membuat Popup Dengan CSS, HTML, JavaScript di Blog

Membuat popup melayang 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 :


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(http://3.bp.blogspot.com/-7A606zdRAD8/U10SZcdl9QI/AAAAAAAAE3o/V_9HMnP0fLQ/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="http://1.bp.blogspot.com/-Eq--wpK-4ko/U10QpJeZN6I/AAAAAAAAE3c/0Qb_BlUQUzg/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. http://1.bp.blogspot.com/-Eq--wpK-4ko/U10QpJeZN6I/AAAAAAAAE3c/0Qb_BlUQUzg/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...

7 Komentar untuk "Membuat Popup Dengan CSS, HTML, JavaScript di Blog"

  1. iya gan berhasil caranya, gak nyangka keren banget :D tapi masih bingung buat apa :3

    BalasHapus
    Balasan
    1. bisa buat subscribe email mungkin, hehe :D

      Hapus
  2. Keren efeknya. Buat direct ke halaman donasi nih. Thanks bang ficri :-d

    BalasHapus
    Balasan
    1. bisa om silahkan di coba hehe :D semoga bermanfaat...

      Hapus
    2. Penasaran ingin memcobanya. Tapi lihat didemonya kok tidak nampak ya ?

      Hapus
    3. hehe kayaknya ke ubah script di blog demonya, ya tampilannya sama seperti di gambar itu :D

      Hapus
  3. gan kalo pop up-nya biar cuma nongol sekali gimana ya?

    BalasHapus

Jika Ingin Memasukan Kode Script (CSS, HTML, JavaScript) Silahkan Gunakan Kode Dibawah ini :

1. Untuk Menyisipkan Kode Panjang Gunakan <i rel="pre">Kode Disini</i>
2. Untuk Menyisipkan Kode Pendek Gunakan <i rel="code">Kode Disini</i>
3. Untuk Menyisipkan Quote Gunakan <b rel="quote">Catatan Anda</b>
4. Untuk Menyisipkan Gambar Gunakan <i rel="image">URL Gambar</i>
5. Untuk Menyisipkan Video Gunakan <i rel="youtube">URL Video Youtube</i>

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Fast Hosting