Membuat Pop up Dengan CSS Pada Blog

https://www.mboton.net/2019/03/membuat-pop-up-dengan-css-pada-blog.html
Membuat Pop up Dengan CSS Pada Blog

Membuat Popup 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, namun 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 pop-Up 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 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 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. 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'/>


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>

@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="#">&#215;</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:


  1. #URL-LINK = Ganti dengan link atau url tujuan contoh : https://www.mboton.net
  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 sendiri sesuka hati kok bro intinya gambar hehe.
  3. Recommended image size 600x400 px
  4. alt="Judul Gambar Sobat" dan title="Judul Gambar Sobat" dan title="Judul Tautan" silahkan diganti


Terimakasih jangan lupa berkomentar di bawah kawan-kawanku Mboton Dev saya tunggu kunjungan anda berikutnya.
Membuat Pop up Dengan CSS Pada Blog Membuat Pop up Dengan CSS Pada Blog Reviewed by Mboton on 3/11/2019 Rating: 5

2 comments:

Powered by Blogger.