Beranda
Blogging
Ecommerce

Cara Membuat Slot Iklan Link yang Mirip dengan AdSense

Blogger adalah platform yang efektif untuk berbagi informasi, membangun komunitas, atau menghasilkan pendapatan. Salah satu cara populer untuk menghasilkan uang dari Blogger adalah dengan membuat jasa pemasangan iklan. Salah satu format iklan yang bisa digunakan adalah iklan link, yang mirip dengan Google AdSense.

Cara pembuatan slotnya pun sangat mudah dilakukan. Cukup dengan langkah-langkah yang sederhana. Sebelum membahas langkah-langkahnya, ada baiknya memahami lebih dulu apa itu Iklan Link dan dan keuntungan kekurangan menggunakannya. Demo

Apa itu Iklan Link?

Iklan link adalah iklan berbentuk tautan yang bisa ditempatkan di berbagai bagian blog. Format ini cocok untuk membuka peluang periklanan karena mudah diterapkan dan dapat menarik pengunjung untuk mengklik tautan yang ada. Dibandingkan dengan iklan banner atau format lainnya, iklan link tampil lebih sederhana dan tidak mengganggu pengalaman pengguna.

Keuntungan dan Kekurangan Iklan Link Dibandingkan Format Lain

1. Keuntungan Iklan Link

  • Penempatan Fleksibel: Iklan link dapat dipasang di berbagai area blog, seperti di bawah artikel atau di tengah teks, sehingga mudah disesuaikan dengan tata letak blog.
  • Tampilan Sederhana: Format iklan ini lebih sederhana dan tidak mencolok, membuat pengalaman pengguna tetap nyaman tanpa gangguan visual yang berlebihan.
  • Kecepatan Muat Halaman: Karena desainnya ringan, iklan link tidak memperlambat waktu muat halaman blog, berbeda dengan iklan banner atau video.

2. Kekurangan Iklan Link

  • Visibilitas Rendah: Karena tampilannya sederhana, iklan link mungkin tidak langsung menarik perhatian dibandingkan dengan iklan banner atau video.

Cara Membuat Slot Iklan Link di Blog

Untuk pembuatan slot iklan link mirip AdSense di blog, ikuti langkah-langkah berikut:

1. Salin Kode CSS

Salin kode CSS dan Tempelkan kode ini di bawah kode ]]></b:skin> atau </style> dalam kode HTML tema blog Anda.

/* CSS iklan link Enasa.pro by Muhammad Nasai */
.link-ePro {
  width: 100%;
  position: relative;
  padding-top: 15px;
  font-family: Arial, sans-serif;
}
.link-ePro:after {
  content: "";
  display: table;
  clear: both;
}
.label-link-ePro {
  font-size: 12px;
  color: #555;
  position: absolute;
  top: -10px;
  left: 10px;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 5px;
}
.label-link-ePro svg {
  width: 15px;
  height: 15px;
  vertical-align: middle;
}
.label-link-ePro svg path {
  fill: #4caf50; /* Hijau */
}
.link-ePro-left, .link-ePro-right {
  width: calc(50% - 5px);
  float: left;
  text-align: center;
}
.link-ePro-left {
  margin-right: 5px;
}
.link-ePro-right {
  margin-left: 5px;
}
.ePro-link {
  width: 100%;
  height: 45px;
  display: inline-block;
  text-align: center;
  line-height: 45px;
  background: linear-gradient(135deg, #228b22, #2e8b57, #00bcd4);
  border: none;
  border-radius: 25px;
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  margin: 10px 0;
  transition: all 0.3s ease;
  text-decoration: none;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.ePro-link:hover {
  background: linear-gradient(135deg, #2e8b57, #00bcd4, #228b22); /* Gradasi berubah arah */
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
  transform: translateY(-3px);
  color: #ffeb3b; /* Teks berubah menjadi kuning cerah */
  cursor: pointer;
}
.ePro-link:active {
  transform: translateY(0); /* Tombol kembali ke posisi semula saat diklik */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}
@media screen and (max-width: 640px) {
  .link-ePro-left, .link-ePro-right {
    width: 100%;
    float: none;
    margin: 0 auto;
  }
}

Simpan tema

2. Salin Kode HTML

Langkah terakhir adalah menambahkan kode HTML untuk slot iklan link. Silahkan salin dan tempel ke tempat yang diinginkan

<div class='link-ePro'>
  <div class='link-ePro-left'><!-- Iklan bagian kiri -->
    <a class='ePro-link' href='#' target='_blank'>Pasang Iklan Link Disini</a>
    <a class='ePro-link' href='#' target='_blank'>Pasang Iklan Link Disini</a>
    <a class='ePro-link' href='#' target='_blank'>Pasang Iklan Link Disini</a>
    <a class='ePro-link' href='#' target='_blank'>Pasang Iklan Link Disini</a>
  </div>
  <div class='link-ePro-right'><!-- Iklan bagian Kanan -->
    <a class='ePro-link' href='#' target='_blank'>Pasang Iklan Link Disini</a>
    <a class='ePro-link' href='#' target='_blank'>Pasang Iklan Link Disini</a>
    <a class='ePro-link' href='#' target='_blank'>Pasang Iklan Link Disini</a>
    <a class='ePro-link' href='#' target='_blank'>Pasang Iklan Link Disini</a>
  </div>
  <a href='#' target='_blank' title='Iklan oleh Enasa.pro'>
    <div class='label-link-ePro'>
      <svg x='0px'>
        <path d='M7.5,1.5a6,6,0,1,0,0,12a6,6,0,1,0,0,-12m0,1a5,5,0,1,1,0,10a5,5,0,1,1,0,-10ZM6.625,11l1.75,0l0,-4.5l-1.75,0ZM7.5,3.75a1,1,0,1,0,0,2a1,1,0,1,0,0,-2Z'/>
      </svg>
      Iklan oleh Enasa.pro
    </div>
  </a>
</div>
Kode HTML ini terdiri dari dua bagian utama: satu untuk bagian kiri dan satu untuk bagian kanan, masing-masing berisi beberapa tautan iklan.

3. Sesuaikan Link Iklan

Gantilah setiap tautan dalam kode HTML dengan URL yang sesuai untuk iklan yang ingin dipasang. Tautan ini akan mengarahkan pengunjung ke halaman iklan yang diinginkan saat diklik.

Demo

Kesimpulan

Slot iklan link adalah solusi monetisasi blog yang efektif dengan desain sederhana, fleksibilitas penempatan, dan responsif, cocok untuk meningkatkan pendapatan tanpa mengorbankan pengalaman pengguna. Tempatkan iklan di area strategis, gunakan warna menarik, dan pastikan tata letaknya mendukung estetika blog untuk hasil yang optimal.

Posting Komentar