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
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.


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

About the Author

Hello Friends, My Name is John M Smith and Welcome To Our Website. My Passion is to Share Knowledge With Everyone. Also I am a Website Designer.

Buy me a Coffee

5 comments

  1. Nice!!
    1. Thanks
  2. Sir can you help me to make any amp web story in blogger and I've tried this question on so many forums and stackoverflow but nobody is able to give me answer and everybody is saying that it's impossible to make any Google amp web Story in blogger.

    I tried I tried personally very hard to make that work and I have some results also I am able to make any Google story on homepage of blogger but I am not able to make it on a post or page do some coding or anything please let me know if you can do anything about this for at least reply me sir

    https://apkbelt.blogspot.com/?m=1
  3. Nice post..
    Please add my site in your friends page
    I have added u as my friends..

    Website:- https://www.techandfunzone.eu.org/
    Name:- Tech and Fun Zone
    1. I Couldn't Find Our Attribution Code on Your Blog.
Leave your opinion or any doubt about this article. Don't try to spam, our team reviews every comment.