Daftar Isi

Cara Membuat Banner Di Blog Blogspot

Blog adalah kependekan dari weblog, artinya website yang berisi konten personal berupa artikel, gambar, video, dan link. Blog merupakan salah satu cara modern untuk memperoleh informasi dengan mudah tanpa harus pergi ke perpustakaan atau tempat lain yang memberikan informasi terbaru. Bahkan kini mulai banyak bermunculan blog builder yang menawarkan kemudahan membuat blog sendiri dengan berbagai fitur yang bisa langsung kita gunakan. Anda tidak perlu lagi mengetikkan bahasa pemograman, sebab semua hal teknis dalam pembuatan blog sudah diatur oleh blog builder tersebut.

Seiring dengan perkembangannya, blog bukan hanya menjadi platform yanga memuat artikel berita, life style, teknologi, kuliner, dan sejenisnya. Namun, juga bisa dijadikan sebagai tempat promosi dan memasang iklan. Selain menaruh link tautan, biasanya orang-orang akan memasang banner iklan pada blog mereka atau menyewa blog orang lain. Menanam link tautan di dalam blog rasanya merupakan hal biasa bagi kebanyakan orang, tapi untuk memasang banner sepertinya sebagian besar dari kita masih belum paham caranya. Penasaran bagaimana cara memasang banner di blog? Artikel ini akan membahasnya dengan runtut. Langsung simak pembahasannya di bawah, yuk.

Baca juga : Pengertian, Jenis, Dan Cara Membuat Sitemap Di Google Webmaster Tool

Cara Membuat Banner Di Blog Blogspot

Cara Membuat Banner Di Blog Blogspot
Cara Membuat Banner Di Blog Blogspot

Berikut Step By Step Membuat Banner di Blogspot dan Memasang banner blog bisa Anda lakukan dengan script kode HTML. Berikut urutan caranya :

1. Langkah pertama adalah mengenali template blog yang Anda gunakan. Dengan begitu, Anda bisa sesuaikan antara tema dan ukuran, jenis, serta warna banner agar membuat kombinasi yang menarik. Terlebih lagi, setiap template biasanya memiliki ukuran header blog yang berbeda-beda.
2. Selanjutnya, buat banner Anda menggunakan tools desain grafis seperti Corel Draw, PhotoShop, dan Adobe Ilustrator.
3. Setelah banner selesai dibuat, Anda bisa lanjut untuk masuk ke akun blog Blogspot Anda.
4. Pada halaman utama blog, klik menu “Tata Letak” atau “Layout”, kemudian pilih “Edit”.
5. Klik “Tambah Gadget” atau “Add Gadget”
4. Kemudian pilih “HTML atau JavaScript”
5. Untuk judul tidak perlu Anda isi, Anda bisa langsung mengisi kolom konten yang tersedia dengan code HTML di bawah ini.

Keterangan =Warna Merah : Judul iklan Anda.Warna Kuning : Alamat URL blog atau website yang akan dituju.Warna biru : Berupa alt text untuk banner Anda.Warna hijau : Alamat URL di mana banner Anda disimpan, bisa situs online seperti Facebook dan Instagram atau postingan blog.Warna orange : Width untuk menentukan lebar banner, sedangkan height untuk tinggi banner.Mudah bukan cara membuat banner di blog sesuai keinginan Anda? Untuk memasang banner iklan di bagian sidebar atau di sekitar header, Anda hanya perlu menambahkan Gadget dan mengedit code HTML di atas. Sedangkan untuk memasang banner pada postingan blog, Anda harus mengedit code HTML template yang Anda pakai.

Berikut penjelasan lengkap cara memasang banner iklan dalam postingan blog :

1. Buka akun blog Blogspot Anda, lalu klik “Tempate” dan “Edit HTML”

2. Cari code <data:post.body/>

3. 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;’>Letakkan Script Code Banner Iklan Di Sini</b:if> </div>

4. Jika Anda ingin banner 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;’>Letakkan Script Code Banner Iklan Di Sini</b:if> </div>

5. Sedangkan agar banner berada di antara postingan blog, Anda bisa gunakan code HTML berikut :

<div expr:id='”iklan1″ + data:post.id’></div> <div style=”clear:both; margin:10px 0″> <b:if cond=’data:blog.pageType == &quot;item&quot;’>Letakkan Script Code Banner 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>

Baca Juga : Pengertian Content Management System Dan Jenisnya

6. Untuk memasang banner iklan di samping kanan dan kiri postingan, silahkan copy code HTML berikut :

<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=’banner.png’ alt=’close’ title=’close button’/></center></a></div>
<!–Mulai disini–>
<!Letakkan Script Code Banner Iklan Di Sini Untuk Posisi Kiri>
<!–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=’banner.png’ alt=’close’ title=’close button’/></center></a></div>
<!–Mulai disini–>
<!Letakkan Script Code Banner Iklan Di Sini Untuk Posisi Kanan>
<!–Akhir disini–>
<!–end: floating ads–></div>

6. Terakhir klik “Simpan Template”.

Demikian artikel bagaimana cara memasang banner di blog Blogspot. Semoga artikel ini bisa membantu memudahkan Anda memahami cara membuat banner iklan di blog secara manual ataupun memakai code HTML dengan baik. Selamat mencoba!

Originally posted 2022-05-11 15:09:41.

Previous Post
Next Post
Bagikan:

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *