Membuat Slot Iklan Link Mandiri Ala Iklan Link Adsense - Pada waktu yang kemudian Saya sudah posting Membuat Unit Iklan Adsense Di Blog AMP. Untuk kesempatan kali ini, Saya akan coba posting cara Membuat Slot iIklan Link Mandiri Ala Iklan Link Adsense. Dengan begitu kita dapat menyediakan slot iklan link berdikari lebih banyak dengan tampilan yang tidak memakan tempat, sebab akan terlihat lebih menarik menyerupai tampilan iklan link Adsense, dan slot iklan link berdikari ini juga sudah responsive.
Untuk Demo tampilannya, silahkan lihat pada JSFiddle berikut ini:
Bagaimana berdasarkan Anda, tertarik untuk mencobanya?
Jika Anda tertarik, mari kita ikuti langkahnya di bawah ini.
Silahkan simpan instruksi CSS style berikut di atas instruksi
</head> <b:if cond='data:blog.pageType == "item"'>
<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 instruksi HTML berikut di bawah postingan di edit HTML untuk menampilkan iklan linknya.
<b:if cond='data:blog.pageType == "item"'>
<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 Ala Iklan Link Adsense">
<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 WebsiteMini
</div></a>
</div>
</b:if>
Sekarang tinggal mengganti instruksi
# dengan URL tujuan iklan bila ada yang memasang iklan link.Kode
# pada instruksi <a href="#" target="_blank" title="Membuat Slot Iklan Link Mandiri Ala Iklan Link Adsense"> silahkan ganti dengan URL post penawaran iklan link blog Anda. Dan silahkan sesuaikan instruksi Iklan oleh WebsiteMini dengan blog Anda.Nah, itulah postingan kali ini perihal cara Membuat Slot Iklan Link Mandiri Ala Iklan Link Adsense. Selamat mencoba dan biar bermanfaat.
Source: https://xomlic.blogspot.com/search?q=membuat-slot-iklan-link-mandiri-seperti
Share this Article