Ditulis oleh: Ditulis pada: 9/29/2017
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>