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

Hello Everyone! Welcome Back to TechiFeed. I have written a new informative post for you to read. So, Keep reading to find out more!

This link ad produced using CSS and HTML is comparable to the Google AdSense link ad. 

This link advertisement slot can be used to promote advertisements on your site, and this link ad can be placed anywhere at the bottom, middle, or top of the article.

In this manner, you may create a more independent link ad slot with a display that does not interfere, as it will be more appealing and responsive, similar to the show for Adsense link advertisements. 

If you want to use the link ad made with this HTML and CSS code on your site, read the entire page and follow the instructions.

How to Create Link Ads in Blogger?

Step 1: Open and log in to your Blogger account.

Step 2: Next, select Theme Menu.

Step 3: After selecting Edit HTML.

Step 4: Paste the CSS code above the </head> tag.

<style type="text/css">
/* Link Ads Like Google Adsense Css By techifeed.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: Finally, remember to click Save Theme.

Step 6: After that, navigate to Blogger Layout.

Step 7: Next, select Add a Gadget.

Step 8: Next, choose HTML / JavaScript.

Step 9: Then, paste the HTML code that I have provided.

<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, remember to click the Save button.

Frequently Asked Questions

What is a Google AdSense link ad?

AdSense link ads are a type of advertisement offered by Google AdSense. They consist of a small block of text or image links displayed on a website and, when clicked on, take the user to the advertiser's website.

How do I create a link ad in Google AdSense?

To create a link ad in AdSense, you first need to have an AdSense account. Once you have an account, you can log in and access the AdSense interface. You can create a new ad unit and select "link" as the ad type. Then you can customize the ad with your desired text and links.

How much do AdSense link ads pay?

The amount you earn from AdSense link ads depends on various factors, including the ad's click-through rate (CTR), the cost per click (CPC) of the advertiser's campaign, and the amount of traffic your website receives. Generally, the more traffic your website receives, the higher the potential earnings from link ads.

Are there any guidelines for displaying AdSense link ads on my website?

Yes, AdSense has guidelines for displaying ads on your website. These include rules around the placement of ads, the number of ads that can be displayed on a page, and the types of content on which ads can be displayed. Reviewing and following these guidelines is essential to avoid any issues with your AdSense account.

Can I customize the appearance of AdSense link ads on my website?

Yes, AdSense allows you to customize the appearance of link ads to match the design of your website. You can choose from various link ad formats, including text and image links, and customize the colors and font to match your website's design.

Stay Connected

I hope you liked the above informative content. Please share this post and follow our blog for more great content.

If you have any questions or problems, feel free to ask in the comments section.

© Copyright: TechiFeed

Go to Link