Cara Menyesuaikan Iklan Link Adsense 2017 Dengan Tombol Di Blog

Di dalam menampilkan iklan link Adsense 2017 ini, aku melihat ada yang tidak mempedulikan tampilan iklan link namun banyak juga yang menciptakan tampilan iklan link semoga sesuai dengan tema blog.

Seperti kita ketahui, sekarang di tahun 2017 ini Adsense menciptakan tampilan iklan link berupa tombol mirip pada gambar di atas. Dan tampilan tombol pada iklan link tersebut dapat 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 semoga sesuai dengan tema blog, maka iklan dapat lebih menyatu dengan tampilan blog sebagai sebuah estetika pada tampilan blog.

Kita dapat mengambil warna lebih banyak didominasi pada tema blog kita sebagai warna background tombol pada iklan link Adsense atau dapat mengambil warna link blog untuk warna goresan pena dan border tombol pada iklan link Adsense.

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

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

Praktis bukan?

Nah jikalau kita ingin menyimpan tombol link pada postingan dan tampilan tombolnya ingin sama ibarat 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 semoga sesuai dengan tombol pada iklan link.

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

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

Sumber https://www.kompiajaib.com/

Share this post