EaRnAnDtIpS

How To Add Animated Favicon In Blogger?

2011-11-16T15:48:00.001+06:00

Favicon is actually the icon that appears next to your Website URL in the browser address bar. A favicon is usually your blog logo. There are many free services that help to create favicons for you but most of these services use still images. I have used an animated favicon for my blog as you can see in your address bar. It actually consists of a logo and then my blog title as text. The image and text together makes a more beautiful combination. So lets jump at the tutorial and create an attractive cute favicon for your blog,

How To Create Animated Favicons?

Go To favicongenerator
And just at the bottom of the page upload your blog logo or any icon you wish to make as your favicon and also add your blog title as the scrolling text. You will find all the help at favicongenerator

3. Hit the Generate Favicon Button and you will be taken to this page,

Here you will see many images just right click the animated one and save it to your computer.
4. Now upload the image to your Picasa album by reading this post –> Store Animated Images in Blogger and Learn how to get Image URLs

How To Add Your Favicon To Blogger Now?

Go To Blogger > Design > Edit HTML
And Search For <b:skin> and just above it paste the code below,

<link href='ADD YOUR FAVICON LINK HERE' rel='icon' type='image/gif'/>

3. Replace ADD YOUR FAVICON LINK HERE with the image URL of the favicon you saved in Picasa album.
4. Save your template and you are done!
View your blog to see it in action on the address bar and tabs. Hope you liked it! Questions are always welcomed :>>

Adding a floating “back to top” button

2011-11-16T15:37:00.001+06:00

Back to Top button or link is a link that sends your viewer to the top of page once clicked. This will help your readers navigate better, especially so if you have long pages. This link is usually located at the bottom of page or in the footer area.

What I am going explain in this article is slightly different. The function is the same yet the location of the link/button is different. As the name suggests, we are making a floating (or is it static) button. The button will float at the bottom of your screen. It will stay there even if you scroll the page, and can be seen at all times. We will do this using only a short HTML code, with a little inline styling.
Note: This trick will not work in older versions of Internet Explorer. The button will appear nonetheless, but at the center bottom of your page, and it doesn’t float.
Here are the steps:

Login to your Blogger account.
Go to Dashboard > Design > Edit HTML.
Back up your template.
Insert the following code immediately before the </body> tag in your HTML.

1 <a style="position: fixed; bottom:5px;left:5px;" href="#" title="Back to Top"><img style="border: none;" src="YourButtonUrl"/></a>

Replace YourButtonUrl with the link to your button or icon.
If you prefer to use text instead of an image, use this code:

1 <a style="position: fixed; bottom:5px;left:5px;" href="#" title="Click to go to top">YourTextHere</a>

Replace YourText with your own wording.
You can change the location of the button / link by changing the values of this code: bottom:5px; left:5px;

Enjoy!

Add banner, Adsense or search box in header

2011-11-16T15:32:00.001+06:00

A reader asked me how to add a search box on the right of blog title. I thought I’d share my answer in this post.
Actually, you can add anything inside your header -be it an ad banner, a search bar, social media buttons, Adsense ad or just about any widget you can get your hands on. But how?
By simply adding a section in the header. A section is a widget container of sorts, indicated by a light colored box in Page Elements tab and usually comes with an Add A Gadget link thingy. Once you have the Add A Gadget added in there, the rest is easy.
Here we go:

1. Adding a section (in HTML)

Login to your Blogger account.
Go to Dashboard > Design > Edit HTML.
Back up your template.
Make sure the Expand Widget Templates checkbox is UNTICKED.

Look for the following lines in your HTML code:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'> 
<b:widget id='Header1' locked='true' title='My Test  Blog (Header)' type='Header'/> 
</b:section>

To add a section, insert the following code right under (after) it:

<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>

So the final code should look like this:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'> 
<b:widget id='Header1' locked='true' title='Blogger Sentral Widget Showcase (Header)' type='Header'/> 
</b:section> 
<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>

You now have two sections in the header, the section with the existing blog title on top and the new section below it.

2. Styling the section (in CSS)

Position the sections side by side, by floating the section containing the blog title to the left, and the new section to the right.
To achieve that,

Locate this line of code (you are still on Dashboard > Design > Edit HTML page): ]]></b:skin>

Add the following CSS code right before (on top of) the line.

#header, body#layout #header {width:50%;display:inline-block;float:left;}
#header-right, body#layout #header-right {width:35%;display:inline-block;float:right;padding:15px;}
#header-right .widget {margin:0;}

3. Installing the widget

Now it is time to add the banner, search box, Adsense ad unit or whatever. Do as you’d normally do when you want to install a widget,

Go to Design > Page Elements.
Click the new Add A Gadget link and add your widget.
Note: The header wireframes may not appear side by side for Designer templates, nevertheless they should show up just fine on your blog.
Save and view your blog.

4. Fine-adjusting the position

If the added widget shows up under the blog title (instead of on the same level, on it’s right), go back to the CSS code in step 2.2.
Change header(code line 1) and header-right (code line 2) widths. Experiment with different values until you get it right.

How to make great blog header

2011-11-16T15:27:00.001+06:00

Yay! I did it. I changed the look of Blogger Sentral blog header. Now instead of boring, flat, amateurish looking title text, I’ve upgraded it to a 3D, polished look –more pleasing to the eyes than the previous one (at least I think so).
It’s not as hard as I thought. At one time I thought of using GIMP to make it, but the lack of good looking fonts stopped me half way. I know fonts can be imported into GIMP, but.. too much of a hassle just to pimp the title.
I was just about to give up with this make-my-blog-title-look-good thing, until yesterday that is.
Yesterday I found this cool site, appropriately named Cooltext.com. It’s a free online graphics generator, no need to sign-up or anything. I made mine with just a few simple steps.
So today I’m going to write about how to make or design a blog title and and then replace the existing title with it. Here are the steps:

Design the blog title using Cooltext.com.
1. Choose your logo style, there are many styles available. Choose the one you think best for your blog. You’ll then transferred to Design-Your-Logo page
2. Here you choose the font, text size, colors etc. You also need to specify the output file format.
3. After specifying all the parameters, click on Render Logo button, wait for a while and then wallah, your text comes out.
4. Download it. If you don’t like it you can edit it, over and over again.
Replace the existing title with the new one.
1. Go to Dashboard > Design > Page Elements
2. Click the Edit link at bottom right hand corner of Header widget box.
3. Select Image > From your computer. Click Browse to select the file that you’ve downloaded. Under Placement, select “Instead of title and description” option.
4. Click save, and then View blog.
Hey, that’s it. Enjoy!

Check blog speed, ranks, backlinks and broken links

2011-11-16T15:23:00.001+06:00

Yes now you can check your blog page loading speed, Google Pagerank, Alexa rank, backlinks, broken links, reciprocal link and meta tags right here on Blogger Sentral. I have made a special page containing tools to help you check some of your blog SEO metrics. Click SEO TOOLS tab on the navigation bar to access the tools. Below is the list of available tools:

Speed tester Check page size and loading speed.
Rank checker Check Google Pagerank and Alexa rank.
Backlink checker List out all backlinks to your domain or web page.
Broken link checker List out all outbound links in your web page and identify the broken ones.
Reciprocal link checker Check whether your link partner is still linking back to your site.
Meta tag checker Extract your web page's meta information and tags.

Just enter your domain or your web page URL in the appropriate text box and click Check! button. Results will be displayed below the text box.
All tools are provided and hosted by iWEBTOOL.
Enjoy!

Submit site/blog to DMOZ (Open Directory Project)

2011-11-16T15:22:00.001+06:00

DMOZ is the directory of Open Directory Project (ODP), the largest human edited web directory of the Web. The ODP powers core directory services for some the most popular portals and search engines, including AOL Search, Netscape Search, Google, Lycos, and HotBot, and hundreds of others.

Being listed in DMOZ is like an endorsement of your website quality. From a SEO (Search Engine Optimization) point of view, a link from DMOZ brings more trust and authority than most sites. DMOZ is not as highly regarded as it used to be, but to have an inbound link from it is still considered good SEO nonetheless.
Getting listed is very difficult, it could take months, or even years. Blogger Sentral did pretty well actually, it only took us just a little over a month. Click this link to see Blogger Sentral on DMOZ. Update Apr. 2011: As it turns out this blog has disappeared from the list. I don't know why. I will get it re-listed, hopefully.
You can submit your blog too, submission is free. But going ahead with it, you might want to read the submission guideline and FAQS about suggesting your site to DMOZ first.
Here is how to submit your blog to DMOZ.

Go to DMOZ.org and proceed to the category that you want to add your blog to.
Once inside the category, click the Suggest URL link.
Enter your blog url, blog title, blog description and email address as required.
Enter the captcha and click Submit button.
That’s it, that was easy.
~~Enjoy!~~ hmm on second thought … Pray and WAIT (this is the hard part).

By the way, have you submitted your blog to search engines? Read Submit blog to Google, Yahoo and Bing if you haven’t.

Removing dead (broken) links from Google search results

2011-11-16T15:19:00.001+06:00

I occasionally do a site search for Blogger Sentral to check whether my new entries are properly indexed by Google. How do I do a site search? Easy, you can do it too, just type this in Google search box.
site:yourblogurl Google will search your blog and then display all your blog or site indexed pages.
Last week I noticed a two dead/broken links showed up in the search results page. They are linked to posts I’ve already deleted.
I clicked on them, and this came out. So they are indeed dead links.

I reckoned I have to remove this search results from Google SERP (search engine result pages), else it will frustrate my potential readers if they were to click on the links. But how do I do that? Okay… as always I answer my own questions here…
It’s like this:

Go to Google webpage removal request tool page and sign in to your Google account.
Update: There is a new URL removal tool, with roughly a similar interface. It can be accessed via Webmaster Tools > YOUR SITE > Crawler Access > Remove URL.
Click New Removal Request button.
Enter the URL of the page you want to remove. To prevent mistakes I do this by copying the link from Google search result itself, and paste it into the text box.
Tick the“The page returns a 404/410…” checkbox and click Submit Request button.
The URL you requested will be listed, with “Pending” status.
Google will take a few days to do the work for you. After removal the status will change to “Removed”.
Once “Removed”, you can do a site search again to confirm if the dead link was indeed removed from Google SERP.
You can get back the removed url by clicking “Reinclude” button.
Enjoy!

A better way to add meta tags to Blogger

2011-11-16T15:17:00.001+06:00

One way to improve your blog SEO (Search Engine Optimization) is to add in description and keywords meta tags. They are placed inside the head section of your blog template HTML.
In description meta tag you put a description of your blog, telling what your blog is about. In keyword meta tag you put in key words relevant to your blog content.

Duplicate meta descriptions

There is a problem though, in Blogger (blogspot) the meta tags will not only reside in your homepage but also in every post pages that you create (when you post an article). Let say you posted 100 articles so far, then all 100 pages (+1 for the home page) will share the same meta tags!. This is not good, for two reasons:

Google uses your meta description (if you have one installed) as content snippet in Google SERP (search engine results page). Imagine you have same snippet for all your pages!
Google will regard them as duplicate contents (duplicate meta descriptions). Google Webmaster Tools will issue a warning if you have duplicate descriptions.

Possible solutions

There are two ways to prevent duplicate meta descriptions:

Create one set of meta tags for each page and apply them to their respective page using blog URL conditional tags. Can be done, but impractical -imagine adding 100 sets of meta and conditional tags in your template!
Limit meta description tag to homepage only. I choose this method, the ~~lazy~~ easy way! (When there is no meta description exists in a (post) page, Google will use an excerpt from the post content as search result content snippet).

Adding the meta tags, the better way

So I’m going to explain method no.2, here it is:

First go to Dashboard > Design > Edit HTML and find this line in your blog template HTML codes:
```
<b:include data='blog' name='all-head-content'/>
```

Then put the meta tags code immediately below that line. The final result should be as shown below.

<b:include data='blog' name='all-head-content'/>
<meta content='PUT KEYWORDS HERE SEPARATED BY COMMAS' name='keywords'/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<meta content='PUT BLOG DESCRIPTION HERE' name='description'/>
</b:if>

What this code does is apply the keyword meta tag to all pages and limit description meta tag to only your homepage.

Save the template.
Checking the meta tags
Confirm whether you’ve entered the meta tags correctly, using an online meta tag checker.
Make sure you check at least two pages -home page and one of the post pages.
Compare the extracted meta information, notice the difference.

Enjoy!

SEO (Search engine optimization) friendly Blogger page title

2011-11-16T15:16:00.001+06:00

Page title is the band of text that appears at the top of your web browser. More importantly is also the clickable link that shows up on the search engine results page (SERP). From an SEO (Search Engine Optimization) perspective, page title is the single most important element in your blog in terms of ranking well in search engines.
A keyword-rich, well-constructed page title can help boost your position in SERP listing and increase clickthroughs.
In Blogger, the page title of a post page is made up of blog title and post title
The example above is the search listing for a post titled “Import multiple blogs into Facebook via NetworkedBlogs”. Notice the important keyword “NetworkBlogs” is missing. That’s because Google only shows up to 70 characters of the page title in search results. When the page title exceeds the limit, Google simply cuts it off. Unfortunately the victim (of being cut off) is the keyword-rich post title.
So what now, how do you show the post title in full without shortening it? Simple, just reverse the order. Put post title in front, giving it priority over blog title.
Here’s how you do it:

Login to your Blogger account.
Go to Dashboard > Design > Edit HTML.
Back up your template.
Look for the following lines in your template code:
```
<title><data:blog.pageTitle/></title>
```

Replace it with this:

<b:if cond='data:blog.pageType == &quot;index&quot;'> 
<title><data:blog.pageTitle/></title> 
<b:else/> 
<title><data:blog.pageName/> | <data:blog.title/></title> 
</b:if>

Save.

The code above will put post title in front of blog title on post and static pages.

You see now the post title is shown in full. The optimized page title is definitely better, more SEO friendly since none of the keywords are missing.

Tip
To further enhance your page title, you can add to it a keyword representing the subject of your blog. Let’s say your blog is about recipes, then you can simply add the word Recipes before each closing </title> tag, like this:
Recipes</title>.
That way all your page titles will contain the keyword “Recipes” even without you adding it in post titles.

What is and how to improve Alexa rank

2011-11-16T15:15:00.001+06:00

Alexa traffic rank is a rank provided by Alexa.com to your blog or a site based on its level of traffic.
Unlike Google PageRank where it relies more on the number of (quality) backlinks to your blog, Alexa rank is based solely on the amount traffic your blog receives.
It is calculated based on the data collected from Alexa Toolbar users over a period of the past three months.

Getting to know Alexa

Some important information about Alexa traffic ranking:

The rank is based on three months of aggregated historical traffic data.
The main data comes from analyzing the web usage of Alexa Toolbar users.
The lower the number, the higher the ranking.
Rank is updated daily.
Is a domain level rank (with the exception of blogs in recognized blog hosts such as blogspot blogs).
Also ranks by country.
Rankings of 100,000 and above regarded as unreliable.

You can read more on how Alexa does the ranking on the About the Alexa Traffic Rankings page.

Boosting Alexa ranking

Now that you know a little bit about Alexa and how it works, it’s time to put the knowledge to work. Here’s what you can do to improve your blog’s traffic rank:

Be an Alexa Toolbar user
Who is the most frequent visitor to your blog? You are. Then doesn’t it make sense you yourself install an Alexa toolbar in your browser? Visit this page to install Alexa Toolbar. Imagine, every time you visit your blog, you actually help improving your Alexa rank!
If you’re using Firefox, install an extension called SearchStatus. It does the same thing, plus it also displays Google PageRank, Compete rank and mozRank, among loads of other useful features.
Encourage your readers to install the toolbar
Your subscribers, followers and friends –they are the ones who frequent your blog. Convert them into Alexa Toolbar users by writing a post explaining to them the benefits of installing an Alexa toolbar, like what I’m doing now.
Attract webmasters to your blog
Webmasters usually have the toolbar installed, so getting them to visit your blog will improve your ranking. What you can do:
- Write articles that appeals to webmasters -about SEO, web traffic, site ranking.
- Participate in webmaster forums. Share useful and relevant articles from your blog. Don’t spam.
- Create a tools page for webmasters. They will keep coming back to your blog to use the tools. Here is an example: Blogger Sentral’s SEO Tools.
Install one of Alexa site widgets on your blog.
Even though Alexa doesn’t mention it anywhere on their website, I personally think it might work. The widget displays your blog rank, just like Alexa Toolbar and SearchStatus extension do. That to me indicates it sends/communicates your blog data to Alexa.
And if this is true, it might work even better than all the methods mentioned above -because all visits will be counted, even the visits by non-Alexa toolbar users!

Enjoy!
Do you know other ways to improve Alexa traffic ranking?

Blogger Related Posts with Thumbnails: LinkWithin

2011-11-16T15:11:00.001+06:00

Keep your readers engaged with LinkWithin related posts with thumbnails widget. The related posts thumbnails will appear under each post, linking to related stories from your blog archive. It will make your old posts accessible to new or casual readers of your blog, thus increasing traffic.
This tutorial will show you how to install LinkWithin widget to a Blogger blog. I’m splitting this tutorial into two sections -one is for installing default widget and another one is for installing custom widget.

a) Installing default LinkWithin widget

Adding a default widget is actually pretty straightforward.

Go to LinkWithin.
Enter your email address and blog URL.
Select Blogger for the platform and select the number of stories.
Click Get Widget! and the widget will be added to your blog.
Done! The related posts thumbnails and links should appear under each post now.

b) Installing custom LinkWithin widget

If you would like to customize the widget, proceed with the rest of this tutorial. You can change the placement of the related posts thumbnails and the phrase that appears above them. You can also specify on which pages they should appear.
Here we go,

I. Get your Site Id

Go to LinkWithin.
Perform the same steps (steps 2 to 4) as in a) above, except this time choose Other for the platform.
You will be given a code snippet, similar to the snapshot.
Don’t copy the code. Just jot down or copy the Site Id number for later use.

II. Adding in the widget code

Login to your Blogger account.
Go to Dashboard > Design > Edit HTML.
Back up your template.
Copy the code below and paste it right before </body> tag in your template:

view sourceprint?

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

2 <script>

3 var linkwithin_site_id = SITE ID NUMBER;

4 linkwithin_text='YOUR CUSTOM PHRASE';

5 </script>

6 <script src="http://www.linkwithin.com/widget.js"></script>

7 <a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Related Posts with Thumbnails" style="border: 0" /></a>

8 </b:if>
- Put your Site Id number in code line 3.
- Change the “You might also like:” phrase with your own phrase in code line 4.
- The code above will make the related posts appear only on post pages. If you want to display them on all pages, just remove code line 1 and 8.
Save and view your blog.

III. Repositioning related posts display (optional)

By default the related posts thumbnails will appear after each post body, ABOVE the post footer. That means it appears (in most cases) above your labels, comments link and timestamp.
A few users mentioned that they prefer the thumbnails to appear BELOW the post footer, and asked me how can they make it so.
So here it is folks. Follow these steps to place the related posts at the very end of your post section:

In Design > Edit HTML, with Expand Widget Templates checkbox ticked, find the following code:

1 <b:include data='post' name='post'/>
Add <div class="linkwithin_div"></div> right after the line, like so:

1 <b:include data='post' name='post'/>

2 <div class="linkwithin_div"></div>
Click Save. You're done!

Keeping your widgets when changing Blogger template

2011-11-16T14:43:00.001+06:00

You may want to try this method on your test blog first.
Here it is:

1. Identifying and backing up affected widgets

You need to identify which widgets are to be deleted by Blogger, so that you can rescue them later.

Proceed with changing the template.
When Blogger ask you to confirm widgets deletion, do the following to back up your existing widgets (click picture to enlarge):
- Take note the names of the about-to-be-deleted widgets.
- Click Cancel button (because at this time you just want to take the widgets’ name).
- Untick Expand Widget Templates tick box. When the pop-up below appears, click OK.
- Now remember the names of about-to-be-deleted widgets? Look/search for them inside the template codes (use Ctrl+F). You are about to rescue them :). Do it one by one.
- When you find the name inside the codes, copy and paste the whole line into Notepad or any other text editor. One line per widget.

2. Placing existing widgets into the new template

Start uploading the new template again.
When Blogger ask you to confirm widgets deletion, this time do the following:
- Search for the phrase “widget id” in the template codes.
- Once you get there, paste the all the “rescued” widgets exactly in between “widget id” and "section id” line.
Click Preview button, check if the widgets appear in the new template. Don’t worry about the positioning of the widgets, you can reposition them later in Page Elements.
If you like what you see, click Save Template.
Enjoy!

Before you leave:

Do you find this article useful? Share it via Tweet This or Add This buttons below.
Any suggestion, question or comment? Please post it in the comments below.

How to change blogger template

2011-11-16T14:42:00.001+06:00

So you got tired with the look of your blog, or you think the template you chose when setting up your blog was a mistake in the first place? You tried to change the template with what Blogger provides but the choices is too limited. What to do?
What to do? You change it to a third party template, that’s what you do. You come to the right place, because I’m going to tell you how to do it.
Just follow these steps:

Find your dream template
- There are lots of websites offering free blogger templates. Among them are Btemplates, PYZAM and Ourblogtemplates.
- When you found what you like, test it first. Most template comes with Live Demo site, go there and try it out.
- If you are satisfied with how it looks and functions, download it.
Back up your current template
- This is important, because once you replaced the template, the old one will be gone.
Uploading to Blogger
- To change your template, you need to upload it to Blogger server.
- In Edit HTML, under Back-up/Restore Template, click Browse.. to select the template you’ve downloaded in step 1.
Once you selected it, click Upload.
Blogger will ask you to confirm widgets deletion. Note1: Deleted widget will be lost, and can’t be recovered. Note2: If you don’t want to lose the existing widgets, read this article where I show you how not to lose your existing widgets.
If you don’t mind losing your existing widgets, click Confirm and Save.
If no error occurs, a message "Your changes have been saved View blog" will be displayed.
Click on View blog to see the results.
Done

Template Designer: Change the style / appearance of page tabs

2011-11-16T14:40:00.001+06:00

So you want to change the appearance of your horizontal Pages gadget tabs, but not sure where to start? Well, you came to the right place. This article will show you how to change layout, colors, fonts etc.
Some elements can be styled in Advanced menu while others require addition of custom CSS code snippets.

Elements no.1 to no.3 can be styled by going into Design > Template Designer > Advanced menu and selecting the corresponding submenu.

1. Tabs text (font, size, color etc.)

Select Tabs Text submenu to change font color or size, to bold or to italicize. You can also set the color of selected tab here.

2. Bar background color

Select Tabs Background submenu and choose your preferred color from Background Color chart (the left chart).

3. Selected tab background color

Still in Tabs Background submenu. Choose a color from Selected Color chart (the middle chart).

To style the following elements (no.4 to 8) you must add custom CSS code snippet to your template. Copy and paste the code and replace the values with your own. Use combination of codes to come up with your desired look.
The codes should work in most templates -Simple, Picture Window, Awesome Inc. and Watermark. They are only applicable to Pages gadget which is positioned under the header. Please leave us a comment if you find a code that doesn’t work on your particular template.

4. Tab width

.tabs-inner .PageList li a {padding-left:10px; padding-right:10px;}

Increase left and right padding values to widen the tabs.

5. Tab borders

.tabs-inner .PageList li a {border:1px solid grey;}

To remove existing borders, change the line width from 1px to 0px.

6. Tab background color

.tabs-inner .PageList li a {background:#FFB733;}

7. Gaps between tabs

.tabs-inner .PageList li a {margin-right:10px;}

Increase the margin value to widen the gaps.

8. Remove the bar (not the tabs)

This code will remove the bar, but will leave the tabs intact.

.tabs-cap-top, .tabs-cap-bottom, .tabs-outer, .PageList, .PageList ul, .PageList .widget-content {border:none !important; background:none !important; -moz-box-shadow:none !important; -webkit-box-shadow:none !important; box-shadow:none !important;}
.tabs-inner .section {border:none !important;}

9. Align the bar

Read How to align Pages/PageList gadget.

Enjoy!

How to align Pages/PageList gadget

2011-11-16T14:38:00.001+06:00

A Pages (a.k.a PageList) gadget is simply a set of links to your (static) Pages. You can opt to add Pages gadget once a static page is published.
Pages gadget is left aligned by default. To align it in the center or on the right (of your horizontal bar or sidebar), you just need to add a small CSS code snippet.
Here we go,

Go to Dashboard > Design > Edit HTML Template Designer > Advanced > Add CSS.
Look for ]]></b:skin> line in your HTML code and add the following code right before the line.
Paste one of the following snippets in the CSS editor, and press Enter key.

a. For horizontal tabs type PageList
- To center
```
.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}
```
- To align right
```
.PageList {text-align:right !important;}
.PageList li {display:inline !important; float:none !important;}
```
If the tabs stack on each other after you added the code, try replacing display:inline with display:inline-block.

b. For sidebar links type PageList
- To center
```
.PageList {text-align:center !important;}
```
- To align right
```
.PageList {text-align:right !important;}
```
Check out the live preview in the lower pane.
Lastly, if you are happy with the way it looks, click the orange Apply To Blog button.
That's it. Enjoy!

Before you leave:

Do you find this article useful? Share it via Retweet, Share and Stumble buttons.
Any suggestion, question or comment? Please post it in the comments below.

Template Designer: How to change column width

2011-11-16T14:34:00.001+06:00

The new Blogger Template Designer makes changing column widths a lot easier. In regular (non Template Designer) layout template,
changing blog width requires some code editing in template HTML. With Template Designer you can stay away from the codes, because it can be done from within the designer itself, easy peasy.

I. Changing column widths

Here’s what to do,

Login to your Blogger account.
Go to Dashboard > Design > Template Designer.
In Blogger Template Designer page click Layout. Then select Adjust Width.
Use the slider to adjust the width. You have (maximum of) three adjustable widths. Below are the names and their width range (in px):
- Entire blog -500px (minimum) to ~~1000px~~ 1500px (maximum)
- Left sidebar -100px to 500px
- Right sidebar -100px to 500px
Use the slider to change the width. Changes you make will be reflected instantly in a live preview beneath the editor.
If you like the result, click the orange Apply to Blog button to save.

II. Changing sub-column widths

If you select a layout with sub-columns, like an example on the right, you would have noticed that sub-columns are set to have equal widths (50%-50%) by default.
You can change that in Template Designer > Advanced > Add CSS, by entering this code in the editor:

view sourceprint?

1table.section-columns td.first.columns-cell {width:70%;} 

2table.section-columns td.columns-cell {width:30%;}

The first line is for the left sub-column and the second line is for the right sub-column. Change the percentage as you wish, as long as the total is 100%.

III. Setting width beyond the adjustable range

If the width you want is wider than the upper limit (or narrower than the lower limit), then you have no choice but to enter template HTML to perform the changes:

Go to Dashboard > Design > Edit HTML.
Look for following lines in your HTML code:

1 <b:template-skin>

2   <b:variable default='930px' name='content.width' type='length' value='1000px'/>

3   <b:variable default='0' name='main.column.left.width' type='length' value='360px'/>

4   <b:variable default='360px' name='main.column.right.width' type='length' value='220px'/>
- Code line 2 is for Entire blog
- Line 3 is for Left sidebar, and
- Line 4 is for Right sidebar.
Just change the value of value attribute at the end of the code line to your desired value. For example, to set the width of Entire blog to 1200px, just change the figure 1000px to 1200px in line 1.

That’s it. Enjoy!

Template Designer: How to use your own background image

2011-11-16T14:32:00.003+06:00

The new Blogger Template Designer offers hundreds of beautiful background images to choose from, yet it does not provide an option to upload your own image.
So how do you go about using your own image as a background? The answer is using CSS. You can use your own image by adding a CSS background code snippet. The good thing is, with Template Designer you don’t have to go to Design > Edit HTML to add the snippet. It can be done from within the Template Designer itself.
(If you are applying your own background to a regular Layout Template, read Using image as background).
Here are the steps,

Upload your background image to an image host such as Picasa, Flickr or Photobucket. Make sure the file size does not exceed 250kB. Once uploaded, get the direct link to the image.
Login to your Blogger account.
Go to Dashboard > Design > Template Designer.
In Blogger Template Designer page click Advanced. Then scroll down the submenu and click Add CSS.
Enter the following code in the CSS editor window:
```
body {background: ColorCode url(YourImageUrl) no-repeat center fixed;} 
.body-fauxcolumns .fauxcolumn-outer div, .body-fauxcolumn-outer .cap-top .cap-left {background:none;}
```
- Replace ColorCode with the color code of the prevailing color of your image.
- Replace YourImageUrl with a direct link to the image.
- For a repeated, tiled image effect, remove no-repeat from code line 1.
Hit Enter key and the changes you make will be shown instantly in the live preview beneath the editor.
If you like the result, click the orange Apply to Blog button to save.
That’s it. Enjoy!

Uploading your own background image

Go to Design > Template Designer > Background and click the dropdown button under Background Image heading.
Click Upload Image button on top left corner of the pop up.
Click Browse button and select an image from your computer. If you want a full-screen background, use an image that's 1800 pixels wide and 1600 pixels high. The image file size must not exceed 300kB.
Once the image is displayed (uploaded), click Done.
Set the background’s alignment, tiling and scrolling.
Click the orange Apply To Blog button when you’re done.
That’s it, enjoy!

Template Designer: Add style with custom CSS code snippet

2011-11-16T14:32:00.001+06:00

Modifying your blog appearance usually requires you to edit your template’s existing CSS (Cascading Style Sheet) code or adding new codes.
To add a CSS code snippet, you go to Design > Edit HTML page and insert the code in the CSS section of the template.
That’s what you would do if you are using a regular layout template. However if you use the new Designer Template, there is another way. You can do it right from the inside of Template Designer.
Some of the advantages of using this method:

Safer -you don’t need to enter the Edit HTML page (where all your template codes reside), thus eliminating the risk of messing up your existing codes.
Instant preview -Template Designer provides live preview. You will see changes even as you enter the code.
Easier to undo -the added code will stay there in the editor. To undo, you can come back to the editor at any time and remove the added code.

Here’s how you do it:

Go to Dashboard > Design > Template Designer.
In Template Designer page, click Advanced in the menu on the left.
Then scroll down the submenu and click Add CSS.
Enter the CSS code snippet in the editor on the right.
Hit Enter key and view the change live in the preview pane located on the lower half of the screen.
Click the orange Apply To Blog button on the upper right corner of the screen to save the snippet.
Click Back to Blogger link to return to Page Elements page.
Done…. enjoy!

The case of double (duplicate) blog posts

2011-11-16T14:29:00.001+06:00

Are you seeing double? I mean as in duplicate or repeat posts on your Blogger blog? Instead seeing of a normal set of posts like this:

Post 1 Post 2 Post 3 (from top to bottom),

are you seeing two identical post columns, like this?

Post 1 Post 2 Post 3 Post 1 Post 2 Post 3

or duplicate posts inside a posts column, like this?

Post 1 Post 1 Post 2 Post 2 Post 3 Post 3

Anyway neither mode is good for your readers, both are equally unacceptable. It’s wise for you to fix these two double troubles on the double. Here we go,

1. Duplicate posts columns

The first and the more common one is duplicate posts columns. The second column looks exactly like the first one, complete with feed link and blog pager. The second column usually comes right under the first, like so:

Post 1 Post 2 Post 3 Post 1 Post 2 Post 3

This error is caused by duplicate Blog gadget. It is most likely occurred after you changed your template to a third party template.
To remove the duplicate, all you have to do is remove the extra Blog gadget. But I somehow think you already knew that. After all did you not notice there are two Blog Posts widgets in Design > Page Elements? The problem was you couldn’t remove either of them because there was no Remove button (which is normal for a Blog widget).
So how do you remove a Blog gadget then? You delete the Blog widget code in template HTML, that’s how.

Go to Design > Edit HTML.
DO NOT tick the Expand Widget Templates check box.
Find and delete the following line in your HTML code:

1 <b:widget id='Blog2' locked='false' title='Blog Posts' type='Blog'/>

or

1 <b:widget id='Blog11' locked='false' title='Blog Posts' type='Blog'/>
Click SAVE TEMPLATE button to save.
You will be asked whether to keep the widget or delete it. Choose to delete by clicking DELETE WIDGETS button.
Done.

2. Duplicate posts in a single column

This is a less common variation of duplicate posts. Each duplicate post comes right after the original post, and they are confined within the same post column, like this:

Post 1 Post 1 Post 2 Post 2 Post 3 Post 3….

This is due to a corrupted Blog widget template, probably caused by a mistake you made while tweaking the widget template.

Different styling for different page type

2011-11-16T14:28:00.001+06:00

Here we go,

1. Assign class to body element

First we need to assign a class to the body element so that we can reference it from the stylesheet. And the class has to be somehow linked to the page type. We can achieve this by using pageType data as the class name. We only need to do this once. Here’s what to do:
Find this:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

and replace it with this:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass + &quot; &quot; + data:blog.pageType'>

In older and most third party templates you will find body tag without any attribute, like so:

<body>

If this is your case, replace it with:

<body expr:class='data:blog.pageType'>

2. Adding CSS rules

You can style a HTML element by adding a CSS rule in the stylesheet. For example, this is the rule for hiding post timestamp:

.post-timestamp {display: none;}

Normally, this rule applies the styling on ALL pages i.e.. hides the post timestamp across the entire blog. How then we specify a page type and make the code apply only on that particular page type? The answer is by adding the page type class name (and a space) in front of the selector. Refer to the table below.

Page type	Class name
Index pages	.index
Post pages	.item
Archive pages	.archive
Static pages	.static_page

Let say you want to hide the post timestamp only on static pages, then the code becomes:

.static_page .post-timestamp {display: none;}

To make sure the new rule “stick”, you need to add it at the end of the stylesheet. This can be done either by putting it before before ]]></b:skin> line in the template Design > Edit HTML or by adding it via Template Designer > Advanced > Add CSS.
With this method any more individual page type styling will be done entirely in CSS stylesheet. The result would be a cleaner, lighter and W3C compliant code. (If we use the conditional tag method, styling four individual page types, would require the addition of four conditional tags in HTML!).

Enjoy!

10 tips for improving Google search results

2011-11-16T14:21:00.001+06:00

There are times, even on Google, when you just can’t find what you are searching for. The search results just doesn’t come out “right”, what you want just wasn’t there. How you wish you could do something extra…to get better search result.
Well today must be your lucky day, because I’m going to tell you that extra something, 10 tips for better Google searching. Hopefully these tips will give more relevance to the search results you get. The next time you Google search, instead of entering only your keywords in the search box, try the tips below.
Let’s start out by finding out the name of that fruit in the picture, try Google search spiky fruit.
Now that you know its name, let’s learn some more about strange-looking fruit using these tips:

Keyword definition
Define:[keyword] operator provides definitions for words, phrases, and acronyms from the Web. For example define:durian will get you a list of durian definitions.
File type
[keyword] filetype:[filetype extension]. find documents of the specified type, as in durian filetype:pdf.
Image search
Google Image search, you can narrow down the images according to Size, Color and content type whether its News, Faces, Clip art, Line drawing or Photo. Now let’s do image search of durian.
Glossary
To look for glossaries, as well as dictionaries, lists of terms, terminology, etc. use tilde(~) before keyword, as in ~durian.
Phrase
To look for exact phrases, put them in quotes as in “heavenly durian” or “durian stinks” .
Site page listing
Enough about durian. To show all webpages in a website or domain, use site:[domain] operator, as in site:www.tourismmalaysia.gov.my. You can use this method to check whether or not all of your pages are indexed by Google.
In-site search
To search inside a specific website, just add the keyword before site: operator, as in kelantan site:www.tourismmalaysia.gov.my.
Cached pages
To display Google's cached version of a web page use cache: operator, as in cache:http://www.bloggersentral.com/2009/04/keeping-your-widgets-when-changing.html. This is especially useful if you want to recover deleted pages.
Link listing
To show webpages that link to a site use link: as in link:www.tourismmalaysia.gov.my.
Keyword exclusion
To exclude certain keyword from result pages use [keyword] –[excluded keyword], as in Barack –Obama.

You are welcomed to share your Google search tips here. Use the comments.

Submitting Blogger sitemap via Google Webmaster Tools

2011-11-16T14:19:00.001+06:00

You don’t have to, it’s already there. In Blogger, your blog sitemap is your post feed, with this URL:

`1`	`http://yourblog.blogspot.com/atom.xml`

or this:

`1`	`http://yourblog.blogspot.com/feeds/posts/default`

How do you submit a sitemap?

You go to Google Webmasters Tools homepage and sign in to your Google account.
Click on your chosen blog. You’ll be transferred to the Dashboard.
Click Submit a Sitemap link on the bottom right of the Dashboard. You’ll be transferred to Sitemaps page.
Click [+] Submit a Sitemap button.
An input box appears, enter atom.xml, append the parameters if necessary and then click Submit Sitemap button.
Related query parameters (to be appended to your feed URL)
- max-results –add this if your blog has more than 25 posts. This is because on its own, the default feed URL only fetches 25 of your latest posts. For example, if you were to include up to 100 posts, use max-results=100.
- redirect=false -if you use FeedBurner to manage your blog feed, you probably had set your feed to redirect to FeedBurner’s URL. To make the sitemap work you need to prevent the redirect.
- How to append the query parameters?
  First append a question mark, then add the parameters. Separate each parameter with an ampersand (&). Example:
  atom.xml?max-results=100&redirect=false.
Google will take a few hours to process your submission i.e. to change the status from Pending to OK.

How to share Google plus circles

2011-11-16T14:14:00.001+06:00

Google+ recently introduced circle sharing feature. This feature gives Google+ users the ability to share copies of their favorite circles with friends or even with the public.
You can use it to recommend groups of people worthy of following to your friends. It is a great way to help them discover and connect with new people on Google+.
Here’s how it works:

Sharing a circle

Go to your circles page by clicking the Circles tab.
Select the circle you want to share. Once selected, the circle will turn white and three links will appear inside it –Edit, Delete, and Share.
Click the Share link.
You can add a comment (eg. about the the circle you're sharing), and then click the Share button.
Note that when you share a circle,
- You're actually only sharing the circle’s members at that time, as such any future changes you make to your circle will not be updated in the shared copies.
- The circle name is unknown to your friends.
- Only Google+‎ users can be shared.
- You can only share a maximum of 250 people in a circle.

Accepting a circle

Just click on the Add circle link in the center of the shared circle.
You can add the members to an existing circle or you can create a new circle. Enter the circle name in the provided text field, replacing the “Type a new or existing circle name” text.
You can omit members by highlighting them and clicking the Remove link.
Finally click the Add to XYZ circle or Create XYZ circle button to complete the process.

Check out the following video by a Googler explaining the steps.
Enjoy!

10 ways to Make your Blog More Authoritative

2011-11-16T14:11:00.003+06:00

If you are struggling to get more readers and traffic to your blog, then you have probably tried many different techniques. Although it may seem as if the stardom that comes with having a top blog is out of reach, it actually is not that hard to achieve. One of the easiest ways to get there is to emulate the style of the blogs that are already authoritative in their respective niches.

Read on for 10 common practices that you should be using to make your blog more authoritative.

1. Speak Like a Teacher

Since blogs mostly deal with communicating content, it may be useful to look into the real world to see who has the most authority when it comes to content and information. In the offline world, these are the teachers and professors. They speak from experience and with confidence. You should take the same approach when you are communicating to your readers through your blog.

2. Post At Least Twice Per Day

When Technorati released the statistics of all the blogs they track on the Internet, one fact was striking. The average posting frequency for the top 4000 authoritative blogs was more than twice as much as the posting frequency of blogs with less authority. The more you post, the more authority you will be perceived to have.

3. Keep at It

The average life of the blogs in Technorati's top 4000 was almost three years. While it's possible to grow your blog's popularity in a much shorter period of time, it's probably a good idea to be realistic and assume that you're going to need to stick with it for a few years.

4. Have a Passion for Your Blog

It sounds trite, but it's true. Without actually loving your blog for the sake of writing and communicating with your readers, it will be quite tough to achieve any authority. Eventually, it will feel like too much work and you'll be tempted to stop blogging.

5. Design

It's important that your blog is pleasing to the eye if you want readers to stay or to keep coming back. Most often, this means a blog with a clean, crisp layout.

6. Go Easy on the Ads

Occasionally, bloggers try to fit as many ads as they possibly can onto their blogs, trying to earn the maximum amount of money. This may be understandable, but the presence of too many ads takes attention away from the content of your blog and makes your overall site appear spammy. Try focusing on your content at first and put the ads on after a period of time. If you manage the amount of ads that you put on your site, you’ll find that visitors are much more tolerant and will take the time to look around your site, rather than instantly dismiss it.

7. Make it Easy to Subscribe

While ads are frowned upon, what is more acceptable in the blogosphere is to ask people to subscribe to your blog. This is usually done by RSS or email. If you are looking to monetize your blog, then these subscribers could be more valuable in the future.

8. Get Your Own Domain

If you want your blog to look more professional, then it is crucial that you get your own domain name. It is rare to find an authoritative blog that has a WordPress or Blogger sub-domain. A domain name typically only costs around $10 per year, which is a small investment compared to the degree by which your reputation will increase.

9. Highlight Your Top Posts

When many Internet users come across a new blog, they love to check out the "Top Posts" section if there is one. Put your top posts section in a prominent area of your blog, and select your absolute best content to give a great first impression.

10. Tell About Yourself

You want your blog readers to be able to find out about you. New readers will want to know who is writing the blog, and your longtime readers will become even more curious to learn more about you. The most authoritative bloggers aren't afraid to show themselves to their readers: They are quite often extremely visible personalities.

Creating an authoritative blog is no walk in the park. It is a bit like becoming a rock musician. A lot more people would like to be a rock star than those that actually achieve it. It will probably take at least a couple years to build up a large readership. However, if you implement the above tips, then you will set yourself up for a much higher probability of success.

10 Tips for Writing Better Blog Posts

2011-11-16T14:11:00.001+06:00

1. Write Substance

Ask yourself before every post, "What is this post really about? " You should never write a post simply because you feel the need to post today or you made a goal to always post on Wednesdays. Each post should be focused around a clear main idea or subject. Similarly, avoid fluff. Fluff introductions or conclusions that don't really say anything should be rewritten or eliminated. Don't write for a word count, write for substance.

2. Make Your Headlines as Strong as Your Content

A headline is generally what draws the reader to the post in the first place. Make it count. You want your headlines to entice readers, to make them click on as many of your posts as possible. You won't achieve this with boring headlines. Use strong verbs and avoid passive tense. Make the reader want to know more about your topic.

3. Banish Text Blocks

No one wants to read a 1000 word paragraph, least of all your flighty internet readers. The internet audience has a notoriously low attention span, so make it easier to skim your writing by using frequent paragraph breaks and subject headers. It makes a large portion of copy seem much less intimidating. Headers also help the reader get the most out of your text by giving them an introduction and an preliminary concept to the following section. Basically, it gives your readers a "starting point" for the attached section. Pictures, videos, and short bulleted lists also serve as excellent text breakers.

4. Utilize Lists

People, especially web readers, love lists. It's comforting to have a large portion of information broken down into bite-size tips or steps. Lists are easy to skim, easy to digest, and easy to remember. It's why we make grocery lists instead of grocery prose.

5. Self-link

Once you've snared a new reader, what's to stop them from leaving your page immediately after reading your article? Internal linkage can be a blogger's best friend for keeping readers around for a while. Internal links are links to other posts or content within your blog. For example, if you briefly discuss hummus in an article about healthy eating, link to a previous post about hummus recipes. If you mention an actress in your fashion blog that you've talked about before, link to all articles featuring that actress. By including more links, you're giving readers the option to read more of your work about something they're already interested in.

6. Don't Ignore Your Readers

Engage them. Respond to their comments and suggestions. One of the best tried-and-true blogging tips is to ask for your readers' input or suggestions at the end of each article. When you show an interest in your readers' opinions, they're more likely to share them and join the conversation. After all, the capacity for instant reader-author conversations is what distinguishes the blogosphere from traditional print mediums.

7. Proofread, Proofread, Proofread

It may seem obvious, but small grammatical/spelling mistakes make your blog look amateurish. Don't forget to fact check all of your posts as well. Incorrect information discredits your voice and your blog. Remember, editing your posts is every bit as important as writing them. If you can, put your post away for a few hours and look at it again later. Distancing yourself from a post will help you catch errors you wouldn't have noticed earlier.

8. Tighten Your Posts

Once you're done checking for grammatical, factual, and spelling errors, go back and remove any clichés or unnecessary words. Anything you can do to shorten your post will improve your writing immensely. Look closely at every adverb and adjective. Do you really need them? Nine times out of ten you'll find these words are unnecessary, especially in informative articles.

9. Don't Be Too Formal

Even if you have a doctorate in English literature, there's no need to show off those big words. Never use a ten-letter word when a four-letter word will do. You'll wind up isolating your audience. Also, remember that blog writing is much more informal than a newspaper or technical writing. Blogging is conversing, so strike up a conversation with your readers. A welcoming, informal tone is much more inviting for visitors.

10. Write Often and Write Well

Writing is a skill. While some people may have a gift for words, they still need to hone their writing skills just like everyone else. Writing frequently will keep your skills sharp and refined. However, you're not doing yourself any favors if you consistently write sloppily. Treat your blog with a high regard and aim to make every post an example of your best writing.

EaRnAnDtIpS

How To Add Animated Favicon In Blogger?

How To Create Animated Favicons?

How To Add Your Favicon To Blogger Now?

Adding a floating “back to top” button

Add banner, Adsense or search box in header

1. Adding a section (in HTML)

2. Styling the section (in CSS)

3. Installing the widget

4. Fine-adjusting the position

How to make great blog header

Check blog speed, ranks, backlinks and broken links

Submit site/blog to DMOZ (Open Directory Project)

DMOZ is the directory of Open Directory Project (ODP), the largest human edited web directory of the Web. The ODP powers core directory services for some the most popular portals and search engines, including AOL Search, Netscape Search, Google, Lycos, and HotBot, and hundreds of others.

Removing dead (broken) links from Google search results

A better way to add meta tags to Blogger

Duplicate meta descriptions

Possible solutions

Adding the meta tags, the better way

Checking the meta tags

SEO (Search engine optimization) friendly Blogger page title

What is and how to improve Alexa rank

Getting to know Alexa

Boosting Alexa ranking

Blogger Related Posts with Thumbnails: LinkWithin

a) Installing default LinkWithin widget

b) Installing custom LinkWithin widget

I. Get your Site Id

II. Adding in the widget code

III. Repositioning related posts display (optional)

Keeping your widgets when changing Blogger template

1. Identifying and backing up affected widgets

2. Placing existing widgets into the new template

How to change blogger template

Template Designer: Change the style / appearance of page tabs

1. Tabs text (font, size, color etc.)

2. Bar background color

3. Selected tab background color

4. Tab width

5. Tab borders

6. Tab background color

7. Gaps between tabs

8. Remove the bar (not the tabs)

9. Align the bar

How to align Pages/PageList gadget

a. For horizontal tabs type PageList

b. For sidebar links type PageList

Template Designer: How to change column width

I. Changing column widths

II. Changing sub-column widths

III. Setting width beyond the adjustable range

Template Designer: How to use your own background image

Uploading your own background image

Template Designer: Add style with custom CSS code snippet

The case of double (duplicate) blog posts

1. Duplicate posts columns

2. Duplicate posts in a single column

Different styling for different page type

1. Assign class to body element

2. Adding CSS rules

10 tips for improving Google search results

Submitting Blogger sitemap via Google Webmaster Tools

How do you submit a sitemap?

How to share Google plus circles

Sharing a circle

Accepting a circle

10 ways to Make your Blog More Authoritative

1. Speak Like a Teacher

2. Post At Least Twice Per Day

3. Keep at It

4. Have a Passion for Your Blog

5. Design

6. Go Easy on the Ads

7. Make it Easy to Subscribe

8. Get Your Own Domain

9. Highlight Your Top Posts

10. Tell About Yourself

10 Tips for Writing Better Blog Posts

1. Write Substance

2. Make Your Headlines as Strong as Your Content