×
Judul

Panduan Membuat Artikel Konten Pilar dengan Mudah

 Konten pilar adalah konten yang memberikan informasi lengkap dan mendalam tentang topik tertentu yang relevan dengan bisnis Anda. Konten pi...

Desain Blog

Cara Membuat Pop Up di Halaman Depan Blog



Pop Up atau Iklan sembulan (bahasa Inggris: pop-up advertisement) adalah jendela iklan yang biasanya muncul tiba-tiba jika mengunjungi suatu halaman web. Biasanya iklan ini tidak diperlukan dan harus disingkirkan agar tidak mengganggu proses berselancar di web.

Kadang kala hal ini mengganggu pengunjung blog jika pengunjung merasa hal tersebut tidak diharapkan. Tetapi ada juga manfaat lain bagi pemilik blog misalnya ingin mengumumkan hal penting kepada pembaca terkait dengan informasi penting di blog.

Nah berikut ini adalah tutorial membuat tampilan pop up di blog kalian

Pertama, Masuk ke Blogger

Kedua, Pilih Template/Tema

Ketiga, Masuk Edit HTML


Copy Kode CSS berikut di atas kode </head>
 
<style type="text/css">

/* PopUp Box CSS Bahastutorial.com */
@media (max-width:800px){#bahastutorialbanner{display:none}}
#bahastutorialbanner{position:fixed!important;position:absolute;top:-700px;left:39%;margin:0 0 0 -182px;font:normal Dosis,Georgia,Serif;color:#333;-webkit-box-shadow:0 0 10px #333;-moz-box-shadow:0 0 10px #333;box-shadow:0 0 10px #333;background:#fff;z-index:99999;}
#bahastutorialbanner a.close-popup{position:absolute;top:-25px;right:0;font:25px Arial,Sans-Serif;text-decoration:none;text-align:center;color:#f2f2f2;cursor:pointer}
#bahastutorialbanner a.close-popup:hover{color:#fff}
#bahastutorialbanner a.close-popup:active{opacity:0}
#bahastutorialbanner div.black-bg{background:#000;position:fixed;top:0;left:0;width:100%;height:100%;opacity:.6;z-index:-500}
#bahastutorialbanner div.gambar-space{border:5px solid #fff;position:relative;background:#fff;border-bottom:0}
#bahastutorialbanner div.gambar-space img{width:600px;height:400px}
</style>



Copy Kode JS(JavaScript) berikut di atas kode </body>


 
<script type='text/javascript'>
// JavaScript Popup Banner Box
$(window).bind("load", function() {
$('#bahastutorialbanner').animate({top:"100px"}, 2000);
$('a.close-popup, .kaluar').click(function() {
$(this).parent().fadeOut(500);
return false;
});
});
</script>



Copy Kode HTML berikut di bawah kode <body>


 
<!-- jQuery Popup Banner Box [ Begin ] -->
<div id="bahastutorialbanner">
<a class="close-popup" href="#">&#215;</a>
<div class="black-bg kaluar"></div>
<div class="gambar-space">
<a href="#link"><img src="#linkgambar" alt="Judul"/></a>
</div>
</div>



Untuk contoh tampilan bisa lihat di sini. Pada kasus tersebut ingin mengganti blog Beasiswa.site menjadi yukbeasiswa.web.id
Selamat mencoba!



Cara Membuat Pop Up di Halaman Depan Blog Cara Membuat Pop Up di Halaman Depan Blog Reviewed by Zaenal Arifin on July 10, 2019 Rating: 5

1 comment:

Most Popular

Domain and Hosting

hosting indonesia
Powered by Blogger.