Cara Membuat Iklan Baris Seperti Google Adsense
12 December 2013
Assalammualaikum Sobat Blogger Admin Mau Bagi Tutorial Cara Membuat Iklan Baris Seperti Google Adsense Langsung Saja Kita KTP
- Login ke akun blogger Sobat.
- Kemudiat Edit Template
- Copy kode dibawah ini. Dan Letakan K CSS ini di atas ]]></b:skin> atau </style>
/* Iklan Google Adsense
----------------------------------------------- */
----------------------------------------------- */
#Google-Adsense {
width:304px;
height:259px;
background-color:white;
position:relative;
overflow:hidden;
margin:0 auto;
}
#Google-Adsense 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;
}
#Google-Adsense h2.iklan-header:first-child {
border-top:none;
}
#Google-Adsense h2.active {
display: none;
}
#Google-Adsense h2.iklan-header:before{
content:"";
width:0;
height:0;
position:absolute;
top:20px;
right:15px;
border:5px solid transparent;
border-color:#b2b2b2 transparent transparent;
}
#Google-Adsense 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;
}4. Simpan kode Di Bawah ini pada Widget HTML / JavaScript <div id="Google-Adsense">
<!-- iklan ke 1-->
<div data-header="Pasang Iklan di Sini">
<span class='isi-iklan'><a class='judul' href='http://hikamedition.blogspot.com/p/blog-page_5.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'>Hikamedition</a>
<span class='isi'>Pasang iklan Anda di sini, hanya 5 ribu / bulan Promo.
<a class='panah-besar' href='http://hikamedition.blogspot.com/p/blog-page_5.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/AVvXsEj98jEKPN4gj4TPZD6rZtmDTFD-PA073qBg8O03lF-wcr0ppykKAq3AQjDbk0lJMYgoWNX9juvM3mkygB6BLvKGDHMpt2f_015GSK-zcylQmnzL250BVxOidMjOsqo6U2ak6ru9sYmrYXE/s1600/icon_chevron_white.png'/></a></span>
</span>
</div>
<!-- iklan ke 2-->
<div data-header="Pasang Iklan di Sini">
<span class='isi-iklan'><a class='judul' href='http://hikamedition.blogspot.com/p/blog-page_5.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'>Hikamedition</a>
<span class='isi'>Pasang iklan Anda di sini, hanya 5 ribu / bulan Promo.
<a class='panah-besar' href='http://hikamedition.blogspot.com/p/blog-page_5.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/AVvXsEj98jEKPN4gj4TPZD6rZtmDTFD-PA073qBg8O03lF-wcr0ppykKAq3AQjDbk0lJMYgoWNX9juvM3mkygB6BLvKGDHMpt2f_015GSK-zcylQmnzL250BVxOidMjOsqo6U2ak6ru9sYmrYXE/s1600/icon_chevron_white.png'/></a></span>
</span>
</div>
<!-- iklan ke 2-->
<div data-header="Pasang Iklan di Sini">
<span class='isi-iklan'><a class='judul' href='http://hikamedition.blogspot.com/p/blog-page_5.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'>Hikamedition</a>
<span class='isi'>Pasang iklan Anda di sini, hanya 5 ribu / bulan Promo.
<a class='panah-besar' href='http://hikamedition.blogspot.com/p/blog-page_5.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/AVvXsEj98jEKPN4gj4TPZD6rZtmDTFD-PA073qBg8O03lF-wcr0ppykKAq3AQjDbk0lJMYgoWNX9juvM3mkygB6BLvKGDHMpt2f_015GSK-zcylQmnzL250BVxOidMjOsqo6U2ak6ru9sYmrYXE/s1600/icon_chevron_white.png'/></a></span>
</span>
</div>
<!-- iklan ke 2-->
<div data-header="Pasang Iklan di Sini">
<span class='isi-iklan'><a class='judul' href='http://hikamedition.blogspot.com/p/blog-page_5.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'>Hikamedition</a>
<span class='isi'>Pasang iklan Anda di sini, hanya 5 ribu / bulan Promo.
<a class='panah-besar' href='http://hikamedition.blogspot.com/p/blog-page_5.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/AVvXsEj98jEKPN4gj4TPZD6rZtmDTFD-PA073qBg8O03lF-wcr0ppykKAq3AQjDbk0lJMYgoWNX9juvM3mkygB6BLvKGDHMpt2f_015GSK-zcylQmnzL250BVxOidMjOsqo6U2ak6ru9sYmrYXE/s1600/icon_chevron_white.png'/></a></span>
</span>
</div>
<!-- info -->
<span class='info-iklan'>Iklan oleh Hikam</span>
<span class='info-icon'><a href='http://hikamedition.blogspot.com/p/blog-page_5.html' target='_blank'><img alt='info' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjsndvtzbgG6nPzbGhU5qTQSulhAKZDyRZm50l_dyIdkiUzaxBSLDrazjJtv879YCj7ZMiMGpfCakLJKWY4QzO9f1VpHdiN9Oge0RC8TCKoWfZECiTnBp0uK_oUjo7XIlrvUYThKcU1sQ/s1600/info-iklan.png'/></a></span>
</div>5. Silahkan Sobat Blogger Edit Judul Dan Lnk Sobat
6. Jika Sobat Blogger ingin membuat Iklan Baris Seperti Google Adsense tersebut bisa melayang disisi kanan blog Sobat maka gunakan kode dibawah ini:
<style type="text/css">#melayang{
position:fixed;
top:10px;
z-index:+1000;
}
html #melayang{position:relative;}
.melayangcontent{
float:right;
border:2px solid #52e052;
background:#ffffff;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var melayang = document.getElementById("melayang");
var w = melayang.offsetWidth;
melayang.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
melayang.opened = !melayang.opened;
}
function moveGB(x0, xf){
var melayang = document.getElementById("melayang");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
melayang.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="melayang">
<div class="melayangtab" onclick="showHideGB()"> </div>
<div class="melayangcontent">
<div style="text-align:right">
<a href="javascript:showHideGB()">
.:[Close][Klik 2x]:.
</a>
</div> PASTE KODE YANG TADI TARUH DISINI
<script type="text/javascript">
var melayang = document.getElementById("melayang");
melayang.style.center = (30-melayang.offsetWidth).toString() + "px";
</script></center></div></div>
Dan Langkah Terakhir
7. Simpan kode Di Bawah ini di atas
</head>
<script src='https://googledrive.com/host/0B7Z2PdtIRXAaRjVuY1ktQjdmejg' type='text/javascript'/>
JANGAN CUMA MERAKTEKIN DOANG TAPI JANGAN LUPA TINGGALKAN KOMENTAR ANDA TUNJUKAN BAHWA ANDA BLOGGER YANG BIJAK TRIMAKSIH SALAM ADMIN
-SUMBER-
-SUMBER-