How to Create Link Ads in Blogger Using Html and Css ?

Hello everyone, in this post I have shared how to create link ads like AdSense with the help of html and css. This link ads created with the help of html and css is similar to the link ads of Google AdSense. This link ad slot may be used to open advertising services on your blog, and this type of link ad may be applied anywhere at the bottom of the post, in the middle of the post, or above.

This way you can provide a more independent link ad slot with a display that doesn't interfere, of course, as it will be more attractive and certainly responsive, like the display of Adsense link ads. If you want to put the link ad created with the help of this html and css on your blog, then definitely read the post till the end and follow the given steps.

View Demo

---

How to Create Link Ads in Blogger Using Html and Css :-

Step 1 :- First Open & Login Your Blogger Account.

Step 2 :- Then Click on Theme Menu.

Step 3 :- After Click on Edit Html.

Step 4 :- Then Paste The Given Css Code Above The </head> Tag.

<style type="text/css">
/* Link Ads Like Google Adsense Css By SmartTechMukesh.Com */
.link-ad-btn{width:100%;position:relative;padding-top:15px}
.link-ad-btn:after{clear:both;content:"";display:block}
.label-link-ad-btn{font-size:12px;color:#333;position:absolute;top:0;left:0;line-height:1;}
.label-link-ad-btn svg{width:15px;height:15px;vertical-align:-3px}
.label-link-ad-btn svg path{fill:#00aecd}
.link-ad-btn-left,.link-ad-btn-right{width:calc(50% - 10px);float:left}
.link-ad-btn-left{margin-right:10px}
.link-ad-btn-right{margin-left:10px}
.link-ad-btn-left a, .link-ad-btn-right a{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:0 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:#119af5;border:1px solid #ffffff;border-radius:25px;-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}
.link-ad-btn-left a:hover, .link-ad-btn-right a:hover{background-color:#fff;color:#333!important}
@media screen and (max-width:640px){.link-ad-btn-left,.link-ad-btn-right{width:100%;float:none;margin:0 auto}}
</style> 

Step 5 :- Then Don't Forget to Click on Save Theme.

Step 6 :- After Go To Blogger Layout.

Step 7 :- Then Click on Add a Gadget.

Step 8 :- Then Select The Html / JavaScript.

Step 9 :- Then Paste The Given Html Code.

<div class='link-ad-btn'>
<div class='link-ad-btn-left'>
<a href='#' target='_blank'>Place Ad Link Here</a>
<a href='#' target='_blank'>Place Ad Link Here</a>
<a href='#' target='_blank'>Place Ad Link Here</a>
<a href='#' target='_blank'>Place Ad Link Here</a>
</div>
<div class='link-ad-btn-right'>
<a href='#' target='_blank'>Place Ad Link Here</a>
<a href='#' target='_blank'>Place Ad Link Here</a>
<a href='#' target='_blank'>Place Ad Link Here</a>
<a href='#' target='_blank'>Place Ad Link Here</a>
</div>
<a href='#' target='_blank' title='Ads By Example.Com'>
<div class='label-link-ad-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>
Ads By Example.Com
</div></a>
</div>

Step 10 :- Finally, Don't Forget to Click on Save.

---

Conclusion :-

In this post I have shared how to create link ads with the help of HTML and CSS like Adsense. I hope this method of creating link ads with the help of html and css like adsense can be very useful for you and your blog. Thank you for visiting our website.

Refrence :
Www.SmartTechMukesh.Com