Membuat Iklan Yang Menarik Seperti Google Adsense

Membuat Iklan Yang Menarik Seperti Google Adsense - Menurut sobat apa yang membuat sebuah iklan dalam blog atau web akan di klik oleh pengunjung ? Pertama adalah penempatan iklan tersebut, Kedua isinya memang menarik, dan yang ketiga mungkin salah satunya adalah bentuk iklan tersebut menarik atau unik. Kesempatan kali ini saya akan share cara membuat iklan di blogspot penampakan nya seperti iklan Google Adsense. Trik ini saya dapat dari blog nya kang ismet. Seperti apa penampakanya, silahkan lihat demo dibawah ini :

• Demo

Langkah 1 : Simpan kode ini di atas </head>

<script src='https://googledrive.com/host/0B3pi8P5BWqm1OHB4Zks1aWR0Nnc/iklan-teks-ga.js' type='text/javascript'/> 



Langkah 2 : Simpan kode CSS ini di atas ]]></b:skin> atau </style>

/* Iklan Teks
----------------------------------------------- */
#iklan-teks {
  width:304px;
  height:259px;
  background-color:white;
  position:relative;
  overflow:hidden;
  margin:0 auto;
}
#iklan-teks h2.iklan-header {
  cursor:pointer;
  background-color:white;
  background-image:none;
  font:normal 20px Verdana, Tahoma,Serif;
  color:blue;
  border-top:1px solid #d8d8d8;
  padding:10px;
  margin:0 0;
  position:relative;
  text-transform:none;
  letter-spacing:0;
}
#iklan-teks h2.iklan-header:first-child {
  border-top:none;
}
#iklan-teks h2.active {
  display: none;
}
#iklan-teks h2.iklan-header:before{
  content:"";
  width:0;
  height:0;
  position:absolute;
  top:20px;
  right:15px;
  border:5px solid transparent;
  border-color:#b2b2b2 transparent transparent;
}
#iklan-teks div {
  height:100px;
  padding:10px 70px 10px 10px;
  font:normal 13px Verdana, Tahoma,Serif;
  color:white;
  border-top:1px solid #d8d8d8;
}
.judul {
  font:normal 20px Verdana, Tahoma,Serif;
  color:blue;
  margin:0 0 5px 0;
}
a.judul{
  font:normal 20px Verdana, Tahoma,Serif !important;
  color:blue !important;
  text-decoration:none;
  display:inline-block;
}
a:hover.judul {
  font:normal 20px Verdana, Tahoma,Serif !important;
  color:blue;
  text-decoration:underline;
}
.isi-iklan a{
  font:normal 13px Verdana, Tahoma,Serif;
  color:green;
  text-decoration:none;
  display:block;
  margin-bottom:10px;
}
.isi-iklan a:hover{
  color:green;
  text-decoration:none;
}
.isi {
  padding-top:15px;
  color:#222;
  text-align:left !important;
}
.panah-besar {
  background: #4d90fe;
  border-radius: 50%;
  cursor: pointer;
  height: 34px;
  float: right;
  margin-right: -60px;
  margin-top: -40px;
  width: 34px;
  text-align: center;
  line-height: 34px;
}
.panah-besar:hover {
  background: #4472bd;
}
.info-icon {
  width:15px;
  height:15px;
  position:absolute;
  top:0;
  right:0;
  cursor:pointer;
}
.info-iklan {
  background:#d3d3d3;
  width:100px;
  height:15px;
  border-bottom-left-radius:4px;
  position:absolute;
  top:0;
  right:0;
  color:#000;
  font:normal 11px Arial,Sans-Serif;
  text-align:left;
  overflow:hidden;
  padding-right:19px;
  padding-left:5px;
  display:none;
}

Langkah 3 : Simpan kode ini pada Widget HTML / JavaScript

<div id="iklan-teks">
    <!-- iklan ke 1 -->
    <div data-header="Blogger Tutorial" style="border-top:none">
        <span class='isi-iklan'><a class='judul' href='http://blog.kangismet.net' target='_blank'>Blogger Tutorial</a>
            <a href='http://blog.kangismet.net' target='_blank'>blog.kangismet.net</a>
        <span class='isi'>Blogger Tutorials and Free Blogger Templates.</span>
            <a class='panah-besar' href='http://blog.kangismet.net' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXAjU0QhSzGOffEOLcurnLdhv4cAH7nlgCl0vHmsom9Pw8RKJB-3xxVrL6AWobW2Fb1vgN3OrUMSlME68MBcqNqZbfs3VYV7A9XFm2ywK8t1BKtLJ3BifJfOoK6wSkcv70dEC17jpiwkM/s1600/icon_chevron_white.png'/></a>
        </span>
    </div>
    <!-- iklan ke 2 -->
    <div data-header="Pasang Iklan di Sini">
        <span class='isi-iklan'><a class='judul' href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'>Pasang Iklan di Sini</a>
            <a href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'>blog.kangismet.net</a>
            <span class='isi'>Pasang iklan Anda di sini, hanya 35 ribu / bulan.
            <a class='panah-besar' href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXAjU0QhSzGOffEOLcurnLdhv4cAH7nlgCl0vHmsom9Pw8RKJB-3xxVrL6AWobW2Fb1vgN3OrUMSlME68MBcqNqZbfs3VYV7A9XFm2ywK8t1BKtLJ3BifJfOoK6wSkcv70dEC17jpiwkM/s1600/icon_chevron_white.png'/></a></span>
        </span>
    </div>
    <!-- iklan ke 3 -->
    <div data-header="Pasang Iklan di Sini">
        <span class='isi-iklan'><a class='judul' href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'>Pasang Iklan di Sini</a>
            <a href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'>blog.kangismet.net</a>
            <span class='isi'>Pasang iklan Anda di sini, hanya 35 ribu / bulan.
            <a class='panah-besar' href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXAjU0QhSzGOffEOLcurnLdhv4cAH7nlgCl0vHmsom9Pw8RKJB-3xxVrL6AWobW2Fb1vgN3OrUMSlME68MBcqNqZbfs3VYV7A9XFm2ywK8t1BKtLJ3BifJfOoK6wSkcv70dEC17jpiwkM/s1600/icon_chevron_white.png'/></a></span>
        </span>
    </div>
    <!-- iklan ke 4 -->
    <div data-header="Pasang Iklan di Sini">
        <span class='isi-iklan'><a class='judul' href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'>Pasang Iklan di Sini</a>
            <a href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'>blog.kangismet.net</a>
        <span class='isi'>Pasang iklan Anda di sini, hanya 35 ribu / bulan.
            <a class='panah-besar' href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXAjU0QhSzGOffEOLcurnLdhv4cAH7nlgCl0vHmsom9Pw8RKJB-3xxVrL6AWobW2Fb1vgN3OrUMSlME68MBcqNqZbfs3VYV7A9XFm2ywK8t1BKtLJ3BifJfOoK6wSkcv70dEC17jpiwkM/s1600/icon_chevron_white.png'/></a></span>
        </span>
    </div>
    <!-- info -->
    <span class='info-iklan'>Iklan oleh Kang Ismet</span>
    <span class='info-icon'><a href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'><img alt='info' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCd_BqtXKtwhceZtm-3hqTzHU6vAJitBsfErFb7cLoWiKp6Chtm77F0t7EaEpBrMC51lKSZ8k45zt0UCP1AoXDnwxo8xo5I26VQD4ZvINGGO6Ljyntw2LtoilSGGDFnmlvCA0xz9lC5ks/s1600/info-iklan.png'/></a></span>    
</div>

Silahkan sobat edit judul dan link sesuai keinginan.
Cukup sekian tips  Membuat Iklan Yang Menarik Seperti Google Adsense. Semoga Bermanfaat

Thanks to : kangismet.net

Cara Membuat Popup Iklan dengan Tombol Close

Cara Membuat Popup Iklan dengan Tombol Close ini terinspirasi seperti youtube. Kalau sobat berkujung ke www.youtube.com, pas pertama kali masuk sobat akan disuguhi iklan popup dibawah header berukuran besar dengan tombol close, dan pastinya iklan tersebut membuat gatel jari kita untuk mengkliknya..hee..
Kalau sobat tertarik ingin membuat iklan popup seperti youtube itu, ikuti saja langkah-langkah dibawah ini, tapi hasilnya mungkin tidak 100% mirip, tergantung bagaimana sobat memodifikasinya.

Cara Membuat Popup Iklan dengan Tombol Close :

1. Sobat masukkan kode dibawah ini ke add gadget HTML, prosesnya saya balik untuk lebih meminimalisir kesalahan :

<div id="pb-box" class="mrpujiajadeh-popup">
<br /><span style="color: rgb(204, 0, 0);"></span><p align="right"><a href="#" class="close">
<br/><small><u>[x] Tutup Iklan</u></small></a></p>
<iframe vspace="0" frameborder="2" marginheight="100" marginwidth="100" readonly="true" height="400" src="http://beritamuslimsahih-ahlussunnah.blogspot.com/" hspace="10" scrolling="yes" width="100%" allowtransparency="true"></iframe>
</div>

<script type='text/javascript'>
$(document).ready(function() {
$('a.pb-window').click(function() {

//Getting the variable's value from a link
var pbBox = $(this).attr('href');

//Fade in the Popup
$(pbBox).fadeIn(300);

//Set the center alignment padding + border see css style
var popMargTop = ($(pbBox).height() + 24) / 2;
var popMargLeft = ($(pbBox).width() + 24) / 2;

$(pbBox).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});

// Add the mask to body
$('body').append('<div id="mask"></div>');
$('#mask').fadeIn(300);

return false;
});

// When clicking on the button close or the mask layer the popup closed
$('a.close, #mask').live('click', function() {
$('#mask , .mrpujiajadeh-popup').fadeOut(300 , function() {
$('#mask').remove();
});
return false;
});
});
</script>

Kode yang berwarna merah diatas, silahkan sobat ganti dengan kode script iklanya, bisa video,gambar dl.

2. Kemudian cari kode berikut:

    ]]></b:skin>

Jika sudah sobat temukan, tepat dibawahnya letakkan script jquery berikut:

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2' type='text/javascript'/> 

3. Setelah itu tepat diatas kode ]]></b:skin>,letakkan barisan css berikut:

#mask {
display: none;
background: #000;
position: fixed; left: 0; top: 0;
z-index: 10;
width: 100%; height: 100%;
opacity: 0.8;
z-index: 999;
}
.pb-popup{
display:none;
background: #333;
padding: 10px;
border: 2px solid #ddd;
float: left;
font-size: 1.2em;
position: fixed;
top: 50%; left: 50%;
z-index: 99999;
box-shadow: 0px 0px 20px #999; /* CSS3 */
-moz-box-shadow: 0px 0px 20px #999; /* Firefox */
-webkit-box-shadow: 0px 0px 20px #999; /* Safari, Chrome */
border-radius:3px 3px 3px 3px;
-moz-border-radius: 3px; /* Firefox */
-webkit-border-radius: 3px; /* Safari, Chrome */
}
fieldset {
border:none;
}

4. Sebelum di save, sobat preview terlebih dahulu, kalau terlihat berhasil tinggal di save saja.

Bagaimana sob, keren kan iklan pop up melayang ini ?.
Sampai disini tutorial Cara Membuat Popup Iklan dengan Tombol Close.

Semoga bermanfaat.

Script by : www.pelajaran-blog.blogspot.com

Cara Membuat Kotak Banner Iklan 125 x 125

Tips blog kali ini adalah cara membuat kotak banner iklan 125 x 125. Cara ini berguna buat sobat blogger yang ingin membuat kotak iklan sendiri di blog. Untuk memasang iklan di blog pastinya tidak boleh sembarangan asal memasang nya, karena selain bisa mempengaruhi loading blog, juga bisa membuat pengunjung blog sobat risih melihat susunan iklan yang tidak teratur. Dengan menggunakan tips ini, iklan sobat akan lebih tertata rapi, walaupun ukuranya hanya 125 x 125.
Demonya seperti gambar di bawah ini :

Cara membuat nya Kotak Banner Iklan 125 x 125 :

Masuk ke blogger > Rancangan > add gadget > HTML/Javascript, kemudian masukkan kode di bawah ini;

    <div align="center">
    <table border="0"  cellpadding="2" cellspacing="6" width="265" bgcolor="#ffffff">
    <tbody><tr>

    <td><center><a href="URL/Alamat IKLAN" rel="nofollow"><img border="0" alt="Deskripsi Iklan" width="125" src="URL/Alamat Gambar Iklan" height="125"/></a></center></td>

    <td><center><a href="URL/Alamat IKLAN" rel="nofollow"><img border="0" alt="Deskripsi Iklan" width="125" src="URL/Alamat Gambar Iklan" height="125"/></a></center></td>
    </tr>
    <tr>

    <td><center><a href="URL/Alamat IKLAN" rel="nofollow"><img border="0" alt="Deskripsi Iklan" width="125" src="URL/Alamat Gambar Iklan" height="125"/></a></center></td>

    <td><center><a href="URL/Alamat IKLAN" rel="nofollow"><img border="0" alt="Deskripsi Iklan" width="125" src="URL/Alamat Gambar Iklan" height="125"/></a></center></td>
    </tr>

    </tbody></table>

    <table border="0" bordercolor="#0084ce" cellpadding="2" cellspacing="6" width="265" bgcolor="#ffffff">
    <tbody>
          <tr>
           <td><center><a href="URL/Alamat Blog" rel="nofollow"><img width="265" height="37" border="0" alt="Pasang Iklan Di Sini" src="URL/Alamat Gambar advertise here" /></a></center></td>
          </tr>

        </tbody></table>

    </div>

Pengaturan Kotak Banner Iklan:

1.  Ganti kata URL/Alamat IKLAN dengan alamat website pemasang iklan

2.  Ganti kata URL/Alamat Gambar Iklan dengan link atau alamat gambar iklan di hosting

3.  Ganti kata Deskripsi Iklan dengan informasi dan deskripsi mengenai iklan yang dipasang, deskripsi ini akan muncul pada saat kursor mouse digerakkan ke arah banner iklan.

4.  Ukuran default sidebar adalah 265, jadi pastikan ukuran sidebar blog sobat tidak kurang dari itu.

Jika sobat ingin menambah kotak iklan lagi dibawahnya misalnya menjadi 6 kotak tinggal masukkan kode di bawah ini, di bawahnya kode yang berwarna biru.

    <tr>
    <td><center><a href="URL/Alamat IKLAN" rel="nofollow"><img border="0" alt="Deskripsi Iklan" width="125" src="URL/Alamat Gambar Iklan" height="125"/></a></center></td>

    <td><center><a href="URL/Alamat IKLAN" rel="nofollow"><img border="0" alt="Deskripsi Iklan" width="125" src="URL/Alamat Gambar Iklan" height="125"/></a></center></td>
    </tr>

Sampai disini sobat sudah mempunyai banner iklan 125 x 125. Cukup sekian tips blog kali ini  Cara Membuat Kotak Banner Iklan 125 x 125, Semoga bermanfaat.

Cara Membuat Iklan Melayang atau Pop Up Di Tengah Blog

Tips blog kali ini saya ingin berbagi bagaimana caranya menampilkan iklan pop up atau melayang ditengah-tengah blog. Tidak hanya iklan, bahkan foto,video dsb bisa sobat masukan di widget ini. Posisi dari widget pop-up ini tepat ditengah tampilan layar blog sobat, kalau pun tidak pas ditengah, dapat disesuaikan letak posisinya. Widget pop-up ini berguna jika sobat ingin memasang teks/pesan penting, iklan, gambar, atau widget fans facebook.

Cara Membuat Iklan Melayang atau Pop Up Di Tengah Blog ini juga sangat mudah, sobat tinggal masukkan kode HTML dibawah ini :

<style type="text/css">
#topbar{
position:absolute;
padding-left:30%;padding-top:5%;
background-color: transparancy;
width: auto;heigth:auto;
visibility: hidden;
z-index: 100;
}
</style> <script type="text/javascript">
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}


function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}

function staticbar(){
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}

if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar

</script>
<div class="clear">
</div>
<div id="topbar">
<div style="text-align: right;">
<a href="" onclick="closebar(); return false"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim5x16mxEO8RJdZfbf7LcH2i0xvNUqkGI3fgjYvbdqSET17Uzu-YCwYzu_cQPNmjE496SfeylMVocAhmutrf6eBbfzoLyHWownGu2g-T9gott85rDnQK_TaAPBoholiR8tCW4yhyphenhypheneKFc5F/s1600/close3.png" alt="close"/></a></div>
<center><div style="background: #fff;">

*** MASUKAN HTML WIDGET/IKLAN/GAMBAR/DSB DISINI***

</div></center></div>

Untuk keperluan lebar dsb silahkan sobat sesuaikan sendiri ya.
Okey, cukup sekian tips blog cara membuat iklan melayang atau pop up di tengah blog.
Semoga bermanfaat.

Cara Membuat Iklan Melayang Disamping Kiri dan Kanan Blog

Buat sobat blogger yang lagi bingung mau naruh iklan di blog dibagian mana, mungkin ini bisa menjadi salah satu alternatifnya, tips blog kali ini adalah Cara Membuat Iklan Melayang Disamping Kiri dan Kanan Blog.

Cara membuat iklan melayang disamping kiri dan kanan blog ini juga sangat mudah, sobat tinggal masukkan sript dibawah ini pada add gadget HTML blog sobat :

<script type='text/javascript'>
$(document).ready(function() {
$('img#closed').click(function(){
$('#btm_banner').hide(90);
});
});
</script>

<script type="text/javascript">var a=navigator,b="userAgent",c="indexOf",f="&m=1",g="(^|&)m=",h="?",i="?m=1";function j(){var d=window.location.href,e=d.split(h);switch(e.length){case 1:return d+i;case 2:return 0<=e[1].search(g)?null:d+f;default:return null}}if(-1!=a[b][c]("Mobile")&&-1!=a[b][c]("WebKit")&&-1==a[b][c]("iPad")||-1!=a[b][c]("Opera Mini")||-1!=a[b][c]("IEMobile")){var k=j();k&&window.location.replace(k)};
</script><script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('headEnd');
</script>

<!--start: floating ads-->
<div id="teaser2" style="width:autopx; height:0; text-align:left; display:scroll;position:fixed; top:0px;left:0px;">

<div><a href="#" id="close-teaser" onclick="document.getElementById('teaser2').style.display = 'none';" style="cursor:pointer;"><center><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLd_Ok1tFW6JR7BGdG0ykpiT7q5ow0ZW7PIPTj_jSVE6jR1y7tAATtzM6N3Jr-DmvGbNTbWhvDDQivyH4Q7PdHWnahOgv3CmAh-GIehpNw9MPIWZ6Bvhi56xnH5HHVsss0v9mZp0nf7pe-/s1600/PhoXo2.png'/></center></a></div>
<!--Mulai-->

Masukkan kode Iklan anda disini

<!--Akhir-->
</div>
<!--end: floating ads-->
<!--start: floating ads-->
<div id="teaser3" style="width:autopx; height:600; text-align:right; display:scroll;position:fixed; top:0px;right:0px;">

<div><a href="#" id="close-teaser" onclick="document.getElementById('teaser3').style.display = 'none';" style="cursor:pointer;"><center><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLd_Ok1tFW6JR7BGdG0ykpiT7q5ow0ZW7PIPTj_jSVE6jR1y7tAATtzM6N3Jr-DmvGbNTbWhvDDQivyH4Q7PdHWnahOgv3CmAh-GIehpNw9MPIWZ6Bvhi56xnH5HHVsss0v9mZp0nf7pe-/s1600/PhoXo2.png'/></center></a></div>

<!--Mulai-->

Masukkan kode iklan anda disini
<!--Akhir-->

</div>
<!--end: floating ads-->

Okey, cukup sekian sob tips blog Cara Membuat Iklan Melayang Disamping Kiri dan Kanan Blog.

Semoga bermanfaat.