Latest Blogger|Blogspot Tips And Tricks

Zinmag Monezine Template

2009-06-05T04:43:00.000-07:00

I found this nice blogger template in www.bloggerblogtemplates.com . It has nice structure and easily setup. This is very suitable to any blogger .

The Monezine templates starts off with a thin strip before the blog title that hols the post and comments RSS icon and a search bar on the far right. Below that is space for the blog title as well as a big leaderboard advertisement on its right. Then we have two drop down menus that enable you to categorize your blog very well.

The speciality of monezine is that it enables you to monetize your blog, the featured content slider in this blog allows you to insert a leaderboard advertisement on each of these slides.

After that starts the main column, the best part about this template is that you do not need to put code for the readmore as its automatically done by the template. Under the headline we have the posted by author stamp and the date with complimenting icons.

Where the mini post on the home page ends there is a thin seperator line with the read more link with an icon on the right and a comment count on the left with a speech bubble icon. The sidebar is multicolumn, a single column that branches off into two, with a three column tab widget built into it along with ad boxes.

DOWNLOAD HERE !

How To Create Recent Articles Widget using Feed2JS

2009-05-20T23:49:00.000-07:00

1.First Go to Feed2JS Website.Look at the picture below.

2.Now fill in the form above.

URL Enter the web address of the RSS Feed :

http://yourblogname.blogspot.com/feeds/posts/default

Fill Other informations as your choice.Look at the example below.

3.Now Click on 'Generate JavaScript'.Now you can get your JavaScript code.

4.Log in to your dashboard--> layout- ->Page Elements

5.Click on 'Add a Gadget' on the sidebar.

6.Select 'HTML/Javascript' and add your JavaScript code and click save.

Now You are done.

How To Add Zoom Effect for images

2009-05-20T23:46:00.001-07:00

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.

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 :

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.

How To Create SnapShots for blogger blog

2009-05-20T23:44:00.000-07:00

This allows web users to preview a website before visiting it. When hover your mouse over the link you can see a preview of website without visiting it.

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

2.Scroll down to where you see this:

</body>

3.Now copy below code and paste it before above code.

Note : red code is a HEX color code.You can change it if you like.

4.Now save your template and you are done.

How To Add FeedFlare below your Blog Post

2009-05-12T04:52:00.000-07:00

1. Login to your Feedburner account.

2. Click on the Feed Title.

3. Click on Optimize Tab.

4. Click on FeedFlare.

5. Check on the services you want to display in your Feed or on your Site.

6.There is a FeedFlare Preview/Ordering below the list of services. This lets you see how FeedFlare will appear in your feed and/or on your site. Just Click and Drag the links on the location that you want.

7.Click on "Activate".Now You will get this message.

8.Now in this window Before the Save button, there is a "Get the HTML code to put FeedFlare on your site". Choose the Blogging Platform as "Blogger"

9. A pop-up window will appear and it contains the instructions on how you embed the Feed burner FeedFlare on your blog.Just follow the instructions.Now wait about 20 minutes and refresh your site.Look at the example below.

Another Good Post Rating Widget for bloggers

2009-05-10T19:35:00.001-07:00

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

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:

<data:post.body/>

4.After the above code , copy and paste the code below:

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

How To Give New look to Your Links

2009-05-10T19:33:00.000-07:00

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.

How To Add StumbleUpon Button in Every Bogger Post

2009-05-08T20:39:00.000-07:00

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

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:

<data:post.body/>

4.After the above code , copy and paste the code below:

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

It will look like this.

How To Add Icons on Every Blogger Widget of Blogger

2009-05-08T20:05:00.000-07:00

Adding Icons on your Every Blogger Widget , you can give a good look to your blog.Follow these simple steps to do it.

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

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:

.main .Blog {
border-bottom-width: 0;
}

4.After the above code , copy and paste the code below:

.sidebar .widget h2 {
background: yellow url('URL OF YOUR IMAGE') no-repeat left top;
margin-top:5px;
text-indent: 20px;
padding:7px;
}

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

Note : You must replace URL OF YOUR IMAGE with your image(Icon) URL.

You can change background colour and other values of above codes if you like.

How To Add Blogger Login Form Widget For Blogger

2009-05-04T01:06:00.000-07:00

1.Log in to your dashboard--> layout

2.Click on "Add a Gadget".Pop-up window will open.Now select "HTML/Java Script"

3.Copy below code and Paste it into it.

Enter your username and password to enter your Blogger Dasboard <br/><br/><form action="https://www.google.com/accounts/ServiceLoginBoxAuth" method="post" onsubmit="onlogin()"><input value="http://www.blogger.com/loginz?d=%2Fhome&p=http%3A%2F%2Fwww.blogger.com%2F" name="continue" type="hidden"/><input value="blogger" name="service" type="hidden"/><input value="8" name="nui" type="hidden"/><input value="8" name="naui" type="hidden"/><input value="2" name="fpui" type="hidden"/><input value="3" name="uilel" type="hidden"/><input value="true" name="skipvpage" type="hidden"/><input value="false" name="rm" type="hidden"/><input value="true" name="alwf" type="hidden"/><input value="http://www.blogger.com/login.g" name="roeu" type="hidden"/><input value="0" name="alinsu" type="hidden"/><input value="WbQ8QiJfUvA" name="GA3T" type="hidden"/><div><label for="Email"> Username: <br/><input id="Email" tabindex="1" value="" name="Email" size="20" type="text"/></label></div><div><label for="Passwd"> Password: (<a href="https://www.blogger.com/forgot.g" target="_top" title="Forgot your password?">?</a>) <br/></label><input id="Passwd" tabindex="2" autocomplete="off" name="Passwd" size="20" type="password"/></div><br/><input id="signin-btn-ns" tabindex="0" value="Sign in" class="ubtn ubtn-block" name="submit" type="submit"/></form>

4.Now Click Save and Refresh your site.Look the example below.

Enter your username and password to enter your Blogger Dasboard

How To Split Header Column to 2 Columns

2009-05-03T08:52:00.000-07:00

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

2.Scroll down to where you see code like this:

/* Header
===================================
*/
#header-wrapper {
width:900px;
margin:0 auto 0px;
height:190px;
}

#header-inner {
width:900px;
background-position: center;
margin-$startSide: auto;
margin-$endSide: auto;
}

#header {
margin: 0px;
text-align: left;
color:$pagetitlecolor;
}

3.Replace above code with below code.

/* Header
===================================
*/

#header-wrapper {
width:900px;
margin:0 auto 0px;
height:190px;
}

#head-inner {
width:600px;
background-position: left;
margin-left: auto;
margin-right: auto;
float:left;
}

#header {
margin: 0px;
text-align: left;
color:#ffcc66;
}

#r_head{
width:300px;
float:left;
padding-top:10px;
}

4.Now again Scroll down to where you see code like this :

5.Replace above code with below code.

6.Click on "save Template" and you are done.

How To Add "Read More" Feature To Blogger Post

2009-05-03T01:32:00.000-07:00

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

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:

4.Replace above code with below code.

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><strong>Read more...</strong></a></p>
</b:if>

5.Click on "Save Templates"

6.Now go to Setting-->formatting-->Post Template.

7.Fill that "Post Template" blank text area with below code :

Look at the picture below.

8.Click on "Save settings"

9.When you post your article, choose "Edit Html" tab. and you will see the code below :

Look at this image.

10.Place the paragraps you want show with read more, above of below line.

11.Place the rest of the post (you want to hide) between below 2 lines.

Look at the image below.

12.Then Publish your post.You are done.

Note :If you want to add this feature to your old posts ,do the 9-12 steps to each posts.

How To Make a Table Of Content

2009-05-02T22:13:00.000-07:00

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

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:

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

4.Replace above code with the below code :

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

5.Click on "Save Templates".

6.Click on Layout tab.Now Click on Add a Gadjet.Now Select "HTML/Java Script".

7.Copy below code and Paste it into the "HTML/Java Script" pop up window.

Note : You must replace YourBlogName with your real blog name and you can change the value of max-results=200 .

8.Now click Save and you are done.

Add Related Post Widget to Blogger-For Modified Templates

2009-05-02T20:02:00.000-07:00

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

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:

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

<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><strong>Read more...</strong></a></p>
</b:if>

4.Copy Below code.

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

<div class='widget-content'>
<h3>Related Posts :</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>

var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;

function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
a.href = alturl;

if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k<20; k++) label = label.replace("%20", " ");
var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('data2007').appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}

var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = "<data:label.name/>";

var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>

</div>
</b:if>

5.Now Paste it like the example below.

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

Paste Your Code here

<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><strong>Read more...</strong></a></p>
</b:if>

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

Add Related Post Widget to Blogger-For Original Templates

2009-05-02T19:38:00.000-07:00

I found this tip in this site.

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

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:

4.Copy below code and paste it immediately after the line <data:post.body/>

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

How To Add Recent Post Widget For Blogger Blog

2009-05-02T04:33:00.000-07:00

I found this tip in this blog.Follow below easy steps to do it.

1.Log in to your dashboard--> layout

2.Click on "Add a Gadget" and Select "HTML/Java Script"

Note : You must replace your blog URL with your real URL.

You can change the values of var numposts , var showpostdate , var showpostsummary ,var numchars , var standardstyling ,etc....

3.Click on Save And Refresh your site.you are done.

How To Add HTML Email Form to your blog

2009-05-01T19:45:00.000-07:00

If you would like to provide your web site visitors with a simple way to contact you from your web site, but really don't want to display your email address, this HTML form code may be what you're looking for.

You can create a simple form, as displayed below, to enable your visitors to send you comments, questions or whatever you'd like.

1.Log in to your dashboard--> layout

2.Click on "Add a Gadget".Now Select "HTML/Java Sricpt"

3.Copy and Paste below code into it.

<FORM action="mailto:you@yourdomain.com" method="post" enctype="text/plain"><TABLE BORDER="0" CELLSPACING="0" CELLPADDING="4" WIDTH="90%"><TR><TD width="30%"><DIV align="right"><B>Name:</B></DIV></TD><TD width="70%"><INPUT type="text" name="name" size="20"></TD></TR><TR><TD><DIV align="right"><B>Email:</B></DIV></TD><TD><INPUT type="text" name="email" size="20"></TD></TR><TR><TD><DIV align="right"><B>Comment:</B></DIV></TD><TD><TEXTAREA name="comment" cols="30" wrap="virtual" rows="4"></TEXTAREA></TD></TR><TR><TD> </TD><TD><INPUT type="submit" name="submit" value="Submit"><INPUT type="reset" name="reset" value="Reset"></TD></TR></TABLE></FORM>

Note: Replace you@yourdomain.com with your real E-mail address.

4.Now Click Save.Your Email look like below one.

How To Protect Your Email Address From Spam Robots

2009-05-01T17:47:00.000-07:00

If you're displaying your email address on your web site,It may be a reason to receive a ton of spam emails to your inbox.Although it's very difficult to protect yourself from receiving spam email, there is a way you can still display your email address on your web site and protect it at the same time.

Normally we use the following code to create email link with in your web page.

<A HREF="mailto:you@yourdomain.com">Contact Us</A>

Contact Me

Replace above code with below code,If you want to protect your email address from spam bots.

<A HREF="mailto:you@yourdomain.com">Contact Me</A>

Contact Me

How To Add Three columns to your Footer Section

2009-05-01T02:29:00.000-07:00

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

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:

4.Replace the line <b:section class='footer' id='footer'/> of above code,with below code.

5.Now find the </b:skin> tag in your template.

6.Immediately before above line, add the below lines of code:

#footer-column-container {
clear:both;
}

.footer-column {
padding: 10px;
}

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

How To Hidden Blogger Header and Replace Image Instead

2009-04-30T19:56:00.000-07:00

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.

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

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

How To Add New Layout below Header in Blogger

2009-04-30T19:32:00.000-07:00

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:

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

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

How to Add “Save Page as PDF” button to Blogger blog

2009-04-30T09:17:00.000-07:00

1.First Sign up with Web2PDF.

2.Now Configure your "Save Page as PDF" button and click ‘Generate the JavaScript’ button.

3.Then a Javascript code will be generated. Copy This code.

Now follow these simple steps :

(a)Log in to your dashboard--> layout- -> Edit HTML

(b)Click on "Expand Widget Templates"

(c)Scroll down to where you see this:

(d)Immediately after above line, paste the code which you have generated at the Web2Pdf Online website. It's look like below code.

<script type="text/javascript">
var authorId = "XXXXXXXX-XXXX-XXXX-XXX-XXXXXXX";
var pageOrientation = "0";
var topMargin = "0.5";
var bottomMargin = "0.5";
var leftMargin = "0.5";
var rightMargin = "0.5";
</script>
<script type="text/javascript" src="http://web2.pdfonline.com/pdfonline/pdfonline.js">
</script>

(e)Click on "Save Templates" and Refresh your site.

How To Redirect Blogger URL To Another URL

2009-04-30T02:33:00.000-07:00

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.

It should Look Like This.

4.Replace http://yournewurl.com with the URL you want to redirect your old blog.

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

Now your blog traffic will be redirected to your new address.

How To Remove Label Posts Count From Blogger

2009-04-30T02:01:00.000-07:00

To remove the label count just follow the below simple steps:-

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

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:

4.Now delete above code.

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

How To Add Image Hover Effect to Blogger

2009-04-29T18:21:00.000-07:00

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

2.Scroll down to where you see </head> Tag

3.Copy and Paste below CSS code above </head> Tag

4.Now Click on "Save Templates"

Now whenever you embed your image in blog or blog posts you use codes like below.

Look at the Example below.

<a href="http://bloggertipandtrick.blogspot.com" target="_blank" alt="Blogger Tips"><img src="http://i626.photobucket.com/albums/tt346/wam8387/toyotacar-2.jpg"/></a>

5.Replace above code with below code to have hover effect..

It will look like this.

<a class="linkopacity" href="http://bloggertipandtrick.blogspot.com" target="_blank" alt="Blogger Tips"><img src="http://i626.photobucket.com/albums/tt346/wam8387/toyotacar-2.jpg"/></a>

How To Add Posted By Line Below Post Title

2009-04-29T02:13:00.000-07:00

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

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:

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

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

HOW TO REPLACE THE NAME "LABELS" BELOW YOUR POST WITH AN IMAGE

2009-04-29T02:01:00.000-07:00

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

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:

4.Replace the line <data:postLabelsLabel/> with below code.

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

How To Add Page Popularity and Top popular pages widget

2009-04-29T01:00:00.000-07:00

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>.

Add Top popular pages widget

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

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

HOW TO CHANGE THE NAME "LABELS" BELOW YOUR POST

2009-04-28T22:53:00.000-07:00

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

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:

4.Replace the line <data:postLabelsLabel/> of above code with your own name,like" CATEGORIES".

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

HOW TO INSERT AUTHOR PICTURE IN POSTED BY LINE

2009-04-28T22:27:00.000-07:00

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

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:

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

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.

HOW TO CHANGE NAME OF AUTHOR

2009-04-28T21:24:00.000-07:00

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

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:

4.Replace <data:post.author/> of above code with your new name.

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

How To Create Expandable Post Summaries

2009-04-28T10:27:00.000-07:00

I found this tip in Amanda Fazani's blog.

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.Copy and Paste below code immediately before it.

5.Now again, Scroll down to where you see this.

6.Replace above code with the following code.

<b:if cond='data:blog.pageType != "item"'>
<div class='excerpt post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> 
</div>
<b:else/>
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> 
</div>
</b:if>

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

How To Highlight Author Comment in Blogger blog

2009-04-26T04:33:00.000-07:00

This tip is very usefull for every blogger.If you like this follow the steps below.

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

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:-

]]></b:skin>

4.Copy below code and put it before ]]></b:skin>

.comment-body-author {
background: #E6E6E6; /* Background color*/
color: #000; /* Text color*/
border-top: 1px dotted #223344;border-bottom: 1px dotted #223344;border-left: 1px dotted #223344;border-right: 1px dotted #223344;
margin:0;
padding:0 0 0 20px; /* Posotion*/
}

5.Now Scroll down to where you see this:-

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
said...
</dt>

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

6.Replace above code with below code.

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
said...
</dt>

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

</b:if>

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

Note : You can change "Background color" , "Text color" and "Posotion" of above codes.

How To Replace Newer, Home and Older Post Link With your own Images

2009-04-25T20:50:00.000-07:00

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.

How To Add Flash Animated Label Cloud Widget For Blogger

2009-04-25T20:08:00.000-07:00

This is very nice widget designed by Amanda Fazani.(www.bloggerbuster.com)

If you like this widget follow simple steps below.

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

2.Without "Expand Widget Templates",Scroll down to where you see this:-

<b:section class='sidebar' id='sidebar' preferred='yes'>

3.Now Paste the below codes immediately after the above code.

<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>

<object type="application/x-shockwave-flash" data="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" width="250" height="200" allowscriptaccess="always" >
<param name="movie" value="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" />
<param name="bgcolor" value="#ffffff" />
<param name="flashvars" value="tcolor=0x000000&mode=tags&distr=true&tspeed=100&tagcloud=<tags>
<b:loop values='data:labels' var='label'>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='12'><data:label.name/></a>
</b:loop>
</tags>" />
<p>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></p>
</object>

</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

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

How To Comment Box is made "DO FOLLOW" for Google spiders

2009-04-24T21:03:00.000-07:00

Above Title Means comments on this blog are made do follow and will be spidered.Comments field in blogger are made NOFOLLOW by default.This is done as a measure to reduce spam.To Become comments on your blog are made "do follow",follow the easy steps below.

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

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:-

<a expr:href='data:comment.authorUrl' rel='nofollow'>

4.Replace it with below code.

<a expr:href='data:comment.authorUrl'>

5.Click on Save Templates and you are done.

Now you must to make other bloggers know that you are comments are made do follow.For this add below code to your blog.

<table width="200" height="30" border="1" bgcolor="80FFFF">
<tr>
<td>Comment Box is made DO FOLLOW for Google spiders..So comment on..<br/>
<p align="center"><a href="http://bloggertipandtrick.blogspot.com/"><img border="0" alt="Blogger Tips And Tricks" src="http://i626.photobucket.com/albums/tt346/wam8387/c1.jpg"/></a></p>
<span ></td>
</tr>
</table>

It will look like this.

Comment Box is made DO FOLLOW for Google spiders..So comment on..

How to Embed Adsense add unit in Left or Right corner of post content

2009-04-23T21:28:00.000-07:00

This will explain How to Embed Adsense add unit in Left or Right corner of post content.

Generate Parsed code for adsense code because we cannot put adsense code directly in the xml.So parse it using AdParser.

After parsing,your ad code Should look like this.

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

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:-

<div class='post-header-line-1'/>

4.To place ad Top left corner of your post ,Paste the below code, below of above line.

<div style=”display:block;float:left;margin: 0px 10px 0px 0px;”>
Your Adsense Parsed code
</div>

Attention : We can't put "<div style=”display:block;float:left;margin: 0px 10px 0px 0px;”>" and "</div>" directly in the xml.So we must generate Parsed code for these code using AdParser.

So Final Code you have to copy below the line "<div class='post-header-line-1'/>" ,look like this.

If you Want To place ad Top Right corner of your post,Replace "left" with "right".

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

How To Add Technorati Tags using Beta Labels

2009-04-23T06:59:00.000-07:00

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

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:-

4.Replace above code with below code:

<div 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>
<br/>Technorati:
<b:loop values='data:post.labels' var='label'>
<a expr:href='"http://www.technorati.com/tag/"+data:label.name' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</div>

5.Click on Save Templates and Refresh your site.

How To Change the Default Title Tag on Blogger

2009-04-23T03:36:00.000-07:00

This Tip will change the Blogger's title tag to help amplify relevant keywords to your blog which improve the search engine ranking of your blog.

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

2.Scroll down to where you see this:-

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

3.Now Replace above line with below code.

<b:if cond='data:blog.pageType == "index"'><title><data:blog.pageTitle/></title> <b:else/><title><data:blog.pageName/> ~ <data:blog.title/></title></b:if>

Click on "Save Templates" and you are done.

How To Add Recent Comments Widget For Blogger Blog

2009-04-23T01:58:00.000-07:00

1.Log in to your dashboard--> layout- ->Page Elements

2.Click on Add a Gadget. Select HTML/Javascript.

3.Select the whole code given below and paste it in the widget box you have just opened above.

Note : Replace "http://yourblogname.blogspot.com" with Your blogspot URL.

4. Now Click Save and Refresh Your site.

How To Hide/Show (Expand/Collapse:+/-) Labels of blogger blog

2009-04-20T21:00:00.000-07:00

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

2.Without expanding your widgets,Scroll down to where you see this:-

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

3.Replace above line with below code:

<b:widget id='Label2' locked='false' title='Labels and Feeds' type='Label'>
<b:includable id='main'>
<script type='text/javascript'>
//<![CDATA[
if(typeof(rnd) == 'undefined') var rnd = '';
rnd = Math.floor(Math.random()*1000);
rnd = 'id-' + rnd;
document.write('<a href="#" onclick="tmp = document.getElementById("' + rnd + '"); tmp.style.display = (tmp.style.display == "none") ? "block" : "none"; return false;" style="float:left;margin-right:5px;">');
//]]>
</script>[+/-]
<script type='text/javascript'>
//<![CDATA[
document.write('<\/a>');
//]]>
</script>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;">');
//]]>
</script>

<ul>
<b:loop values='data:labels' var='label'>
<li>

<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
</li>
</b:loop>
</ul>

<script type='text/javascript'>
//<![CDATA[
document.write('<\/div>');
//]]>
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

4.Click on Save Templates(or Confirm and save) and Refresh your site.

What Are the Parts Of a Blogger Template

2009-04-18T18:46:00.000-07:00

There Are 5 Main Parts of a Blogger Templates.This is the basic description about these parts.

1. XML Language declarations

2. HEAD, TITLE and the META TAGS

3.Variable Definitions

4. CSS (Cascading Style Sheet) section

5.Body

Below descricptions are Examples Of Parts Of the Template

XML Language declarations

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>

HEAD, TITLE and the META TAGS

<head>
<title>Latest Tips for Bloggers|Blogger Tips And Tricks</title>
<b:include data='blog' name='all-head-content'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='blogger' name='generator'/>
<meta content='Latest Tips for Bloggers for easy blogging and Making Money.blogger,blogspot tips and tricks.A dummies guide,templates,layouts,widgets, JavaScript,HTML codes,SEO,Google AdSense,gadgets,How to monetize Blogger or blogspot blogs.' name='description'/>
<meta content='blogger tricks,blogspot tweaks,how to blog,blogger tips,blogging tricks,widgets,links,google,adsense,latest,Page Rank,free blog,Yahoo,MSN,FeedBurner,Comments,new bloggers,sitemaps,make money,online,Blogging tips,Sitemaps,Meta Tag,YouTube Tweaks' name='keywords'/>
<meta content='Lasantha' name='author'/>
<meta content='all,follow' name='robots'/>
<meta content='General' name='Rating'/>
<meta content='never' name='Expires'/>
<meta content='english' name='Language'/>
<meta content='Global' name='Distribution'/>
<meta content='INDEX,FOLLOW' name='Robots'/>
<meta content='4 Days' name='Revisit-after'/>
<meta content='lasanthaset4@gmail.com' name='Email'/>
<meta content='Karunarathna' name='Publisher'/>
<meta content='Keerthi' name='Copyright'/>
<META content='04a82ed1e8901452' name='y_key'></META>
<meta content='9BC9210680' name='blogcatalog'/>
<meta content='uhl6s4fkZiCGiK8tOzdJdlKTP7V4anqblyHBjk8PA0g=' name='verify-v1'/>

Variable Definitions

<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: Minima Ochre
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 26 Feb 2004
Updated by: Blogger Team

----------------------------------------------- */

/* Variable definitions
====================
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#dd9" value="#CAF99B">
<Variable name="textcolor" description="Text Color"
type="color" default="#333" value="#333333">
<Variable name="linkcolor" description="Link Color"
type="color" default="#684" value="#0066CC">
<Variable name="pagetitlecolor" description="Blog Title Color"
type="color" default="#874" value="#000000">
.............................

CSS (Cascading Style Sheet) section

/* Use this with templates/template-twocol.html */

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
a:link {
color:$linkcolor;
text-decoration:none;
}
a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}
a:hover {
color:$titlecolor;
text-decoration:underline;
}
a img {
border-width:0;
}

/* Header
-----------------------------------------------
*/

...............

/* Footer
----------------------------------------------- */
#footer {
width:950px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

/** Page structure tweaks for layout editor wireframe */
body#layout #header {
margin-left: 0px;
margin-right: 0px;
}
]]></b:skin>
</head>

Body

<body>
<div id='outer-wrapper'><div id='wrap2'>


<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='4' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Blogger Tips And Tricks (Header)' type='Header'/>
<b:widget id='HTML17' locked='false' title='' type='HTML'/>
<b:widget id='HTML19' locked='false' title='' type='HTML'/>
</b:section>
</div>

<div id='content-wrapper'>

<div class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='HTML6' locked='false' title='Subscribe to Blogger Tips' type='HTML'/>
<b:widget id='LinkList2' locked='false' title='Blogger Tips - General' type='LinkList'/>
<b:widget id='HTML7' locked='false' title='' type='HTML'/>
<b:widget id='HTML1' locked='false' title='Blog Directries' type='HTML'/>
<b:widget id='HTML5' locked='false' title='Social Bookmarks' type='HTML'/>
<b:widget id='HTML11' locked='false' title='Useful Free Services' type='HTML'/>
<b:widget id='LinkList1' locked='false' title='Link' type='LinkList'/>
</b:section>
<p><a href='http://bloggertipandtrick.blogspot.com/'>Blogger Tips and Trick</a> for <a href='http://bloggertipandtrick.blogspot.com/'>Bloggers</a></p></div>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='HTML14' locked='false' title='' type='HTML'/>
<b:widget id='HTML20' locked='false' title='Search Blogger Tips And Tricks' type='HTML'/>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
<b:widget id='LinkList3' locked='false' title='Blogger Tips - Useful Articles' type='LinkList'/>
<b:widget id='LinkList4' locked='false' title='Blogger Tips - Change Appearance' type='LinkList'/>
<b:widget id='LinkList5' locked='false' title='Blogger Tips -Gadget,Widget,Elements,Tools' type='LinkList'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='HTML13' locked='false' title='Privacy Policy' type='HTML'/>
</b:section>
</div>

<div class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
<b:widget id='HTML2' locked='false' title='Get Email Updates' type='HTML'/>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
<b:widget id='HTML3' locked='false' title='Get Latest Updates' type='HTML'/>
<b:widget id='HTML10' locked='false' title='' type='HTML'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
<b:widget id='HTML8' locked='false' title='Link to This Site' type='HTML'/>
<b:widget id='HTML9' locked='false' title='Support me !!!' type='HTML'/>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='HTML4' locked='false' title='Flag Counter' type='HTML'/>
<b:widget id='HTML15' locked='false' title='' type='HTML'/>
</b:section>
</div>


<div class='clear'> </div>

</div> 

<div id='footer-wrapper'>
<b:section class='footer' id='footer'>
<b:widget id='HTML21' locked='false' title='' type='HTML'/>
<b:widget id='HTML12' locked='false' title='Feed Directories' type='HTML'/>
</b:section>
</div>

</div></div> 

<script type='text/javascript'>
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type='text/javascript'>
try {
var pageTracker = _gat._getTracker("UA-8271964-1");
pageTracker._trackPageview();
} catch(err) {}</script>

</body>
</html>

How to Link Header to Another Site

2009-04-17T05:37:00.000-07:00

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

2.Click on "Expand Widget Template"

3.Scroll down to where you see this:-

4.Replace above code with below code.

NOTE : Replace 'LINK_OF_YOUR_ANOTHER_SITE' with actual URL of your another site and save template.

How To Remove Links from Header and Post Titles

2009-04-17T04:49:00.000-07:00

HOW TO REMOVE HEADER LINK

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

2.Click on "Expand Widget Template"

3.Scroll down to where you see this:-

<div class='titlewrapper'>
<h1 class='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</h1>
</div>

4.Replace above code with below code.

<div class='titlewrapper'>
<h1 class='title'>
<data:title/>
</h1>
</div>

5.Preview and save your Template.

HOW TO REMOVE POST TITLE LINK

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

2.Click on "Expand Widget Template"

3.Scroll down to where you see this:-

<h3 class='post-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>

4.To remove the permalink Replace above code with below code.

5.Preview and save your Template.

How To Insert Adsense Ads In Blogger Post

2009-04-15T05:14:00.000-07:00

This will explain how to Embedd adsense ads in between posts body.

1.Generate Parsed code for adsense code because we cannot put adsense code directly in the xml.So parse it using AdParser.

2.After parsing,your ad code Should look like this.

How To Place ad above or below your post header

Click on "Expand Widget Template" and scroll down to where you see this:-

<div class='post-header-line-1'/>

To place ad above your post header.Paste the code above this line.

To place ad below your post header.Paste the code below this line.

How To Place ad end of your post body

Click on "Expand Widget Template" and scroll down to where you see this:-

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

Paste the code below this line, to show your ad at the end of your post.

NOTE : To Set the Align of your ad , Insert your code like this.

<p align="center">
Your Ad code
</p>

Replace "center" with "left" or "right" for desired alignment.

How To Hide Your Post Date,Time and Author

2009-04-10T05:13:00.000-07:00

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

2.Click on "Expand Widget Template"

How To Hide Post Date

Scroll down to where you see this:-

<data:post.dateHeader/>

Now delete this code.

Save Template and preview your site.

How To Hide Post Time

Scroll down to where you see this:-

<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark'
title='permanent link'><abbr class='published'
expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span>

Now delete this code.

Save Template and preview your site.

How To Hide Post Author

Scroll down to where you see this:-

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

Now delete this code.

Save Template and preview your site.

How To Create Float Image for your Blog

2009-04-10T04:41:00.000-07:00

This is the step by step guide to create float image that will always show on your corner blog althought you drag side scroll bar.

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

2.Click on "Expand Widget Template"

3.Scroll down to where you see this:-

]]></b:skin>

4.Then put the below code above it.

#float_corner {
position:fixed;_position:absolute;bottom:0px;left:0px;clip:
inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}

Then it see like this.

#float_corner {
position:fixed;_position:absolute;bottom:0px;left:0px;clip:
inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}
]]></b:skin>

Note: "bottom", "left" are its position.you can change it with "top", "bottom", "left", "right"

5.Now put the below code before </body> tag.

<div id="float_corner">

<a href="http://2009bloggertemplates.blogspot.com"> <img src="

http://i626.photobucket.com/albums/tt346/wam8387/sun.jpg" border="0" /></a>

</div>

Note:
Replace "http://2009bloggertemplates.blogspot.com" and "http://i626.photobucket.com/albums/tt346/wam8387/sun.jpg" with your own details.

"http://i626.photobucket.com/albums/tt346/wam8387/sun.jpg" is image URL.

"http://2009bloggertemplates.blogspot.com" is a target URL for your image.

Save Template and preview your blog.

How To Insert Search Box in Header

2009-04-09T19:31:00.000-07:00

You can insert Your Google Custom Search Box or other Search Box in Header using these steps.Then look of the page will be very smart.

log in to your dashboard--> layout- -> Edit HTML

Click on "Expand Widget Template"

Scroll down to where you see this:-

<div class='descriptionwrapper'>

<p class='description'><span><data:description/></span></p>

Now Add your search box code immediately after these lines.

Now click on Save Template and refresh your site.That's it.

How To Add Comment Form Under Every Post

2009-04-09T18:58:00.000-07:00

Commenting is a very helpful feature for every bloggers,Because They can know what visitors think about their site.We can easily integrate comment form under every post with no extra effort.To do this follow these simple steps.

log in to your dashboard--> Setting- -> Comments

Now goto "Comment Form Placement" and Check "Embedded below post" Option.

Click on Save Settings.You have successfully embedded Comment form in your blog. Refresh your site.

How To Remove-Subscribe to: Posts (Atom)-Link

2009-04-09T05:05:00.000-07:00

If You need to remove this Subscribe to: Posts (Atom) link,Then Follow the instructions below.

log in to your dashboard--> layout- -> Edit HTML-->Check "Expand Widget Templates"

scroll down to where you see this:-

<b:include name='feedLinks'/>

Now Delete this code and preview the template before saving to check if any errors occured or not.

Now click "Save Template" and refresh your site.

How To Open Links in New Window or New Tab

2009-04-08T23:31:00.000-07:00

Any webmaster don't like visitors to leave their site always.So,if we use links to open in new window,our problem will be solved.

We used targe="blank" to open the link in new page.

We can also use target="new" instead of target="_blank".Both are same.

For Text Links
____________________________________
<a href="website URL" target="_blank">website name</a>
____________________________________

See the example below.

<a href="http://2009bloggertemplates.blogspot.com" target="_blank">Blogger Templates</a>

It see like this.

Blogger Templates

For Image Links
________________________________________
<a href="website URL" target="_blank" title="TITLE"><img src="Image URL" border="0" width="80" height="15" alt="Description"></a>
________________________________________

See the example below.

<a href="http://2009bloggertemplates.blogspot.com" target="_blank" title="Blogger Templates"><img src="http://i626.photobucket.com/albums/tt346/wam8387/sun.jpg" border="0" width="80" height="15" alt="2009 Blogger Templates"></a>

It see like this.

Note:If you want You can change width,height,border value,etc... of above codes.

How To Sign Blog Posts with an Image

2009-04-06T04:24:00.000-07:00

Log in to your dashboard--> layout- -> Edit HTML, scroll to where you see this:-

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

Replace

<data:post.author/>

in the code with :

<a href='URL OF YOUR PROFILE'><img src='URL OF YOUR IMAGE' style='border:0'/></a>

Remember replace "URL OF YOUR PROFILE" and "URL OF YOUR IMAGE" with your details.

This gives you a signature at the bottom of your post and links it to your Blogger profile.

How To Make Money With Adsense Without Your Website

2009-04-06T02:49:00.000-07:00

Direct Download Center 100% Adsense Revenue Sharing Program

DirectDownloadCenter.com is free software download center. You can download any Freeware and Shareware directly from publisher. They have setup a system to share 100% AdSense revenue to all contributing members from all traffic that you sent to their site.

It is easy to use DirectDownloadCenter.com to earn advertising revenue. There are two ways to do it:

1. Link to any pages of DirectDownloadCenter.com using your referrer code. Traffic sent from your link will display Google Ads using your Adsense ID 90%.

2. Referring your friends to be our member and getting your ads displayed on their traffic 10% of the time. It's easy, just link to any pages using your referrer code and wait for his/her registering.

All you have to do is to guide your friends to download software from them or invite your friends to be their member and start getting money!!.

Publish or share software with your friends and start getting money too!!

Join Now!! Make Money With Adsense Without Your Website. Apply now!

Free Download 50000+ Freeware Shareware NOW.

Free Download Business & Finance Software

Download PHP MySQL Wizard 1.3

Submit Blog to Blog Directories to increase Traffic

2009-04-05T19:39:00.000-07:00

Do you want more visitors and readers to your Blogsite? submitting your Blog URL to many good Blog directories as possible you can attract more visitors to your blog.So Start now to submit your blogsite to blog directories to make your Blog more visible.

There are many blog directories on internet. Below I listed some good blog directories.You can join with them and below blog directories are completely free.

Technorati Fuel My Blog Blogtoplist

Mybloggingarea Topblogarea Topblogging

Blogroll Worldtopblogs Topbloglists

Blogvillage Blogelites Myblogdirectory

Blogcatalog Blogarama Blogion

Bloggeries Bloghop Bloggingfusion

Blog-search Blogpoint Blogs-collection

Globeofblogs Blogoriffic Blogflux

Blogsearch Bloghub Bloggernity

Bloggernow Weblog-index 5starblogs

Getblogs Blogtree eBlogzilla

Search4Blogs BloggerTalk LSblogs

Bloggapedia Blogshowoff SGBlog

Myblog2u Icerocket Goblogz

Aveblogs

How To SET NUMBER OF POSTS IN FEED with Feedburner

2009-04-05T19:23:00.000-07:00

Blogger sends latest 25 posts in your blog feed. So your Feedburner feed also contains the latest 25 blog posts. If you wish to include more or less posts in it :

1. Login to Feedburner account.

2. Click on Feed Title.

3. Click on 'Edit Feeds Details' link just below title of your feed.

4. In the Original Feed Address field, You can see your feed address.

http://MYBLOGNAME.blogspot.com/feeds/posts/default

Change this address to:

http://MYBLOGNAME.blogspot.com/feeds/posts/default?max-results=50

Instead of 'MYBLOGNAME' enter actual name of your blog.

Instead of the number '50' specify the number of posts ( 1 to 500 )you want to appear in your feed.

5. Click Save Feed Details.

How To Move Newer, Home and Older Posts Links to top of Posts

2009-04-05T05:56:00.000-07:00

These navigation links are only available in the Layout Template.If you have a Classic template you have to upgrade by going to Template---->Customize Design--->Upgrade to get them.

log in to your dashboard--> layout- -> Edit HTML-->check Expand Widget Templates.Now scroll down to where you see this:-


<b:include name='nextprev'/>

If you want to show them only at the top you can Cut these lines to remove to the Windows Clipboard.
or
If you want them both at the top and the bottom then do Copy.

Scroll up to find this code :

<b:includable id='main' var='top'>

<div class='blog-posts'>

Paste the navigation code below the last line of the above code. Save Template and refresh your site.

If you want to customize them further you can change this code below as of your template :

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

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

#blog-pager {
text-align: center;
}

Save Template and refresh your site.

How To Add Search Box to Search in Your Blogsite(Website)

2009-04-05T01:54:00.000-07:00

1.Login to your blogger account.Go Layout --> Add a Gadget --> Select “HTML/JavaScript”.

2.Copy below code and paste it.Click save and refresh your site.

<p align="left">
<form id="searchthis" action="YOUR BLOG URL/search" style="display:inline;" method="get">
<strong>NAME OF YOUR BLOG<br/></strong>
<input id="b-query" maxlength="255" name="q" size="20" type="text"/>
<input id="b-searchbtn" value="Search" type="submit"/>
</form></p>

Note:Remember to replace "YOUR BLOG URL" and "NAME OF YOUR BLOG" with your
details.
If you want to change the size of your search box than just change the value 20 to 35(any
value you like to get a bigger search box.
You can also change the “Search” button to say, “Hit” or “Go” or "Enter" or "Read more",
by changing the Value in the above html code.

3.You can see search box like below one.

Blogger Tips And Tricks

You can also remove the button "search" from the above search box and place an image for better look. The html code will be:

<p align="left">
<form id="searchthis" action="YOUR BLOG URL/search" style="display:inline;" method="get">
<strong>NAME OF YOUR BLOG<br/></strong>
<input id="b-query" maxlength="255" name="q" size="20" type="text"/>
<input id="b-searchbtn" type="image" src="IMAGE URL" align="top"/>
</form></p>

You can see search box like below one.

How To Add Feed Burner Headline Animator to your Blogger blog

2009-04-03T22:15:00.000-07:00

1.Sign in to the feedburner with your gmail accont.

2.Burn a feed for site address that you want to show the headline animator.For this you must spent few minutes.

3.After burn the feed, click on your site name in the "My Feeds" section.

4.Now click on the "Publicize" Tab

5.Clicik Headline Animator on the left side bar. Choose the type of display you want on the dropdown menu and click "Activate"

6.Choose a blog service as "Blogger blog" on the drop down menu and click Next and then Click "Add To Bloger".

How To Add Background images to Blogger Templates

2009-04-03T19:57:00.000-07:00

How To Add image to the Header

log in to your dashboard--> layout- -> Edit HTML, scroll to where you see this:-

#header-wrapper {

Add immediately after that the following line:-

background-image: url(URL address of your image);

See the example below.

#header-wrapper {
background-image: url(http://3.bp.blogspot.com/_-j7_-ccACuU/SdR7q0uh0_I/AAAAAAAAADs/IxkuhTpf6CE/s400/digg1.jpeg);

Save the template and refresh your site.

How To Add image to the Main Background

log in to your dashboard--> layout- -> Edit HTML, scroll to where you see this:-

body {

Add immediately after that the following line:-

background-image: url(URL address of your image);

See the example below.

body {
background-image: url(http://3.bp.blogspot.com/_-j7_-ccACuU/SdR7q0uh0_I/AAAAAAAAADs/IxkuhTpf6CE/s400/digg1.jpeg);

Save the template and refresh your site.

How To Add image to the Posts Background

log in to your dashboard--> layout- -> Edit HTML, scroll to where you see this:-

#main-wrapper {

Add immediately after that the following line:-

background-image: url(URL address of your image);

See the example below.

#main-wrapper {
background-image: url(http://3.bp.blogspot.com/_-j7_-ccACuU/SdR7q0uh0_I/AAAAAAAAADs/IxkuhTpf6CE/s400/digg1.jpeg);

Save the template and refresh your site.

How To Add image to the Sidebar Background

log in to your dashboard--> layout- -> Edit HTML, scroll to where you see this:-

#sidebar-wrapper {

Add immediately after that the following line:-

background-image: url(URL address of your image);

See the example below.

#sidebar-wrapper {
background-image: url(http://3.bp.blogspot.com/_-j7_-ccACuU/SdR7q0uh0_I/AAAAAAAAADs/IxkuhTpf6CE/s400/digg1.jpeg);

Save the template and refresh your site.

How To Change Colours of Blogger Templates

2009-04-03T03:26:00.000-07:00

How To Change Blogger Header background color

log in to your dashboard--> layout- -> Edit HTML, scroll to where you see this:-

#header-wrapper {

Add immediately after that the following line:-

background:your clour;

If You want background colour set to #D3FFCC , above code must change like this.

background:#D3FFCC;

See the example below.

#header-wrapper {
background:#D3FFCC;

Save the template and refresh your site.

How To Change Blogger Main background color

log in to your dashboard--> layout- -> Edit HTML, scroll to where you see this:-

body {
background:$bgcolor;

If you want to set bgcolor to #d3ffcc , replace above code with this.

body {
background-color:#d3ffcc;

Save the template and refresh your site.

How To Change Blogger Post background color

log in to your dashboard--> layout- -> Edit HTML, scroll to where you see this:-

#main-wrapper {

If you want to set post color to #d3ffcc , replace above code with this.

#main-wrapper {
background-color:#d3ffcc;

Save the template and refresh your site.

How To Change Blogger Sidebar background color

log in to your dashboard--> layout- -> Edit HTML, scroll to where you see this:-

#sidebar-wrapper {

If you want to set sidebar color to #d3ffcc , replace above code with this.

#sidebar-wrapper {
background-color:#d3ffcc;

Save the template and refresh your site.

How To Add Reactions widget in your blogger blog

2009-04-02T02:16:00.000-07:00

To configure the reactions widget follow these steps.
1.Sign in to blogger account.

2.Go to layout Page.

3.Click on the "edit" link under the blog posts

4.On the pop up window check the "Reactions" widget.Click save.

If you are using the default blogspot template, the widget would appear in your blog.If not you have to add some code to your blog's template To do that follow these steps.

1. Go to edit Html page of your blog.

2.Check the "Expand widget templates"

3.Find the following code in your template:

<data:post.body/>

4.Then immediately after this line add the following code.

<span class='reaction-buttons'>
<b:if cond='data:top.showReactions'>
<table border='0' cellpadding='0' width='100%'><tr>
<td valign='center'><span class='reactions-label'>
<data:top.reactionsLabel/></span>
</td>
<td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>
</tr></table>
</b:if>
</span>

Save and Preview your blog.

How To Add Digg Button to Every Blogger(Blogspot) Posts

2009-04-02T01:30:00.000-07:00

1. login to your Blogger Dashboard. Go Settings-> Archiving, set the “Enable Post Pages” to “Yes” and save the settings.

2.Now go to Blogger Dashboard->Layout->Edit HTML

3.Check the box “Expand Widget Templates".Now search the follow code.

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

If you want the button to show at the top right corner of your post, replace the above code with this.

<div style='float:right; margin-left:10px;'> <script type='text/javascript'> digg_url="<data:post.url/>"; </script> <script src='http://digg.com/tools/diggthis.js' type='text/javascript'/> </div> <p><data:post.body/></p>

If you want the button to show at the end of your post, replace the above code with this.

<p><data:post.body/></p>
<div style='float:right; margin-left:10px;'> <script type='text/javascript'> digg_url="<data:post.url/>"; </script> <script src='http://digg.com/tools/diggthis.js' type='text/javascript'/> </div>

If you want the button to show at top left corner of your post, replace the above code with this.

<div style='float:left; margin-right:10px;'> <script type='text/javascript'> digg_url="<data:post.url/>"; </script> <script src='http://digg.com/tools/diggthis.js' type='text/javascript'/> </div>
<p><data:post.body/></p>

How To Submit blogger sitemap to yahoo to index your web pages

2009-03-31T03:23:00.000-07:00

Submitting your site to yahoo is easy and give your web pages more exposure.
All you need is a YAHOO ACCOUNT(ID).However,you don't need an yahoo ID to know the information like how many pages are indexed,etc.But,if your blog is a new one or no pages in your blog are indexed(type your blog url in yahoo search and see to check whether your web pages are indexed or not), then you want Yahoo id to submit your sites,feeds,etc.
Let't see how to make yahoo index your webpages by submitting your blog sitemap.

1.Go to Yahoo Site Explorer

2.Click on the 'Sign in' link which is at the top of the page (If you don't have a Yahoo id, you can get one here) to sign into your account.

3.Type your blog url in the box provided and click on the 'Add My Site'

4.After adding your site,you need to Authenticate(Verify your ownership).

Now click on the site name which submitted you and then click 'Authenticate' in the next page.

There are two ways to verify your ownership.One is to upload a file to the root directory of your site which can't be possible in blogger.

Another one is to 'adding a metatag' which is possible and the only way to verify ownership for bloggers.First,copy the metatag..

Next,sign in to your blogger account>Edit html and paste the metatag below the head tag and SAVE THE CHANGES.

When you return to Yahoo! Site Explorer, click the button that says “Ready to Authenticate”

Next,you will get a message saying that 'Your site is pending authentication'

Note:Don't remove the metatag,they will revalidate your ownership by checking your ownership regularly.

5.Next,go back to the 'Site explorer home', and check the box next to your blog url and click on the Manage button.

6.Type rss.xml or atom.xml in the box provided.It helps yahoo to discover more of your site content via your rss or atom feeds and to index your blog pages quickly whenever your blog is updated.Next,click on the add feed button.

That's it.Now,you have sucessfully submitted your blog sitemap to yahoo.Check your account after a couple of days and you will see your blog indexed in yahoo search engine.

Meanwhile,if you didn't submitted your blog sitemap to google,please read this about How to Submit your blog sitemap to Google

How To Add "Email Me" html/javascript code for your blogs,web pages

2009-03-31T03:06:00.000-07:00

Adding the "Email me" link to your blog/webpage is very helpful for the visitors who want to contact you.It increases the interactivity between the visitors and your site and make them come regularly.

There are plenty of problems if you show your email address directly on your site as SPAMMERS find your email address easily via search engines,and other sources.
So,by adding this type of links will hide your email address and If your visitors want to contact you,they will click on it.If the visior want to sent to you via another source like yahoo,google,etc they will simply copy the email address(in the outlook express) and email you.
On clicking the links,WINDOWS OUTLOOK EXPRESS will be open by default.
So,how to add the "Email me" link?

There are two types of ways to do it.One is text link and another one is image link.

Text Link:

Suppose,your email id is 123@gmail.com ,here is the code you have to add

<a href="mailto:123@gmail.com">Email me </a>

Don't forget to change the email address in the above code to your's.If you want another anchor text(not "Email me"),you can change it.

Image link:

Suppose,if you want the visitors to email you by clicking on an image,First you have to upload your picture to some image hosting services.They will give a direct link for the uploaded image.Take a note of it.

In this example, the direct link for the uploaded image is http://i626.photobucket.com/albums/tt346/wam8387/bloggertipemail1.png and your email address is some 123@gmail.com ,the code you have to add is

<a href="mailto:123@gmail.com"><img src="http://i626.photobucket.com/albums/tt346/wam8387/bloggertipemail1.png" alt="Email me" width="120" height="57" border="0" /></a>

Where to paste this code in your blogger(blogspot) blog?

Sign into your blogger dashboard>layout>add a page element>html/javascript and Paste the code and save the changes.

How To Embed YOUTUBE video,movie in your blog

2009-03-31T02:52:00.000-07:00

So,you want to embed a video(movie) onto your blog.The process is very simple,even a dummie can do it.If you want to embed your original video,then first sign up for an account in youtube and upload your video and get the embed code.

Otherwise,you can easily embed any public youtube video in your blog.Go to youtube.com and search for the video.For example,if you want to embed a Barack Obhama video,search it and copy the embed code on to a windows notepad or anything else.
The following process is explained below with pictures for easy understanding.

1.Go to youtube.com and search for your required video

2.Copy the embeded code(ctrl+c) and paste(ctrl+v) it in windows notepad.

3.Sign in in to your blogger acoount and click the New Post button and next,select the option 'Edit html' as shown below and paste the html code as shown below.

4.Publish the post.That's it, as you can see now,the youtube video is embeded in your post properly.

NOTE:You can change the width and height of the video by replacing the values to your desirable ones.

How To Move Newer, Home and Older Posts Links to top of Post.

2009-03-31T02:29:00.000-07:00

The Newer, Home and Older Posts links are available at the bottom of each post on the post pages. These navigation links are only available in the Layout Template. If you have a Classic template you have to upgrade by going to Template---->Customize Design--->Upgrade to get them.

At the bottom of the post these links are situated along with the Label links and the Subscribe to Posts Atom feed link making a lot of clutter. You can reduce the clutter by switching them to the top of the post above the post title. This style is seen in many Wordpress blogs.

To switch then to the top login at Blogger.com and click on Layout link on Dashboard. Then click on Edit Html subtab of Template tab. Put a check in Expand widgets template checkbox at the top of the template code box. Scroll down to this line of code in the blog posts footer widget :


<b:include name='nextprev'/>

If you want to have them only at the top you can do and Edit---->Cut to remove these lines to the Windows Clipboard. If you want them both at the top and the bottom then do an Edit----->Copy. Scroll up to find this code :

<b:includable id='main' var='top'>

<div class='blog-posts'>

Paste the navigation code below the last line of the above code. Save Template. Clear Cache and view Blog.

You can see them at the top above the post title on the post pages of this blog. If you want to customize them further you can change this code in the CSS part of your template :

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

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

#blog-pager {
text-align: center;
margin-top:20px;
}

Use Preview to check the effect before saving changes.

Useful Widgets,Add-Ons & Tools for Your Blog,Website

2009-03-31T02:08:00.000-07:00

Adding Widgets, Add-Ons & tools to your blog You can improve performance of your website.

Here's a collection of best and most useful blog widgets or add-ons that can be easily integrated with any website/blog. All these below add-ons are 100% Free.

Outbrain Star Ratings Widget:

ShareThis or AddThis :

whos.amung.us :

Web2PDF Online :

ZOHO Creator:

Google Talk Badge:

Yahoo Media Player:

Cbox:

Google Translate:

How To Provide Code for Other Bloggers to Link to your Blog

2009-03-30T22:11:00.001-07:00

Your blog will increase in Page Rank when more and more bloggers link to your blog. Hence to gain more backlinks to your blog provide code for others to copy and paste into their blog template.

You can provide code for only a simple link or for an image link. The advantage with a link is you can specify what anchor text you want in the link. The search engines place a lot of importance on anchor text for indexing blogs.

CODE FOR BUTTON LINK

To provide an image link you will first have to create a button image. Just Google for "button generator". Go to any of these sites and create a button image. Here is one I made for this site : After creating the button upload it to a free host like Photobucket.com or Googlepages and copy down the link to the image. Paste it in a Notepad file for inserting it into the code as shown below.

To put the code in your sidebar login at Blogger.com and click on Layout link on Dashboard. Then click on Add Page Element link at top of sidebar. Choose the Html/Javascript option and paste the following code in the contents window and save :

<p>To link to this blog, copy and paste the code below into your site.</p>

<textarea rows="4" cols="24" style="font-size: 1.1em;" readonly="readonly" onclick="this.select();"><a href="BLOG_URL"><img
src="LINK OF IMAGE" alt="BLOG_DESCRIPTION" /></a></textarea>

Replace the CAPS with the relevant data for your blog. For this blog it will look like this :

+++++++++++++++++++++++++++++++++++

To link to this blog, copy and paste the code below into your site.

<a href="http://bloggertipandtrick.blogspot.com"></a>

++++++++++++++++++++++++++++++++++++
This will give an image link to your blog like this after a blogger pastes the above code in his blog.
++++++++++++++++++++++++++++++++++++

CODE FOR A TEXT LINK

The code for a text link is :

<p>To link to this blog, copy and paste the code below into your site.</p>

<textarea id="b_2" rows="4" cols="24" style="font-size: 1.1em;" readonly="readonly" onclick="this.select();"><a href="BLOG_URL">BLOG_TITLE</a></textarea>

Replace the CAPS with your Blog URL and Blog Title. It will look like this :

+++++++++++++++++++++++++++++++++

To link to this blog, copy and paste the code below into your site.

<a href="http://bloggertipandtrick.blogspot.com">Tips and Tricks for Bloggers</a>

How To Add Page Elements to Posts Column and Blog Header

2009-03-30T22:11:00.000-07:00

For example your Blog Header Page Element widget code looks like this :

<b:widget id='Header1' locked='true' title='MY BLOG (Header)' type='Header'/>

You can see this by login at Blogger.com and click on Layout link on Dashboard. Then click Edit Html subtab of Template tab. Scroll down in Template code box to see above code. This code is wrapped in the Header section code like this :

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

As you can see in the first line the number of maximum widgets in the header section is set to one. This makes it impossible for you to add new widgets in the header. Also Showaddelement is set to No.

To add more page elements in header change this code to :

<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='MY BLOG (Header)' type='Header'/>
</b:section>

Set the maxwidgets to the number of widgets you want to put in the header section plus one. This makes it easier to rearrange the widget order in the header. Also change showaddelement to Yes. This will add a "Add Page Element' link to the header on the Layouts page.

You can do the same with the Blog Posts section code :

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>

Add a maxwidgets=x code and change showaddelement to yes. Save Template and click on Page Elements subtab of Template tab. You can now add any page Elements to the header and Blog posts. Do the same for the footer.

How to find the width of your blog Header, Sidebar and Main column

2009-03-30T20:42:00.000-07:00

To get the width of the blog Header, sidebars, main column, sign into Dashboard. In the section for the relevant blog, click LAYOUT, then click EDIT TEMPLATE. This will open the template editor window. Search through the templates for the following:

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

#main-wrapper {
width: 400px;
margin-left: 20px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

#sidebar-wrapper {
width: 150px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

These codes are from the template of this blog. The first block of codes tells me that the width of the Header is 750 pixels. The second block says the main column width is 400 pixels. The last two block of codes tells me that both the sidebars are of width 150 pixels.

Name:
Email:
Comment: