Membuat iklan seperti Google Adsense,- pasti bagi anda yang seorang blogger atau sering browsing pernah melihat iklan teks berbaris dari google adsense kan? Yap, iklan yang tersusu secara berbaris biasanya banyak iklannya di sesuaikan dengan ukuran bannernya. Slot iklan ini mempunyai tampilan yang minimalis dan juga simple sehingga banyak blogger blogger yang ingin membuat slot iklan tersebut di blognya, tetapi iklan yang di tampilkan bukan dari googlem adsense melainkan orang yang ingin memasang iklan di blog kita atau dengan kata lain yang menampilkan iklannya bukanlah dari google adsense melainkan kita sendiri dengan keinginan kita. Dalam postingan saya kali ini saya akan membagikan cara untuk memasang slot iklannya. Bagaimana? anda tertarik? jika ya silahkan simak postingan saya berikut ini yang akan membagikan tutorialnya secara lengkap dan jelas.

Membuat iklan seperti Google Adsense

Dalam postingan saya tentang Membuat iklan seperti Google Adsense ini, saya akan membahas tentang cara caranya atau totorial membuatnya dalam postingan berikut. Berikut tutorialnya untuk membuat slot iklan ala Google adsense :

Pada dashboard buka HTML lalu edit HTML,

Cari kode </head>, lalu letakkan kode berikut di atasnya,

<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>

lalu cari kode ]]></b:skin>, setelah itu letakkan kode berikut di atasnya,

/*Iklan ala Google Adsense */
#iklan-teks{height:275px;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:#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}
a:hover.judul{font:normal 20px Verdana,Tahoma,Serif!important;color:#2c343e;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:#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:-4px;z-index:2;right:0;cursor:pointer}
.info-iklan{background:#f2f2f2;height:15px;border-bottom-left-radius:4px;position:absolute;top:0;right:-103px;color:#000;z-index:2;font:normal 11px Arial,Sans-Serif;text-align:left;overflow:hidden;padding-right:19px;padding-left:5px}

Setelah itu simpan template.

Cara memasangnya

Pada dashboard buka tata letak atau layout,

Setelah itu tambahkan gadget pilih HTML/Javascript,

Setelah itu masukkan kode berikut,

<div class='iklan-teks-sidebar' id='iklan-teks'>
    <!-- iklan ke 1 -->
    <div data-header='Blogger Tutorial' style='border-top:none'>
        <span class='isi-iklan'><a class='judul' href='http://www.agungrianto.com' target='_blank'>Agung Rianto Blog</a><a href='#' target='_blank'>Blog yang berisi tentang Tutorial Blog, SEO, dan lain lain</a><span class='isi'>Blog yang berisi tutorial blog, seo, dan widget blog.</span><a class='panah-besar' href='#' target='_blank'><img alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs1CO69z5X86MGZmJXKXRRf98JX7PT2L8Ltn8f8siYPtDvCYBFbYA6gywC9zOG3xX1qpciXJTzDLV38E8eY5D7LdrxYjFwPNpwAAxTxcwB-_4g_INLiuU3o0Y9IMAIxASwM407t0kenpk/s1600/icon_chevron_white.png' style='margin-top:7px;margin-left:2px;width:12px;height:19px'/></a></span>
    </div>
    <!-- iklan ke 2 -->
    <div data-header='Pasang Iklan di Sini'>
        <span class='isi-iklan'><a class='judul' href='#' target='_blank'>Pasang Iklan di Sini</a><a href='#' target='_blank'>www.agungrianto.com</a><span class='isi'>ISI IKLAN anda<a class='panah-besar' href='http://www.agungrianto.com/' target='_blank'><img alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs1CO69z5X86MGZmJXKXRRf98JX7PT2L8Ltn8f8siYPtDvCYBFbYA6gywC9zOG3xX1qpciXJTzDLV38E8eY5D7LdrxYjFwPNpwAAxTxcwB-_4g_INLiuU3o0Y9IMAIxASwM407t0kenpk/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='Pasang Iklan di Sini'>
        <span class='isi-iklan'><a class='judul' href='#' target='_blank'>Pasang Iklan di Sini</a><a href='#' target='_blank'>www.agungrianto.com</a><span class='isi'>ISI IKLAN anda<a class='panah-besar' href='#' target='_blank'><img alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs1CO69z5X86MGZmJXKXRRf98JX7PT2L8Ltn8f8siYPtDvCYBFbYA6gywC9zOG3xX1qpciXJTzDLV38E8eY5D7LdrxYjFwPNpwAAxTxcwB-_4g_INLiuU3o0Y9IMAIxASwM407t0kenpk/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='Pasang Iklan di Sini'>
        <span class='isi-iklan'><a class='judul' href='#' target='_blank'>Pasang Iklan di Sini</a><a href='#' target='_blank'>www.agungrianto.com</a><span class='isi'>ISI IKLAN anda<a class='panah-besar' href='#' target='_blank'><img alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs1CO69z5X86MGZmJXKXRRf98JX7PT2L8Ltn8f8siYPtDvCYBFbYA6gywC9zOG3xX1qpciXJTzDLV38E8eY5D7LdrxYjFwPNpwAAxTxcwB-_4g_INLiuU3o0Y9IMAIxASwM407t0kenpk/s1600/icon_chevron_white.png' style='margin-top:7px;margin-left:2px;width:12px;height:19px'/></a></span></span>
    </div>
</div>

Setelah itu sesuaikan isi iklan anda, jika selesai simpan.

Ituah postingan saya tentang Membuat iklan seperti Google Adsense, semoga tutorial di atas dapat menjadikan anda sebuah refrensi dan bantuan jika ingin membuat slot iklan seperti google adsense. Jika ada kesalahan dalam tutorial di atas seilahkan komentar untuk segera di perbaiki.

Baca juga :