Mendesain Iklan Baris Teks Seperti Google Adsense

Mendesain Iklan Baris Teks Seperti Google Adsense

Kali ini saya akan membahas tentang desain baner yaitu Cara membuat iklan baris teks Seperti google adsense, mendesainya sebenarnya sangatlah mudah dilakukan dan penerapanya pun sama dengan tutorial blog lainya yang memasang kode Css, HTML dan Javascript. Iklan atau banner yang ingin saya share kali ini hampir mirip dengan situs PPC terbesar yaitu adsense.

Slot iklan ini cocok untuk anda pasang di blog anda yang bertrafik tinggi sehingga para web blogger lain yang mampir akan berniat untuk mempromosikan halamanya pada blog anda dan jika anda tertarik di bawah telah saya sediakan demo beserta cara penerapanya pada blog anda.

Mendesain Iklan Baris Teks Seperti Google Adsense

DEMO IKLAN

Cara Membuat Iklan Baris Teks Seperti Google Adsense

1. Masuk ke akun blogger anda
2. Pilih menu Template dan pilih Edit HTML
3. Masukkan CSS berikut tepat diatas kode ]]></b:skin> atau </style>
#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;
}
4. Simpan Template and.
5. Selanjutnya masuk pada edit tata letak dan pilih tambah gadget HTML/JavaScript dan masukkan kode berikut ini.
<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='Zonatio'> <span class='isi-iklan'><a class='judul' href='http://www.kabarlangit.com' target='_blank'>KabarLangit</a><a href='http://www.kabarlangit.com' target='_blank'>www.kabarlangit.com</a><span class='isi'>Tutorial Blogger Dan Tips Trick SEO lengkap<a class='panah-besar' href='http://zonatio.web.id' target='_blank'><img alt='arrow' src='http://2.bp.blogspot.com/-oIxrG3fvdj4/UnGxCH3EV9I/AAAAAAAAF_I/YBTBdMJO6VM/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='http://2.bp.blogspot.com/-oIxrG3fvdj4/UnGxCH3EV9I/AAAAAAAAF_I/YBTBdMJO6VM/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='http://2.bp.blogspot.com/-oIxrG3fvdj4/UnGxCH3EV9I/AAAAAAAAF_I/YBTBdMJO6VM/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='http://2.bp.blogspot.com/-oIxrG3fvdj4/UnGxCH3EV9I/AAAAAAAAF_I/YBTBdMJO6VM/s1600/icon_chevron_white.png' style='margin-top:7px;margin-left:2px;width:12px;height:19px'/></a></span></span>
    </div>
</div></div>
6. Simpan hasilnya dan lihat hasilnya pada blog anda. sekian untuk tutorial kali ini.

Saya merupakan anak ke 8 dari 8 bersaudara, berwatak keras kepala dan sangat mencintai dunia blogging serta desain.
"Love My Mom"

Previous
Next Post »