Saturday, February 18, 2017 Blogging Tips

Cara Membuat Iklan Melayang atau Pop-Up Di Blog

Selamat datang kembali agan/sist, kali ini saya akan menjelaskan bagaimana caranya untuk membuat iklan melayang atau bisa disebut pop-up di sebuah blog. oke langsung saja kita lihat contohnya di bawah ini, siapa tau masih ada yang belum paham apa itu iklan pop-up :D

Gimana gan? udah tau kan hehe..

Okeh ga usah banyak bacot, langsung saja simak langkah-langkahnya di bawah ini:

Ada 2 cara, yaitu lewat widget HTML/Javascript atau langsung di dalam templatenya.

* Melalui Widget HTML/Javascript

Masuk ke blog agan, lalu pilih tata letak
Lalu agan pilih tambah widget (terserah mau di header ataupun yang lainnya)
Lalu pilih edit, dan masukan source kode yang di bawah.

*Melalui edit HTML template

Langkah awal hampi sama seperti yang di atas.
Masuk ke template, lalu pilih edit HTML
Tekan Ctrl+F untuk menampilkan tools search di edit HTML
Lalu ketik </head> atau <body>, lalu masukan source code yang ada di bawah (di bawah </head> atau di atas <body>
Ingat nyarinya di tools search yang ada di layar edit HTML bukan yang di atas sendiri.

Source Code:

<style>

#adstopbar {

height:25px;

cursor:move;

width:auto;

background: #005094 url(http://lh6.googleusercontent.com/-25yI9RdlTQM/TkWH5CaAh3I/AAAAAAAAAd4/tl00tzlBc80/s800/sidebar-h2.jpg);

background-repeat:repeat-x;

text-align:left;

box-shadow: inset 0 0 1px #fff;

-moz-box-shadow: inset 0 0 1px #fff;

-webkit-box-shadow: inset 0 0 1px #fff;

-moz-border-radius:4px 4px 0 0;

-webkit-border-radius: 4px 4px 0 0;

border-radius:4px 4px 0 0;

background-color:#005094;

}

#adsplace {

height:auto;

margin:0 auto;

width: auto;

background:#fff;

border-bottom:2px #005094 solid;

border-right:2px #005094 solid;

border-left:2px #005094 solid;

text-align:Center;

padding:2px;

}

#adspace {

opacity:1.0;

height:auto;

width:auto;

position: fixed;

top: 20%;

left: 40%;

border-bottom:1px #005094 solid;

border-bottom:0px blue solid;

color:#333;

padding:0px;

z-index:+99999;

font-size:13px;

}

</style>

$(document).ready(function() {

$("#adspace").draggable();

$("#adspace").show("clip");

$("#adsClose").click(function(){

$("#adspace").hide("explode");});

});

</script>

<img align='left' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV7JkKmj9xToGWthGDoC0G19Pj0YHZfpzs5IrIQEPaRwVLldhjyBcYnLCib7dsM4tqEsAEkAC2PoWqJLYYXo8bfhL2DWRqUEgwWky8A0B7E1aQ5IiUj5Wyvz2KIPML8QtF62Cdv7aPYuWL/s1600/ads_1.png' style='width:24px;height:24px;padding-left:2px;'/><span style='color:#fff;font-size:17px;font-weight:bold;text-shadow:black 0.1em 0.1em 0.1em;margin-left:5px;'>Sponsor</span> <span style='color:#fff;font-size:13px;font-weight:bold;text-shadow:black 0.1em 0.1em 0.1em;float:right;padding-top:3px;padding-right:2px'>

</span>

</div>

Kode Iklan Taruh Di sini Gan ☺

</div></div>

Gimana agan-agan semua? mudah kan.
Mungkin itu dulu dari saya... Semoga bermanfaat :D

Posted by Iman Faizal