Cara Membuat Widget Slot Iklan Seperti Google Adsense

Slot Iklan Seperti Google Adsense

Menjadi publisher google adsense memang menjadi dambaan semua blogger, karena sulitnya memperoleh dan mempertahankan akun google adsense banyak para blogger beralih menjadi publisher iklan lainnya. Jika blog kalian sudah memiliki pengunjung yang memadai maka cara terbaik untuk mendapatkan income dari blog adalah menyediakan slot iklan sendiri.

Membuat slot iklan yang menarik akan mengundang pengiklan untuk mengiklankan produk mereka pada blog anda selain itu, tampilan iklan yang menarik akan mengundang visitor untuk mengunjungi halaman iklan dan tentunya akan membuat pengiklan merasa betah untuk menempatkan iklan di blog kalian. Untuk membuat slot iklan yang mirip dengan google adsense ikuti langkah berikut :

Pertama :
Copy script di bawah dan letakkan diatas kode <Head>
<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>

Kedua :
Letakkan kode CSS berikut diatas kode </style> atau ]]></b:skin> kemudian save template
/* CSS Iklan 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}

Terakhir :
Masuk ke Layout kemudian Add widget pilih Html/javascript kemudian pastekan kode di bawah.
<span class='info-icon'><a href='caraberbagitutorial.blogspot.com' target='_blank'><img alt='Info Pasang Iklan' src='http://googledrive.com/host/0B22vSZUsgbQfSlVlVDJrMU5HM2M/infoadsicon.png' title='Pasang Iklan Anda Disini'/></a></span>
<li style='display: block;'>
<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://goo.gl/7eEB6B' target='_blank'>Tutorial Blog dan Seo</a><a href='#' target='_blank'>caraberbagitutorial.blogspot.com</a><span class='isi'>Blog yang berisi Tutorial seputar blogger,seo dan internet</span><a class='panah-besar' href='#' target='_blank'><img alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib6SUqAF3ZfgIGdRR-T2rx7lZsfwL7x-jHNNxOx7Au9e1PCQvPMFplBtsQpPpwx_d1PNwtkckoH2XagCE2_qDcscRXIgVY8WxznwlPj_mcuarbu_qojlPxO8pXSy5-Dpz74a7XppXyiVM/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'>caraberbagitutorial.blogspot.com</a><span class='isi'>ISI IKLAN <a class='panah-besar' href='#' target='_blank'><img alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib6SUqAF3ZfgIGdRR-T2rx7lZsfwL7x-jHNNxOx7Au9e1PCQvPMFplBtsQpPpwx_d1PNwtkckoH2XagCE2_qDcscRXIgVY8WxznwlPj_mcuarbu_qojlPxO8pXSy5-Dpz74a7XppXyiVM/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'>caraberbagitutorial.blogspot.com</a><span class='isi'>ISI IKLAN <a class='panah-besar' href='#' target='_blank'><img alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib6SUqAF3ZfgIGdRR-T2rx7lZsfwL7x-jHNNxOx7Au9e1PCQvPMFplBtsQpPpwx_d1PNwtkckoH2XagCE2_qDcscRXIgVY8WxznwlPj_mcuarbu_qojlPxO8pXSy5-Dpz74a7XppXyiVM/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'>caraberbagitutorial.blogspot.com</a><span class='isi'>ISI IKLAN <a class='panah-besar' href='#' target='_blank'><img alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib6SUqAF3ZfgIGdRR-T2rx7lZsfwL7x-jHNNxOx7Au9e1PCQvPMFplBtsQpPpwx_d1PNwtkckoH2XagCE2_qDcscRXIgVY8WxznwlPj_mcuarbu_qojlPxO8pXSy5-Dpz74a7XppXyiVM/s1600/icon_chevron_white.png' style='margin-top:7px;margin-left:2px;width:12px;height:19px'/></a></span></span>
    </div>
</div>

Jika ada pengiklan, maka tinggal masukkan saja kata-kata dan linknya di widget. Sekian dulu artikel cara membuat slot iklan seperti google adsense, apabila ada yang kurang di pahami bisa di tanyakan di komentar.

Sumber Script : Blog Kang ismet

0 Response to "Cara Membuat Widget Slot Iklan Seperti Google Adsense"

Posting Komentar