Cara Buat dan Pasang Slot Iklan Responsive di Sidebar Blogger
October 27, 2024 ,

Cara Buat dan Pasang Slot Iklan Responsive di Sidebar Blogger

Blogger adalah salah satu platform blogging yang paling populer, banyak blogger yang menggunakan platform ini untuk mempublikasikan konten mereka. Salah satu fitur yang sangat penting dalam membuat blog lebih menarik adalah dengan menambahkan slot iklan responsive di sidebar.

Dalam tutorial ini, kita akan belajar bagaimana cara membuat dan pasang slot iklan responsive di sidebar Blogger. Langkah-langkahnya sebagai berikut:

Langkah 1: Edit Tema Blogger

Untuk membuat slot iklan responsive, Anda harus terlebih dahulu edit tema Blogger Anda. Untuk melakukan hal ini, silakan login ke dashboard Blogger dan pilih menu TEMA kemudian klik EDIT HTML.

Jika Anda tidak menemukan tombol EDIT HTML, Anda bisa klik icon segitiga kecil di sebelah tombol Sesuaikan.

Langkah 2: Paste Kode CSS

Kemudian cari kode ]]> atau

dan paste kode CSS berikut ini di atas kode yang Anda temui:

* {
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
}

.kotak_iklan {
 background: #efefef;
 width: 300px;
 margin: 0 auto;
 text-align: center;
 padding: 16.6666666667px;
}

.kotak {
 background: grey;
 height: 125px;
 width: 125px;
 display: inline;
 margin: 0;
 padding: 0;
 float: left;
 position: relative;
}

.kotak:nth-child(1), .kotak:nth-child(3) {
 margin-right: 16.6666666667px;
}

.kotak:nth-child(1), .kotak:nth-child(2) {
 margin-bottom: 16.6666666667px;
}

.kotak a {
 position: relative;
 display: block;
 z-index: 2;
}

.kotak:before {
 content: "Your Space 125x125";
 line-height: 1.2;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 color: #fff;
 font-size: 20px;
 display: flex;
 flex-direction: column;
 justify-content: center;
 z-index: 1;
}

.kotak-300 {
 width: 300px;
 height: 250px;
}

.kotak.kotak-300:nth-child(1) {
 margin-right: 0;
 margin-bottom: 0;
}

.kotak_iklan.p0 {
 padding: 0;
}

.kotak-300:before {
 content: "Your Space 300x250";
}

.clear {
 clear: both;
}

Kemudian simpan tema Blogger Anda.

Langkah 3: Buat Slot Iklan Responsive

Selanjutnya, Anda harus membuat slot iklan responsive di sidebar Blogger. Untuk melakukan hal ini, pilih menu Tata Letak / Layout kemudian tambahkan gadget dengan pilihan HTML/JavaScript. Paste salah satu script dibawah ini ke dalam konten widget HTML/jascript tadi.

Script Slot Iklan Ukuran 125 x 125 pixels

<div class="kotak_iklan">
 <div class="kotak">
 <!-- Paste URL Gambar/Banner Disini -->
 <a href="URL IKLAN" target="_blank" rel="nofollow noopener" title="JUDUL IKLAN">
 <img src="URL GAMBAR IKLAN" alt="JUDUL IKLAN" title="JUDUL IKLAN" height="125" width="125"/>
 </a>
 </div>
 <div class="kotak">
 <!-- Paste URL Gambar/Banner Disini -->
 </div>
 <div class="kotak">
 <!-- Paste URL Gambar/Banner Disini -->
 </div>
 <div class="kotak">
 <!-- Paste URL Gambar/Banner Disini -->
 </div>
 <div class="clear"></div>
</div>

Script Slot Iklan Ukuran 300 x 250 pixels

<div class="kotak_iklan p0">
 <div class="kotak kotak-300">
 <!-- Paste URL Gambar/Banner Disini -->
 <a href="URL IKLAN" target="_blank" rel="nofollow noopener" title="JUDUL IKLAN">
 <img src="URL GAMBAR IKLAN" alt="JUDUL IKLAN" title="JUDUL IKLAN" height="250" width="300"/>
 </a>
 </div>
</div>

Kemudian simpan gadget Anda.

Dengan demikian, Anda telah membuat dan pasang slot iklan responsive di sidebar Blogger. Slot iklan ini dapat menampilkan gambar atau banner dengan ukuran yang berbeda-beda, sehingga dapat membantu meningkatkan keefektifan iklan yang Anda tampilkan pada blog Anda.

Keterangan:

  • URL IKLAN dan JUDUL IKLAN adalah URL dan judul iklan yang Anda inginkan.
  • URL GAMBAR IKLAN adalah URL gambar atau banner yang Anda ingin tampilkan.
  • kotak_iklan adalah kelas CSS untuk membuat slot iklan responsive.
  • kotak adalah kelas CSS untuk membuat slot iklan kecil (125 x 125 pixels).
  • kotak-300 adalah kelas CSS untuk membuat slot iklan besar (300 x 250 pixels).
Tags:
Share this