Januari 01, 2019




Bahastutorial.com -  Kita akan membahas tutorial bagaimana cara membuat banner atau iklan popup di blogger. Dengan Perpaduan css dan javascript terciptanya popup banner untuk pengguna blogger. Popup banner ini juga bisa dibuat untuk Iklan,Ucapan Acara, Atau Undangan.

Cara Penempatanya

1 Masuk Ke Blogger
2 Pilih Template/Tema
3 Kemudian Masuk Ke Edit Html
4 Kode Css Taruh Tepat Di Atas Kode </head>
5 Kode JS Taruh Tepat Di Atas Kode </body>
6 Kode Html Taruh Di Bawah Kode <body> atau <body>


 
<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>
 
<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;
});
});
 
<!-- 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibweCEvRSPWjvHoSmVloCX6-lkh1TXi59w5qlyBsnHM1Az7VnbakwQZGPvdj-A6ZBsIQU_WeDza2gsQI-Fe2P5h-HunTGu3be6VTwv8xYyd2u-tLb9-wABXGIbX1B3syAdNISsUP46hMaE/s1600/SPACE-PROMOTE-600X400-PIXEL.png" alt="Judul"/></a>
</div>
</div>



Yang Harus Di Edit Yaitu

1. gambar banner = Masukan Dengan Link Gambar Banned Kalian Ukuran 600x400

2. link banner = Di Isi Dengan Link Banner Kalian

Bagaimana tutorial kali ini yang di bahas di situs Bahastutorial.com apakah bermanfaat atau sangat berguna buat kalian yang telah mengunjungi situs Bahastutorial.com?Semoga tutorial kali ini sangat bermanfaat buat kalian pengunjung setia situs Bahastutorial.com .. Apabila masi ada yang kurang ngerti dari tutorial di atas silahkan sampaikan dalam kolom komentar ..

kami siap untuk membantu kalian agar kalian nyaman saat mengunjungi situs web Bahastutorial.com. Apabila kalian ingin mengcopy paste Tutorial ini .. Silahkan kalian meminta ijin terlebih dahulu dengan cara meminta izin dalam kolom komentar ..

Apabila tidak meminta izin terlebih dahulu maka dari pihak Bahastutorial.com siap menindak atau melaporkan atas kejahatan me copy paste .. Terima kasih ditunggu ya tutorial selanjutnya salam dari Bahastutorial.com
#Blogger

Sebuah Situs Yang Menyedikan Berbagai Macam Tutorial Blogger, Tutorial Wordpress, Tutorial Android, Tutorial Website, Tutorial Ios Dan Template

Banyak Dibaca
Aturan Komentar : Tanyakan Di Kolom Komentar Apabila Ada Yang Kurang Jelas. Komentar Dengan Sopan . Apabila Ada Yang Kurang Sopan. Admin Akan Otomatis Hapus Komentar Anda.
Disqus Comments

  • Andy 🆔 - Pengunjung - 2 Januari 2019 pukul 00.12

    Bermanfaat gan tpi bingung dengan gambar banner nya

  • BAHASTUTORIAL.COM - Pengunjung - 2 Januari 2019 pukul 07.22

    Coba buat di photoshop atau di coreldraw