Cara Membuat Iklan Baris Mirip Seperti Google Adsense

1.5K
Cara Membuat Iklan Baris Mirip Seperti Google Adsense
Cara Membuat Iklan Baris Mirip Seperti Google Adsense

MedianWPCara Membuat Iklan Baris Mirip Seperti Google Adsense — hai MedianWP lover, kali ini kita akan membahas tentang Cara Membuat Iklan Baris Mirip Seperti Google Adsense. Widget Iklan Baris Seperti Google Adsense ini sebenarnya dulu pertama kali dibuat oleh Blogger Kang Ismet sama Arlina Desain, Widget ini sangat ringan jika di pasang di blog. Widget ini juga sangat mirip dengan iklan Google Adsense jika di klik atau disentuh kursor maka akan keluar Judul Blog, Description, dan URL blog.

Widget ini dibentuk khusus seolah-olah dengan widget iklan Google Adsense Google. Cara kerjanya sama adalah dikala 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.

  1. Cara Membuat Iklan Baris Mirip Seperti Google Adsense
  2. Cara Memasang Widget Iklan Teks Mirip Google AdSense di Blogger
  3. Cara Memasang Widget Iklan Teks Mirip Google AdSense di WordPress

Cara Membuat Iklan Baris Mirip Seperti Google Adsense

Bagi teman-teman yang berminat yang mencobanya, silakan ikuti tutorial di bawah berikut :

Cara Memasang Widget Iklan Teks Mirip Google AdSense di Blogger

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

#iklan-teks{height:220px;width:100%;background-color:white;position:relative;overflow:hidden;margin:20px auto}
#iklan-teks h2.iklan-header{cursor:pointer;background-color:white;background-image:none;font:normal 13px Verdana,Tahoma,Serif;color:#4e92df;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:#4e92df;margin:0 0 5px 0}
a.judul{font:normal 20px Verdana,Tahoma,Serif!important;color:#4e92df!important;text-decoration:none;display:inline-block}
.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:underline}
.isi{padding-top:15px;color:#222;text-align:left!important}
.panah-besar{background:#4e92df;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:0;right:0;cursor:pointer}
.info-iklan{background:#d3d3d3;width:100px;height:15px;border-bottom-left-radius:4px;position:absolute;top:0;right:0;color:#000;font:normal 11px Arial,Sans-Serif;text-align:left;overflow:hidden;padding-right:19px;padding-left:5px;display:none}

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" >
<script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js" ></script>

Setelah anda tambahkan kode script diatas, simpan template.

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

<div class='iklan-teks-sidebar' id='iklan-teks'>
<!– iklan ke 1 –>
<div data-header='exthem.es'>
<span class='isi-iklan'><a class='judul' href='https://exthem.es' target='_blank'>exthem.es</a><a href='https://exthem.es' target='_blank'>https://exthem.es</a><span class='isi'>Free Download Premium WordPress Themes<a class='panah-besar' href='https://exthem.es' target='_blank'><img alt='arrow' src="https://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 2 –>
<div data-header='MedianWP.com'>
<span class='isi-iklan'><a class='judul' href='//themewp.web.id' target='_blank'>themewp.web.id</a><a href='//themewp.web.id' target='_blank'>https://themewp.web.id</a><span class='isi'>Tips & Trick SEO For WordPress and Bloggers.<a class='panah-besar' href='//themewp.web.id' target='_blank'><img alt='arrow' src="https://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='Your Ads Here'>
<span class='isi-iklan'><a class='judul' href='#' target='_blank'>Your Ads Here</a><a href='#' target='_blank'>Your Ads Here</a><span class='isi'>Your Ads Here.<a class='panah-besar' href='#' target='_blank'><img alt='arrow' src="https://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='Your Ads Here'>
<span class='isi-iklan'><a class='judul' href='#' target='_blank'>Your Ads Here</a><a href='#' target='_blank'>Your Ads Here</a><span class='isi'>Your Ads Here.<a class='panah-besar' href='#' target='_blank'><img alt='arrow' src="https://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>
<span class='info-iklan'>&nbsp;</span>
<span class='info-icon'><a href='#' target='_blank'><img alt='info' src="https://2.bp.blogspot.com/–ivaHIgXThk/UnJWU80FLhI/AAAAAAAAF_Y/WrH-8aYijGw/s1600/info-iklan.png" /></a></span>
</div>
<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>

Cara Memasang Widget Iklan Teks Mirip Google AdSense di WordPress

untuk pengguna WordPress silahkan pasang kode css di header.php terus salin kode html di tempat yang anda ingin pasang terus save. jika anda menggunakan cache silahkan hapus cache anda dahulu.

untuk kode html silahkan ganti link url sama deskripsi sesuai keinginan anda. dan jangan lupa untuk edit css #4e92df untuk menggunakan warna kesukaan anda



Demo


MedianWP Lover itu lah tadi Cara Membuat Iklan Baris Mirip Seperti Google Adsense versi MedianWP yang dapat Anda jadikan referensi pilihan buat teman teman, semoga Informasi Cara Membuat Iklan Baris Mirip Seperti Google Adsense ini bermanfaat bagi Anda, Tekan CTRL + D untuk bookmark halaman ini. Silahkan tinggalkan komentar jika ada pertanyaan dan jangan lupa untuk membaca artikel menarik lainnya.

Sumber : jelasinblog.blogspot.com

"Cara Membuat Iklan Baris Mirip Seperti Google Adsense"
1.5K