Blogger Tips and Templates | Widgets | Hacks | Everything...

How to Customize your Feedburner Email Subscription Form (Part-2)

2011-01-06T00:25:00.002+05:30

This is the Part-2 of my previous post on How to Customize your Feedburner Email Subscription Form. Do read Part-1 before reading this second part.
This part contains a little complex still easy tips to customize the feedburner email widget. Customization continues…

Changing the height of the textbox:
To change the height of the textbox, add:

height:22px;
just after:

style="width:255px;
So the part of the Code would be:

style="width:255px;height:22px;…..
(You can change the height according to your requirements)

Changing Font-Colour and Font-Size of the Text:
You can also change the font-size and colour of the text that users enters in the textbox.
Add:

font-size:15px;color:#AA33FF
just after:

style="width:255px;
Example:

style="width:255px;height:22px;font-size:15px;color:#000000…
(Change the size and colour to make it more attractive and matching with your template)

Changing the Style of ‘Subscribe’ Button:
To change the style of the button, you need to add a small piece of code to your template.
- Go to Edit Template in the Blogger Layout
- Search(Ctrl+F) for ]]></b:skin>
- Add the following code just before ]]></b:skin>
  
  .button {
  background-color: #cc0000;
  font-size: 80%;
  font-family:Tahoma;
  font-weight: bold;
  color:#ffffff; }
- Save the Template
- Now make a slight alteration to your Feedburner Email Widget code:
  Replace:
  <input type="submit" value="Subscribe" />
  with,
  
  <input type="submit" value="Subscribe" class="button"/>
  (you can change the size,colour and face of the font)

Removing Delivered by Feedburner Link:
It’s very simple!
Just remove the following part from your code:

<p>Delivered by <a href="http://www.feedburner.com" target="_blank">FeedBurner</a></p>

Drops your comments below if you like these tips!

How to Customize your Feedburner Email Subscription Form (Part-1)

2011-01-06T00:14:00.002+05:30

All of us like to have a good template with matching design and widgets. Feedburner provides a default Email Subscription Widget which may not suit to your templates. This post contains simple techniques to Customize your Feedburner Email Subscription Box.

Your Original Code would be like this:

<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://www.feedburner.com/fb/a/emailverify" method="post" target="popupwindow" onsubmit="window.open(‘http://www.feedburner.com/fb/a/emailverifySubmit?feedId=Your feed ID here‘, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520′;);return true"><p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="http://feeds.feedburner.com/~e?ffid=Your feed ID here" name="url"/><input type="hidden" value="your blog name" name="title"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" /><p>Delivered by <a href="http://www.feedburner.com" target="_blank">FeedBurner</a></p></form>

Change Background Colour:
To change the background colour, add:

background: #00BB11
just after,

text-align:center;
So the Code would be:

<form style=”border:1px solid #ccc;padding:3px;text-align:center;background: #00BB11;“
(For RGB Color Codes Chart, click here)

Add a Background Image:
To add a background image, add:

background: url(your image url here);
just after,

text-align:center;
So the Code would be:

<form action="http://www.feedburner.com/fb/a/emailverify" style="border:1px solid #ccc;padding:3px;text-align:center;background: url(your image url here);"
(Change the image URL to add your own)

Change the Width of the Textbox:
To change the width of the Textbox, you need to alter the code:

width:140px
(You can just increase or reduce the size according to your requirements)
For example:

<input type="text" style="width:250px" name="email"/>

Add Default Text in the Textbox:
You can add a default text in the textbox to make it more attractive to the visitors. Just use this simple technique:
Remove the code:

<p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p>
and replace it with

<input type="text" style="width:240px" name="email" value="Enter your email address" onfocus="if(this.value==this.defaultValue)this.value=";" onblur="if(this.value==")this.value=this.defaultValue;"/>

Need some more customization? Read Part-2 here!

Showcase Blogger Template - A super 2 column template

2010-12-24T16:58:00.002+05:30

Now you can showcase your work with style using Blogger! Showcase is a very stylish template that features the great gallery style that everyone is looking for. If you need to post pictures, designs, inspirations or any kind os stuff, SHOWCASE is the way to go!

Features:

Gallery Style
Well designed graphics
Organized
Dark Gray / Yellow
Custom comments, Blockquotes and Lists
Automatic Thumbnail
Custom icons for each sidebar widget
Clickable Thumbnails

Blogger New Commenting Feature

2010-08-28T19:40:00.000+05:30

Blogspot has a new feature implemented again - this time it's a new feature for comments.

Now you can manage the comments received on your Blogger blog. It will be with one of the tabs with the other navigation, such as Edit Post, Settings, Designs and Monetize.

Here's how the navigation bar look now.

With the commenting feature, now you can easily check on published comments, comments that are awaiting moderation and spam comments.

To be honest, it's almost like Wordpress now - except Wordpress has a "Trash" are once you deleted a particular comment, probably just in case you want to recover it back.

But when you delete comments on Blogspot, that cannot be undone.

This is how the "Published" section look like - with complete information such as comment author, commented blog post and the date.

Comments "Awaiting Moderation" section. It's self-explanatory.

And lastly, the "Spam" section. Haven't gotten any in my spam inbox right now, hopefully it works against automated spam comment bots.

Take note: It's not implemented on all blogs, yet. Only a handful of blogs has this feature - probably all will have it in the near future.

Go to Blogger Layout - Edit HTML - and click Expand Widget Templates.
Then Search(Ctrl+F) the following piece of code in your template:
data:label.url

(This code normally occur 3 times)
Now Replace(every occurrence) the above code with:
data:label.url + "?max-results=n"

(where n is the number of posts to be displayed)
Save the template. Finished!

Worked for you?
Drop Comments!

How to Show Blogger Links,Widgets in HomePage Only or Post Page Only

2009-04-21T20:29:00.000+05:30

This post explains how to show the Blogger widgets( like links,adsense ads,etc) on your blogspot blog Homepage Only or Post Page Only:

Usually, by default.. when we add a widget item like link units, profile, Archives, Adsense ads,Pictures,etc in Blogger blog , it will be displayed in every page of the blog including the homepage, Permalink pages,etc. As you can see, I installed many widgets in this blog in sidebars like Google ads, Donate Me button ,etc which will be displayed in all the pages of the blog.
But, what if you want to display a specific widget like a blog link,ads in only the homepage and not in the post pages and viceversa? If you want to do so, this tip will come in handy...

HOMEPAGE Only widgets,links in Blogger:

→ As usual, if you want to add a new widget/gadget to your blog, just Sign into Blogger dashboard » Layout » Add a Gadget
and select the type of gadget you need and Save the Changes.

Next, we have to add a small piece of code to that widget, so.. it only displays in the Homepage. Just go to Edit html and tick on the 'Expand Widget Templates'.
Notes: Normally, the widgets in the template view starts with this one


<b:widget id=

For example, The label widget looks something like this:


<b:widget id='Label1' locked='false' title='Title' type='Label'>

and html widget looks like:


<b:widget id='HTML1' locked='false' title='' type='HTML'>

and link list looks like this:


<b:widget id='LinkList2' locked='false' title='Title' type='LinkList'>

(If you want to know exactly what the widget id you need to change, just go to your blog and view the source code and find it.
In Firefox : View » Page Source
In IE : View » Source )

Just below that widget id link, You can see a b:includable tag like this..


<b:includable id='main'>

At this point, most of the task is completed.. Just we have to add a small piece of code below that b:includable tag..

the code is


<b:if cond='data:blog.url == data:blog.homepageUrl'>

and the last thing is, we have to close that b:if tag. Just add this code before the closing tag of b:includable.
Like this:


</b:if>
</b:includable>

So, the final code looks similar like the below screenshot:

That's it! and Don't forget to Save the Changes.
Now, your desired widget/gadget can only be visible in Homepage.

Showing in only Post Pages (Permalink pages):

This will allow you to show a specific widget in only the Post Pages and not in the Homepage.
Just follow the same tutorial above but replace this code.


<b:if cond='data:blog.url == data:blog.homepageUrl'>

with this one:


<b:if cond='data:blog.pageType == "item"'>

Showing Widgets on a Specific Blog Post url:

If you want to dispaly a specific widget on on a particular blog post, just simply follow the above tutorial, but replace this code:


<b:if cond='data:blog.url == data:blog.homepageUrl'>

with this one:


<b:if cond='data:blog.url == "Blog Post  URL"'>

That's it!
Like this post or have any questions? Comment here..

Showing ads between the Post Title and Post Body

2009-04-12T14:23:00.016+05:30

You may have seen Google Ads showing just below every post title (but above the post body) on different blogs or websites. You can see it on this blog also. But have you ever tried to apply this on your blog. Some of you may have tried it by adding the adsense code in post, but its not possible to put adsense code every time you make a post. or still if you do this, it would be very hectic.

Here I am showing the simple trick using which, you will have to do it only once and it will automatically be showing below the Title of each and every post of your blog.Just follow the simple steps showing below:

Step 1:
First of all setup your Adsense in whatever format you wish or which suits your blog and get the code.

Step 2:
When you have have got adsense code, you will have to parse this code HERE. Parsing is nothing but the conversion of the special symbols of adsense into xml supported language. After parsing you will get the converted code. Just Copy the code and then proceed for the next step.

Step 3:
Now login to your Blogger Account and go to Layout >> Edit HTML. Here you then Click on the "Expand Widget Templates" box.

In HTML code box find (Ctrl+F) the below peice of code:
<p><data:post.body/></p>

Step 4:
When you found this code just put your parsed adsense code before the <data:post.body/> tag. You code will look like this:
<p>YOUR PARSED ADSENSE CODE HERE<data:post.body/></p>

When you have done this, dont hurry to save it. First see the preview of it and if it shows perfectly, you can save it now. But it may sometimes not show perfectly depending upon your template style or if you are using ads other than from Google Adsense. Well in this case, dont worry, You will have to change the first step. Means when you get the adsense code (Whether from Google or else) you will have to do something more before Parsing it(i.e. Step 2).

Step 1 (alternative):
After getting the adsense code, just add a peice of code just before and after your original adsense code as shown below:
<table align='left'><tbody><tr><td align='left'>
YOUR ORIGINAL ADSENSE CODE HERE
</td></tr></tbody></table>

This code is now the result of your First step instead of previous one. Now copy this whole code and then go to the Step 2 (i.e. Parsing).

If you still find any problem, just do write it in comments. I will try my best to solve it.........happy blogging!!!!!!!

Google Launched India Elections Centre 2009!

2009-04-10T20:49:00.001+05:30

Last week, Google launched a new site called India Elections Centre about India's 15th General Election 2009. The title of the site is Lok Sabha Elections - Be an Informed Voter!

Read what they said about the launch of this useful site:

"At Google, we believe information is fundamentally empowering. While all of our technologies demonstrate a commitment to this guiding principle, information is especially important when a society comes together to participate in democratic elections. Beginning ten days from today, more than 700 million eligible voters in India will over the course of four weeks have the opportunity to participate in the largest democratic event in human history — India's 15th general election[more..]"

People from across India can use the Centre to do the following:

Confirm their voter registration status
Discover their polling location
View their constituency on a map
Consume relevant election-related news, blogs, videos, and quotations
Evaluate the status of development in their constituency across a range of indicators
Learn about the background of their Member of Parliament and this year's candidates

VISIT: The site is available in English and Hindi languages.

Source: Google Blog, Google India Blog

Add colors to Scrollbar in your Bloggers Blog

2009-04-03T12:10:00.006+05:30

Hi bloggers and readers! Well This is an amazing hack for adding some colors to that pesky browser scroll bar. Its very easy to do tha. There is a small peice of code you will have to add to your blog's html.

Now before you use this code, i must make you aware that it will not work in Firefox...they don't like people messing with their colors, so you can only get this to work in Internet Explorer.

The last caveat that I add to it is that, if you're anal retentive like I am about making my web pages validate this one is going to throw you for a loop because according to W3C...it ain't valid! So you will get an error code for it, but it won't break your page or anything unless you have like 5000 other errors!

Okay...here's what you have to use:



And you scroll down til you get to the end of the <head> section, and you put it right BEFORE the </head> tag.

You can choose any color according to the matchig look for your blog by replacing the hexadecimal code(#99ccff).
Click here to see the codes of the different colors.

Add "Show All Post" (Table Of Content) Link to your Bloggers Blog

2009-03-28T14:09:00.008+05:30

Hello friends... Here I am showing in this post a very good hack for all of you Bloggers. Do you want to make a table for content for your all posts??

1. Log in to your blogger account.
2. Go to Layout >> Edit HTML
3. Click on small box Expand widget templates.
4. Find this Code: <b:include data='post' name='post'/>

5. Replace that code with the below code.

<b:if cond='data:blog.homepageUrl !=
data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<div style="padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;margin-bottom:2px;background:#999999;color:#406A0E;">
<data:post.title/></div></a>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

6. Save your template.
7. Then Copy and paste below code where you want to show your link. I showed it in my navigation menu bar and also in my sidebar under the monthly archive. Just Check it Out.

<a href="http://bloggertipsandtemplates.blogspot.com/search?max-results=200">Show all post »»</a>

Change name and number with your blogger name and a number you want to show post per page.

Display Post Title before Blog Title - SEO Trick

2009-03-26T12:44:00.004+05:30

This trick can largely drive traffic to your blog.When you search google for something and your blog is present in the search results. Then the Title of the result will be in the form - Blog Title + Post Title. This type of a title wont attract searchers. Here is a hack that will change the title to the following attractive format - Post Title + Blog Title. This trick will help you to optimize the blog title for Search Engines. I am damn sure that this trick will increase your site's visitor count. It will take a while for the Formatted titles to appear in search results (will appear when it is reindexed). Sign into your Blogger account and go to Layout >> Edit Html and there you find (Ctlr+F) the following code:

<title><data:blog.pageTitle/></title>

Replace the above whole code with the following one:

After doing this just save your template and enjoy.

Please do write your feedback or querries via comments. Happy Blogging. Source: Blogger Plugins

SEO Tools - Search Engine Optimization

2009-03-23T15:48:00.022+05:30

What are search engine optimization tools, webmaster tools, Google page rank checker, SEO tools, and how can these internet tools help to bring more quality traffic to your Blog? There are many free online web tools that webmasters can use to find out more information about their sites. The tools can also alert the webmasters to possible problems search engines may have with the site's template codes and design. Here, we shall, for the benefit of our new bloggers, explain how these webmaster tools might help improve your website's PageRank.

Search Engine Optimization
We define Search Engine Optimization as – a method or process of improving and optimizing the ranking of a website in search engine results.

With millions of pages of search results for any given keyword, webmasters would want to have their website appear among the first couple of search result listings. The higher the position or ranking, the greater the likelihood that internet users will visit your site. This Search Engine Optimization (or SEO) concept is no different from a brick-and-mortar shop where location and visibility affect how many customers will pass by the shop and hopefully drop in for a visit. On the internet, your virtual site deserves a good location and visibility, and SEO consultants believe they know how to achieve that.

Blog Directory and Search Engine Listings
After having published a Blog or website, the first thing to do is to make sure that the information relating to the site is available on the internet. Web Directories, Blog Directories and Search Engines are the internet Yellow Pages. Although the major Search Engines will crawl your website even without any action on your part, it will be much faster if you could proactively provide them your site information. We had written articles on how and where to submit the blog information so as to have your site fully indexed and appear in many places on the internet.

Free SEO Tools
After you have submitted your website's data to all the search engines and directories, you should be able to find your site somewhere on the internet. If you do a keyword search on your website's topic, you may find many other listings in the search results ahead of yours. These are the sites which have better page ranks and are optimized for the search engines. You can optimize your blog or website too.

To attract business, many SEO sites have put up some of their SEO tools for free. Commercial sites which are serious in wanting to climb up the search ranking will pay the SEO consultants for more value-added services. If you are like us, blogging out of fun and passion, it might be better to use only the free services for a start.

Just open Google in a new window and enter words like - free SEO tools - into the search box and you can see what some of these sites offer.

Suggested SEO Tools
Many of the SEO webmaster sites have similar free tools and services. You can try any of them, though the one that we like is iWebTool. In fact, they have a link exchange program which you may want to check out. Among the SEO Tools, the ones we find useful in all these sites are:-
a. Backlink Checker – A list of sites that have linked to your blog or website. PageRank is largely determined by the number and quality of links to your site. Monitor this and you can probably guess what your PageRank ought to be.
b. Broken Link Checker – A look at which of the links in your site are pointing to incorrect or non-existent URLs. Having too many outdated and broken links on your web page may irritate not only the readers but the search spiders. Do this housekeeping once in a while to remove the bad links.
c. Google PageRank Checker – The Google PageRank of your site. You can also download Mozilla Firefox with Google Toolbar to view the Google PageRanks of all the sites that you visit.
d. Google PageRank Prediction – A future Google PageRank prediction. If you are dying to know, these sites can give you a fair estimate of your future PageRank.
e. HTML Optimizer – A clean up of your HTML source code. Be careful when you apply the suggested changes though. Always good to backup the template before making any modification.
f. Index Checker – Number of pages of your website that are indexed by search engines. If pages are missing from the index, try submitting your sitemap again.
g. Keyword Density Checker – The keyword distribution in your webpage. This will by and large influence the sort of Ads that AdSense will place on your site.
h. Keyword Suggestor – Suggested popular keywords for your website. Bear in mind these keywords when writing or editing your posts.
i. Meta-tags Generator – Configuration of website's meta-tags. Tailor a suitable description and set of keywords to be inserted into the template.
j. Reciprocal Link Checker – A check to see if the partners in your blogrolls or link exchange are linking to you.
k. Spider Simulator – The page contents as seen by a search engine spider. Some may give you a breakdown of the commonly used keywords in your site.
l. Traffic Graphs – A comparison of your site's and other competitor sites' traffic history graphs in Alexa.
m. Website Speed Test – Speed of website page load. If you find the pageload time a little long, take some measures to have a Faster Web Page Load Time.

Basic Tools
Should you want to have a quick look at what some of the SEO tools are about, we have created a few basic search tools over here at our Tips for New Bloggers site.

Yahoo!
To know how Yahoo! sees your site, enter into the search box below your website's URL in full, beginning with http:// For Blogger blogs, you do not have to add a “www.” into the blog URL.

1. Yahoo! Indexed Pages
The results will show you the number and details of the web Pages that are indexed by Yahoo!

2. Yahoo! Backlinks
Enter your site's URL to see the Inlinks or backlinks of your site.

Google
The data in the various search engines are not the same. You can have a look at how your blog is performing in Google search by entering your site URL below.

1. Google Indexed Pages
Enter URL after the word "site:" to view the indexed pages in Google.

2. Google Backlinks
Enter URL after the word "link:" for details of the backlinks to your site.

MSN Live Search
Compared to Google and Yahoo!, MSN spiders may not index as many pages. Nevertheless, if you are curious to know, enter your blog URL into the search boxes below.

1. MSN Indexed Pages
Enter URL after the word "site:" to view the indexed pages in MSN.

2. MSN Backlinks
Enter URL after the word "link:" for details of the backlinks to your site.

Page Rank Checker
This search tool is provided by Prchecker. Enter a URL into the form to view the Google PageRank.

Alexa Rankings
Alexa monitors the web traffic of many top sites. You can compare and view the Alexa traffic graph of your site by entering your site URL into the search box below.

© BloggerTipsandTemplates

New 3 Column Template - ImpreZZ

2009-03-22T14:01:00.007+05:30

How to Change Favicon in your Blogger Blog

2009-03-18T21:26:00.003+05:30

Favicon is one small part of your blog design, usually blogger blogs have Blogger logotype as favicon, but you can easily change it to your favicon. It can be your blog logotype or some funny small picture, for example 'smileicon'. Ok, take your logotype (if you have it) or some picture or draw your own logo in Photoshop (or other graphic editing software).
Creating Favicon After creating you logo you need to change size of it to 16x16 pixel and save it in '.ico' format ( for example: my_favicon.ico ). This can easily be done at FreeFavicon.
Installing Favicon

Now you need to install your favicon to Internet. You can use one of the free image hosting provider or Google Page Creator. Just upload your .ico file to your Google pages directory, like on the picture.

Installing Favicon to Blogger Now you need to go to your Blogger account.
1. Click on 'Layout'.
2. Click on 'Edit HTML',
3. Backup your template!.
4. Now, if you are using google pages, you need to add the following codes right after the <head> code:

<link href='http://myname.googlepages.com/my_favicon.ico' rel='shortcut icon'/>
<link href='http://myname.googlepages.com/my_favicon.ico' rel='icon'/>

*Change 'myname.googlepages.com' to your account address, change 'my_favicon.ico' to your favicon name.
5. Save your changes.
* This changes will not appear immediately, just refresh it once and it should appear.
Cheers...Write your doubts or queries via comments.

Show your visitors their Home Location

2009-03-17T15:12:00.003+05:30

If you want to amaze your visitors by showing their own details on your website/blog, like IP address, ISP name, Country, region and time zone, then here is some block of code that you have to add to your blog.
The two images in blue displayed below, presently would be showing your details, similarly it would show the details of anyone reading your blog/web site if you place these on your blog.

Code to be added:

<img border="0" src="http://www.ip2location.com/images/ip2location.png"/>
Widget by <a href="http://bloggertipsandtemplates.blogspot.com"/>BTAT</a>

OR you may add this image:

Code to be added:

<img border="0" src="http://www.ip2location.com/images/ip2locationbig.png"/>
Widget by <a href="http://bloggertipsandtemplates.blogspot.com"/>BTAT</a>

Simply add a HTML/JavaScript widget in your blog, and add any of the two codes shown above. That's it....no javascripting or any other complex coding required for this hack.

Add Scrolling Text / Links (marquee html codes) to your blog

2009-03-12T20:42:00.006+05:30

This post explains you how to add Scrolling text ( also called as marquee ) to your blog sidebars,blog posts,etc.
Another way to attract the visitors is adding some decoration to the site like scrolling text,etc.But,don't decorate it too much,particularly if your site contains too much text as it irritates and spoils the concentration of the reader.You can add scroll bars to tell your visitors what will be your next updates,popular posts,advertisements,etc.
So,how to add the scrolling text in your blog,let me explain it:

Adding simple scrolling text:
Here is the code to add a simple scrolling text from right to left side

<marquee>code to simple scrolling text</marquee>
The output will be like:
Example 1:
code to simple scrolling text

If you want some more attraction,then try these,
Add a background color to the text:

<marquee bgcolor="#99CCFF">code to simple scrolling text</marquee>Example 2:
code to simple scrolling text

You can choose your background colour by replacing the hexadecimal code(#99ccff).
Click here to see the codes of the different colors.

Here are some mode attributes to learn:

direction="left"
direction="right"
direction="up"
direction="down"

The above attributes tells the text which direction to scroll.
Use the code below:

Here are some examples:
Example 3:
To scroll in the 'right' direction:
code to simple scrolling text

Example 4:
To scroll in the 'up' direction:
code to simple scrolling text

Example 5:
Down: ( I changed the hexa decimal codes for different colours )
code to simple scrolling text

few more attributes:
You can add this attribute to alternate the text

Here is the code to do this:

Example 6:
code to simple scrolling text
You can also set the speed of the text with this simple attribute:

The lower the scrollamount value, the less the speed it moves,
the html code for this:

example 7:(for scrollamout =2)
code to simple scrolling text

Example 8:(for scrollamount=5)
code to simple scrolling text

Pausing the text when mouse is over the text:
It is very useful when the reader wants to read the text,and the scrollamount is big, so that he will put the mouse over the text to pause the text and read the matter:
Here is the code to do this

Example 9:
code to simple scrolling text

(place the mouse over the text to test it)

Changing the text colour:
Here is the code to change the text colour:(Add it before and after the marquee tags)

So, the code looks like this

Example 10:
Code to simple scrolling text

Adding hyperlinks:
You can also add the hyperlinks in text.
Here is the sample code:

The output will look like this:
Remove Navbar # Internet tips # Add Read More tag in Blog
That's it!Now you can add this to your blogger sidebar,in the blog post,where ever you want.

If you have any doubts, ask your questions via your comments.

How To Add The Blogger “Read More” Expandable Posts Link

2009-02-26T17:53:00.006+05:30

With this trick, you can choose to display a select amount of text from the beginning of each post as a teaser instead of showing the entire post on the front page of your blog. Then when people want to read the rest of the post, they can click a “read more” link to see the full post. This is very handy if you have lots of long articles all on one page.
Step #1 - Update Your Template Code First you need to edit your existing code. Go to Layout >> Edit HTML. There you first click on "Expand Widget Templates" showing right above the HTML editor box. Now do a search (CTRL + F) within the HTML editor box for the following code <data:post.body/>. Now add the following code just above the <data:post.body/> tag.

<b:if cond='data:blog.pageType == "item"'> <style>.fullpost{display:inline;}</style> <p><data:post.body/></p> <b:else/> <style>.fullpost{display:none;}</style>

The result should look something like this: or something like this: Notice in both examples that the code in yellow and the <data:post.body/> tags are the same — it’s just tag above it that will differ based on the template you’re using.
Now let’s add one more bit of code which will actually create the “read more” link in your post. This code will go below the <data:post.body/> tag so copy the following and paste it in. Feel free to change the “Read more…” text to whatever you want the link to look like. Be careful not to delete any other code during this process.

<b:if cond='data:blog.pageType != "item"'><br /> <a expr:href='data:post.url'>Read more...</a> </b:if> </b:if>

Yes, there are supposed to be two </b:if> tags in the above code so don’t think it’ s a mistake. The result should look like this: This code will be the same no matter what template you are using. Just make sure it goes below the <data:post.body/> as shown in the image above. Now let’s look at what the final result should be. Here’s the updated code block you just worked on all put together:
Ok, now save it. If it get saved means you have done it well. So move to the next step:

Step #2 - Add a Class Tag in Your Default Post Template For this step go to Settings >> Formatting and scroll all the way down to the bottom. It’s the last option called “Post Template”. You’re going to paste in the following code:

<span class="fullpost"> </span>

You’ll want to keep the spaces in there which will make sense later. After you save this, it will look like this:
Step #3 - Create a New Post Ok, we’ve got everything all setup so it’s time to go and test it out. Hopefully you’ve got a new post in mind for your blog. If not, then we’ll just create a test post which you can later delete. When you click on the “Posting” tab, you’ll notice that the post text area is now pre-populated with the <span class=”fullpost”> and </span> tags. If not, then you didn’t save it properly so go back and re-read step #2.
So when writing your new post, anything you put above the <span class=”fullpost”> tag will be the teaser text. The main body of your post needs to go in between the <span class=”fullpost”> and </span> tags in order for the “read more…” link to work properly. See the screenshot below. Sometimes pictures illustrate better than words.
Now publish or preview your post to see the “read more” hack working on your blog. If it doesn’t show up for some reason, go back and run through the steps again. Most likely you pasted the code blocks in the wrong places. It’s difficult to troubleshoot these issues since each template can be unique so please make sure to double-check your template before asking for help in the comments section below.
Here’s the live post with the “read more…” link properly working based on the text I used above in the post text area.

Additional Info If you want to go back and update your old posts with this new “read more…” feature you can. Just go back and edit each post manually. Essentially you’ll need to paste in the <span class=”fullpost”> and </span> tags breaking apart the post into two parts.
For some posts, you might not want to use this feature at all. If that’s the case, just delete the <span class=”fullpost”> and </span> tags from within your new post text area. Then your new post will show up entirely just like it used to before you implemented this hack. Enjoy!

How to Add Social Bookmark Links beneath Blogger Posts

2009-02-24T16:53:00.005+05:30

Social Bookmark Links are widely used by bloggers to help their readers share the useful contents to the world! Digg, Technorati, Delicious, Stumble Upon, Facebook etc are widely used online social bookmarking and sharing communities.

This post explains how to add Social Bookmark Links below post body(content) in Blogger(blogspot) blogs. It's very simple, just do the following steps:

Go to Blogger Dashboard - click Edit Layout - then click Edit HTML
Select Expand Widget Templates as shown in the image below:
Then Search(Ctrl+F) the code given below in your template:
<div class="post-footer-line post-footer-line-1">
Add the code given below just after the above line:


<b><i>Share this:</i>
|
<a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' target='_blank'>Digg It</a> |
<a expr:href='"http://technorati.com/faves?add=" + data:post.url' target='_blank'>Add to Technorati</a> |
<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'>Save on Del.icio.us</a> |
<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'>Stumble It</a> |
<a expr:href='"http://www.facebook.com/share.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank'>Share on Facebook</a> |
<br/><i>Widget by:</i> | <a href='http://bloggertipsandtemplates.blogspot.com/' target='_blank'>Blogger Tips and Templates</a> |
</b>
Finally, Save the Template. Finished!

You will see Social Bookmark Links as shown in the image below. Drop Comments!

New Blogger Template - Gumball Special

2009-02-20T21:05:00.003+05:30

How to Open iFrame Banner/ Widgets in a New Window

2009-02-19T20:39:00.010+05:30

All of you might be familiar with opening HTML text links in a new window using "_blank" attribute. But it does not work in iFrame widgets(Eg:Amazon Shopping Search Widget) or banners.

Opening iFrame links in new window is also very easy like HTML text links! Just add the following code to the end of the iFrame link code:

<1=_new

Here is an example:

Original code:

The same code with <1=_new added:

Hope you got it! Have a Great browsing!

"Another blog is already hosted at this address" ERROR in Blogger Custom Domain Creation

2009-02-19T20:14:00.002+05:30

Some of you might have encountered "Another blog is already hosted at this address" ERROR while moving your blogspot domain to a custom domain. Just do the following simple steps to get rid off that error!

Sign-in to Google Apps account
Go to Service Settings - then select Sites
Click Web address mapping
You can see a www address in that list. Select and Delete it.
(Just proceed with all the delete warning and confirmations)
Now go to your Blogger Dashboard - Settings - Publishing - Custom Domain - then point your blogspot domain to the new custom domain!
(Don't forget to prefix www before your domain name)

IF THIS SOLUTION DOESN'T WORK FOR YOU, THEN GOOGLE "Another blog is already hosted at this address" and find another solution!

BEST WISHES! DROP COMMENTS!

Remove newer post/ older post link from your blog

2009-01-19T19:54:00.000+05:30

In almost all Blogger Templates, you can find the Newer Post - Home - Older Post Links below the blog posts. If you want to remove or hide these links, just do the following simple steps:

Go to Blogger Layout page and click Edit HTML link
Then Search(Ctrl+F) your template to find the following codes:

#blog-pager-newer-link {
float: left;
}

#blog-pager-older-link {
float: right;
}

#blog-pager {
text-align: center;
}
Now Replace the above code as given below:

#blog-pager-newer-link {
float: left;
display: none;
}

#blog-pager-older-link {
float: right;
display: none;
}

#blog-pager {
text-align: center;
display: none;
}
Save the Template. Finished!

HAPPY BLOGGING!

Blogger Tips and Templates | Widgets | Hacks | Everything...

How to Customize your Feedburner Email Subscription Form (Part-2)

Changing the height of the textbox:

Changing Font-Colour and Font-Size of the Text:

Changing the Style of ‘Subscribe’ Button:

Removing Delivered by Feedburner Link:

How to Customize your Feedburner Email Subscription Form (Part-1)

Your Original Code would be like this:

Change Background Colour:

Add a Background Image:

Change the Width of the Textbox:

Add Default Text in the Textbox: