0. Blogger Templates
http://www.bestbloggertemplates.net/
http://www.mytemplatez.com/product/Template/Blogger-Templates/?stc=4gO
http://www.mytemplatez.com/products/index/Template/Blogger-Templates/?sortBy=top_rated
http://www.besttheme.net/
http://templatesblock.com/
http://www.bloggerstyles.com/

Fantastic Coffee Desk Template or here , also here and here

1. Fonts
1.1 Click here to see How to Add Custom Fonts to Blogger

1.2 Check kernest.com for online fonts that can be accessed by your webpage.
You can use these fonts inside a CSS file in the following way:
@font-face {
font-family: 'Komika Axis';
src: url('http://fonts.kernest.com/embed/komika-axis.eot?') format('eot'),
url('http://fonts.kernest.com/embed/komika-axis.ttf') format('truetype'),
url('http://fonts.kernest.com/embed/komika-axis.woff') format('woff'),
url('http://fonts.kernest.com/embed/komika-axis.svg#komikax') format('svg');
}

1.3 Furthermore you can use fonts of kernest.com by using their css file directly from your web page using html:
<link href="http://kernest.com/fonts/komika-axis.css" media="screen" rel="stylesheet" type="text/css" />
<!--//
    1. Paste this embed code into your website
    2. Use the fonts like this inside html or in you css declarations:
      <p style="font-family: 'Komika Axis'; line-height: 140%; text-rendering: optimizeLegibility" Test </p>
Same use for <span>, <div> , etc.

1.4 More Free Fonts
http://www.broble.com/download-free-font/serifgothic-openshadow-alt/
http://openfontlibrary.org/fonts
http://www.400fonts.com/
http://www.1001freefonts.com/
Notice that most of them are available for downloading only (not online direct use) and that means that you have to "upload" them somewhere (i.e your web site folder) in order your browser and your visitors browser to be able to read the fonts and display the page correctly.

1.5 CSS Font Tutorials

2. Add and Customize NewsLetter by feedburner.
You have to login at google feedburner, in order to "drive" your rss feed to "feedburner".
Once feedburner is able to receive your blog's news, then feedburner is able to built a newsletter for you.
Feed Burner is able to give you html code in order to insert in your blog a widget to allow people to "subscribe" in your blog.

2.1 Original Code given by Feed Burner:
<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=RedMoonNews', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="RedMoonNews" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" /><p>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a></p></form>

2.2 Modified Code as appears on blog http://redmoongr.blogspot.com/
<form style="border: 2px solid #ccbb99;text-align:center;" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=RedMoonNews', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow"><span style="font-size: 20px;font-family: impact,arial;letter-spacing:0.2em;">Red Moon Newsletter <br/> </span>

<input onfocus="this.value=''" style="width:158px;" name="email" value="Enter E-mail address here..." type="text" />
<input value="RedMoonNews" name="uri" type="hidden" />
<input name="loc" value="en_US" type="hidden" />

<input type="image" style="margin-bottom:-12px;width:35px; height:35px;" onclick="submit" src="http://rexandfritz.com/wp-content/uploads/2010/07/email-subscribe-button.jpg" />
<br /><br />
</form>

2.3 More Customized widgets :
<form style="border:1px solid #ccc;padding:3px;text-align:center;background: transparent url(http://www.comune.grugliasco.to.it/imgs/news/newsletter1.jpg)no-repeat scroll center center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=RedMoonNews', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input type="text" style="width:240px;text-align:center;" name="email" value="Enter your email address" onfocus="if(this.value==this.defaultValue)this.value=" ;" onblur="if(this.value==" )this.value="this.defaultvalue;"/" /><input type="hidden" value="RedMoonNews" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" class="button"/></form>

-----------------------------------------------------------------------------------------------------------
<style type="text/css">
    div.feed-subscription {
    background: transparent url(http://i32.tinypic.com/1z4efxy.jpg) no-repeat scroll center left;
    padding: 10px;
    border: 1px solid #ee7411;
}
div.feed-subscription:hover {
    background: transparent url(http://i29.tinypic.com/20kw102.jpg) no-repeat scroll center left;
}
</style>
<div class="feed-subscription">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=YOUR_BLOG_NAME', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
    <input type="text" style="width:140px; height: 24px;" name="email" value="Email address here..." onfocus="this.value=''"/>
    <input type="hidden" value="YOUR_BLOG_NAME" name="uri"/>
    <input type="hidden" name="loc" value="en_US"/>
<input type="image" style="margin-bottom:-12px;" onclick="submit" src="http://rexandfritz.com/wp-content/uploads/2010/07/email-subscribe-button.jpg" />
</form>
</div>

------------------------------------------------------------------------------------------------------------
<div class='email-com'>
Subscribe via Email
<form action='http://feedburner.google.com/fb/a/mailverify' id='feedform' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=tech-n-com', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input class='textarea' name='email' onblur='if (this.value == "") {this.value = "Enter email address here";}' onfocus='if (this.value == "Enter email address here") {this.value = "";}' type='text' value='Enter email address here'/>
<input name='uri' type='hidden' value='tech-n-com'/>
<input name='title' type='hidden' value=''/>
<input name='loc' type='hidden' value='en_US'/>
<input class='emailsubmit' type='submit' value='Submit'/>
</form>

2.4 More Resources for customizing widget
http://www.tipsblogger.com/2008/09/how-to-customize-your-feedburner-email-subscription-form-part-1/
http://www.techncom.net/2011/02/how-to-customize-feedburner-email.html#ixzz1ZpFgiTyN
http://rexandfritz.com/wp-content/uploads/2010/07/email-subscribe-button.jpg
http://www.inspiritblog.com/22/how-to-customize-the-feedburner-email-subscription-form-for-your-blog/

3. Pictures Light Box Enable:
http://www.bloggerplugins.org/2011/09/official-blogger-light-box.html

4. Customize Blog Header , blog description

#header h1 {margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-decoration:none;
text-transform:uppercase;
letter-spacing:0.4em;
font-weight: bold
font-size: 60px;
font: $pagetitlefont;
/* font-family: arial, "lucida console", sans-serif; */
}

#header h1 a:hover {Enter code here to be activated when mouse over
}

.header .description {
Edit Code here to change the header (blog) description appearance
}

5. Modify Blogger Footer (attribution)
You can disable standard (and usually locked) blogger footer (attribution) by adding the following CSS rule on the custom CSS section : #Attribution1 {display: none;}

You can now insert your own custom footer, by adding a new text box (at layout set up), put inside the bellow html code and at the end drag this new box and drop it under the attribution widget . Thus this new text bow will be the last item on your blog page.
Code:
<p style="TEXT-ALIGN: center; LETTER-SPACING: 0.1em; font-family:impact, arial;font-size:20px;" >Red Moon Ltd, 2011 - All Rights Reserved </p>

Now you have a custom footer, check this one here: http://redmoongr.blogspot.com/

Customize the "pagelist" widget of your blog
Although some customization is available thru blogger control panel, for more custom things you need to add some CSS coding in the "custom CSS" section of blogger.

6. Modify Widgets
More Tips : http://www.blogbulk.com/2010/03/widget-customization-how-to-style-each.html
In General, you can modify widgets at custom CSS section, by referring the widget id (like LinkList1, Label1, etc). You can easily see what is the widgetID you want to modify, in the Layout screen when you move your mouse on the widget you want to change. You will see at the bottom of the screen the "link" that your browser will call to let you modify a widget. In this link the widgetID is always included.

Code bellow modifies widget ID = Label1

#Label1 {
position:absolute;right:10px;top:0px;width:135px;color: #000000; text-align:center;padding: 26px 10px 0 10px; text-decoration:none;background:url(http://i36.photobucket.com/albums/e2/alvaris924/coffeedesk/bg_menu1.png) no-repeat top center;}

You can modify even each line of Label1 (label list widget) by using

#Label1 ul li:first-child a

Another way to modify the appearance of a page list widget
.tabs-inner .widget li:first-child a {
font-size: 20px;
font-family: impact, arial, "lucida console", sans-serif;
background: transparent url(http://studentpages.ntzb.org/studentpages/2012/reyese/Website%20Pictures/320_HomeIcon.png);
/* background-size:contain; */
background-size:160px 40px;
background-repeat:no-repeat;
}

Modify the appearance of the Second List item
.tabs-inner .widget li:nth-child(2) a {
font-size: 20px;
font-family: impact, arial, "lucida console", sans-serif;
}

Tip: Use Link List as Page List or Label List (tags list)
In case you are using a template provided by others (i.e Coffee Desk) some widgets are already pre-installed like LinkList1.
Taking a look in blogger Layout adjustment screen this LinkList1 appears with a name "menu" above main header. This "menu" it is actually a link list widget and can be configured by blogger in the way that a link list widget is configured.
So using blogger to configure this "menu" widget you can give whatever "link" names you like, but instead of using external links (to other web sites) you can apply internal links similar to label listing ( http://coffeebreakgr.blogspot.com/search/label/Crafting )

7. Hide the (top) Navigation Bar
Add code bellow to custom CSS area.
#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}
8. Add an Icon to IE / FF status bar
Edit your blog template in html format, and find the bellow line at the top of html code.
<title><data:blog.pagetitle/></title>
Bellow this line, add the following code:

<link href='ICON FILE URL' rel='shortcut icon'/>
<link href='ICON FILE URL' rel='icon'/>

replace "ICON FILE URL" with the http url that your icon is hosted.
Notice that icon should be 16X16 / 32X32 / etc.

9. Add e-mail me button to your blog
In the blog layout insert a new html widget and apply the following code.
You can change the photobucket image with your own image (hosted somewhere).

<a href="mailto:abc@gmail.com"><img src="http://i219.photobucket.com/albums/cc286/7kranthiswaroop/thenvelope.gif" alt="Email me" width="120" height="57" border="0" /></a>

10. Customizing comments
Fantastic Tutorial (and demo) here:
http://www.blogbulk.com/2008/11/customizing-embedded-comments-below.html

And some real examples applied to http://redmoongr.blogspot.com/

10.1 Change the default "leave a comment" text to something else , even in other language
Original Code (html - expanded view) : <h4 id='comment-post-message'><data:postCommentMsg/></h4>
New Code : <h4 id='comment-post-message' style='margin:-0.2em'> Σχολίασε το.....</h4>
Tip 1: I also applied a style in the text, since i want to move the text more to the left. I already tried text-align:left, the result was ok (text placed at left) but i want the text to be more left than std left align.
Tip 2: If in the CSS section you have applied some code for modifying .comment-form , since the above text is an element belonging to comment form , the styles applied to CSS section will overide the styles applied between <h4></h4> html code above.

10.2 Modify the dimensions of the default comment box
I applied the bellow code in order to "extend" the comments box.
Original Code (just after the code described in 10.1) :
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>

Custom Code
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='310' id='comment-editor' name='comment-editor' src='' width='165%'/>

10.3 Modify text appearance of comments / author / date etc.
Real Code applied to blogspot water mark template , custom CSS section.

.comments h4 {margin: 1em 3em; line-height: 1.4em; font-size: 20px; font-family: impact, arial;}

.comment-body p {
/* this sets properties for each comment, like a background image */
margin:0 0 0.75em; padding: 30px 20px 20px 20px; background: #f3a64c url(http://i38.tinypic.com/27yu1xl.jpg) no-repeat top left;}

.comment-footer {position: relative; margin: -1.90em 0 2em; left: 10px; line-height: 1.4em; letter-spacing: .1em; }

.comment-author {margin:-.5em 0; font-size: 15px; font-family: impact, arial; color: #993322; letter-spacing: .1em;}

/* .comment-form {background: #f3a64c url(http://i38.tinypic.com/27yu1xl.jpg) no-repeat top left;} */
/* a test to apply a pci to comment form */

.comment-form {position:relative; left: 50px; margin:9.5em 0; font-size: 15px; font-family: impact, arial; color: #993322; letter-spacing: .1em;}

PS : Check this out .... http://www.blogger.com/comment-iframe.g?blogID=6814493924815185810&postID=6052666645430140926

http://i36.photobucket.com/albums/e2/alvaris924/coffeedesk/bg_menu1.png

11. Customize the Jump Break (read more)
Tips provided by :
http://www.simplebloggertutorials.com/2009/09/customize-read-more-option-new-feature.html
http://social-demo-sbts.blogspot.com/

Open the expanded html view of your template and locate the original code bellow:
    <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>

(a) If you don't like the automatic jump to the second half of the post when you press <read more>, then delete + "#more" from the code above.

(b) Instead of text you can insert an image to appear in "read more" position.....
Final Code should look like this:
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><img src="http://www.accuglobe.net/Images/more_button.gif"/></a>
</div>
</b:if >

(c) You can change "read more" text manually by editing in HTML mode
Final Code should look like this:
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'>Continue reading!</a>
</div>
</b:if>

(d) You can apply custome colours (background / text) by adding some CSS, like this

.jump-link a {
padding: 4px;
background-color: #000; /* If you want to have a background color to the Read more link otherwise delete it */
color: #fff; /* Changing the Jump Break link color */
}
.jump-link a:hover {
padding: 5px;
background-color: #fff; /* Changing the background color on hover otherwise same as above. */
color: #000; /* Changing the Jump Break link color on hover */
}

(e) Using CSS you can as well adjust the position of the jump break element (no matter if it is text or image).
As well by using font properties you can adjust font weight , spacing , font used (i.e tahoma), size (i.e 60px) etc.
This is a simple code used in web page redmoongr.blogspot.com
.jump-link a {
/* padding: 4px; */
/* background-color: #000; */
/* color: #fff; */
/* letter-spacing:0.4em; */
/* font-size: 20px; */
/* font-family: impact, arial; */
/* text-align: right; */
position:relative;
right: -600px;
/* bottom: 50px; */
}
12. Customize Post Titles (headers of post).
Add some CSS like the following in the Custom CSS tool
.post h3 {
/* Post Title */
letter-spacing:0.2em;
font-family: impact, arial;
}
Want more customization for post titles / headers ? Check this out :
http://www.blogbulk.com/2008/12/post-title-customization-blogger.html

12. Bugs:
Look at the custom CSS code bellow
@font-face {
font-family: 'Komika Axis';
src: url('http://fonts.kernest.com/embed/komika-axis.eot?') format('eot'),
url('http://fonts.kernest.com/embed/komika-axis.ttf') format('truetype'),
url('http://fonts.kernest.com/embed/komika-axis.woff') format('woff'),
url('http://fonts.kernest.com/embed/komika-axis.svg#komikax') format('svg');
}

#header h1 {
letter-spacing:0.4em;
font-size: 60px;
color: #eeddbb;
font-family: "Komika Axis", impact;
}

Bug Result:
When you look at this blog by IE 7.0 , blog title appears correctly by using the custom font Komika.
The same blog viewed by FireFox 7, displays the blog title with impact font (web font provided by blogger.com).

13. More Tips and Resources
How to Make your Blogger Blog ready for Mobile Phones