Membuat Slot Iklan Link Berdikari Ibarat Iklan Link Adsense 2017

Kali ini aku akan share cara menciptakan slot iklan link berdikari ibarat iklan link Adsense 2017. Slot iklan link ini dapat dimanfaatkan untuk menjual space di bawah postingan untuk iklan berdikari dengan hanya memasang link saja.

Dengan begitu kita dapat menyediakan slot iklan link berdikari lebih banyak dengan tampilan yang tidak menggangu tentunya alasannya akan terlihat lebih menarik ibarat tampilan iklan link Adsense dan tentunya juga responsive.

Lumayan kan untuk menyediakan iklan link murah di blog?

Untuk melihat tampilannya silahkan lihat pada JSFiddle berikut ini:


Bagaimana tertarik untuk mencobanya?

Silahkan ikuti langkahnya di bawah ini.

Silahkan simpan isyarat CSS style berikut di atas isyarat </head>

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
 <style type='text/css'>
 /*<![CDATA[*/
 .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;
 }
 }
 /*]]>*/
 </style>
 </b:if>

Kemudian silahkan simpan isyarat HTML berikut di bawah postingan di edit HTML untuk menampilkan iklan linknya.

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
 <div class="link-btn">
 <div class="link-btn-left">
 <a class="tombol-link" href="#" target="_blank">Klik Tombol Ini</a>
 <a class="tombol-link" href="#" target="_blank">Klik Tombol Ini</a>
 <a class="tombol-link" href="#" target="_blank">Klik Tombol Ini</a>
 <a class="tombol-link" href="#" target="_blank">Klik Tombol Ini</a>
 <a class="tombol-link" href="#" target="_blank">Klik Tombol Ini</a>
 </div>
 <div class="link-btn-right">
 <a class="tombol-link" href="#" target="_blank">Klik Tombol Ini</a>
 <a class="tombol-link" href="#" target="_blank">Klik Tombol Ini</a>
 <a class="tombol-link" href="#" target="_blank">Klik Tombol Ini</a>
 <a class="tombol-link" href="#" target="_blank">Klik Tombol Ini</a>
 <a class="tombol-link" href="#" target="_blank">Klik Tombol Ini</a>
 </div>
 <a href="#" target="_blank" title="Membuat Slot Iklan Link Mandiri Seperti Iklan Link Adsense 2017">
 <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"></path>
 </svg>
 Iklan oleh KompiAjaib
 </div></a>
 </div>
 </b:if>

Sekarang tinggal mengganti isyarat # dengan URL tujuan iklan jikalau ada yang memasang iklan link.

Kode # pada isyarat <a href="#" target="_blank" title="Membuat Slot Iklan Link Mandiri Seperti Iklan Link Adsense 2017"> silahkan ganti dengan URL post penawaran iklan link blog Anda. Dan silahkan sesuaikan isyarat Iklan oleh KompiAjaib dengan blog Anda.
Sumber https://www.kompiajaib.com/

Share this post