Skip to main content


Showing posts from March, 2010

Use jquery to style your external links with image

You must have noticed in Wikipedia that all external links is followed by an image basically this tells user that the link will open in a new tab.
Lets see an example -
Blogger -An external Link
Fun with blogger -Internal link

You have noticed that the hyperlink blogger has an arrow image on right of it! This tells the user that the link will open up in a new tab when being clicked!One way of doing this is manually putting the class name to each anchor tag entry having external target! or just use jquery function and let Jquery do it for you.

# Understanding External Links strategy. What are external links?
External links are those links which points away from  your site.For this  we use a special attribute target="_blank" which tells the browser to open external link in new tab or window.
External link Looks like this
<a href="" target="_blank">Blogger </a>
# Purpose/Use  of JQuery. We will use jQuery to find out all…

Insert Adsense Block in the Middle of the post-Blogger

How to place Adsense in the middle of Blogger posts.
The solution to this problem is quite simple: you only need to move the post body around the advertising code, just with a bunch of JavaScript and a couple of DIVs (divisions).
Works For both Old blogger and New Blogger.

1. In your Blogger template:


Find the tag <$BlogItemBody$> and replace it with following code:

<div id="prv<$BlogItemNumber$>"></div>

<div style="clear:both;margin:10px 0">
<!-- Your AdSense code --> </div>

<div id="fst<$BlogItemNumber$>">
<$BlogItemBody$> </div>

<script type="text/javascript">
var obj0=document.getElementById("prv<$BlogItemNumber$>");
var obj1=document.getElementById("fst<$BlogItemNumber$>");
var s=obj1.innerHTML;
var\x3C!-- adsense --\x3E/igm);
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);}

Add to blogger :Bullets With Image hover effect

This is a simple tutorial to learn to ADD bullets images to your blogger which change with while you place mouse on it.The image beside shows hovering effect .IF you are looking for free bullets icons or graphics for your blog you can check my article Best places to download free bullets .

Adding Bullets to Post AreaLogin to your blogger Click on Layout tab >> Click Edit HTMLUse your browser search (Cntrl + F) to find .post ul li or some thing like this might be different in different templates. Copy
background:transparent url( no-repeat scroll 0 4px; and add in your .post ul li(in between curly brackets { and }) so that your code becomes

.post ul li {
background:transparent url( no-repeat scroll 0 4px; margin:0.3em 0;
padding:0 0 0.8em 20px;

This is not yet done ,if you save your template you have successfully added image as bullet in your template but it will not change when you take yo…

Review contest :Earn hundreds of dollors and get exclusive template

A Review on,, and is an online store that sell high quality icons need for web development, application development, and other purposes. There are thousands of professionaly designed icons displayed in the website. The website contains icons suitable for various windows OS, such as XP style icons, Vista icons, and Windows 7 icons. They are further classified into categories to make it easy for the customers to choose the pack they are in need of. These various categories of icons come in five different formats, three states and in all standard sizes. Each of the icon package has a complete set of icons required for specific purposes and have be priced much lower than the standard market price.

The icons are grouped under various categories, such as Network Icons, Festival Icons, Socialmedia Icons, Vista Email Icons, Network DB Icons, Hotel Icons, Travel Rule Icons, Weather Icons, Accounting Icons, Naviga…