Cara Membuat Slot Iklan Seperti Google AdSense

Oleh Rafid Aslam

2 Agustus 2014

Sudah banyak orang yang memakai widget iklan seperti Google AdSense ini karena desainnya yang mirip dengan iklan Google AdSense dan tidak memakai banyak tempat. Dengan memakai widget ini anda bisa memasang iklan text dan tidak perlu memakai banyak tempat, anda bisa memasang iklan yang banyak dengan javascript yang enteng dan tidak memperlambat loading blog anda. Widget kali ini memakai javascript internal sehingga javascript tersebut sudah terload bersamaan dengan HTML dan tidak memakan waktu loading yang lama.

Saking miripnya dengan Iklan Google AdSense banyak orang yang mengira blog tersebut sudah diterima di AdSense padahal tidak karena itu orang-orang lebih memilih iklan ini, dan iklan ini juga dipakai oleh blog-blog populer seperti miliknya +Kang Ismet .

Langkah pertama: Menyimpan JavaScript

Taruh javascript di bawah ini di atas 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>

Langkah kedua: Menyimpan CSS

Silahkan anda taruh CSS di bawah ini di atas kode </style> atau ]]></b:skin>

/* 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}

Langkah terakhir: Penerapan

Taruh kode di bawah ini pada widget HTML/JavaScript

<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='#' target='_blank'>Blogger Tutorial</a><a href='#' target='_blank'>rh-w.blogspot.com</a><span class='isi'>Blog yang berisi seputar kode-kode web pada platform blogger.</span><a class='panah-besar' href='#' target='_blank'><img alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEK6JFVpaa6RBda0bAKg3nKnOr_75yP27HQUY384XUzkOaQJJ36G_7AyVJM8-ZSI9HjvrzZW6_cfsmxR8IDo1JqsofLmHp6wYM5YXwnOZ9cMhgg0eOgWMpKZbM37ZPk3wB_8GNaHjG5vg/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'>rh-w.blogspot.com</a><span class='isi'>ISI IKLAN rh-w.blogspot.com<a class='panah-besar' href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'><img alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEK6JFVpaa6RBda0bAKg3nKnOr_75yP27HQUY384XUzkOaQJJ36G_7AyVJM8-ZSI9HjvrzZW6_cfsmxR8IDo1JqsofLmHp6wYM5YXwnOZ9cMhgg0eOgWMpKZbM37ZPk3wB_8GNaHjG5vg/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'>rh-w.blogspot.com</a><span class='isi'>ISI IKLAN rh-w.blogspot.com<a class='panah-besar' href='#' target='_blank'><img alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEK6JFVpaa6RBda0bAKg3nKnOr_75yP27HQUY384XUzkOaQJJ36G_7AyVJM8-ZSI9HjvrzZW6_cfsmxR8IDo1JqsofLmHp6wYM5YXwnOZ9cMhgg0eOgWMpKZbM37ZPk3wB_8GNaHjG5vg/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'>rh-w.blogspot.com</a><span class='isi'>ISI IKLAN rh-w.blogspot.com<a class='panah-besar' href='#' target='_blank'><img alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEK6JFVpaa6RBda0bAKg3nKnOr_75yP27HQUY384XUzkOaQJJ36G_7AyVJM8-ZSI9HjvrzZW6_cfsmxR8IDo1JqsofLmHp6wYM5YXwnOZ9cMhgg0eOgWMpKZbM37ZPk3wB_8GNaHjG5vg/s1600/icon_chevron_white.png' style='margin-top:7px;margin-left:2px;width:12px;height:19px'/></a></span></span>
    </div>
</div>

Anda bisa menambah slot iklan sesuai dengan selera anda, dan silahkan anda sesuaikan kode di atas dengan yang anda mau.

Bila anda meminta penjelasan dengan cara di atas bisa dituliskan di kotak komentar di bawah ini.

Tag : Tips Blogger

Bagikan :

Tweet