.png "English"){kind=small}
The template designer provides 4 ad columns in the blog sidebar, size 125x125 Pixels. Rarely do they provide Four Ad Columns above Blog Posts. Examples or demos can be seen on Blogger Lab.
Previously, we shared How to Create Two Adsense Ad Columns above Posts and How to Create Two Adsense Columns below Posts.
This time, How to Create 4 Ad Columns above Blog Posts, especially for non-Google Adsense ads, or simply to beautify the appearance and fill it with other blog links.
How to Create 4 Columns of Ads Above Blog Posts
1. Click "Layout" > "Add a Gadget" above the "Blog Posts" widget
If the widget above "Blog Posts" is not available, then set it first in "Template" > "Edit HTML" > find the code "showaddelement" > replace "no" with "yes"
2. Select "HTML/JavaScript"
3. Enter the following code in the "Content" column
<div align="left">
<table border="0" cellpadding="4" cellspacing="4" width="620" bgcolor=""><tbody>
<tr>
<td><center><a href="LINK"><img border="none" alt="TITLE" title="TITLE" width="145" src="IMAGE LINK" height="125"/></a></center></td>
<td><center><a href="LINK"><img border="none" alt="TITLE" title="TITLE" width="145" src="IMAGE LINK" height="125"/></a></center></td>
<td><center><a href="LINK"><img border="none" alt="TITLE" title="TITLE" width="145" src="IMAGE LINK" height="125"/></a></center></td>
<td><center><a href="LINK"><img border="none" alt="TITLE" title="TITLE" width="145" src="IMAGE LINK" height="125"/></a></center></td>
</tr>
</tbody></table></div>
Note:
The image size can be adjusted to the width of your blog's "main area", width and height, at 145 and 125.
4. Save!
If you want to display it only on the inside page (Single Page/Single Posts), then use the code in How to Set Widget Position.
Next, placing AdSense ads in 4 columns above your blog posts is an effective way to increase visibility and click-through opportunities. This arrangement allows ads to appear more attractive and neat, so as not to interfere with the reader's experience. Here are the steps to create 4 columns of ads above your blog posts.
Steps:
Get AdSense Ad Code
Log in to your Google AdSense account.
Create 4 ad units of the same size, such as responsive banners or 300x250 ads.
Copy each of the ad codes.
Log in to your Blog Dashboard
For Blogger users, open your dashboard, select your blog, and click Themes > Edit HTML.
For WordPress users, go to Appearance > Theme Editor.
Add HTML Code
At the top of the post (before the article starts), add the HTML code to create a 4-column layout:
<div style="display: flex; justify-content: space-between;">
<div style="width: 24%;"> <!-- First Ad Code --> </div>
<div style="width: 24%;"> <!-- Second Ad Code --> </div>
<div style="width: 24%;"> <!-- Third Ad Code --> </div>
<div style="width: 24%;"> <!-- Fourth Ad Code --> </div>
</div>
Save Template After inserting the code, save your changes and check out your blog.
This way, the ads will be displayed in four neat columns above the blog post, making it more attractive and potentially increasing click-through rates. Good Luck!