May 2009 ~ Blogger Tips and Tricks

Home » Archives for May 2009

Wednesday, May 20, 2009

How To Create Recent Articles Widget using Feed2JS

Wednesday, May 20, 2009

abhi

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

abhi

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

abhi

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.

Tuesday, May 12, 2009

How To Add FeedFlare below your Blog Post

Tuesday, May 12, 2009

abhi

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.

Sunday, May 10, 2009

Another Good Post Rating Widget for bloggers

Sunday, May 10, 2009

abhi

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

abhi

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.

Friday, May 8, 2009

How To Add StumbleUpon Button in Every Bogger Post

Friday, May 8, 2009

abhi

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

abhi

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.

Monday, May 4, 2009

How To Add Blogger Login Form Widget For Blogger

Monday, May 4, 2009

abhi

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

Sunday, May 3, 2009

How To Split Header Column to 2 Columns

Sunday, May 3, 2009

abhi

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

abhi

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.

Saturday, May 2, 2009

How To Make a Table Of Content

Saturday, May 2, 2009

abhi

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

abhi

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

abhi

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

abhi

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.

Friday, May 1, 2009

How To Add HTML Email Form to your blog

Friday, May 1, 2009

abhi

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

abhi

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

abhi

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.

Blogger Tips and Tricks

Wednesday, May 20, 2009

How To Create Recent Articles Widget using Feed2JS

How To Add Zoom Effect for images

How To Create SnapShots for blogger blog

Tuesday, May 12, 2009

How To Add FeedFlare below your Blog Post

Sunday, May 10, 2009

Another Good Post Rating Widget for bloggers

How To Give New look to Your Links

Friday, May 8, 2009

How To Add StumbleUpon Button in Every Bogger Post

How To Add Icons on Every Blogger Widget of Blogger

Monday, May 4, 2009

How To Add Blogger Login Form Widget For Blogger

Sunday, May 3, 2009

How To Split Header Column to 2 Columns

How To Add "Read More" Feature To Blogger Post

Saturday, May 2, 2009

How To Make a Table Of Content

Add Related Post Widget to Blogger-For Modified Templates

Add Related Post Widget to Blogger-For Original Templates

How To Add Recent Post Widget For Blogger Blog

Friday, May 1, 2009

How To Add HTML Email Form to your blog

How To Protect Your Email Address From Spam Robots

How To Add Three columns to your Footer Section

Subscribe

Search

Popular Posts

Category

Blog Archive

Blog links

Name:
Email:
Comment: