Membuat Pop up Dengan CSS Pada Blog – Pop-Up adalah sebuah website atau blogger sering kita jumpai saat kita searching atau mencari tutorial lewat website maupun blogger broo ketika kita berkunjung pada blogger yang menggunakan pop-Up.
Table Of Contents
Membuat Pop up
mamun setiap yang menpunyai website ada yang di kasih Pop-Up dan tidak broo itu kesukan kamu sendiri masing-masing agar bertampilan berbeda atau ingin menggunakan.
Pop-Up broo, yang memnpunyai Pop-Up bias promosi atau Subcriber pada website yang anda kasih broo, atau bahkan digunakan untuk memberitahukan sesuatu kepada setiap pengunjung web atau blog tersebut tergantung kita mau pasang atau tidak broo.
Pop-Up
Pada kesempatan kali ini saya Mboton Dev akan ingin berbagi sedikit tentang kode script untuk membuat kotak kecil popUp di blogger atau website dengan menggunakan bantuan atau memanggil kode jQuery broo bias CSS mungkin bias juga HTML dan JavaScipt itu bisa membuat Pop Up broo.
Kode Membuat Pop up ini merupakan kode yang sangat mudah dan simpel untuk kita pelajari sendiri mungkin atau lewat website MbotonDev ini bro hehe.
Penggunaannya Anda hanya perlu menyiapkan kode-kode yang akan di tampilkan pada jendela kecil pop-up yang akan di pasang iklan maupun subscriber web bro, gambar atau kode lainnya yang bisa Anda gunakan lainnya.
Iklan
Biasanya sih broo Membuat Pop up yang disediakan oleh penyedia layanan iklan di dunia internet dapat di blokir oleh pemblokir Pop-Up namun sangat berbeda dengan ini loo broo.
Kode ini tidak dapat di blokir oleh aplikasi atau addons pemblokir iklan Pop-Up karena itu sangat cocok sekali untuk digunakan ya broo memasang iklan maupun Subcriber.
Tapi kembali lagi kepada Anda broo, bahwa widget Pop-Up ini juga sangat cocok sekali digunakan untuk menampilkan.
Gambar promosi terlihat elegan yang sangat cocok dengan desain gambar yang elegan juga maupun lebih responsive bro lebih tepatnya loo silakan mencoba Pop-Up kali ini broo.
Untuk membuat Pop-Up sederhana ini sangatlah mudah sekali tidak terlalu sulit untuk pemula asalkan mengikuti sesuai dengan langkah-langkah yang saya tulis di baca dengan detils ya broo agar tidak keliru untuk langkahnya semangat broo.
Membuat Pop up Langsung Ke TKP broo tutorial cara membuat popup di blog maupun blogspot dan website dibawah ini bro silakan lihat di bawah Tersebut:
- Langkah kesatu Masuk ke blogger atau website
- Langkah kedua Klik Template > lalu kita Edit HTML
- Langkah ketiga Cari kodenya caranya mudah tekan tombol CTRL + F lalu ketikkan </head>
- Langkah keempat Masukkan kodenya dibawah atas setelah itu klik Simpan </head>
.<script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>Membuat Pop up Jika sudah ada tidak perlu dipasang lagi, support versi 1.7.2 dan 1.8.2 tersebut
- Langkah kelima Kemudian cari kode </style> atau </head>.
- Langkah keenam Simpan kode CSSnya dibawah ini, tepat dibawah kode </style> atau diatas kode </head>
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; }
Langkah ketujuh Terakhir ini broo cari kode </body> kemudian simpan kode dibawah ini diatas kode </body> oke broo yang di bawah ini:
<div id="kr-box">
<a class="close-popup" href="#">×</a>
<div class="black-bg kaluar"></div>
<div class="gambar-space">
<a href="#URL-LINK Sobat" title="Judul Tautan Kalian Semua"><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>
Cara Setting Pop-Up Broo Silakan Di baca dengan teliti semoga berhasil:
- #URL-LINK = Ganti dengan link atau url tujuan contoh : https://www.mboton.net
- 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 sendiri sesuka hati kok bro intinya gambar hehe.
- Recommended image size 600×400 px
- alt=”Judul Gambar Sobat” dan title=”Judul Gambar Sobat” dan title=”Judul Tautan” silahkan diganti
Membuat Pop up Terimakasih jangan lupa berkomentar di bawah kawan-kawanku Mboton Dev saya tunggu kunjungan anda berikutnya.
josss
mantap