Most of the bloggers use Ad networks for monetizing their blogs. Mostly they look for best ad locations to increase CTR in order to improve their earnings. Mostly you will find ads in sidebars or in header sections. But based on my experience of using ad networks, often i get good CTR by inserting ads within content. So here is a simple wordpress shortcode trick to insert adsense or any ad network ads within content.
Place the following code to your functions.php file.
function adscode() {
return '
<div id="ads"><script type="text/javascript">// <![CDATA[
google_ad_client = "ca-pub-XXXXXXXXXXXXXXXX"; google_ad_slot = "YYYYYYYYYYY"; google_ad_width = 336; google_ad_height = 280;
// ]]></script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">// <![CDATA[
// ]]></script></div>';
}
add_shortcode('ad', 'adscode');
To display the ad, you must use the following shortcode :
[ad]
Let’s break the code :
In the above code, you can see that i have included a DIV element with id=”ads”. It can be useful to add beautiful effects to the ad.
check the sample css code, you can add more css properties to make the ad fit your content perfectly.
#ads {
background: #EEE;
padding: 14px 25%;
border: 1px solid #CCC;
}
Please replace this ad code with yours. You can place code of any Ad network such as Adsense or Buysellads or Adbrite or Amazon affiliate etc.
<script type="text/javascript">// <![CDATA[ google_ad_client = "ca-pub-XXXXXXXXXXXXXXXX"; google_ad_slot = "YYYYYYYYYYY"; google_ad_width = 336; google_ad_height = 280; // ]]></script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">// <![CDATA[ // ]]></script>
Style Code
Check out some ad code examples:
#ads {
background: #EEE;
padding: 14px 25%;
border: 1px solid #CCC;
}
#ads {
float:left;
background: #eee;
border: 1px solid #ccc;
padding:10px;
margin: 10px 10px 10px 0px;
}
This following CSS will make the Ad to float on right side and content on left. Mostly i use to see blogs having ads floating on left side just below title. So when search engines crawl, The first element they crawl is ad code. mostly i prefer to have ads on right side. This makes content to appear first on content page.
#ads {
float:right;
background: #eee;
border: 1px solid #ccc;
padding:10px;
margin: 10px;
}
Advanced options
If you have too many ad networks like adsense and buysellads or anything else and want to show multiple ads, even then you can make use of the above trick with some simple modifications.
function bsacode() {
return '
<div id="bsa"><script type="text/javascript">// <![CDATA[
google_ad_client = "ca-pub-XXXXXXXXXXXXXXXX"; google_ad_slot = "YYYYYYYYYYY"; google_ad_width = 336; google_ad_height = 280;
// ]]></script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">// <![CDATA[
// ]]></script></div>';
}
add_shortcode('bsa', 'bsacode');
In the above code, you can see that i have changed the function name from adscode to bsacode and similarly ads to bsa in add_shortcode part. Similarly use custom CSS code as well.
Now when you want to show the second ad, you must call it using the following shortcode.
[bsa]
#bsa {
background: #EEE;
padding: 14px 25%;
border: 1px solid #CCC;
}
Feedbacks
Hope the above tutorial will be helpful for you. You can replace the Ad code with any custom banner codes or images which you want to show using shortcodes. If you want any custom feature or want modifications in the above trick let me know.
About the author /
admin
Popular
Editor’s Pick
-
August 21, 2008 Having Custom CSS in Pagination hack
Page Navigation hack for Blogger replaces the default older posts and Newer Posts with Numbered page link just like WordPress. If you want to implement this hack in your blogger Blog then please visit this posts. You can add this hack in two methods , 1. By Editing Blogger template 2. Adding As a Widget…
-
November 27, 2010 45+ Online Image Editors and Funny Photo Effects Creators
Before the development of web, if someone wants to edit images then he must either buy an image editing software like photoshop or he must use some free image editors available. Then the advancement in web development has enabled the developers to provide the features of offline software in web. At the beginning of web…
-
July 31, 2008 Page Navigation Menu Widget for Blogger
Yesterday I wrote How to add Page Navigation Menu hack by editing your blogger template. Now today I would like to use a different method to add this Page Navigation Menu to our Blogger Blog. Most Bloggers will prefer this method to add Page navigation Menu , because this method is very easy than editing…
-
January 6, 2010 45+ surreal Long Exposure Photography Inspirations
Long exposure photography is one of the coolest ways of taking pictures. It requires a longer shutter speed, anywhere from 1/2 sec up to several minutes or even a hour. The ability to take long exposures requires a user to use a tripod for optimum results (of course, some people prefer the hand shake look)….
-
April 23, 2023 Mastering the Art of Timelapse Photography: Tips and Techniques
Timelapse photography is a technique that involves capturing a series of photos over a period of time and then combining them into a video sequence to create the illusion of time passing quickly. Mastering this art can add a unique dimension to your photography skills. The importance of mastering timelapse photography lies in the fact…
