Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara memasang Banner di blog dengan Mudah dan Cepat

Pada hari ini rekan kerja ditempat saya bekerja ada yang bertanya, Bagaimana sih pasang Gambar untuk Promosiin blog/web yang seperti di blog mastimon.com pasang. Saya ada memasang ada 2 buah Banner yaitu satu banner di atas Header dan satu banner lagi di bawah Postingan. Pemasangan iklan Adsense juga membutuhkan tempat yang cukup strategis bisa di atas Postingan Blog, di antara postingan blog, dibawah postingan blog ataupun di sidebar blog.


Membahas pemasangan Iklan Adsense terbilang mudah, anda cukup copypaste codenya ke Script HTML ke tataletak blog sobat dan selesai sudah. Sedangkan untuk memasang Banner atau Gambar membutuhkan kode HTML yang tepat karena kita harus membuat kode ukuran dan Link yang akan di tuju banner tersebut. Dalam postingan ini saya akan berikan secara lengkap cara membaut code HTML untuk memasang banner di blog dengan ukuran dan cara memasang Banner atau Iklan Adsense di semua posisi.

Cara membuat kode HTML untuk memasang Banner / Gambar Iklan di Blogspot :
  • Buka akun Blogger sobat
  • Klik Tata Letak
  • Di sidebar klik Tambah Gadget
  • Klik HTML/Javascript
  • Judul tidak perlu di isi, langsun saja isi konten dengan kode HTML di bawah ini

<a title="Hanya dengan 50.000 dapat blog murah gratis Template Premium" href="http://www.mastimon.com/2016/11/hanya-dengan-50000-dapat-blog-murah.html" target="_blank"><img alt="Hanya dengan 50.000 dapat blog murah gratis Template Premium" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLg3-VbY6cKoQmARGqkz0zXUI1b4N0idXZlgxwtesw_hNHLkyuapAqqOC1oAmSh2fHa-E4YCg6Edky8izU5fH4aGI1Sa3h8eTd7o-pBpA2YZkqKG_cvwwKdoVZtIUlROqtXy-Qnk6rV9Tj/s640/Jual-Template-Premium-Rp.50.000-joss.gif" width="340px" height="150px"/></a>

  • Hijau : Alamat blog atau artikel yang dituju
  • Merah : Ukuran Panjang dan Lebar Banner
  • Biru : Alamat gambar dimana tempat anda menyimpan di sebuah Postingan atau situs online.

Cukup mudah bukan cara memasang Banner di blog sesuai dengan ukuran yang di ingginkan, sekarang tinggal cukup anda memilih dimana Banner atau Iklan akan di letakkan. Untuk pemasangan di sekitar sidebar atau di atas header anda cukup menambahkan Gadget, sedangkan untuk memasang di dalam postingan blog anda harus masuk di Edi Template, berikut adalah cara lengkapnya.

Cara memasang Iklan di atas Postingan Blog :
  • Masuk ke akun Blogger sobat
  • Klik Template, Edit HTML
  • Sebelum di Edit HTML silahkan klik Cadangkan/Pulihkan, Unduh Template untuk menyimpan Template untuk jaga jaga apabila terjadi Error.
  • Klik di tengah code HTML dantekan Ctrl+F untuk mencari
  • Cari Code ini : <data:post.body/> maka anda akan melihat Code seperti di bawah ini, silahkan masukkan code Iklannya : <b:if cond='data:blog.pageType == &quot;item&quot;'> ..Tambahkan kode iklan Yang Sudah Diparse Disini.. </b:if>
  • Untuk memasang tepat di tengah atas postingan silahkan masukkan kode HTML seperti ini : <b:if cond='data:blog.pageType == &quot;item&quot;'> <div style='margin:0 auto 10px;text-align:center;'> ..Salin Kode Iklan yang Diparse Disini.. </b:if> </div>
  • Jika inggin iklan berada di atas samping kiri postingan silahkan menggunakan kode ini : <b:if cond='data:blog.pageType == &quot;item&quot;'> <div style='float:left;margin:0 10px 10px 0;'> ..Salin Kode Iklan yang Diparse Disini.. </b:if> </div>
  • Klik Simpan Template

Cara pasang iklan Adsense di antara Postingan Blog :
  • Masuk ke akun Blogger sobat
  • Klik Template, Edit HTML
  • Cari Kode <data:post.body/> Lalu ganti kode tersebut dengan kode HTML berikut ini : <div expr:id='"iklan1" + data:post.id'></div> <div style="clear:both; margin:10px 0"> <b:if cond='data:blog.pageType == &quot;item&quot;'> Letakan kode iklan di sini </b:if></div><div expr:id='"iklan2" + data:post.id'><data:post.body/></div><script type="text/javascript">var obj0=document.getElementById("iklan1<data:post.id/>");var obj1=document.getElementById("iklan2<data:post.id/>");var s=obj1.innerHTML;var t=s.substr(0,s.length/2);var r=t.lastIndexOf(" ");if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+1);}</script> 
  • Klik Simpan Template.

Cara pasang iklan atau banner melayang di samping kanan dan kiri blog :
  • Masuk ke akun Blogger sobat
  • Klik Tata Letak
  • Di sidebar klik Tambah Gadget
  • Copy kode di bawah ini untuk tulisan warna Merah ganti dengan kode iklan anda untuk tampil di Samping Kiri dan untuk warna Biru untuk tampil di Samping Kanan blog.
<script type='text/javascript'>
$(document).ready(function() {
$('img#closed').click(function(){
$('#btm_banner').hide(90);
});
});
</script>
<script type="text/javascript">var a=navigator,b="userAgent",c="indexOf",f="&m=1",g="(^|&)m=",h="?",i="?m=1";function j(){var d=window.location.href,e=d.split(h);switch(e.length){case 1:return d+i;case 2:return 0<=e[1].search(g)?null:d+f;default:return null}}if(-1!=a[b][c]("Mobile")&&-1!=a[b][c]("WebKit")&&-1==a[b][c]("iPad")||-1!=a[b][c]("Opera Mini")||-1!=a[b][c]("IEMobile")){var k=j();k&&window.location.replace(k)};
</script><script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('headEnd');
</script>
<!--start: floating ads-->
<div id="teaser2" style="width:autopx; height:0; text-align:left; display:scroll;position:fixed; top:0px;left:0px;">
<div><a id="close-teaser" onclick="document.getElementById('teaser2').style.display = 'none';" style="cursor:pointer;"><center><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicrdOI-92YyMfGcor_J6rhDNa5M_vERka6vYq_vNAPq5jphFPavVeixXulKy31QHXF3nOPr0gthcPz2wfzfiMJhazaxpRLeyyfAUVI4Yrg7q1ZWh7tNvdNaFu9vxJmtWDVGFQBXW6pt9n1/s1600/close3.png' alt='close' title='close button'/></center></a></div>
<!--Mulai disini-->
<!--Masukan Script Iklan Di sini Untuk Iklan Melayang di Kiri Blog--><!--Akhir disini-->
</div>
<!--end: floating ads-->
<!--start: floating ads-->
<div id="teaser3" style="width:autopx; height:600; text-align:right; display:scroll;position:fixed; top:0px;right:0px;">
<div><a id="close-teaser" onclick="document.getElementById('teaser3').style.display = 'none';" style="cursor:pointer;"><center><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicrdOI-92YyMfGcor_J6rhDNa5M_vERka6vYq_vNAPq5jphFPavVeixXulKy31QHXF3nOPr0gthcPz2wfzfiMJhazaxpRLeyyfAUVI4Yrg7q1ZWh7tNvdNaFu9vxJmtWDVGFQBXW6pt9n1/s1600/close3.png' alt='close' title='close button'/></center></a></div>
<!--Mulai disini-->
<!--Masukan Script Iklan Di sini Untuk Iklan Melayang di Kanan Blog--><!--Akhir disini-->
<!--end: floating ads--></div>

Untuk membuat kode HTML untuk Banner sesuai ukuran silahkan kembali lihat Cara membuat kode HTML untuk memasang Banner / Gambar Iklan di Blogspot di atas. Demikian tutorial lengkap cara membuat dan memasang Banner / Iklan di blogspot dengan mudah dan cepat, Semoga bermanfaat.