Blog Metamorphosis

Accessing Facebook,Twitter from Gmail

2010-02-13T13:45:00.000-08:00

"Google Buzz" is the New Buzz in town with everybody now Happily Buzzing from their Gmail A/Cs!

But there are certain functionalities which "Google Buzz" doesnot support viz..
1>Intergrating Orkut and exporting Buzzes from Gmail to Orkut (in spite of Orkut being Google's very own product! .. Still Wondering why!)
2>Integrating Facebook and exporting Buzzes from Gmail to Facebook.

But,Mashable explains a New Way of "Integrating Facebook and Twitter into your Gmail Account and Accessing FB and Twitter right from your Gmail"! Cool Na? Here's how:

1>Activate “Add any gadget by URL” in Gmail Labs — you’ll find it near the bottom of the list.

2> Now go to Settings –> Gadgets. Here you’ll find a place to add Gadget URLs.

3>For Twitter, add this below code in the url space given:
https://twittergadget.appspot.com/gadget-gmail.xml

After adding, you can access your Twitter Account from Gmail and it looks something like this screenshot:

4>To integrate Facebook into Gmail, paste this below code:
http://hosting.gmodules.com/ig/gadgets/file/104971404861070329537/
facebook.xml

NOTE: Actually, my post width is not wide enuf to display the entire FB url in one line itself.. so i had to break it into 2 lines :)
So after u copy the link,make sure there is no space before "F" in Facebook... Thanks to Venky for pointing it out.. :)

After integration,you can access your FB right from your Gmail and it looks something like this screenshot!

Blogger introduces "PAGES"

2010-02-04T06:01:00.000-08:00

Creating a Static Page(like Wordpress.com) in Blogger was a tedious process and required "Work Around".
Now,Google has made it simpler for bloggers to create "Static Pages" easily.
Google has introduced the "Pages" feature to Blogger enabling Bloggers to create up to 10 pages.

How to use the Blogger's 'Pages' Feature:
1>Go to Posting-> 'Edit Pages' Tab and click on "New Page".
2>Type in the content in your new page an publish it.
3>Link this to a "Pages" gadget. The Pages widget lets you add links to your pages as tabs at the top of your blog, or as links in your blog's sidebar
4>In the Pages widget, you can decide which pages will be linked and in what order they will appear..

For Custom Templates,

Pages gadget will not be supported to be displayed Horizontally,so you need to do a teeny weeny change in Html Code. Click here for Full Details

Changing Templates made easier in Blogger!

2010-01-25T05:49:00.000-08:00

Previously, changing templates was a tedious process in blogger/blogspot blogs due to loss of already existing widgets/gadgets,whenever we used to change new templates with the existing ones.

Recently,Google has incorporated a feature which allows us to still carry over the widgets from existing template onto the new ones.

This feature will display a dialog box containing the following:
1>Keep Widgets
2>Delete Widgets
whenever you upload a new template for your blog. So,if you wish to retain the existing widgets/gadgets from previous templates,click on "Keep Widgets" and all the widgets from your previous template will be retained!

Well,personally for me,shifting of these widgets onto my newly uploaded template was a tedious job. Now no more!!

Love the New Features,Gadgets and Implementations of Google to Blogger/Blogspot ever since its 10th Birthday! ;)

Creating 2 Sidebars for your template

2010-01-04T09:39:00.000-08:00

Wish to have 2 sidebars for your template? Its no "Rocket Science". You just need to follow these steps:
1>Go to Layout-> Edit Html->Backup your current template
2>Search for this code:
#sidebar-wrapper { width: 220px; float: right; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

3>When found, copy the code found and paste it right below the same code making the following changes shown in Red
#left-sidebar-wrapper { width: 220px; float: left; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

This will create a CSS code for your Left sidebar. Now,we need to create HTML code for the new left sidebar.

4>Now search for this code: <div id='main-wrapper'> and immediately before this section,paste this code:
<div id='left-sidebar-wrapper'> <b:section class='sidebar' id='left-sidebar' preferred='yes'/> </div>

Now you have created both CSS and HTML Code for the New Left Sidebar.

5>When you preview you template,you will notice that your Right Sidebar would have shifted to the bottom. This is because, you need to resize the Outer-Wrapper to fit in both your sidebars.
So,search for :
#outer-wrapper { width: 660px; margin:0 auto; padding:10px; text-align:left; font: $bodyfont; }
and change the width to say 880

6>Now,when you preview your blog, you will notice that left sidebar is very close to your blog posts. So,just add a minute code (shown in red below) in this code:

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

7>Save your template. View your blog! Enjoy your new 3 Columnar Template with 2 Sidebars!

My Other Blogs

2010-01-03T04:58:00.000-08:00

My Other Blogs:

1> Agglomeration of My Articles - A collection of my articles published on various websites and newspapers

2>Blog Metamorphosis -Blogger Hacks,Tips,Tricks and Treats

3>Comical Life -Life in Comic Strips

4>Emotional Intelligence- Understanding Human Relationships

5>Fleeting Thoughts- My General Blog!

6>Globe Trotting- Travel Around the World

7>Lip Smacking Delicacies- Recipes for 'Mouth Watering Vegetarian Cuisines'

8>Reflection-Reviews on Books,Movies,Web services

9> Video Gallery- A collection of my fav videos!

Happy New Year 2010!! Greetings

2010-01-01T00:00:00.001-08:00

As the New Year approaches, I wish my family,friends,my blog readers,followers and subscribers,a very "Happy and Prosperous New Year"! :)

May All your dreams come TRUE this year! Let God shower his best and choiciest Blessings on you ALL!! ;)

P.S: I am Post Dating this post to appear on the dawn of "New Year" as I will be in a "New Year's Eve" Party tonight

Disable Right Clicks on your blog posts!

2009-12-28T08:33:00.000-08:00

PLAGIARISM is spreading like PLAGUE now a days. People just copy the contents from other's blogs without even giving the credit to original content's author in their blog posts! Some people do it deliberately,while others say they were not aware of it. So how about making people aware that Plagiarism is a Punishable Offence by alerting them with a dialog box which pops out when someone tries to Right Click and Copy your blog's content?

I too had an experience with Plagiarism and trust me,it was Frustrating! But I was successful in getting my copied contents removed from infringer's blog within 12 hours of time!

Today,I came across a script(on businessvartha.com) to "Disable Right Clicks for your Blog Posts". This script will display a warning message when someone tries to copy the contents of your blog using Right Clicks!

Follow these steps:
1>Go to Layout-> Add a gadget -> Choose 'Html/Javascript' gadget
2>Insert the code given below in the gadget you have just chosen:

<SCRIPT language=JavaScript>
var message = "The Contents of this Blog are Copyrighted..!!! Do Not Copy!";
function rtclickcheck(keyp){ if (navigator.appName == "Netscape" && keyp.which == 3){ alert(message); return false; }
if (navigator.appVersion.indexOf("MSIE") != -1 && event.button == 2) { alert(message); return false; } }
document.onmousedown = rtclickcheck;
</SCRIPT>

3>Save the gadget and close.

Now go to your blog, try right clicking on some content. You will get a warning dialog box alerting you not to copy the contents!

Spread the word! Lets Fight Plagiarism!

Creating a Retweet Button for Every Blogger Post

2009-12-23T08:39:00.000-08:00

Wish to create a "Retweet" Button for every blog post on your blog to enable the readers to "Retweet" your blog posts?

Follow these steps:
1>Go to Layout-> Edit Html-> Check(Tick) the tab "Expand Widget Templates"
2>Search for this code:
<data:post.body/>

3>Then paste the code given below before or after the code found in step 2:

<script type="text/javascript">
tweetmeme_url = '<data:post.url/>';
</script>
<script src="http://tweetmeme.com/i/scripts/button.js" type="text/javascript">
</script>

4>If you want the 'Retweet' button to appear before your blog posts, then paste the code given in Step 3 before <data:post.body/>
else,if you want the 'Retweet' Button to appear after your blog posts, paste the code given in Step 3 after
<data:post.body/>

5>Save and close your template

Creating a Sticky Post in Blogger

2009-12-23T08:02:00.001-08:00

Wish to create a STICKY POST in Blogger???

"Sticky Post" is a post which stands Permanently on your Blog's Homepage!

Method:

1>Go to Layout-> Page Elements -> Add a Gadget -> Select Text or Html/Javascript Gadget

2>Type your content in that gadget. Save and close the gadget

3>Now drag this gadget and drop it just about the 'Blog Posts' in your Layout section

4>Save and close.

5>View your blog

Creating Drop Down Menus in Blogger

2009-12-17T13:55:00.000-08:00

Wish to create a Drop Down Menu in Blogger?

Steps:
1>Go to Layout->Page Elements ->Add a Gadget -> Choose 'Html/Javascript' Gadget.
2>Insert this code into the Gadget:

<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"
size=1 name=menu>
<option>- Your Menu Title -</option>



<option value="http://URL of link1">Link 1</option>
<option value="http://URL of link2">Link 2</option>
<option value="http://URL of link3">Link 3</option>
<option value="http://URL of link4">Link 4</option>
<option value="http://URL of link5">Link 5</option>

</select></form>

3>Replace 'Your Menu Title' with the Menu Title of your choice.
4>Replace 'Url of Link1' with the url of your choice.
5>Replace Link1 with the name of the url of your choice
6>Repeat the same proceduce for other url links.
7>Save the gadget and close

Displaying Your Twitter Follower count

2009-12-17T13:10:00.000-08:00

Displaying your Twitter follower count on your blog inspires your readers to follow you on Twitter.

Steps:
1>Go to your blog's Layout->Page Elements->'Add a Gadget'->Select 'HTML/Javascript' gadget
2>Copy any of the codes given below and paste it into the Html/Javascript gadget you chose!

3>Codes:
a>Standard Button

Code:
<script type="text/javascript" language="javascript" src="http://twittercounter.com/embed/?username=yourTwitterusername"></script>

b>Black Button

Code:
<script type="text/javascript" language="javascript" src="http://twittercounter.com/embed/?username=yourTwitterusername&style=black"></script>

c>Big Bird Button

Code:

<script type="text/javascript" language="javascript" src="http://twittercounter.com/embed/?username=yourTwitterusername&style=bird"></script>

4>If you want to view more kinds of Twitter counter badgets, follow this link:http://twittercounter.com/pages/buttons/

5>Replace the username in code you chose with your Twitter Username.

6>Save the Gadget and close

Displaying Tweets on your Blog!

2009-12-17T12:58:00.000-08:00

Do you wish to display the tweets from your Twitter account on to your blog?

Follow these simple steps:
1>Go to Layout->Page Elements->Click on 'Add a gadget'
2>Search for 'Twitter Updates' gadget.
3>Give your Twitter username in that gadget. Also mention a number in the 'Number of updates to display' column
4>Save the gadget and close.

Now,tweets from your Twitter account will be displayed on your blog!

Adding Twitter Profile Widget to Blogger

2009-12-17T12:50:00.000-08:00

Are you on Twitter? Do you wish to display your Twitter Profile Badge on your blog/website so that your readers can follow you on Twitter?

Simply,follow these steps:
1>Go to Twitter Widgets and sign in
2>Under 'Widgets for' click on 'My Website'
3>Click on 'Profile Widget'
4>Choose your desired appearance,dimensions and preferences.
5>Then click on 'Finish and Grab Code'
6>If your blog is in Blogger/Blogspot platform, just click on 'Add to Blogger' icon below the shown code
7>It will open a new window and take you to your blogger dashboard.
8>Select the blog in which you plan to add this Twitter Profile Widget and click 'Add widget'. You are done
9>But,if your blog is not blogspot/blogger blogs,then you need to copy the HTML Code shown after Step 5 and then paste that code in your blog explicitly!

Import your blog to Twitter

2009-12-17T12:35:00.000-08:00

Twitterfeed is a platform which helps to import your blog/website in your Twitter and Facebook accounts.
This increases the Traffic of your blog.

Steps:
1>Visit Twitterfeed and create an account
2>Login and create a new feed by clicking on 'Create a New Feed'
3>Enter the feed name and the feed url in the spaces given and hit 'Continue to Step2'
4>It takes you to 'Configure and Publishing Services' as step 2.
5>Here,click on Twitter and login with your twitter id and password. This integrates your Twitter account with your Blog
6>Repeat step 5 for Facebook account
7>When finished,click on done

Whenever you write a new post,it will be automatically Tweeted on your Twitter account and also displayed on your Facebook account

Importing Your Blog into Facebook

2009-12-17T12:25:00.000-08:00

Facebook is a social networking site which is used by more than million users today.
So,in order to gain traffic to your Blog/Website, one easier way is to import your blog into Facebook.
This increases the traffic of your blog and also visibility of your blog!

Steps:
1>Login to your Facebook account
2>Hover your mouse on 'Settings' tab of your Facebook homepage . It displays the list of settings
3>Choose 'Application Settings'.It displays a list of Application Settings.
4>Now click on 'Notes'
5>On the Right hand side of the panel, click on 'Import a Blog'.
6>Enter the url of your blog/website in the space provided
7>Check(Tick) the agreement box and click on 'Start Importing'

Now,whenever you write a new post in your blog, it will be imported into your Facebook account and displayed for your users.

'Adsense for Feeds' now available in Blogger

2009-12-17T11:10:00.000-08:00

Adsense from Google is a good way of making extra bucks by displaying ads.
Register your account with Adsense and configure your settings.
Previously,Adsense use to display random ads on your blog.

Now one good news is 'Adsense for Feed' which is the integration of Feedburner and Adsense in Blogger.
Using this,Adsense displays Relevant Ads on your Blog relevant to your blog posts. You can also check your earnings summary directly in Blogger without having to login to your Adsense account!

Follow these steps to configure 'Adsense for Feeds' in blogger:
1>Go to Monetize tab
2>Click on 'Adsense for Feeds' tab
3>Give your preferences and click Next
4>After the setup is complete,you will receive a window like this:

Amazon Associates in Blogger

2009-12-17T10:34:00.000-08:00

Good news to all the Bloggers who plan to make a few bucks by blogging!
Blogger now has integrated 'Amazon Associates' . Using this, the blogger can advertise for Amazon Products and make money from their posts.

Follow these steps:
1>Go to Monetize Tab of your blog
2>Click on Amazon Associates Tab.
3>If you do not have the 'Amazon Associates' account, create one, or if you have an account, enter your 'Amazon Associates ID' in the space given and click Next.
4>It will ask you to enable the 'Product Finder', enable and click Next and you are done!

Now whenever you write a New Post, the 'Amazon Product Finder' will be displayed at the Right Hand side of your post like this:

In the Product Finder,just enter the product of your choice which you plan to advertise in your blog post and hit 'Go'.
It will display the products with Link, Image and Link+Image tabs. Just click on your choice and the product will be automatically inserted into your blog post!

So,whenever anyone clicks on this product from your blog and buys it in Amazon,you will receive your commission!

Social Bookmarking Buttons

2009-12-16T12:33:00.000-08:00

Promoting your blog on social networking sites like Twitter,Facebook,Orkut,Digg,Stumbleupon etc brings traffic to your blog and also increases the visibility of your blog.

Your 'Social Networking' toolbar will look like this:

In order to allow the readers to share your content on the social networking sites like Twitter,Facebook,orkut,Digg,Stumbleupon and many more, follow these steps:

1>Go to Layout->Page Elements -> Add a Gadget -> Choose 'Html/Javascript' gadget
2>Insert this code into the gadget you just chose:

<div class='addthis_toolbox'>
   <div class='custom_images'>
   <a class='addthis_button_twitter'><img alt='Twitter' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWzb5i7AQgJ7euzqpyUfj5OvS6RfBkeSoaOUuEufFN2iq8Nu0kceN94Xp8xCuxd10ZG6a2FKbzSj1_e5EyKcIvZvFhMOJqM2DARorMQfNCYp4upJGm1E87XrWuEhBgrW7o_04JxnKGuis/s1600/twitter.png' width='32'/></a>
   <a class='addthis_button_delicious'><img alt='Delicious' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn2npGGFTOWkfC_EtZGrhzjJD64W80Abwx85mU68xjO_OFNYDjcj7kGPUhjGI-YNN0xxEArZ52Rw23g21Hf3mYBBFMEim3isUeCz53mXsHZ3qLXc5mHMf7mQQ0kG53ZjOq0BBqXHfr8c8/s1600/delicious.png' width='32'/></a>
   <a class='addthis_button_facebook'><img alt='Facebook' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn_uexFU3A_eZhTQjUK1lDLbfBr-X_9bilt5a1hJVzixh-XopJv4T_HtSeXdF7fbkKkYcng3Wv9G8CsrslOJxQA4NN6Et8Lda_FLW4_-nhLDhxvZtaRG_MlVbZxwOCU0gXzRdAMHiC7PI/s1600/facebook.png' width='32'/></a>
   <a class='addthis_button_digg'><img alt='Digg' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJGlgMPlCSUCZzkVKHwuxXqrwvWuwHN23Bj7w6NEgbFcJGaP9QUf9qZXPZfkjMT8tY1QStEu03WSWHdM19KKGtOcAys5KaGL7_2EZrCNIOICGqSiBs5hWEqDc9AivwWQGQC3HmyGMDyo8/s1600/digg.png' width='32'/></a>
   <a class='addthis_button_stumbleupon'><img alt='Stumbleupon' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2vYYcJ1oBCWz4h1pgTYy2UG42TVa-5t2PLLOrHx1ec52kjou_FX19Whg7rk3mhwPORMsdzruXhwutWvwH33FHh9JxSWDQPmu32-K6_cdUdiqVR9AI-gBaeuI1Fky-QOY0Ez9vtcdSHfQ/s1600/stumbleupon.png' width='32'/></a>
   <a class='addthis_button_favorites'><img alt='Favorites' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE1Pk8hfxFMw8q-J1jkp_FKNTG3mKtJxuO3EC11E3SaMOxj2fLuufUvAaic5lbPAIejQHnbccn-Jib2VaXNa38ECwaDivNrOUS-xPfDygTA1gUKqyucdbL6FjA2gzAOCEDdO5d4ZCdrsY/s1600/favorites.png' width='32'/></a>
   <a class='addthis_button_more'><img alt='More' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5VaCazU5iNSdO4GgG3HIp4RHhpqK9gPjFH7Psfec9u2QLhOs_lBYKy38eepFRvgbR0raSkH5KaZw2EeHC38Xt4Qu1YE7R6LHfVg0uwzdMeg09oNrki8CWMS-2AuVhcbd_j-q010HmCQo/s1600/more.png' width='32'/></a>
   </div>
   <script src='http://s7.addthis.com/js/250/addthis_widget.js?pub=xa-4a65e1d93cd75e94' type='text/javascript'/>
   </div>

3>Save the gadget and close

Orkut Share Button!

2009-12-16T12:07:00.000-08:00

Google recently introduced an 'Orkut Share' Button just like the Facebook or Twitter Share Buttons.
Now,with this 'Orkut Share' button,your readers can share your posts onto their Orkut accounts!

In order to Add the Orkut Share Button to your blogspot blog, follow these steps:
1>Go to Layout->Page Elements->Add a Gadget->Select 'HTML/Javascript' gadget
2>Paste the code of your choice into the gadget from the two codes given below:
a> Adding the default Orkut Share button to any webpage

lt;script src="http://orkut-share.googlecode.com/svn/trunk/orkutShare.js">
</script>

b. Adding a custom Image with Orkut Share link

Configuring Footer Menu Bars

2009-12-16T11:54:00.000-08:00

In order to add gadgets to your Footer Bar, Follow these steps:

1>Go to Layout->Edit Html and back up your current template

2>Search for this CSS code:
#footer-wrapper {

3>When found,delete all the code pertaining to footer-wrapper CSS Code and replace it with this:

#footer-wrapper {
width:980px;
  height:72px;
  clear:both;
  margin:0 auto;
  padding:0;
  text-align: center;
  font-size: 10px;
  padding:60px 0 0 0;
  }
#lower-footer {
  width:980px;
  margin:0 auto;
  padding:0;
  clear:both;
   }
#diana {
padding-top: 15px;
color: #704f80;
}

#footer-wrapper a {
   color:#714985;
   text-decoration: none;
}

#footer-wrapper .links {
   font-size: 10px;
   padding: 0px;
   margin: 0px;
}

4>Now search for this:
<div id='footer-wrapper'/>

5>When found,replace the entire code in the footer-wrapper block with this:

<div id='footer-wrapper'/>
<div id='lower-footer'/>
<b:section class='footer' id='footer'/>

6>Save your template and close

Bifurcation of Header Bar

2009-12-16T11:26:00.000-08:00

You can Bifurcate the Header Bar of your Blog in order to give more room for the gadgets.
A Bifurcated Header Bar will look something like this:

Follow these Steps:

1>Go to Layout->Edit Html and Backup your current template.

2>Search for this code:
#header-wrapper{

3>When found,replace the entire header-wrapper block with this code:

#header-wrapper{
width: 980px;
color: #fff;
margin: 30px auto 0;
padding: 0px;
overflow: hidden;
}
#header-inner {
background-position: left;
background-repeat: no;
}
.headerleft h1 {
color: #FFF;
font-family: Georgia, Times New Roman;
   font-size:56px;
font-weight: normal;
margin: 0;
padding: 0;
text-decoration: none;
}

.headerleft h3 {
font-family: Lucida sans unicode,Georgia, Times New Roman;
font-weight: normal;
margin: 0;
padding: 0;
}

.headerleft .description {
color: white;
margin-left: 0px;
padding-left: 20px;
   font-family:Georgia, Times New Roman;
   font-size:18px;
   font-style:italic;
   font-weight:bold;
}
.headerleft {
   width: 480px;
   float: left;
   margin: 0;
   padding: 0;
}
.headerright {
   width: 470px;
   float: right;
   margin: 0;
   padding: 0;
   font-weight: bold;
}

You are almost done!!

Now you need to configure the HTML code of the template:

1>Search for <div id='header-wrapper'>

2>When found,delete the code in that header-wrapper section and this code below it:

<b:section class='headerleft' id='headerleft' maxwidgets='1' showaddelement='no'/>

</div>

<b:section class='headerright' id='headerright' maxwidgets='5' showaddelement='yes'/>

</div>

3>Save the template and close

Enabling Navigation Bar

2009-12-15T13:55:00.000-08:00

Some Blogspot Templates do not display the Navigation Header Bar which consists of
a>Follow b>Share c>Next Blog etc..

A Blogspot blog with Disabled Navigation Bar will look something like this:

A Blogspot Blog With Enabled Navigation Bar will look something like this:

In order to Enable the Navigation Bar of your Blog, follow these steps:

1>Go to Layout->Edit Html.

2>Search for this piece of code:

#navbar-iframe {

display:none;

}

3>Now just change the display option to 'all' (instead of 'none').

4>Save and Close the template.

Shifting of Blog Widgets from one template to another

2009-12-15T13:33:00.000-08:00

The Best thing about Blogspot is you can change the template of your blogs as and when you like.
If you are good at coding,you can even do some code modifications of the template to suit your choice and preferences.

But,the major disadvantage of changing templates is losing of sidebar gadgets of the previous template.
Unlike Wordpress.com, Blogspot doesnot retain the gadgets when you change the templates. So this is a Major concern.

But,you still can tackle this by doing the following:

1>Go to Layout->Edit Html and search for this code:

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

2>Once found, copy all the code starting with <b:widget id until the closing of </b:section> tag for that perticular sidebar widget section.

3>Now open a notepad and paste this code and save it. These are the HTML codes for the gadgets on your sidebar.

4>Uploading a new template: Go to Layout->Edit Html -> Choose a template file and click upload.

5>Now again find this code(given below) in the new template you just uploaded:

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

6>When found, then copy the widget codes from the notepad (step 3) and paste it between the

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

and

</b:section>

7>Preview, Save and close!

8>Now all your gadgets are shifted from your old template to new template in an easier way!

Password Protecting a Post in Blogger

2009-12-15T12:08:00.000-08:00

Wish to keep a post(s) private and allow only certain readers to read them?
Then all you need to do is to "Password Protect the Post" and then give the password to your favourite readers to read that post!

"How to Password Protect a Post in Blogger":
1>Visit this link http://www.vincentcheung.ca/jsencryption/
2>In the 'Key' field, mention the Password of your choice. This is the password which you will be giving for your favourite readers so that only they can read your posts.
3>In the Plain Text Field, enter the contents of the post which you are planning to Password Protect.
4>Click on Encrypt
5>Copy the HTML code mentioned in the Blue box
6>Now go to your blog, open a new post->Give Title of the post-> Change the mode from 'Compose' to 'Edit Html' Mode and paste the HTML link which you have just copied
7>Save and publish post.
8>FINAL STEP: Go to Layout->Edit HTML
9>Between <head> and </head> paste the code (In Red) given below:
<script type="text/javascript" src="http://www.vincentcheung.ca/jsencryption/jsencryption.js"></script>

10>Now whenever the reader clicks on the password protected post, it displays the box asking them to enter the password.
Hence,only the readers having the password for your password protected posts will be able to read your Private Posts!

Creating Collapsible Lists

2009-12-14T14:04:00.000-08:00

Collapsible Lists are an easy way to show the contents of your blog in a very compact and detailed way.
I had searched the net intensively to create a Collapsible list. I was successful in finding the information regarding the creation of the 'Collapsible List' and have used it in many of my blogs.

I am hereby writing this post to help the bloggers create a 'Collapsible List'

1>Obtain the Labels of your Blog: Copy the Labels from your sidebar onto the notepad
2>Classify the Labels: Classify your labels and put them under respective categories
For eg:
Appetizers
->Gobi Manchurian
->Baby Corn Manchurian

Here,the label Appetizers has 2 child nodes i.e Gobi Manchurian and Baby Corn Manchurian

3>Follow this step for creating Collapsible List
->Go to Layout Tab->Page elements tab-> Add a Gadget -> Choose Html/Javascript Gadget
->Copy this entire code(In Red) and paste it inside the HTML/Javascript Gadget you just chose.

<style type="text/css">
.dtree {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 15px;
width:280px;
color: #000;
white-space: nowrap;
}
.dtree img {
border: 0px;
vertical-align: middle;
}
.dtree a {
color: #333;
text-decoration: none;
}
.dtree a.node, .dtree a.nodeSel {
white-space: nowrap;
padding: 1px 2px 1px 2px;
}
.dtree a.node:hover, .dtree a.nodeSel:hover {
color: #333;
text-decoration: underline;
}
.dtree a.nodeSel {
background-color: #c0d2ec;
}
.dtree .clip {
overflow: hidden;
}

</style>
<div class="dtree">
<script type="text/javascript">


</script>
</div>
Save and Close the Gadget box

Here,in my example,my code would be:

d.add(0,-1,'Recipe Index');

d.add(1,0,'Appetizers');

d.add(2,0,'Cakes and Patries');
d.add(3,0,'Chats');

d.add(10,1,'Gobi Manchurian','my gobi's.html link'); --- Here 1 is the parent node 'Appetizer' and (10,1) is a child node 'Gobi Manchurian' under parent node 'Appetizer'.. number 10 is just a number here

d.add(11,1,'Baby Corn Manchurian','my baby corn manchu's.html link');---Here 1 is the parent node 'Appetizer' and (11,1) is a child node 'Baby Corn Manchurian' under parent node 'Appetizer'.. number 11 is just a number here

d.add(20,2,'Eggless chocolate cake','my eggless cake's.html link');---Here 2 is the parent node 'Cakes and Patries' and (20,2) is a child node 'Eggless Chocolate Cake' under parent node 'Cakes and Pastries'.. number 20 is just a number here

->Now go to Layout->Edit Html->
Paste this code <script src='http://simblogg.googlepages.com/dtree.js' type='text/javascript'/>
immediately before this tag: <b:skin><![CDATA[/*