Get Latest Tips and Templates For Blogger,Wordpress

Latest

Sunday, 4 November 2018

How To Add 125X125 AD-Space In Blogger Sidebar

Ad-spaces are always useful because they let you show ads in a different way rather than simple ads. 125X125 ad-space is even more useful than ordinary ad spaces because it lets you to show 4 ads at a time and all ads could be of different ad networks so you earn from all networks. It also adds a star to your site design so your site looks more professional. Also 125X125 ad-space compress your ads in a small area so if you want you can show 8 ads by just consuming ad space of 2 square ads, hence it is a beneficial thing.

How To Add 125X125 AD-Space In Blogger Sidebar

So here is a quick post about how to add 125X125 ad-space in blogger sidebar. I will share two types of ad-spaces one for showing ads of any ad network and one for personal ad campaigns in which you need to add your advertisers ad image url and target url.

Step 1: Go to Blogger Dashboard and Open Layout.


Step 2: Click on Add a Gadget in right or Left Sidebar.


Step 3: Choose HTML/Javascript.


Step 4: Copy Code of Ad-Space from Below by your Choice.

CODE FOR PERSONAL ADVERTISEMENTS:

<div id="ad-case">
<ul>
<li><a href="YOUR SPONSOR LINK HERE"><img src="YOUR SPONSOR IMAGE HERE"/></a></li>
<li><a href="YOUR SPONSOR LINK HERE"><img src="YOUR SPONSOR IMAGE HERE"/></a></li>
<li><a href="YOUR SPONSOR LINK HERE"><img src="YOUR SPONSOR IMAGE HERE"/></a></li>
<li><a href="YOUR SPONSOR LINK HERE"><img src="YOUR SPONSOR IMAGE HERE"/></a></li>
</ul>
</div>
<style>
#ad-case li { position: relative; float: left; margin-right: 10px; list-style: none; padding: 0; margin-bottom: 10px; }
#ad-case { width: 400px; position: relative; }
#ad-case img { width: 125px; height: 125px; border: 0; padding: 0; }
#ad-case ul { padding: 0; line-height: 1.4; margin: 0; }
</style>


CODE FOR AD NETWORKS ADVERTISEMENTS:

<div id="ad-case">
<ul>
<li>YOUR 125X125 AD CODE HERE</li>
<li>YOUR 125X125 AD CODE HERE</li>
<li>YOUR 125X125 AD CODE HERE</li>
<li>YOUR 125X125 AD CODE HERE</li>
</ul>
</div>
<style>
#ad-case li { position: relative; float: left; margin-right: 10px; list-style: none; padding: 0; margin-bottom: 10px; border: 1px solid #ddd; }
#ad-case { width: 400px; position: relative; }
#ad-case ul { padding: 0; line-height: 1.4; margin: 0; }
</style>


Step 5: Replace ad code text with your ad codes or add your advertiser's ad's image and link.

Customization:

You can increase number of ad spaces by increasing each:

<li><a href="YOUR SPONSOR LINK HERE"><img src="YOUR SPONSOR IMAGE HERE"/></a></li> for personal ads
<li>YOUR 125X125 AD CODE HERE</li> for ad network ads.

Sharing is Caring! Share if you like :)


No comments:

Post a Comment