Blogger Tips And Tricks

First you must upload these 3 images to your hosting image service.Replace "URL of your own image" with your real Urls.

1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Now follow these steps to replace codes :-

(A)Scroll down to where you see this:-

<data:newerPageTitle/>

Replace above line with

<img src='URL of your own image'/>

(B)Scroll down to where you see this:-

<data:olderPageTitle/>

Replace above line with

<img src='URL of your own image'/>

(C)Scroll down to where you see this:-

<data:homeMsg/>

Replace above line with

<img src='URL of your own image'/>

4.Click on "Save Templates" and Refresh your site.

1.Log in to your dashboard--> layout- -> Edit HTML
2.Click on "Expand Widget Templates"
3.Scroll down to where you see this:

<p class='post-footer-line post-footer-line-1'> <span class='post-author'> <b:if cond='data:top.showAuthor'> <data:top.authorLabel/> <data:post.author/> </b:if> </span>

4.Replace <data:post.author/>  with below code.

<a href="URL OF YOUR BLOG"><img src="URL OF YOUR PICTURE" /></a>

5.Click on "Save Templates" and refresh your site.
Note : Remember to give your real information to URL OF YOUR BLOG and URL OF YOUR PICTURE.  

1.Log in to your dashboard--> layout- -> Edit HTML
2.Click on "Expand Widget Templates"
3.Scroll down to where you see this:

<p class='post-footer-line post-footer-line-2'> <span class='post-labels'> <b:if cond='data:post.labels'> <data:postLabelsLabel/> <b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if> </b:loop> </b:if>

4.Replace the line <data:postLabelsLabel/>  of above code with your own name,like" CATEGORIES".
5.Click on "Save Templates" and refresh your site.

1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:-

<p><data:post.body/></p>

Add Page Popularity Widget

Paste the below code just after <p><data:post.body/></p>.

<img expr:src='"http://foxrecord.appspot.com/rating?url=" + data:post.url + "&amp;title=" + data:post.title' />

Add Top popular pages widget

Paste the below code just after <p><data:post.body/></p>.

<script src="http://foxrecord.com/scripts/gettop.js" type="text/javascript"></script>

4.Click on "Save Templates" and you are done.

1.Log in to your dashboard--> layout- -> Edit HTML
2.Click on "Expand Widget Templates"
3.Scroll down to where you see this:

<p class='post-footer-line post-footer-line-2'> <span class='post-labels'> <b:if cond='data:post.labels'> <data:postLabelsLabel/> <b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if> </b:loop> </b:if>

4.Replace the line  <data:postLabelsLabel/>  with below code.
<img src="URL OF YOUR IMAGE " alt="BLOG TITLE" />

1.Log in to your dashboard--> layout- -> Edit HTML
2.Click on "Expand Widget Templates"
3.Scroll down to where you see this:

<span class='post-author'> <b:if cond='data:top.showAuthor'> <data:top.authorLabel/> <data:post.author/> </b:if> </span>

4.CUT above code and paste it in the same blog widget below this line :

<div class='post-body'>

5.Click on "Save Templates" and refresh your site.

1.Log in to your dashboard--> layout- -> Edit HTML

2.Scroll down to where you see this:

#header-wrapper { width:800px; margin:0 auto 10px; border:1px solid $bordercolor; }

Note :- width:660px can be different value.
3.Now Replace the above code with the below code.

#header-wrapper { width:800px; margin:0 auto 10px; border:1px solid $bordercolor; display:none; }

Done. above code hides your blog header.
4.To use a image instead header,find the below code.

<div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='your header title' type='Header'/> </b:section> </div>

5.Now paste the below code just after the above code.

<a href="URL_OF_YOUR_BLOG"><img src="URL_OF_THE_IMAGE" alt="Home" /></a>

6Click on "Save Templates" and you are done.

1.Log in to your dashboard--> layout- -> Edit HTML

2.Scroll down to where you see this:

  </head>
3.Add below code into your template just above the </head> tag.

#belowheader-wrapper { width:890px; margin:0 auto 10px; overflow: hidden; }

Note : You can change width:890px to equal the width  to your Header wrapper.
4.Now Scroll down to where you see this:

<div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='Your header title' type='Header'/> </b:section> </div>

5.Now paste the below code just after the above code.

<div id='belowheader-wrapper'> <b:section class='belowheader' id='belowheader' preferred='yes'/> </div>

6.Click on "Save Templates" and you are done.

1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"
3.Scroll down to where you see </head> tag.
4.Now add below code before </head> tag.

<script src='http://wam8387.110mb.com/FancyZoom.js' type='text/javascript'/> <script src='http://wam8387.110mb.com/FancyZoomHTML.js' type='text/javascript'/>

5.Now replace the <body> tag with <body onload='setupZoom()'>NOTE : If in your template already has <body onload="setupZoom()"> code instead <body> tag ,skip this step.
6.Now save your template.
You have already add zoom effect for images.But,to zoom image you have to use this new form :

<a href="Image link"><img src="Image link" width="200" border="0" height="200" />

You must replace 'Image link' with your real url of image.You can change Height,Weight,.....Look at the example below.
<a href="http://img2.pict.com/aa/ae/97/16680dfb7c10435cbefea4aa04/4OXiK/geneliadsouzawallpaperspicturesd.jpg"><img border="0" width="200" src="http://img2.pict.com/aa/ae/97/16680dfb7c10435cbefea4aa04/4OXiK/geneliadsouzawallpaperspicturesd.jpg" height="200"/></a>

It will look like this.click on the picture to see effect.

Read this : When you add this effect inside post if come html errors , check the box 'Stop showing HTML errors for the body of this post' and publish your post.Good Luck.

1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"
3.Scroll down to where you see this:

a:hover { text-decoration:underline; }

4.Now Replace the above code with the code given below:

a:hover { position: relative; bottom: 5px; left: 1px; color:#000000; }

5.Click on "Save Templates" and refresh your site.
Note : You can change the color of your link to your desired color when it tweaks.