New Google style blogger Template for Free

Google recently changed the style of the Google page, which gave a new look to it. On seeing its simple and cool layout i started designing this template.
This template is designed user friendly. You no need to host any images since its already done. All you have to do is.

• Download the file and extract it.
• Goto Blogger Dashboard and select your blog to which you are willing to apply this template.
• Click on Design, then on Edit HTML
• There in 'Upload a template from a file on your hard drive:' Browse the downloaded xml file and upload it.
• You are done.

To change the links of Home, About, Services and so on. which is in top Navigation
Find the code

<li><a href='#'>Home</a></li>
<li><a href='#'>About Us</a></li>
<li><a href='#'>Services</a></li>
<li><a href='#'>Products</a></li>
<li><a href='#'>Contact</a></li>

and modify it as per your requirement.
Now again search for

<li class='home'><a href='http://www.techirsh.tk'>Home</a></li>
<li class='about'><a href='http://www.techirsh.tk'>About</a></li>
<li class='contact'><a href='http://www.techirsh.tk'>Contact</a></li>
<li class='fb'><a href='http://facebook.com/techirsh'>Facebook</a></li>
<li class='twitter'><a href='http://www.twitter.com/ishuspace'>Follow on twitter</a></li>

and modify as per your wish.

Preview Template | Download Template

Changing Favicon of blogger blogs made easy by Blogger in Draft

 For adding favicon in blogger blogs, earlier we have to use scripts with our own hosting for ico files. Blogger in Draft included option in Design area in Dashboard of blogger. All you have to do is create an .ico file, if you feel difficulty in creating .ico file. You can convert image file to .ico file from the site www.iconj.com.

 

Once you have converted the image file to ico file. Download it to your computer.
Now goto http://draft.blogger.com click on the link Design of your blog to which you want to add the favicon.
Click on Edit in Favicon which is on top left corner of design area.

Once you click on the Edit link, popup window will be open. There select the downloaded .ico file using browse/chose file option. Then click on Save

Now you are done.
In Blogger in Draft's it is also mentioned that later more supported files for favicon other than .ico files will be supported in future.

New Official Twitter Follow button with Followers Counter

Web developers were using various methods to add the twitter follow button with the Number of followers information. Twitter made it more easy to add follow button on your blogs or website. Twitter uses two methods for adding the follow button into your site.

• Using Javascript
• Using an iframe

We can easily embed the follow button to our blogger by adding the code in the HTML/Javascript under the Add a Gadget in blogger Dashboard.

When a visitor clicks on the follow button. A pop up window opens, which shows the recent two tweets of user and brief info about the user. On top right we can see the follow button. This is really an important and useful Resource of Twitter.
You can get the basic Follow button by providing your Twitter username and some customizing option from https://twitter.com/about/resources/followbutton
Advanced users can customize the button using the supported attributes from http://dev.twitter.com/pages/follow_button

How to send email using different email address in gmail

Earlier i made a post How to Manage Multiple Email ids in which i wrote how to manage multiple gmail account using mail forwarding, that allows you to read all the incoming mails of different email id in single id. Recently a new feature was added in gmail which allows you to send mail using a different sender address, you can add alternate email address from setting > accounts > Send mail as: for better understanding i have added a video tutorial.

Attractive Twitter timeline widget for blogger

Add attractive twitter timeline widget to your blogger sidebar. All you have to do here is that,

• goto blogger Dashboard 
• click on Add a Gadget
• Then click on HTML/JavaScript 
• Paste the below code in Content 
• Now change the word ishuspace which is in Red to your twitter profile name
• Here the number 5 is to display no of tweets to show, you can change it as per your wish.
• Save the template, You are done..

<style>
.tweetboxbg1 {
background: #017398 url(http://i319.photobucket.com/albums/mm445/itsmeeirsh/twitterboxbg1.png) no-repeat;
padding: 101px 3px 3px 3px;
border-radius: 5px;
}

#twitter_update_list {
color:#fff;
font-size:13px;
font-weight:normal;
}

#twitter_update_list a {
color:#42a9cc;
text-decoration:none;
font-size:14px;
font-weight:bold;
}

#twitter_update_list li {
border-bottom: 1px dotted #fff;
}
</style>
<div class="tweetboxbg1"><ul id="twitter_update_list"></ul></div>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/ishuspace.json?callback=twitterCallback2&count=5" type="text/javascript"></script>