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 :-
<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>
Html / JavaScript
.<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>
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.
Reference:
smarttechmukesh.com
Nice!!
ReplyDeleteThanks
DeleteSir 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.
ReplyDeleteI 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
Nice post..
ReplyDeletePlease 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
I Couldn't Find Our Attribution Code on Your Blog.
Delete