Blogger Templates & Tutorials - Blogger FAQs

Little United Nations Blogger Template

2009-11-10T05:36:00.000-08:00

We are from all over the world, Africa, America, Asia, Europe and Australia. We have different skin colors, black, white and yellow. I am Lucy, You are Lily, and he is Jim, but we are all the children of the Earth Mum. We are the little United Nations. Hand in hand, we are singing, we are dancing, for what? For our common dreams, to make this world a better place.

Preview

Download

This beautiful theme is designed and coded for Wordpress by EZWpthemes and I've just finished converting to Blogger.

Glassical Blogger Template

2009-11-08T10:45:00.000-08:00

Just finished converting this cool new template from Smashing Magazine and Abdullah Ibrahim, enjoy!

Preview

Download

If you have any difficulties regarding this template or just wanna say thanks, just leave me a comment!

How to Change or Customize "Post a Comment" Text

2009-11-03T10:46:00.001-08:00

What is this & why should we customize it?

I'm referring to the "POST A COMMENT" text which allows or prompts (in case of Embedded Comment Form) our users to make a comment on our blog. So, if this tiny piece of text is attractive then it'll surely grab the attention of visitors.

How to find "POST A COMMENT" text in my template?

Actually, Blogger uses different data tags to print out messages like this one. So, it you'll go to Layout -> Edit HTML and search for "POST A COMMENT", you won't find anything. To find the Blogger data tag which represents "POST A COMMENT", check Expand Widget Templates and find the following line of code:

Note: If you can't find the above code then please contact me by writing a comment otherwise continue with the tutorial.

I've found the code but how to customize it?

Now we know our target so we can use only a single CSS definition to customize it and fortunately that definition is already in our code. Go to Edit HTML tab and find the following piece of code:

#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}

This definition is defining the style of "POST A COMMENT" text. You can modify it by adding and changing the existing parameters. I'll explain the above definition now!

margin:1em 0; represents the margin (or distance) from top & bottom (currently 1em) and right & left (currently 0). So, you can control the spacing of "POST A COMMENT" text by simply modifying the margin values.

font-weight: bold; is causing our font to appear bold but you can change font-weight: bold; to font-weight: normal; if you don't wish to make it bold.

line-height: 1.4em; is just defining the line height of our text but I'd suggest you to delete this property for our case.

text-transform:uppercase; is transforming the text to uppercase. You can change text-transform:uppercase; to text-transform:lowercase; if you want to make "POST A COMMENT" in lowercase or you can replace it with text-transform:none; if you don't want any modification in it and leave it as it is.

letter-spacing:.2em; defines the spacing between each alphabet. Increase or decrease the value .2em to see what happens.

color: $sidebarcolor; is defining the color of our text. I'd recommend you to change color: $sidebarcolor; to color: #ffffff;. In this way, you can easily add the hex code of any color in your definition. Currently, I've added ffffff which is the hex code of white color. How to find the hex codes of different colors? You can simply use a free software like ColorPic.

Similarly, you can add some more properties to customize your text but I'll recommend to keep the things simple and add only one property which is:

font-size:20px; Of course, this property is defining the size of font and you know how to modify it.

Finally, I've removed a property to suit my taste (line-height) and also added another (font-size) to get better control over "POST A COMMENT" text. Now, the CSS code should look like this:

#comments h4 {
margin:1em 0;
font-weight: bold;
text-transform:uppercase;
letter-spacing:.2em;
color: #ffffff;
font-size:20px;
}

Conclusion & final words!

I've tried to explain this tutorial in the simplest of manner but you can always ask questions or give suggestions for future writings. Your comments are very welcomed!

Craftwork Blogger Template

2009-10-31T09:17:00.000-07:00

Craftwork is originally designed by EZwpthemes and Blogger FAQs has converted it to Blogger Platform.

I've converted this template right from scratch once again because of huge demand and love from you guys. It's very easy to setup, stylish comments and navigation links have been included plus this template works fine in IE 6.

Preview

OR

Download

Note: A simple setup file has been included with the template download for instructions, if you've downloaded the template before today (31-10-2009) then please download and use this fully updated, error-free version.

Florist Blogger Template

2009-10-04T02:00:00.000-07:00

Florist is a beautiful & cute Blogger template with lots of flowers. The header has a beautiful background, search function, RSS icon and hanging menu. I also tested this theme on Internet Explorer 6 and it looks absolutely fine there also.

Florist is originally designed for Wordpress by EZwpthemes and converted to Blogger by Bilal (that's me) @ Blogger FAQs.

Preview

Download

I'd love to hear from you!

Celebrity HQ Blogger Template

2009-09-25T07:46:00.000-07:00

This theme screams celebrity. Blues and pinks dominate this design making it perfect for either your celebrity blog or any other topic that needs a bubbly personality. This blog theme is simply 2 columns and is fully widgetized.

Original Wordpress theme is designed by very talented people at Design Disease and converted to Blogger by Bilal at Blogger FAQs.

----------------------------
Preview
----------------------------

OR

----------------------------------
Download
----------------------------------

The template is fairly easy to use and if you guys have any difficulty then feel free to comment otherwise as usual you can say thanks or suggest some other template which you want to be converted to Blogger.

Lollipop Blogger Template

2009-09-22T07:09:00.000-07:00

Just finished converting this cute template form EZWpthemes, tell me if you like it.

Preview

Download

Feel free to comment for any help or just to say thanks.

How to Decorate Comments in Blogger

2009-09-19T00:48:00.000-07:00

By default, Blogger comments are very simple with a profile picture but I'll tell you a simple way to make your comments look stylish and beautiful.

Remember: Before proceeding, please backup your current template layout. (?)

To do this quick makeover, just go to Layout and then Edit HTML section. Find this code there:

/* Comments
----------------------------------------------- */
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}

#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}

Tip: If you can't find this code then please comment here with your blog address otherwise continue with the tutorial.

Actually, this is the CSS code responsible for the appearance of your comments. So, you need to replace the above code with the following code:

/* Comments
----------------------------------------------- */

.comment-form {
margin-left:.5em;}

.comments {
margin-left:.5em;}

#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: #0B486B;
}

#comments-block {
font-size:13px; color:#333333;
}
#comments-block .comment-author {
color:#53524b;
font-size:12px;
background:#d7e8f0;
padding:4px;
font-weight:bold;
text-decoration:none;
}
#comments-block .comment-author a:link, .comment-author a:visited, .comment-author a:hover {
font-weight:bold;
color:#53524b;
border-bottom:solid 1px #80a8ba;
padding-bottom:2px;
text-decoration:none;
}

dd{margin:0; border:0; padding:0; padding:0 10px; background:#f5f8fa;}
dd.comment-body{border:solid 2px #d7e8f0; border-bottom:none; border-top:none;}
dd.comment-body p{border:0; padding:0; margin:0; padding:10px 0;}
dd.comment-footer{border:solid 2px #d7e8f0; border-top:none; margin-bottom:10px;}

#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}

.comment-timestamp{font-size:11px; color:#333333;}
.comment-timestamp a:link, .comment-timestamp a:visited {
font-size:11px; color:#999999; background:none; width:auto; height:auto;
text-align:left; font-weight:normal;}

.deleted-comment {
font-style:italic;
color:gray;
}

Save your template and you're done with the comments makeover. Please remember that you can always change the color (currently sky blue) to your own choice. The code for sky blue color is #d7e8f0 but you can replace it with some other color by simply replacing the code #d7e8f0.

If you're using a custom template then you might feel difficult to implement this tutorial but you can always ask for my help.

Smash My Typo Blogger Template

2009-07-25T07:52:00.000-07:00

Smash My Typo is a really fresh and simple template originally designed by Alexander Dahlberg for Smashing Magazine typographic themes contest. Due to it's massive popularity, I've converted it to Blogger.

Preview

OR

Download

OR

Download (Alternative Link)

If you have any queries or just wanna say thanks, feel free to comment.

How to Show Total Posts & Comments

2009-07-24T22:55:00.000-07:00

A simple script allows us to show off total posts and comments on our blog.

Just go to Layout | Page Elements and click Add a Gadget link in your sidebar where you want to add this widget. When a new window is opened, chose HTML/JavaScript as your widget and add the following code in the Content field.

Customization...

Replace http://bloggerfaqs.blogspot.com/ with your own blog URL. You can change the Posts: and Comments: text to whatever you like for example you can replace Comments: with Total No. of Comments:.

A Recent Comments Widget with Comments Summaries

2009-07-15T07:12:00.000-07:00

A simple recent comments widget allows us 5 comments to display in our sidebar and of course there's only name and link of the post with every comment.

Now you can display up to 25 comments with summaries of the comments, all thanks to JSON Call Back Function.

To install this widget in your sidebar, simply go to Layout | Page Elements and click on Add a Gadget link in your sidebar. A new window will open and you've to chose HTML/JavaScript widget, once that widget is opened, paste the following code in the Content area of the widget...

<ul style="font-style: italic;"><script style="text/javascript">
function showrecentcomments(json) {
for (var i = 0; i < 20; i++) {
var entry = json.feed.entry[i];
var ctlink;

if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
ctlink = entry.link[k].href;
break;
}
}
ctlink = ctlink.replace("#", "#comment-");
var ptlink = ctlink.split("#");
ptlink = ptlink[0];
var txtlink = ptlink.split("/");
txtlink = txtlink[5];
txtlink = txtlink.split(".html");
txtlink = txtlink[0];
var pttitle = txtlink.replace(/-/g," ");
pttitle = pttitle.link(ptlink);
if ("content" in entry) {
var comment = entry.content.$t;}
else
if ("summary" in entry) {
var comment = entry.summary.$t;}
else var comment = "";
var re = /<\S[^>]*>/g;
comment = comment.replace(re, "");

document.write('<li style="text-align:left">');
document.write('<a href="' + ctlink + '">' + entry.author[0].name.$t + '</a>');
document.write(' on ' + pttitle);
document.write('<br>');
if (comment.length < 150) {
document.write(comment + '...<a href="' + ctlink + '"> (more)</a><br><br>');
}
else
{
comment = comment.substring(0, 150);
var quoteEnd = comment.lastIndexOf(" ");
comment = comment.substring(0, quoteEnd);
document.write(comment + '...<a href="' + ctlink + '"> (more)</a><br><br>');
}
}
document.write('</li>');
}
</script>
<script src="http://bloggerfaqs.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments">
</script></ul>

You need to replace http://bloggerfaqs.blogspot.com/ with your own blog address. You can further make customization by changing the value 20 (for (var i = 0; i < 20; i++) {) to some higher or lower value, this value is for the number of comments and you can't have more than 25 comments. Last thing you can modify is font-style: italic; which you can change to font-style: bold; or font-style: normal; to change the font styling.

If you need any help or just wanna say thanks, feel free to comment.

How to Restore Pencil to Edit Posts

2009-07-15T06:37:00.000-07:00

When you're logged in to your Blogger account and you see your own blog, you might have noticed a small pencil in your post footer like this one...

This pencil lets you easily edit any post right from your blog but if you're using a custom template or for some other reason, you're can't see this small tool then you can easily restore or recover it.

Go to Settings | Basic and scroll down to the option to see Show Quick Editing on your Blog? just make sure it is selected "Yes" and SAVE SETTINGS. Now see your blog if the pencil is there or not. If pencil is still not there then you can manually add it's code in your template.

To manually add pencil code, go to Layout | Edit HTML | Check Expand Widget Templates and search for <div class='post-footer'> paste the following code right after it...

<b:if cond='data:post.editUrl'>
<span expr:class='"item-control " + data:post.adminClass'> <span expr:class='"item-control "+ data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'> <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<img alt='' class='icon-action' height='18' src='http://www.blogger.com/img/icon18_edit_allbkg.gif' width='18'/> <img alt='' class='icon-action' height='18' src='http://www.blogger.com/img/icon18_edit_allbkg.gif' width='18'/>
</a> </ a>
</span> </ span>
</b:if> </ b: if>

Save your template and see the results.

How to Use Social Bookmarking Icons in Post Footer

2009-07-14T09:19:00.000-07:00

I've social bookmarking icons installed in my post footer. You can also install these icons in your post footer so that your visitors can easily share your post with the world.

Remember: Backup your template before moving on.

To install these icons on your blog go to Layout | Edit HTML | Check Expand Widget Templates and search for this code...

Now, place the following code right after the above code...

<b:if cond='data:blog.pageType == "item"'>
<big><big><big> Share this post! </big></big></big>
<div class='spacer' style='margin-top:10px;margin-bottom:10px;border-top:solid 1px #DEDEDE;'/>
<div class='social-table'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td valign='top' width='50%'><table border='0' cellpadding='0' cellspacing='0' width='222'>
<tr>
<td height='24' width='24'><img border='0' height='16' src='http://lh3.ggpht.com/_TqPdHmAEwTM/SgxdHoRIprI/AAAAAAAAEC4/UOmW1Zfg04I/facebook.png' width='16'/></td>
<td height='24'><a expr:href='"http://www.facebook.com/share.php?u=" +data:post.url'><strong>Share on Facebook</strong></a>
</td>
</tr>
<tr>
<td height='24'><img border='0' src='http://lh4.ggpht.com/_TqPdHmAEwTM/SgxdH2E0JsI/AAAAAAAAEDE/HTXaxE7_KaU/twitter.png'/></td>
<td height='24'><a expr:href='"http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title'><strong>Share on Twitter</strong></a>

</td>
</tr>
<tr>
<td height='24'><img border='0' height='16' src='http://lh3.ggpht.com/_TqPdHmAEwTM/SgxiZxfvTGI/AAAAAAAAEDU/AvuLyM_PGa4/stumble.png' width='16'/></td>
<td height='24'><a expr:href='"http://www.stumbleupon.com/submit?url=" +data:post.url'><strong>Share on StumbleUpon</strong></a></td>
</tr>
<tr>
<td height='24'><img border='0' height='16' src='http://lh6.ggpht.com/_TqPdHmAEwTM/Sgxdp40mQUI/AAAAAAAAEDM/_Nee9ul6zpc/s128/delicious.png' width='16'/></td>
<td height='24'><a expr:href='"http://del.icio.us/post?url" +data:post.url'><strong>Share on Delicious </strong></a></td>
</tr>
<tr>
<td height='24'><img border='0' height='16' src='http://lh4.ggpht.com/_TqPdHmAEwTM/SgxjIHpTaiI/AAAAAAAAEDY/pZtBL9woxzw/reddit.png' width='16'/></td>
<td height='24'><strong><a expr:href='"http://www.reddit.com/submit?url=" +data:post.url'>Share on Reddit</a></strong>
</td>

</tr>
</table></td>
<td valign='top' width='50%'><table border='0' cellpadding='0' cellspacing='0' width='222'>
<tr>
<td height='24' width='24'><img border='0' height='16' src='http://lh4.ggpht.com/_TqPdHmAEwTM/SgxkjUlW8eI/AAAAAAAAEDc/iDE9H_-vX9w/digg.png' width='16'/></td>
<td height='24'><a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' target='_blank'><strong>Share on Digg </strong></a></td>
</tr>
<tr>
<td height='24'><img border='0' height='16' src='http://lh5.ggpht.com/_TqPdHmAEwTM/Sgx1uAMIp7I/AAAAAAAAEDk/UvMj9nzDyJI/design_float.png' width='16'/></td>
<td height='24'><a expr:href='"http://www.designfloat.com/submit.php?url=" +data:post.url'><strong>Share on DesignFloat</strong></a></td>
</tr>
<tr>
<td height='24'><img border='0' height='16' src='http://lh4.ggpht.com/_TqPdHmAEwTM/Sgxdp80sUoI/AAAAAAAAEDQ/3eYyxtWAGpM/s128/technorati.png' width='16'/></td>
<td height='24'><strong><a expr:href='"http://technorati.com/faves/?add=" +data:post.url'>Share on Technorati</a></strong></td>

</tr>
<tr>
<td height='24'><img alt='Feeds RSS' border='0' height='16' src='http://lh5.ggpht.com/_TqPdHmAEwTM/SgxdH0I91sI/AAAAAAAAEDA/cDcvpz3WJug/feed.png' width='16'/></td>
<td height='24'><a href='http://feeds2.feedburner.com/BloggerFAQs'><strong>Subscribe to Feeds RSS</strong></a>
</td>
</tr>
</table></td>
</tr>
</table>
</div>
<div class='spacer' style='margin-top:10px;margin-bottom:10px;border-top:solid 1px #DEDEDE;margin-bottom:10px;'/>
</b:if>
<div style='clear: both; height:30px;'/>

The only change you need to do in the above code is to replace http://feeds2.feedburner.com/BloggerFAQs with your blog feed URL. After that, save your template and see the social bookmarking icons on your post page.

Feel free to comment for help in this tutorial or if you just want to say thanks.

Paper Wall Blogger Template

2009-07-11T07:46:00.000-07:00

Paper Wall is a cool new template by Smashing Magazine & INDEZINER. I've not seen such a beautiful and colorful template in a long long time, so, I've converted to Blogger in almost 5 hours (electricity failures).

Preview

OR

Download

OR

Alternative Download Link

Features:

1- Cross-browser compatible (Happy with IE6)

2- Colorful layout

3- Stylish date and comments

4- Excellent footer design

5- 2 columns

6- Top & bottom menu

7- Social bookmarking buttons

8- Built-in search box

9- Personal

10- Magazine

Thank you for downloading Paper Wall template. If you have any questions or just want to say thanks, feel free to comment.

How to Add a Cool Animated Favicon

2009-07-07T05:11:00.000-07:00

What is a favicon?

A favicon (short for favorites icon), also known as a website icon, shortcut icon, url icon, or bookmark icon is a 16x16 (or 32x32) pixel square icon associated with a particular website or webpage. (Wikipedia.Org)

How to install an animated favicon in a Blogger blog...

Go to Layout | Edit HTML and find </b:skin>. Paste the following code right after </b:skin> but before </head> tag. It should look like this:

</b:skin>

<link href='URL of .ico file' rel='shortcut icon' type='image/x-icon'/>

<link href='URL of animated .gif file' rel='icon' type='image/gif'/>

</head>

Remember: I'm using two files (.ico & .gif) because old internet browsers like Internet Explorer cannot display an animated favicon so we need to add a .ico file for this purpose.

Note: You can use a 32x32 .ico or .gif image file.

How to find and upload .gif and .ico files...

You can search on Google for keywords like "animated favicons" or "free .ico favicons" and then you can upload your files to Google Sites for free.

How to Add a Stylish Blog Search Engine

2009-07-06T12:22:00.000-07:00

You can add a colorful search engine to your blog with ease. Many people prefer to have a simple search engine but you can customize it to suit your taste or your blog outlook. Lets have a look at a simple search engine and then we can customize it.

A simple blog search engine

The code for this search engine is:

You can change two things in this simple search engine. One is value="Search!" where you can replace Search! with some other word like Go!. You can also replace value="Enter something here..." with some other line which will appear in the search box.

Customize this simple search engine to make it stylish and cool

Now, we have seen a simple search engine lets customize it by changing its width, height, colors & font size.

I've used two colors (black & white) to customize the outlook of our simple search engine and it's looking cool, lets have a look at its code and then we'll further customize it.

Now, I'll explain styling used in this search engine.

width: 150px; is defining width of this search engine, you can change it to a higher value for more width. Like if I change it width: 150px; to width: 200px; this is the result...

height: 15px; is defining height, you can change also change it to another number like when I changed height: 15px; to height: 20px; this happened...

color: #FFFFFF; is for white color. You can certainly have another color by entering it's hex code and if you don't know about hex codes then simple download ColorPic which is a free color capturing utility.

I changed the color: #FFFFFF; to color: #FFD900; which is kinda orange color and this is the result...

font-size: 14px; is for font size in px. I changed it to a lower value 10px just to show you the effect...

background-color: #000000; is for background color of the search box (not of button). Lets change it to background-color: #FF0000; which is for red color and see what happens.

Next things is the styling of our search button. border-color: #000000; is the border color of our search button, change it to border-color: #FF0000; and see the result...

background-color: #FFFFFF; is the background color of the search button, change it to #FFFF00 (yellow) and see what happens...

Last thing is color: #000000; which is the color of search button text, lets change it to #0000FF (blue) and the result is...

Installing this search engine in your blog

You can install this engine after all the customization in your sidebar by going to Layout | Page Elements and on your sidebar click Add a Gadget link. From the new opened window chose HTML/JavaSrcipt gadget and in the Title field write a title as you wish and in the Content area, add the code of your search engine. Click Save and enjoy.

A Dummies Guide to Compose Mode

2009-07-06T02:29:00.000-07:00

Where is the Compose mode?

When you're logged in to Blogger and you already have created a blog, you'll see a NEW POST icon under every blog, click on that icon and you'll be taken to an other page where you can create a post. This area is your Post Editor. and it has two modes i.e. Edit HTML and Compose. Our topic is all about Compose mode.

This is an overall look of the Blogger post editor (Compose mode).

Make sure, you're working in Compose mode which is on the right side of Title: field. Edit HTML is a difficult mode for beginners because of extensive coding work but Compose mode is fairly an easy thing.

Help! I can't see a Compose mode option in my post editor!

If you're unable to see a Compose mode option in the post editor then you need to see a setting. Go to your Blogger Dashboard | Settings | Basic and scroll down to second last option which is Show Compose Mode for all your blogs?. Make sure this option is seleted Yes and then click on SAVE SETTINGS at the bottom of the page.

The Title field in Compose mode!

When you're creating a post, the first thing you'll work with is your post title. Please be careful and enter a relevant title in this field because this is a critical component to search engines. I'm writing this tutorial on Compose mode, so, my title is "A Dummies Guide to Compose Mode" which is pretty relevant.

The toolbar with a lot of icons!

Toolbar is really our biggest help in Blogger Compose mode. It contains a lot of tools that will make our life easier. Move your cursor on any of these icons to see what they do. Let's start discussing these tools one by one...

1- Font

Blogger offers 8 different fonts which can be added to beautify our post. You just need to select the text which font you want to change and then select the font from the drop down menu. This fonts are:

1- Arial
2- Courier
3- Georgia
4- Lucida Grande
5- Times
6- Trebuchet
7- Verdana
8- Webdings

2- Font size

Second tool in our toolbar is about font size. We can select a text to and select it's size from this tool.

1- Smallest
2- Small
3- Normal
4- Large
5- Largest

3- Bold & Italic

These tool will simply make your selected text bold or italic.

4- Text Color

You can change your text to any color through this tool, it's really amazing and easy. Make sure you don't do any stupid things with this tool like your post background color is black and you're making your post text dark.

5- Link

This is maybe the most important tool and is used extensively. You might want to link to someone else' blog or some other site in your post then you can simple type in the name of that blog or site and click this tool, it will prompt you to enter a URL and you need to enter the URL (address) of that blog or site which you want to link.

For example, I want to link "Blogger" to "http://www.blogger.com/", so I'll type Blogger and press the Link tool and enter the URL (http://www.blogger.com/) and this is the result, click to see: Blogger

I would recommend you to read "Creating and Using Links in Blogger" for further information.

6- Align Left, Align Center, Align Right & Justify Full

When writing poems, these tools are really helpful to align your text like I'm writing some lines of a poem here with different alignments.

Be glad your nose is on your face,
not pasted on some other place,
for if it were where it is not,
you might dislike your nose a lot.
(Align Left)

Be glad your nose is on your face,
not pasted on some other place,
for if it were where it is not,
you might dislike your nose a lot.
(Align Center)

Be glad your nose is on your face,
not pasted on some other place,
for if it were where it is not,
you might dislike your nose a lot.
(Align Right)

Be glad your nose is on your face,
not pasted on some other place,
for if it were where it is not,
you might dislike your nose a lot.
(Justify Full)

7- Numbered List, Bulleted List & Blockquote

These tools are helpful to create lists. Numbered List will, of course, create lists with numbers like 1, 2, 3, 4 and so on. Bulleted List will not create numbers and it will only use some bullets to create lists.

Blockquote is a very rarely used tool. Select some text and click on Blockquote tool, your text alignment will change and it will be more distinguishable (easily recognizable) than the remaining text. This tool inserts a space before and after the selected text and also creates margin between selected and unselected text.

8- Check Spelling

It will check spelling mistakes in your post.

9- Add Image

This tool will help you to add images in your post from your computer or from the internet. Clicking this tool will cause a pop-up window to appear like this..

You can click Browse button to upload an image from your computer or you can directly enter an image URL (http://www.sample.com/sample.jpg) from the internet to include images in post. You can also select alignment of your image (None, Left, Center, Right) and upload size (Small, Medium, Large). If you check the Use this layout every time? option then you don't need to adjust the size and alignment of your images again and again.

I would recommend you to always chose Large as your image upload size and don't use image URLs from the internet to upload instead you can always upload image from your own computer. Blogger gives every one 1 GB free space for images, use it. See these articles on images:

How to Use Blogger for Uploading or Hosting Images

and

How to Post Large Images

10- Add Video

This tool will upload a video from your computer with maximum upload size of 100 MB.

11- Remove Formatting from selection

This is an awesome tool, it's like Undo tool we found in many many applications. Imagine you've selected a text and changed it's color but after some time you want to remove that color then simply selected the color text and click Remove Formatting from selection tool and see what happens.

Preview link

This link will show you a preview of your post i.e. how it will look like when you'll publish it online.

Post body

Post body is the central part of our discussion. Whatever we do, appears here, in a big white box under our toolbar. In the picture, the post body is highlighted in orange color.

Post Options Link

You need to click this link at the bottom to see what it contains. You can manage Reader Comments, Backlinks and Post date and time of every post through this link.

Labels for this post: & Show all link

You can also set categories for each post, in terms of Blogger categories are labels. For example I'm writing about this article about Blogger basics, so, my labels could be "Blogger Basics", "Basics", "Blogger Compose Mode" and so on.

PUBLISH POST & SAVE NOW buttons

The PUBLISH POST button will simple publish your post to the world of internet and SAVE NOW can save your post progress specially when you're writing long posts. However, Blogger automatically saves the post after regular intervals.

Return to list of posts link

This link will take you to the Edit Posts section of the Posting tab. You can see list of all your posts there. You can edit, view (online) or delete them.

How to Create Your First Blogger Blog

2009-07-05T13:32:00.000-07:00

Considering you're a Blogger beginner, I'll tell you how to create your first blog on Blogger.

1- Go to this link http://www.blogger.com/ and click on CREATE A BLOG button.

2- As Blogger is owned by Google, so, you need to create a Google Account. Type in all the fields but make sure that you already have an email address of any web service like Yahoo, Hotmail or Gmail. This Email will be your username in the future. After filling all the fields in this page, click CONTINUE button at the bottom of the page.

3- Your Google Account has now been created so you can create a blog on this page. Enter a Blog title (can be changed later) and a Blog address (can be changed later but not recommended). Please chose your Blog address wisely, it will be something like http://YOURNAME.blogspot.com/. After that click CONTINUE button to move on.

4- Now, you've also created your first Blogger blog. Chose a template from this page (can be changed later) and click CONTINUE.

5- Hurray, your blog is alive now. Stick to Blogger FAQs for further customization and tutorials about your blog.

Tip: See backup related articles here.

http://bloggerfaqs.blogspot.com/search/label/Backup

Tip: After creating your first blog, go to Official Blogger Help and see some basic tutorials.

http://help.blogger.com/bin/answer.py?hl=en&answer=112498

Top 10 Reasons to Chose Blogger CMS

2009-07-05T13:05:00.000-07:00

There are many services which can host your site and data for free but still majority choses Blogger. There are many reasons for choosing Blogger as your blog platform. I'm gonna briefly give them here.

1- Blogger is owned by Google.

2- Blogger services are absolutely free.

3- Thousands of free templates are available for Blogger.

4- Many gurus and helpers (like me) are there for help.

5- Google indexes Blogger hosted blogs faster than other blogs.

6- You get a free domain like http://bloggerfaqs.blogspot.com/ and you can also switch to a new custom domain at any time with ease.

7- You can use Adsense as well as any other forms of advertisements.

8- Customization is available with no boundaries.

9- Blogger provides unmatched security and reliability.

10- It's easy, believe me.

So, why don't you go to http://www.blogger.com/ and start blogging.

I'm Unable to Upload Pictures on Blogger

2009-07-05T02:32:00.000-07:00

If you're upload your photos in posts and it says Done but there is no photo in Post Editor then there is a simple solution to this problem.

Upload your photo as you do normally but when it says Done, don't close the photo uploading window. Right click on that photo and copy the image location.

Tip: In Firefox browser right, click | Copy Image Location.

Tip: In Google Chrome right, click | Copy Image URL.

Tip: In Internet Explorer 6, right click | Properties | Address:(URL).

Now you've the uploaded image URL, close that window and in the post editor, enter this code:

Replace IMAGE URL HERE with the URL of the image you copied earlier and instead of ALTERNATIVE TEXT HERE you can add some words regarding picture, these words will appear if, for some reason, the image can't be shown.

Let's check an example...

For example, I copied the URL of image in this post and now I'll use it in my post using this technique.

The code for this image is:

Create a scroll bar to make my example image completely visible!

As you can see that my example image is not completely visible but same image has a scroll bar on the top. You can also add a large image with a scroll bar. The scroll bar will automatically placed if the image has too much width. Use this code:

Actually, I have just added a property overflow:auto; which will create a scroll bar only if needed otherwise there will be no scroll bar.

Blogger Basics: Creating and Using Links in Blogger

2009-07-03T09:36:00.000-07:00

Links are a vital part of web and Blogger users also need to create links at many stages like in posts, sidebar gadgets or in your HTML source. Here is a simple guide on creating and using links in Blogger.

A simple way to create links in Blogger posts!

Blogger provides the simplest way to create links in posts. Whenever, you're writing a post, simply select the text which you want to be linked and click the insert link tool in the post editor toolbar.

The insert link tool will prompt you to add a URL to link, insert the URL and you're done. If you're working in Compose mode then you'll only see the text which is linked, to see the complete link, you need to switch to Edit HTML mode where link structure is something like this:

<a href="URL here"> Title here </a>

This link will open in the same window but if you want to make this link open in a new window then you can make a little change in it by changing it to:

<a href="http://www.howstuffworks.com" target="_blank"> HowStuffWorks </a>

Now, this link will open in a new window and your visitor will not leave the blog.

Add picture links in Blogger posts!

This is very simple, just upload an image and you'll see some code like this:

Just replace the red colored URL with the URL of your link and your image will be linked to that URL.

How to create or add links in the sidebar gadgets!

You can also add links in your sidebar gadgets. Again, Blogger has made it simpler for you to add links by giving a Link List gadget.

To create a Link List, go to Layout | Page Elements and click on Add a Gadget. A small window will pop-up, scroll down and select Link List.

In this gadget, you can add as many links as you want.

Blogger SEO: Submit Blog to Major Search Engines

2009-07-03T09:18:00.000-07:00

Site or blog subission is a really essential task that every webmaster or blogger should do. You can submit your site to 3 major search engines through following links.

1- Submit your blog to Google.

http://www.google.com/addurl.html

2- Submit your blog to Yahoo.

http://siteexplorer.search.yahoo.com/submit

3- Submit your blog to Microsoft Bing.

http://www.bing.com/toolbox/webmasters/

Tip: Many web search engines like Alta Vista and Lycos use other search engines like Yahoo and Google to power their search, so don't worry about submitting site to them.

Blogger Tutorial: How to Customize Post Body Font

2009-07-02T12:53:00.000-07:00

You can customize post body font in any expect like color, size, style or family. First, you should know what is the default CSS code for post body and then we'll customize it according to our own taste. Go to Layout | Edit HTML and find this code:

The default code of posts!

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}

Understand the default code!

1- margin:.5em 0 1.5em; is defining spacing between post and other elements in the blog like sidebar and header.

2- border-bottom:1px dotted $bordercolor; it very descriptive. It creates a dotted border at the bottom of the post with width 1px.

3- padding-bottom:1.5em; causes some space between posts and other elements at the bottom. The other elements could be labels, comments or date.

Make changes in the default code!

Now, I've given you some idea about the post body style definitions. By default, the font properties are not defined specifically for posts but we can easily do this by applying some simple CSS techniques.

1- How to change font size in post body!

You need to add font-size:15px; property in the default CSS code:

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
font-size:15px;
}

Tip: Try increasing or decreasing 15px to increase or decrease font size.

2- How to change font color in post body!

You need to add color:#FFFFFF; in the default definitions:

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
color:#FFFFFF;
}

Tip: #FFFFFF is the hex code for white color, you can capture any color you see on your computer or on web and get the hex code of that color through a free utility ColorPic.

Remember: This property will not effect hyperlinks (?) in the post body, I'll tell you about hyperlinks customization later in this article.

3- How to change the font family in post body!

Font family means that you can control which font will be used to display post body. You can have Arial, Times New Roman, Georgia, Serif and many many more. So, you'll need to apply font-family:"Times New Roman",Georgia,Serif; property for this purpose.

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
font-family:"Times New Roman",Georgia,Serif;
}

Tip: I've added 3 fonts in font-family:"Times New Roman",Georgia,Serif; property, why? Because my user might not have Times New Roman installed on his/her computer then the second font Georgia will be used and similarly Serif can also be used.

Tip: See following article about CSS font family properties for information.

http://www.w3schools.com/css/pr_font_font-family.asp

4- How to change the style of post body font!

Remember: You might not need this property but this is useful for better understanding of your fonts.

By style, I mean you can make your font italic through font-style:italic; property.

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
font-style:italic;
}

Remember: If you'll not add this property in default definitions then your post body font will be displayed normal.

Tip: Blogger post editor provides an easy way to make specific part of text italic. When creating a post, select your text and click the i icon which is the second icon on toolbar.

How to apply these properties on hyperlinks (?) in my post body!

Some of the above described properties will not effect hyperlinks (?) in the post body and there are no definitions in default Blogger CSS for hyperlinks (?) so lets add our own definitions.

This is the deafault code:

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}

Add some more juice in it:

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
.post a {
color:#FF0000;
text-decoration:underline;
text-transform:uppercase;
}

Now, I'll explain all 3 properties added in .post a {} tag.

1- color:#FF0000; is the hex code for red color, you can hex code of some other color to change it.

2- text-decoration:underline; will make your post hyperlinks (?) underlined, you can change this to text-decoration:none; if you don't want to apply it.

3- text-transform:uppercase; will change your hyperlinks (?) to transform to uppercase. You can change it to text-transform:lowercase; if you want your hyperlinks to display in lowercase or you can change it to text-transform:none; to nullify this effect.

How to customize the hyperlinks (?) for mouse over event (hover effect)!

You can also further customize the font appearance when mouse comes over your hyperlinks. For example you might want to change the color of your hyperlinks on mouse over or make it underlined or maybe change the font size.

This is our default CSS + hyperlinks CSS we added in the previous steps:

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
.post a {
color:#FF0000;
text-decoration:underline;
text-transform:uppercase;
}

Add even more juice in it:

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
.post a {
color:#FF0000;
text-decoration:underline;
text-transform:uppercase;
}
.post a:hover {
color:#0000FF;
text-decoration:none;
text-transform:lowercase;
}

Now, I'll explain some changes I've made.

Note: All the properties in .post a:hover {} will be visible only when you'll move mouse over the link.

1- The color will change to blue (#0000FF).

2- There will be no decoration of text. Previously, we applied text-decoration:underline; property to make our hyperlinks underlined but when mouse will come over, it will not be underlined.

3- On mouse over, our hyperlinks will become lowercase.

Tip: "On mouse over" is called "hover effect" in CSS references.

Before you leave!

I've tried my best to share my knowledge with you, if this article has really helped you then you can comment or tell other people about it through social networking. Any question, comment or suggestion will be greatly appreciated, thanks.

Blogger Tools: Online Image Optimizer

2009-07-02T04:18:00.000-07:00

Q- Why my site takes too much time to load?

Q- Why it takes so long to upload my images?

Q- Is there an easy way to make my digital images small in size?

Ans- Yes!

Image Optimizer lets you easily optimize your gifs, animated gifs, jpgs, and pngs, so they load as fast as possible on your site. Furthermore, you can easily convert from one image type to another.

This is a great free tool from Dynamic Drive, just go to http://tools.dynamicdrive.com/imageoptimizer/ and you can either upload an image from your computer or you can give the URL of an already uploaded image. Your images will be compressed and optimized within seconds!

Tip: Use JPG as your image output for maximum optimization.

Blogger Error: How to fix "Can't Create New Post Error"

2009-07-01T12:54:00.000-07:00

A lot of people are reporting in official Blogger forums about this problem. Most of them, when try to create a new post, receive notorious bx errors (bX-xovb7t). Thanks to the rapid feedback, a Blogger employee Gatsby has finally given the solution in the forums but you can see it here.

=> Official fix from Blogger

1- Go to Settings | Formatting. troubleshoting

2- Scroll down and see the last option Post Template, it has a small box in front of it, remove any code in that box.

3- Click SAVE SETTINGS button.

4- That's it.

Note: If you've installed a classic Read More hack, then you might have some code in Post Template box. If you don't want to remove that code then you need to properly close all the tags in it. If you're not comfortable with that, leave me a comment, I'll be happy to help you.