Cara Membuat Kotak Iklan Link Tautan Seperti Unit Ads Google Adsense di Blogger

Cara Membuat Kotak Iklan Link Tautan Seperti Unit Ads Google Adsense di Blogger - Apabila anda seorang pemilik website atau blogger yang sudah pernah bermitra kerja sama dengan Google Adsense pasti sudah memahami seperti apa itu tampilan dari iklan link tautan. Nah disini saya akan memberitahukan dan membagikan kepada anda cara membuat kotak tampilan iklan link tautan seperti yang ada dari Google Adsense, agar bisa bertujuan meningkatkan viewers pada blog atau pun dengan tujuan untuk mempromosikan kualitas dan kuantitas di dalam webiste/blogger yang anda kelola.

Cara Membuat Kotak Iklan Link Tautan Seperti Unit Ads Google Adsense di Blogger

1. Buka Menu Blogger >> Tema >> Edit HTML >> lalu kemudian temukan barisan kode script </style> atau ]]></b:skin>

2. Langkah selanjutnya, Copy Paste kode CSS dibawah ini tepat diatas </style> atau ]]></b:skin>

.link-btn{
  width:100%;
  position:relative;
  padding-top:15px
}
.link-btn:after {
  clear: both;
  content: "";
  display:block;
}
.label-link-btn{
  font-size:12px;
  color:#333;
  position:absolute;
  top:0;
  left:0;
  line-height:1;
}
.label-link-btn svg{
  width:15px;
  height:15px;
  vertical-align:-3px;
}
.label-link-btn svg path{
  fill:#00aecd;
}
.link-btn-left,.link-btn-right{
  width:calc(50% - 10px);
  float:left
}
.link-btn-left{
  margin-right:10px
}
.link-btn-right{
  margin-left:10px
}
.tombol-link {
  width: 100%;
  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: 5px auto;
}
.tombol-link:hover {
  background-color: #fff;
  color: #333;
}
@media screen and (max-width:640px){
  .link-btn-left,.link-btn-right{
  width:100%;
  float:none;
  margin:0 auto;
}
}

3. Submit Simpan atau Save

4. Selanjutnya, kembali ke Menu Blogger >> Tata Letak >> Tambahkan Gadget >> HTML/Javascript >> kemudian Copy Paste kode HTML dibawah ini >> Setelah itu Save

<div class='link-btn'>
<div class='link-btn-left'>
<a class='tombol-link' href='#' target='_blank'>Pasang Iklan Link Disini</a>
<a class='tombol-link' href='#' target='_blank'>Pasang Iklan Link Disini</a>
</div>
<div class='link-btn-right'>
<a class='tombol-link' href='#' target='_blank'>Pasang Iklan Link Disini</a>
<a class='tombol-link' href='#' target='_blank'>Pasang Iklan Link Disini</a>
</div>
<a href='#' target='_blank' title='Iklan oleh https://Wakilmu.com'>
<div class='label-link-btn'>
<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 https://Wakilmu.com
</div></a>
</div>

Note: Tulisan berwarna merah, bisa anda ganti sesuai dengan apa yang diinginkan

5. Submit Simpan atau Save

Begitulah sob caranya untuk membuat kotak seperti iklan link tautan yang bisa anda gunakan sebagai cara peningkatan viewers untuk website dan sebagai alat promosi pada blog/website yang kamu kelola, sekian dan salam sukses..

Wakil Ilmu

Wakilmu.com Merupakan Website Sederhana Berasal dari Indonesia dengan Informasi Terbaik dan Terlengkap

Share this post