Membuat Ads PopUp Container

In Web 1255 views

Untuk membuat popup ads container pada blogger caranya cukup mudah, ikuti langkah berikut ini :

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke “Tata Letak – Elemen Laman”
Langkah 3
Klik “Tambah Gadget Baru” dengan tipe “HTML/JavaScript”
Langkah 4
Masukan kode dibawah ini pada bagian konten (tanpa judul gadget):

<style type="text/css">
#topbar{
position:absolute;
visibility: hidden;
width: 350px;
z-index: 100;
padding:5px;
background-color: #FFFFFF;
border: 1px solid #333333;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
margin:0 auto 10px;
float:left;
color: #505050;
text-align: justify;
font-size: 12px;
font-family: Verdana, serif;
}
</style>
<script src="http://yourjavascript.com/4713022259/js_pop_up.js" type="text/javascript"></script>
<script type="text/javascript">
var persistclose=0
var startX = 20
var startY = 20
var verticalpos="fromtop"
</script>
<div id="topbar">
<div align="right"><a href="" onclick="closebar(); return false"><button>Tutup</button></a></div>
<!-- Kode Iklan -->

<font face="arial,sans-serif" color="#83878c" style="line-height: 8px; font-size: 9px; text-decoration:underline;"><a href="http://blog.bodi.web.id" target="_blank">bodi</a>
</div>

Perhatikan kode CSS (Langkah 4 baris 1 sampai dengan baris 18)!

* Ubah nilai 350 (langkah 4 baris 4) untuk mengatur lebar wadah;
* ubah nilai FFFFFF (langkah 4 baris 7) untuk mengubah warna latar dari wadah ads popup;
* ubah nilai 1px solid #333333 (langkah 4 baris 8) untuk mengatur garis pinggir, jika tidak tidak memerlukan garis pinggir ubah 1px menjadi 0px atau ubah “solid” menjadi “none” (tanpa tanda petik);
* Untuk mengetahui kode-kode warna HTML silahkan klik disini.

Perhatikan kode JavaScript (Langkah 4 baris 19 sampai dengan baris 25)!

* var persistclose=0, nilai 0 berarti ads popup akan selalu muncul walau diklik tombol “Tutup” pada saat pengunjung membuka halaman lain, nilai 1 berarti ads popup hanya akan muncul satu kali sampai pengunjung meng-klik tombol “Tutup” dan ads popup tidak akan muncul lagi walaupun pengunjung membuka halaman lain sampai browser ditutup;
* var startX = 20 dan var startY = 20, nilai 20 adalah jarak x dan y antara ads popup dengan sisi browser dengan satuan pixel, ubahlah nilai 20 untuk mengatur jaraknya;
* var verticalpos=”fromtop” untuk mengatur dari mana ads popup muncul, jika “fromtop” berarti ads popup akan muncul dari atas dan selalu diposisi atas browser, jika di set “frombottom” berarti ads popup akan muncul dari bawah dan akan selalu diposisi bawah browser.
* Gantilah kode (Langkah 4 baris 28) dengan kode iklan milik anda.

Agar background menjadi transparan silahkan tambahkan kode CSS dibawah ini:

filter:alpha(opacity=75);
-moz-opacity:0.75;
opacity:0.75;

source : modification-blog.blogspot.com

Jika source code popup diatas tidak berhasil silahkan mencoba code berikut dibawah ini :

<style>
#topbar {
height:20px;
width:auto;
background: #1589FF;
background-repeat:repeat-x;
text-align:left;
padding-top:1px;
}
#adsground {
height:auto;
margin:0 auto;
width: 240px;
background:#fff;
border-bottom:2px #005094 solid;
border-right:2px #005094 solid;
border-left:2px #005094 solid;
text-align:left;
padding:4px;
}

#headlineatas {
opacity:1.0;
height:auto;
width:auto;
position:fixed;
top:1px;
left:1px;
border-bottom:1px #005094 solid;
border-bottom:0px blue solid;
color:#333;
padding:0px;
z-index:1001;
font-size:13px;}
</style>
<script type="text/javascript">
function getValue()
{
document.getElementById("headlineatas").style.display = 'none';
}
</script>
<div id="headlineatas">
<div id="topbar">
<span style="color:#fff;font-size:13px;font-weight:bold;text-shadow:#F778A1 0.1em 0.1em 0.1em;padding-left:5px">Informasi Penting</span>
<span style="color:#fff;font-size:13px;font-weight:bold;text-shadow:#F778A1 0.1em 0.1em 0.1em;float:right;padding-top:1px;padding-right:5px"><a href="http://blog.bodi.web.id" target="_blank" onclick="getValue()">close</a></span>
</div>
<div id="adsground">
<!-- PUT YOUR CONTENT BETWEEN HERE -->

<!-- END YOUR CONTENT HERE -->
</div></div>

atau

<div id="showimage" style="position:absolute;width:260px;left:5px;top:10px">

<table border="0" width="260px" bgcolor="#000080" cellspacing="0" cellpadding="2">
  <tr>
    <td width="100%"><table border="0" width="260px" cellspacing="0" cellpadding="0"
    height="100px">
      <tr>
        <td id="dragbar" style="cursor:hand; cursor:pointer" width="100%" onMousedown="initializedrag(event)"><ilayer width="100%" onSelectStart="return false"><layer width="100%" onMouseover="dragswitch=1;if (ns4) drag_dropns(showimage)" onMouseout="dragswitch=0"><font face="Verdana"
        color="#FFFFFF"><strong><small>Informasi</small></strong></font></layer></ilayer></td>
        <td style="cursor:hand"><a href="#" onClick="hidebox();return false"><img src="close.gif" width="16px"
        height="14px" border=0></a></td>
      </tr>
      <tr>
        <td width="100%" bgcolor="#FFFFFF" style="padding:4px" colspan="2">
<!-- PUT YOUR CONTENT BETWEEN HERE -->

<!-- END YOUR CONTENT HERE -->
</td>
      </tr>
    </table>
    </td>
  </tr>
</table>
</div>

 

Selamat mencoba dan semoga berhasil. Happy Blogging… ­čÖé

Related Search

Hapus Post Lama di WordPress Melalui PHPMyadmin
Hapus Post Lama di WordPress Melalui PHPMyadmin
Sekelumit tentang perintah langsung di PHPMyadmin sudah
Bypass Internet Positif
Bypass Internet Positif
Buat agan-agan yang sudah capek dengan Internet
Redirect Artikel Pada Domain Lama Ke Domain Baru dengan .htaccess
Redirect Artikel Pada Domain Lama Ke Domain Baru dengan .htaccess
Caranya cukup simple, buat file .htaccess pada
Leverage browser caching for Nginx
Leverage browser caching for Nginx
Apa siy Leverage browser caching ? Ini penjelasan

Top