Cara Memasang Widget Iklan Teks Sederhana di Blog

deniverdana.com - Pada postingan kali ini saya akan berbagi tutorial cara memasang widget iklan teks sederhana di blog. Widget yang saya maksud adalah widget iklan berupa teks sederhana dan hampir mirip seperti hasil pencarian situs web di Google, yaitu berupa judul, deskripsi, dan situs web terkait.

Oke, langsung saja..

Widget tersebut menggunakan font awesome, silahkan tambahkan link CSS berikut dan letakan diatas/sebelum kode </head>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>
Jika link diatas sudah kalian pasang, silakan lewati langkah ini.

◾Masuk ke Dashboard Blogger  》  Tema  》  Edit HTML  》  Tambahkan kode dibawah ini dan letakkan diatas/sebelum kode ]]></b:skin>
/* 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}
◾Tambahkan kode dibawah ini dan letakkan diatas/sebelum kode </body>
<script type='text/javascript'>
//<![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>
◾Tambahkan kode dibawah ini dan letakkan diatas/sebelum kode <data:post.body/> jika kalian ingin meletakkannya diatas postingan. Begitu pula sebaliknya.
<div id='arlina_ppc'>
  <a style="text-decoration: underline; padding: 15; font-size: 12px; color:blue;" href="#" target="_blank" title="Pasang Iklan Disini"><strong>Pasang Iklan Disini</strong></a>
  <br />
  <span style="font-size:11px">Hanya Rp.50.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.deniverdana.com</a>
  <br/>
  <br/>
  <a style="text-decoration: underline; padding: 15; font-size: 12px; color:blue;" href="#" target="_blank" title="Pasang Iklan Disini"><strong>Pasang Iklan Disini</strong></a>
  <br />
  <span style="font-size:11px">Hanya Rp.50.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.deniverdana.com</a>
  <br/>
  <br/>
  <a style="text-decoration: underline; padding: 15; font-size: 12px; color:blue;" href="#" target="_blank" title="Pasang Iklan Disini"><strong>Pasang Iklan Disini</strong></a>
  <br />
  <span style="font-size:11px">Hanya Rp.50.000/bulan, pasang iklan teks Anda disini sekarang juga!</span>
  <br />
  <a style="font-size: 9px;color:#b0130d;" href="#" target="_blank" title="Arlina Design">https://www.deniverdana.com</a>
  <br/>
</div>
Nah, yang ditandai bisa kalian ubah atau sesuaikan sendiri. Atau jika kalian ingin memasang widget iklan tersebut di sidebar blog, maka:

◾Masuk ke Dashboard Blogger  》  Tata Letak  》  + Tambahkan Gadget  》  Pilih widget HTML/Javascript lalu tambahkan kode tadi didalamnya.

Selesai, jika dirasa masih ada yang kurang dari segi tampilan kalian tinggal atur sesuai keinginan. Mulai dari ukuran font, warna font atau background, dsb hingga sesuai seperti yang kalian harapkan. Selamat mencoba.