How to Create Ad Slot Link Mandiri Like Post Ads on Adsense

How to Create Ad Slot Link Mandiri Like Post Ads on Adsense - This time I will share ways about creating self-service ad slot links like Adsense link ads. Which in the ad link slot can be used to sell space under the post for self-adhesive by simply installing links only.

That way we can provide more independent ad link slot with a view that is not annoying of course because it will look more attractive like Adsense link ads display and of course also responsive.

How to Create Ad Slot Link Mandiri Like Post Ads on Adsense

If you are interested to create and install on your blog, you can immediately do some steps below:

1. Please save the CSS Style code below just before the code </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>

2. Then please save the following HTML code under the post in the edit HTML to display the link ads.

<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">Click This Button</a>
<a class="tombol-link" href="#" target="_blank">Click This Button</a>
<a class="tombol-link" href="#" target="_blank">Click This Button</a>
<a class="tombol-link" href="#" target="_blank">Click This Button</a>
<a class="tombol-link" href="#" target="_blank">Click This Button</a>
</div>
<div class="link-btn-right">
<a class="tombol-link" href="#" target="_blank">Click This Button</a>
<a class="tombol-link" href="#" target="_blank">Click This Buttoni</a>
<a class="tombol-link" href="#" target="_blank">Click This Button</a>
<a class="tombol-link" href="#" target="_blank">Click This Button</a>
<a class="tombol-link" href="#" target="_blank">Click This Button</a>
</div>
<a href="#" target="_blank" title="Ads by khalista">
<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>
Ads by khalista
</div></a>
</div>
</b:if>

3. Now just replace the code # with the destination URL of the ad if there is an advertisement link.

Code # in code <a href="#" target="_blank" title="Ads by Khalista"> please replace with post URL of your blog link offer. And please adjust the Ads code by khalista with your blog.

That's the tips on Creating Ad Slot Link Mandiri Like Adsense Adsense Ads, hopefully with this short enough article, can be useful for us all, good luck.

Share :