Kali ini Arlina Code akan berbagi sebuah tutorial Cara Memasang Widget Iklan Teks Mirip Google AdSense. Widget ini dibuat khusus mirip dengan widget iklan Google Adsense-nya Google. Cara kerjanya sama yaitu ketika salah satu link iklan di hover, maka muncul isi atau deskripsi dari iklan dengan efek yang halus. Efek yang ditambahkan juga cukup nyaman dilihat dan cukup ringan untuk dipasang di blog sobat.

Bagi yang ingin mencobanya, silakan ikuti tutorial berikut :

Widget ini menggunakan font awesome, silakan tambahkan link CSS berikut di atas </head>

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

Jika link di atas telah sobat pasang, silakan lewati langkah ini.

Cara Memasang Widget Iklan Teks Mirip Google AdSense

1. Login ke Blogger > Buka Template > Tambahkan kode di bawah ini sebelum ]]></b:skin> atau </style>

/* Iklan Teks GA */
.iklan-teks{position:relative;margin:0;padding:10px;max-height:300px;overflow:hidden}
.iklan-teks div{position:relative;background:#FFF;height:120px;padding:8px 0;margin:0;z-index:1;color:#555}
.iklan-teks h2.iklan-header{position:relative;background:#FFF;font-size:18px;color:#0f7dc8;border-top:1px solid #d8d8d8;border-radius:0;padding:8px 0;margin:0;text-transform:none;cursor:pointer}
.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;cursor:pointer}
.isi-iklan span.judul-iklan{font-size:18px;color:#0f7dc8;display:inline-block;cursor:pointer}
.isi-iklan span.url-iklan{font-size:12px;color:#0f7dc8;display:block;margin:8px 0;cursor:pointer}
.isi-iklan span.url-iklan:before{content:"\f0c0";font-family:FontAwesome;margin:0 10px 0 0}
.isi-iklan span.panah-besar{color:#fff;background:#e74c3c;border-radius:50%;height:34px;float:right;width:34px;text-align:center;line-height:34px;cursor:pointer;transition:all .6s}
.isi-iklan span.panah-besar:before{content:"\f054";font-family:FontAwesome;margin:0 0 0 3px;font-size:20px}
.isi-iklan span.panah-besar:hover{background:#34495e;color:#fff}
.isi-iklan p.isi{padding:0;margin:0 40px 0 0;color:#555;font-size:12px;text-align:left}

2. Kemudian salin kode di bawah ini sebelum </body>

<script>
//<![CDATA[
(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>

Setelah ditambahkan, simpan template.

3. Selanjutnya buka tata letak > Buat widget baru > Kemudian tambahkan kode di bawah ini didalamnya

<div class='iklan-teks iklan-teks-sidebar' id='iklan-teks'>
<!-- iklan ke 1 -->
<div data-header="Pasang Iklan Disini">
<span class='isi-iklan'>
<span class='judul-iklan' onclick="window.open('/');">Pasang Iklan Disini</span>
<span class='url-iklan' onclick="window.open('/');">url web kalian</span>
<span class='panah-besar' onclick="window.open('/');"></span>
<p class='isi'>Pasang Iklan Anda Disini</p>
</span>
</div>
<!-- iklan ke 2 -->
<div data-header="Pasang Iklan Disini">
<span class='isi-iklan'>
<span class='judul-iklan' onclick="window.open('/');">Pasang Iklan Disini</span>
<span class='url-iklan' onclick="window.open('/');">url web kalian</span>
<span class='panah-besar' onclick="window.open('/');"></span>
<p class='isi'>Pasang Iklan Anda Disini</p>
</span>
</div>
<!-- iklan ke 3 -->
<div data-header="Pasang Iklan Disini">
<span class='isi-iklan'>
<span class='judul-iklan' onclick="window.open('/');">Pasang Iklan Disini</span>
<span class='url-iklan' onclick="window.open('/');">url web kalian</span>
<span class='panah-besar' onclick="window.open('/');"></span>
<p class='isi'>Pasang Iklan Anda Disini</p>
</span>
</div>
<!-- iklan ke 4 -->
<div data-header="Pasang Iklan Disini">
<span class='isi-iklan'>
<span class='judul-iklan' onclick="window.open('/');">Pasang Iklan Disini</span>
<span class='url-iklan' onclick="window.open('/');">url web kalian</span>
<span class='panah-besar' onclick="window.open('/');"></span>
<p class='isi'>Pasang Iklan Anda Disini</p>
</span>
</div>
<!-- iklan ke 5 -->
<div data-header="Pasang Iklan Disini">
<span class='isi-iklan'>
<span class='judul-iklan' onclick="window.open('/');">Pasang Iklan Disini</span>
<span class='url-iklan' onclick="window.open('/');">url web kalian</span>
<span class='panah-besar' onclick="window.open('/');"></span>
<p class='isi'>Pasang Iklan Anda Disini</p>
</span>
</div>
</div>

4. Simpan widget dan lihat hasilnya.

See the Pen Cara Memasang Iklan Teks Mirip Google AdSense by Arlina Code (@arlinacode) on CodePen.

Jika sobat ingin mencoba versi yang lebih sederhana, tambahkan kode di bawah ini di dalam widget

<div id='arlina_ppc'>
<a style="text-decoration: underline; padding: 15; font-size: 12px; color:blue;" href="#" target="_blank" title="Iklan Teks Murah"><strong>Iklan Teks Murah</strong></a>
<br />
<span style="font-size:11px">Hanya Rp.60.000/bulan, Pasang Iklan Teks Anda Disini Sekarang Juga!</span>
<br />
<a style="font-size: 9px;color:#b0130d;" href="#" target="_blank" title="Iklan Teks Murah">https://www.arlinacode.com</a>
<br/>
<br/>
<a style="text-decoration: underline; padding: 15; font-size: 12px; color:blue;" href="#" target="_blank" title="Iklan Teks Murah"><strong>Iklan Teks Murah</strong></a>
<br />
<span style="font-size:11px">Hanya Rp.60.000/bulan, Pasang Iklan Teks Anda Disini Sekarang Juga!</span>
<br />
<a style="font-size: 9px;color:#b0130d;" href="#" target="_blank" title="Iklan Teks Murah">https://www.arlinacode.com</a>
<br/>
<br/>
<a style="text-decoration: underline; padding: 15; font-size: 12px; color:blue;" href="#" target="_blank" title="Iklan Teks Murah"><strong>Iklan Teks Murah</strong></a>
<br />
<span style="font-size:11px">Hanya Rp.60.000/bulan, Pasang Iklan Teks Anda Disini Sekarang Juga!</span>
<br />
<a style="font-size: 9px;color:#b0130d;" href="#" target="_blank" title="Arlina Code">https://www.arlinacode.com</a>
<br/>
<br/>
<a style="text-decoration:none;padding:15;font-size:12px;float:right;color:#b0130d;" href="#" target="_blank" title="Pasang Iklan Murah di Arlina Code"><small>Ads by Arlina Code</small></a>
<br />
</div>

See the Pen Iklan Teks Sederhana by Arlina Code (@arlinacode) on CodePen.

Demikian tutorial Cara Memasang Widget Iklan Teks Mirip Google AdSense, semoga bermanfaat dan wassalam.