Tutorial Blog dan Tips AdSense

Dijual rumah di Jakarta Timur, selengkapnya klik di sini

Cara Membuat Slot Iklan Seperti Google AdSense

Cara Membuat Slot Iklan Seperti Google AdSense
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='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>
    </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='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='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='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='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='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>

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
14 Komentar untuk "Cara Membuat Slot Iklan Seperti Google AdSense"

mantep sob kunjungi sini http://indraahmadrobani.blogspot.com/

Terima Kasih abang atas Tutorial Google AdSense Tanpa Kliknya sangat bermanfaat bagi saya mencari artikel ini..

wew....dari blog sebelah tutorialnya gak sama ma demonya,semoga yang ini bisa seperti yang ane arepin......

sama kok, tergantung cara pemasangannya aja, kalo salah tentu nggak sama

sudah saya coba b4sharing.blogspot.com , terimakasih infonya.

mau nanya gan.... kalo mau mendaftarkan blog ke adsense, apakah harus meletakan slot iklan seperti test iklan di blog ini?

Saya minta agar anda tidak memakai akun Anonim untuk berkomentar, gunakan akun anonim hanya saat anda sedang dalam keadaan darurat, saya minta juga untuk tidak menggunakan kata-kata kasar dalam berkomentar. Terimakasih atas perhatiannya.