Skip to main content

Cara Menyesuaikan Iklan Link Adsense 2017 Dengan Tombol Di Blog

Di dalam menampilkan iklan link Adsense 2017 ini, saya melihat ada yang tidak mempedulikan tampilan iklan link namun banyak juga yang membuat tampilan iklan link agar sesuai dengan tema blog.

Seperti kita ketahui, kini di tahun 2017 ini Adsense membuat tampilan iklan link berupa tombol seperti pada gambar di atas. Dan tampilan tombol pada iklan link tersebut bisa kita sesuaikan warna background dan warna tulisannya.

Nah, dengan menyesuikan iklan link Adsense ini dengan tombol yang ada di blog atau menyesuaikan tampilan iklan link agar sesuai dengan tema blog, maka iklan bisa lebih menyatu dengan tampilan blog sebagai sebuah estetika pada tampilan blog.

Kita bisa mengambil warna dominan pada tema blog kita sebagai warna background tombol pada iklan link Adsense atau bisa mengambil warna link blog untuk warna tulisan dan border tombol pada iklan link Adsense.

Caranya cukup mudah, ketika kita membuat sebuah unit iklan link Adsense, silahkan sesuaikan warna border, title, dan background pada bagian Text ads style sesuai dengan warna yang kita inginkan.

Namun jika kita kadung sudah membuat unit iklan link namun ingin mengubah tampilannya, silahkan edit unit iklan tersebut dengan mengklik nama unit iklan tersebut lalu silahkan sesuaikan warna border, title, dan background pada bagian Text ads style sesuai dengan warna yang kita inginkan kemudian save.

Mudah bukan?

Nah jika kita ingin menyimpan tombol link pada postingan dan tampilan tombolnya ingin sama menyerupai tombol iklan link Adsense, silahkan gunakan CSS di bawah ini.


.tombol-link {
  width: 100%;
  max-width: 350px;
  height: 41px;
  display: block;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  text-align: center;
  line-height: 41px;
  box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.35) inset, 0px 1px 1px rgba(0, 0, 0, 0.3);
  align-items: center;
  justify-content: center;
  background-color: #333333;
  border: 1px solid #ffffff;
  border-radius: 30px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  color: #ffffff;
  font-weight: normal;
  font-family: arial, sans-serif;
  font-size: 16px;
  margin: 10px auto;
}
.tombol-link:hover {
  background-color: #fff;
  color: #333;
}

Silahkan sesuaikan background-color dan color agar sesuai dengan tombol pada iklan link.

Dan pada link yang ingin kita buat tombol, silahkan tambahkan class="tombol-link" sehingga menjadi seperti berikut:


<a class="tombol-link" href="#" target="_blank">Klik Tombol Ini</a>



Berbagi itu peduli:

Comment Policy:

Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui. Untuk komentar out of topics silahkan masuk ke Forum Kompi Ajaib
Buka Komentar
Buka Komentar
Jangan Diklik!

Menarik Untuk Dibaca Juga:

PrivacySitemap
©2021 KOMPI AJAIB