Cara Membuat Iklan Baris teks Seperti Google AdSense

Pada kesempatan kali ini Zerone Blog akan memberikan Tutorial Cara Membuat Iklan Baris teks Seperti Google AdSense, cara membuatnya cukup mudah sobat hanya tinggal memanipulasi CSS saja dan menambahkan sedikit jQuery, buat sobat yang binggung dan tidak mengerti CSS dan jQuery sobat tinggal lihat saja cara membuat iklan baris teks Google Adsense di bawah ini.

Cara Membuat Iklan Baris teks Seperti Google AdSense

• Silahkan Sobat Masuk ke akun Blogger Sobat
• Pilih menu Template dan pilih Edit HTML
• Masukkan CSS berikut tepat diatas kode ]]></b:skin> atau </style>

CSS#iklan-teks {
    height:275px;
    width:300px;
    background-color:white;
    position:relative;
    overflow:hidden;
    margin:20px auto;
}
#iklan-teks h2.iklan-header {
    cursor:pointer;
    background-color:white;
    background-image:none;
    font:normal 13px Verdana, Tahoma, Serif;
    color:#f0523f;
    border-top:1px solid #d8d8d8;
    padding:10px;
    margin:0;
    position:relative;
    text-transform:none;
    letter-spacing:0;
}
.iklan-teks-post-footer .iklan-header {
    border-bottom:0;
}
#iklan-teks h2.iklan-header:first-child {
    border-top:0;
}
#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:120px;
    padding:10px 70px 10px 10px;
    z-index:1;
    background:white;
    font:normal 13px Verdana, Tahoma, Serif;
    color:white;
    position:relative;
    border-top:1px solid #d8d8d8;
}
.judul {
    font:normal 20px Verdana, Tahoma, Serif;
    color:#f0523f;
    margin:0 0 5px 0;
}
a.judul {
    font:normal 20px Verdana, Tahoma, Serif !important;
    color:#f0523f !important;
    text-decoration:none;
    display:inline-block;
}
.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:underline;
}
.isi {
    padding-top:15px;
    color:#222;
    text-align:left !important;
}
.panah-besar {
    background:#f0523f;
    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:#2c343e;
}
.info-icon {
    width:15px;
    height:15px;
    position:absolute;
    top:0;
    z-index:2;
    right:0;
    cursor:pointer;
}
.info-iklan {
    background:#f2f2f2;
    height:15px;
    border-bottom-left-radius:4px;
    position:absolute;
    top:0;
    right:0;
    color:#000;
    z-index:2;
    font:normal 11px Arial, Sans-Serif;
    text-align:left;
    overflow:hidden;
    padding:5px 19px 0 5px;
}

• Kemudian Save Template sobat
• Lalu masukan kode di bawah ini pada Widget HTML / javascript

JS<script type='text/javascript'>
(function(a){a.fn.hoverTimeout=function(c,e,b,d){return this.each(function(){var f=null,g=a(this);g.hover(function(){clearTimeout(f);f=setTimeout(function(){e.call(g)},c)},function(){clearTimeout(f);f=setTimeout(function(){d.call(g)},b)})})}})(jQuery);(function(b){b.fn.iklanaccordion=function(a){a=jQuery.extend({active:1,hovertimeout:300,sUpSpeed:500,sDownSpeed:500,sUpEasing:null,sDownEasing:null},a);return this.each(function(){var g=b(this),h=g.children("div[data-header]"),f=a.active-1;h.each(function(){b(this).hide().before('<h2 class="iklan-header">'+b(this).data("header")+"</h2>")});g.children("div:eq("+f+")").show().prev().css("margin-top","-47px").addClass("active");g.find(".iklan-header").hoverTimeout(a.hovertimeout,function(){g.children("h2").removeClass("active").animate({marginTop:0});h.slideUp(a.sUpSpeed,a.sUpEasing).animate({marginTop:-47});b(this).addClass("active").next().slideDown(a.sDownSpeed,a.sDownEasing)})})}})(jQuery);$(function(){$(".iklan-teks-sidebar").iklanaccordion();$(".iklan-teks-post-footer").iklanaccordion()});$(".info-icon").hover(function(){$(".info-iklan").animate({right:0},500,"easeInOutExpo")},function(){$(".info-iklan").animate({right:-103},500,"easeInOutExpo")});
</script>

<div style="background : #ecf0f1; overflow : hidden; margin : 0 0 10px 0; padding : 0; border-radius : 0;">
<div class='iklan-teks-sidebar' id='iklan-teks'>
    <!-- iklan ke 1 -->
    <div data-header='Zerone Blog'> <span class='isi-iklan'><a class='Zerone Blog' href='http://www.zeroneblogg.blogspot.com' target='_blank'>Zerone Blog</a><a href='http://www.zeroneblogg.blogspot.com' target='_blank'>zeroneblogg.blogspot.com</a><span class='isi'>Tutorial Blogger Dan Tips Trick SEO lengkap<a class='panah-besar' href='http://www.zeroneblogg.blogspot.com' target='_blank'><img alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWru1946vfIdn7N0knCN6T4CD3UbQIzFXs5tH5Yj5W98aRcOpqPClVTi9HMwitPWoAR14SkKLOyX0XhixRwOzibJGf3g7ZJ7Ke3aerfV2FmLcx8rlCP4PsRmC0j_6NMaLGOTCzLaHSns8/s1600/icon_chevron_white.png' style='margin-top:7px;margin-left:2px;width:12px;height:19px'/></a></span></span>
    </div>
    <!-- iklan ke 2 -->
    <div data-header='Niagahoster'> <span class='isi-iklan'><a class='judul' href='http://www.niagahoster.co.id/ref/14021' target='_blank'>Niagahoster</a><a href='/' target='_blank'>niagahoster.co.id</a><span class='isi'>Hosting dan Domain Murah hanya di Niagahoster.<a class='panah-besar' href='http://www.niagahoster.co.id/ref/14021' target='_blank'><img alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWru1946vfIdn7N0knCN6T4CD3UbQIzFXs5tH5Yj5W98aRcOpqPClVTi9HMwitPWoAR14SkKLOyX0XhixRwOzibJGf3g7ZJ7Ke3aerfV2FmLcx8rlCP4PsRmC0j_6NMaLGOTCzLaHSns8/s1600/icon_chevron_white.png' style='margin-top:7px;margin-left:2px;width:12px;height:19px'/></a></span></span>
    </div>
    <!-- iklan ke 3 -->
    <div data-header='Scanner Mobil'> <span class='isi-iklan'><a class='judul' href='www.kabarlangit.com' target='_blank'>Scanner Mobil</a><a href='www.kabarlangit.com' target='_blank'>rbas.co.id</a><span class='isi'>Pusat scanner mobil terlengkap, termurah dan terpecaya di Indonesia.<a class='panah-besar' href='www.kabarlangit.com' target='_blank'><img alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWru1946vfIdn7N0knCN6T4CD3UbQIzFXs5tH5Yj5W98aRcOpqPClVTi9HMwitPWoAR14SkKLOyX0XhixRwOzibJGf3g7ZJ7Ke3aerfV2FmLcx8rlCP4PsRmC0j_6NMaLGOTCzLaHSns8/s1600/icon_chevron_white.png' style='margin-top:7px;margin-left:2px;width:12px;height:19px'/></a></span></span>
    </div>
    <!-- iklan ke 4 -->
    <div data-header='Iklan bagi yang mampu'> <span class='isi-iklan'><a class='judul' href='http://jelasinblog.blogspot.com/p/cara-pasang-iklan-di-blog.html' target='_blank'>Pasang Iklan di Sini</a><a href='/' target='_blank'>jelasinblog.blogspot.com</a><span class='isi'>Pasang iklan Anda di sini, hanya 120 ribu / bulan.<a class='panah-besar' href='/' target='_blank'><img alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWru1946vfIdn7N0knCN6T4CD3UbQIzFXs5tH5Yj5W98aRcOpqPClVTi9HMwitPWoAR14SkKLOyX0XhixRwOzibJGf3g7ZJ7Ke3aerfV2FmLcx8rlCP4PsRmC0j_6NMaLGOTCzLaHSns8/s1600/icon_chevron_white.png' style='margin-top:7px;margin-left:2px;width:12px;height:19px'/></a></span></span>
    </div>
</div></div>

DEMO

Demikian Cara Membuat Iklan Baris teks Seperti Google AdSense yang dapat Zerone Blog sampaikan semoga bermanfaat ya untuk sobat..