BloggerStop.Net - Blogger Widgets, Templates, Help!: December 2009

December 31, 2009

Happy New Year 2010

A very happy and prosperous new year to all the readers of BloggerStop.

December 25, 2009

Friday Blogger Backup #3 - & - Merry Xmas

Here comes the last Friday of this month and also of the year 2009. Time flies but do not let your blogs content fly off. Take regular back ups and proper precautions to protect your blogs content and template.
As always this post is a reminder to all the readers of BloggerStop to download and save their blogs content.
Have a look on these posts by Blogger, how they mistakenly marked several blogs as SPAM a year ago: Post #1 | Post #2
So this is what you have to do to protect your content (don't worry, it will not take more than 5 minutes)

December 23, 2009

Embed/Add Christmas Games To Your Blog

Show your visitors that you enjoy Xmas as much as they do! Play these games and add them to your blog right now.

Add Falling Snowflakes / Flowers / Leaves to Your Blog

Post Updated: Now this tutorial includes an additional snow-storm script. This hack will display falling snow in your blog even though it does not include any images in the script.

Whether it's winter, spring or your birthday, adding some falling snowflakes/flowers/leaves or balloons to your blog makes it attractive. And to do that, you simply have to paste a code snippet in any of your blogs HTML/JavaScript widgets.
To show this widget only in the Homepage or any other specific page, read this post:
How to show widgets only in specific pages.

Steps To Follow:

December 21, 2009

An Easy To Add non-JavaScript Based Orkut Share Button For BlogSpot Blogs

The previous tutorial on how to add an orkut share button in Blogger blogs was based on javaScript, which will definitely slow down your blog.
So this new method will add exactly the same button, without adding any additional scripts to your blog.

Add Orkut Share Button To Your Blogger / BlogSpot Blog

In just two steps, you can have this button working on your blog:

STEP #1:
Log in to Blogger, go to Layout -> Edit HTML
And find (CTRL+F) this code in the template:

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

STEP #2:
And immediately BELOW/AFTER it, paste this code:

<b:if cond='data:blog.pageType == "item"'>
<a expr:href='"http://promote.orkut.com/preview?nt=orkut.com&du=" + data:post.url + "&tt=" + data:post.title' target='_blank'><img src='http://code.google.com/apis/orkut/docs/images/share.gif'/></a></b:if>

And save the template.

NOTE: Instead of displaying it below the post-title, you can display it along with your other social bookmarking buttons too.
Of course you can use any image instead of the default Orkut-Share logo, like these:

DIRECT-LINK: http://i50.tinypic.com/14mz4ac.jpg

DIRECT-LINK: http://i47.tinypic.com/35bba5e.jpg

DIRECT-LINK: http://i47.tinypic.com/2ccmbmo.jpg
Save the widget.

And to display this button, along with Twitter or Facebook buttons, use these tables:

Table to display ANY TWO BUTTONS at a time:

<table border="0">
<tr>
<td style="width:40%;">Paste Code For Orkut Here</td>
<td style="width:40%;">Paste Code For Twitter / Facebook Here</td>
</tr>
</table>

Table to display ALL THREE BUTTONS at a time:

<table border="0">
<tr>
<td style="width:25%;">Paste Code For Orkut Here</td>
<td style="width:25%;">Paste Code For Twitter Here</td>
<td style="width:25%;">Paste Code For Facebook Here</td>
</tr>
</table>

This post was requested by CrazySeawolf.

December 19, 2009

Redirect Your BlogSpot Blog (or Any Blog-Post) To Some Other Blog/Webpage

This tutorial will help you to redirect your blog or any particular blog post to any other web address (a blog, website or a webpage).
You can do this redirection by adding a single line of code to your blog. This is called Meta-Redirect (also meta-refresh).

Live Example:
http://Google.BlogSpot.com redirects to http://GoogleBlog.BlogSpot.com

Instructions To Follow:

STEP #1
Log in to Blogger, go to Layout -> Edit HTML

STEP #2
Now find this code:

<head>

And immediately BELOW/AFTER this code, add this one:

<meta http-equiv="refresh" content="3; url=http://bloggerstop.net/" />

And save the template.
Now, your blog will now redirect to BloggerStop.net after 3 seconds (3 seconds countdown will start only after your blog has been completely loaded).

When and How to use it:
1. If you have two blogs, and want to use only one blog, then you can redirect all the traffic of Blog-2 to Blog-1, and keep blogging at Blog-1. This will get you some additional traffic.
2. If you are working on your blogs template/any widget, then temporarily redirect your blog traffic to an under-construction webpage. [In this case, apply this redirection to all but one page of your blog, where you can work and see the changes you are trying to implement - see MODIFIED CODE #1]
3. If you have updated an old post with a new one, then you can update your older post with a message similar to this one: You will be redirected to the newer/updated version of this post in 5 seconds and then redirect the readers to the updated post. [see MODIFIED CODE #2]

MODIFIED CODE #1
Redirect all your blog pages EXCEPT one page/blog-post:
Use this code instead of that in STEP #2

<b:if cond='data:blog.url != "SPECIFIC_BLOG-POST_URL"'>

<meta http-equiv="refresh" content="3; url=http://bloggerstop.net/" />

</b:if>

MODIFIED CODE #2
And use this code, to Redirect ONLY a particular post to some other post.

<b:if cond='data:blog.url == "SPECIFIC_BLOG-POST_URL"'>

<meta http-equiv="refresh" content="3; url=http://bloggerstop.net/" />

</b:if>

Image Credits: SEOServicesGroup

December 18, 2009

Add A Blogger Archive Calendar Widget To Your Blog

Live DemoOne of the most famous widgets available on WordPress which is rarely seen in a Blogger blog is of course a calendar archive widget, in which dates are linked to posts published on that particular date.
Thanks to Phydeaux3 as we now have this widget for Blogger too.
Although you can add a simple calendar to your blog, as a HTML/JavaScript widget, but this one is far more advanced than that one.
This tutorial has mainly four steps, three are common to everyone and in the fourth step, styling of the widget will be done [you can select from the pre-made skins or you may modify/design a unique theme for your widget].

Instructions To Follow:

STEP #1:
Log in to Blogger, go to Layout
Now add the regular Blogger Archive widget (if you do not already have one in your blog). [BTW don't worry nothing will go wrong :)]

Now go to Layout -> Edit HTML
and "Download Your Template" as a back up, if anything goes wrong.

then find this code:

<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>

The id can also be BlogArchive2 instead of BlogArchive1.

Replace that line with this code:

<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
<b:includable id='toggle' var='interval'>

</b:includable>
<b:includable id='flat' var='data'>
<div id='bloggerCalendarList'>
<ul>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</div>

<div id='blogger_calendar' style='display:none'>
<table id='bcalendar'><caption id='bcaption'>

</caption>

<thead id='bcHead'></thead>



<tbody><tr><td id='cell1'> </td><td id='cell2'> </td><td id='cell3'> </td><td id='cell4'> </td><td id='cell5'> </td><td id='cell6'> </td><td id='cell7'> </td></tr>
<tr><td id='cell8'> </td><td id='cell9'> </td><td id='cell10'> </td><td id='cell11'> </td><td id='cell12'> </td><td id='cell13'> </td><td id='cell14'> </td></tr>
<tr><td id='cell15'> </td><td id='cell16'> </td><td id='cell17'> </td><td id='cell18'> </td><td id='cell19'> </td><td id='cell20'> </td><td id='cell21'> </td></tr>
<tr><td id='cell22'> </td><td id='cell23'> </td><td id='cell24'> </td><td id='cell25'> </td><td id='cell26'> </td><td id='cell27'> </td><td id='cell28'> </td></tr>
<tr><td id='cell29'> </td><td id='cell30'> </td><td id='cell31'> </td><td id='cell32'> </td><td id='cell33'> </td><td id='cell34'> </td><td id='cell35'> </td></tr>
<tr id='lastRow'><td id='cell36'> </td><td id='cell37'> </td></tr>
</tbody>
</table>
<table id='bcNavigation'><tr>
<td id='bcFootPrev'></td>
<td id='bcFootAll'></td>
<td id='bcFootNext'></td>
</tr></table>

<div id='calLoadingStatus' style='display:none; text-align:center;'>
<script type='text/javascript'>bcLoadStatus();</script>
</div>
<div id='calendarDisplay'/>
</div>

<script type='text/javascript'> initCal();</script>

</b:includable>
<b:includable id='posts' var='posts'>

</b:includable>
<b:includable id='menu' var='data'>
Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format
</b:includable>
<b:includable id='interval' var='intervalData'>
Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format
</b:includable>
</b:widget>

Now save the template.

STEP #2
Now find this code in the template:

</head>

And immediately ABOVE/BEFORE it, paste this code:

//STYLE CODE WILL COME HERE - SEE STEP #4
<script src='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/blogger_archive.js' type='text/javascript'/>
<script src='/feeds/posts/summary?max-results=0&alt=json-in-script&callback=timezoneSet'/>

Again save the template.

STEP #3
Now go to Layout -> Page Elements
and edit the properties of the archive widget according to this image:

Now the calendar widget will appear on your blog.

STEP #4
Go back to Layout -> Edit HTML.
Now here's the styling part of the tutorial; select the best theme for your blog from this page:
Archive Calendar Styles [Just remember the name of the style]

Now copy the code of that style (and replace the code in RED in STEP #2 with this one):

Style for Dark Templates

<link href='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/dark_theme.css' rel='stylesheet' type='text/css'/>

Style - Plain White

<link href='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/plain_white.css' rel='stylesheet' type='text/css'/>

Style - Blue/Black

<link href='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/blue_black.css' rel='stylesheet' type='text/css'/>

Style - Dusty Blue

<link href='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/dusty_blue.css' rel='stylesheet' type='text/css'/>

If you want to change the color/width etc. of this widget yourself, then instead of using any of the 4 style-themes from step #4, modify the Plain Simple Theme according to the instructions/comments written along the code lines and place it in to your template.

Credits for the widget: Phydeaux3

December 17, 2009

Bring Them Back - Republish Your Lost Posts !

Blogs are dynamic, when you publish new posts, your older posts are lost forever in the archives. While posts on the front page get maximum attention and pageviews but other posts on your blog receive only direct traffic from search engines and social networking sites. With ten or twenty posts in a blog, finding a particular post is not difficult. But when you have 100's of posts published on your blog, then your visitors may easily miss out any post of their interest, while going through your blog archives.
But if you are using Blogger, then you have got an option to bring back your older posts to the hompage whenever you want.
This is especially useful in seasonal events, when a post written in the past must be present on the homepage. But publishing a new post with the same content will cause content-duplication problems, so you can simply edit your previous post to change the publishing date and bring it back to the top.
So to do this, open the post-editor and click on Post Options link present in the bottom of the page. Now Set date and time to present or any future date.

Finally save the post and your work is done (You can of course undo the changes, to send the post back to its original place).

This technique is SEO friendly too, as you are not going to change the permalink of your post. In Blogger, when you publish a new post it gets a unique url in this format (http://YOURBLOG.BogSpot.com/YEAR/MONTH/Title_Of_The_Post.html)
which should and will remain the same, even after doing this hack.

December 15, 2009

Are You Planning To Make Your Blog "DoFollow" ?

This Sunday morning I was surprised to see over 100 unread comments on my blog with hardly 1 or 2 words per comment. Most of the comments were saying either "thank you for the post" or simply "ty" and of course linked to some blog/web address, now it was clear that all of these comments were SPAM.
It took almost one hour to delete all these comments. I am sure Google would already have detected all these new links leaving my blog, but luckily for me BloggerStop is not a DoFollow blog. Then why all these unecessary comments were here this morning?
Spam Comments

I checked my stats [track your visitors too] and found all these commentators were coming from a famous Turkish forum R10, and they were here due to an incorrect post mentioning BloggerStop as a dofollow blog.
So this is exactly what can happen with you too, if you have a dofollow blog and a single post about your blog is posted on a popular forum. And imagine the spam flood your blog will face when the same post is copied to other forums, blogs and directories. Within a few days Google and other search engines will penalise your blog for converting it in to a link farm.
But if you still want to enjoy the spammy, non-converting traffic and you think that you have ample time to moderate all the spam comments then you can easily convert your blogger blog in to a dofollow blog, by deleting a small code snippet:

rel='nofollow'

from this line:

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

in your blogs template (the code will be displayed in the template only when you mark the "Expand Widget Templates" tickbox).

So, any plans to change your blog to a dofollow blog?

December 14, 2009

PART-2 : Collapsible Multi-Tabbed Widget

Yesterday I published an article on Collapsible Multi-Tabbed Widget and this post is the second part of that tutorial. You just have to copy a single line from this post to completely change the UI of that widget.

Previous Widget used to look like this:

Once you follow the simple steps of this tutorial, you can give a complete new look to that widget by selecting the perfect widget-theme out of 24 available skins. Three of the 24 new skins are displayed below [Live DEMO]:

Now to give a new look to that widget, all you have to do is, add a single code-line in the STEP #1 of the previous tutorial. After modification the EXACT code you should use looks like this:

PASTE NEW CODE-LINE HERE

<script type="text/javascript" src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/ui.core.js"></script>
<script type="text/javascript" src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/ui.tabs.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#tabs").tabs();
});
//getter
var ajaxOptions = $('.selector').tabs('option', 'ajaxOptions');
//setter
$('.selector').tabs('option', 'ajaxOptions', { async: false });
</script>

//IMPORTANT: SOME UNECESSARY CODE FROM THIS PART IN THE PREVIOUS TUTORIAL HAS BEEN DELETED NOW

The line in BLUE is where you have to paste the new code, which is unique for every widget skin. Instead of that blue line, copy and paste the code of your interest from below.

Now go to this page: JQUERYUI - Tabs Demo
and from the drop-down menu (see the top-right region of the page), check out all the 24 available widget skins:

Then remember the name of the skin/theme of your choice and return back to this page. And now copy the appropriate code:

Theme #01: UI Lightness
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" rel="stylesheet" />

Theme #02: UI Darkness
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-darkness/jquery-ui.css" rel="stylesheet" />

Theme #03: Smoothness
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />

Theme #04: Start
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/start/jquery-ui.css" rel="stylesheet" />

Theme #05: Redmond
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css" rel="stylesheet" />

Theme #06: Sunny
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/sunny/jquery-ui.css" rel="stylesheet" />

Theme #07: Overcast
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/overcast/jquery-ui.css" rel="stylesheet" />

Theme #08: Le Frog
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/le-frog/jquery-ui.css" rel="stylesheet" />

Theme #09: Flick (or Flicker type)
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/flick/jquery-ui.css" rel="stylesheet" />

Theme #10: Pepper Grinder
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/pepper-grinder/jquery-ui.css" rel="stylesheet" />

Theme #11: EggPlant
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/eggplant/jquery-ui.css" rel="stylesheet" />

Theme #12: Dark Hive
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/dark-hive/jquery-ui.css" rel="stylesheet" />

Theme #13: Cupertino
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/cupertino/jquery-ui.css" rel="stylesheet" />

Theme #14: South Street
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/south-street/jquery-ui.css" rel="stylesheet" />

Theme #15: Blitzer
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/blitzer/jquery-ui.css" rel="stylesheet" />

Theme #16: Humanity
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/humanity/jquery-ui.css" rel="stylesheet" />

Theme #17: Hot Sneaks
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/hot-sneaks/jquery-ui.css" rel="stylesheet" />

Theme #18: Excite Bike
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/excite-bike/jquery-ui.css" rel="stylesheet" />

Theme #19: Vader
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/vader/jquery-ui.css" rel="stylesheet" />

Theme #20: Dot Luv
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/dot-luv/jquery-ui.css" rel="stylesheet" />

Theme #21: Mint Choc
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/mint-choc/jquery-ui.css" rel="stylesheet" />

Theme #22: Black Tie
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/black-tie/jquery-ui.css" rel="stylesheet" />

Theme #23: Trontastic
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/trontastic/jquery-ui.css" rel="stylesheet" />

Theme #24: Swanky Purse
Code to copy:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/swanky-purse/jquery-ui.css" rel="stylesheet" />

Once you have copied the code, replace the blue line in the above code with this new code and save your template.
From the previous post, leave the code in STEP #2 as it is.
Your widget is now ready in an entirely new look...

December 13, 2009

Collapsible Multi-Tabbed Widget For Blogger Blogs

*UPDATE: 24 new skins are available for this widget. Check out Collapsible Multi Tabbed Widget - Part2 to select the best theme for your widget.

This tutorial will help you to add a multi-tabbed widget to your blog. You can use this widget to display more content in less space using the tabs.

Blogger_Tabber_Widget

Working Demo | [DEMO - Widget Part 2]
To add it to your blog, your task is as simple as copy and paste. At the same time the widget is highly customizable and you can easily change its appearance to match your blogs theme.

Instrucions to follow:

STEP #1:
Log in to Blogger and go to Layout -> Edit HTML and find this code in your blog:

</head>

Immediately ABOVE/BEFORE it, paste this code:

<link type="text/css" href="http://jquery-ui.googlecode.com/svn/tags/latest/themes/base/jquery.ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/ui.core.js"></script>
<script type="text/javascript" src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/ui.tabs.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#tabs").tabs();
});
//getter
var ajaxOptions = $('.selector').tabs('option', 'ajaxOptions');
//setter
$('.selector').tabs('option', 'ajaxOptions', { async: false });
</script>
<style>

.ui-tabs-selected a {
background-color: #fff;
color: #000;
font-weight: bold;
padding: 2px 8px 1px;
border-bottom: 1px solid #fff;
border-left: 1px solid gray;
border-right: 1px solid gray;
margin-bottom: -1px;
overflow: visible;
}

#fragment-1 {
background: #999900; //Background color of content area 1 (tab 1)
color:#FFFFFF; //Text color in content area 1 (tab 1)
margin-top:2px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
}
#fragment-2 {
background: #CC9900; //Background color of content area 2 (tab 2)
color:#FFFFFF; //Text color in content area 2 (tab 2)
margin-top:2px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
}
#fragment-3 {
background: #666666; //Background color of content area 3 (tab 3)
color:#FFFFFF; //Text color in content area 3 (tab 3)
margin-top:2px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
}
#fragment-3 a {
color:#FFFFFF; //color of HYPERLINKS in content area 3 (tab 3)
}

</style>

The code highlighted in RED will control the appearance of the tabs. And the code highlighted in BLUE will control the appearance of the content area. To make your work easy, comments are written in front of the code above (highlighted in GREEN color).
Now save the template.

STEP #2:
Now go to Layout -> Page Elements
Click on Add a Gadget and select it as HTML/JavaScript type
And paste this code into it:

<div id="tabs">
<ul>
<li><a href="#fragment-1"><span>Best Posts</span></a></li>
<li><a href="#fragment-2"><span>My Pictures</span></a></li>
<li><a href="#fragment-3"><span>Recent Posts</span></a></li>
</ul>
<div id="fragment-1">

<span style="text-align:left;">

<p>First tab is active by default:</p>

</span>

</div>
<div id="fragment-2">

<center><a href="http://tinypic.com" target="_blank"><img src="http://i29.tinypic.com/29ggyu0.jpg" border="0" alt="Image and video hosting by TinyPic"></a></center>

</div>
<div id="fragment-3">

Content of Tab #3

<br/><span style="font-size: xx-small;"><a href="http://bloggerstop.net" target="_blank">Blogger Widgets</a></span>
</div>
</div>

Now before you save the widget, change the text in RED to change the names of tabs and change the text in BLUE to change the content of the tabs.

Save the widget and enjoy more content in less space.

This post has been written to replace the previous tutorial on advanced collapsible multi-tabbed widget.

December 8, 2009

Blogger Template - For The Artists Out There...

This template is based on Minima, loads quickly and has a customizable background.

Demo | Download

CSS styling is done by TemplateMO and has been bloggerized by BloggerStop.Net
Template loading time: 1.7 seconds (without content).

With a width of 775 pixels, the template is optimized for all screen resoultions (from 800x600 to 1024x768 and larger).

To change the top menu-links, find and edit this code in the template:

<ul>
<li><a href='#'>HOME</a></li>
<li><a href='#'>ABOUT</a></li>
<li><a href='#'>SERVICES</a></li>
<li><a href='#'>GALLERY</a></li>
<li><a href='#'>CONTACT</a></li>
</ul>

For search engine optimization, meta tags are already added, but you have to manually edit them to fill your details. Find these tags in the template and edit them according to this tutorial:

<meta content="ALL_KEYWORDS_HERE_SEPARATED_BY_COMMAS" name="keywords"></meta>
<meta content="YOUR_OR_AUTHOR'S_NAME_HERE" name="author"></meta>
<link href="mailto:YOUR_EMAIL_ADDRESS_HERE" rev="made"></link>
<meta content="INDEX,FOLLOW" name="ROBOTS"></meta>
<b:if cond="data:blog.url == data:blog.homepageUrl"> 
<meta content="GENERAL_DESCRIPTION_HERE" name="description"></meta>
</b:if>

Read this tutorial to change templates without losing any of your widgets.

NOTE: This template is free to use, share and modify under CC 3.0

Share your views on this template.

December 6, 2009

Decorate Your Blog With These Awesome Xmas-Icons

This christmas decorate your blog exactly the way you decorate your home with attractive stars, balls and snowflake icons. All these icons have tranparent backgrounds, to perfectly blend with your template. You can use any number of icons and even a mixture of the icons [but you have to manually combine two or more pictures using photo-editing software like Adobe Photoshop or Paint.Net (freeware)]

Have a look on the demo [Live Demo]:

December 4, 2009

Speed Matters - Site Speed is an Important SEO Factor Now!

Google loves speed, and there's absolutely no doubt in it. Most of the searches made on Google, return the results within a second. And Google doesn't want to limit its speed only till the search result pages [SERPs], rather, it is now trying to give the best user experience by showing fast loading pages in its top results.
May be a few years back Google/Matt Cutts had a different opinion, when content and information was given prime importance in search engine ranking. But presently with similar content in hundred's of pages across the web, page loading speed has to be made an important SEO factor.
The official news...
In a recent interview with WebProNews, Google's Matt Cutts has given some insights on how site speed may soon be an important ranking factor:
"Historically, we haven't had to use it in our search rankings, but a lot of people within Google think that the web should be fast," says Cutts. "It should be a good experience, and so it's sort of fair to say that if you're a fast site, maybe you should get a little bit of a bonus. If you really have an awfully slow site, then maybe users don't want that as much."

Moreover Site Speed has been included as a new feature under "Google Labs" section in Google Webmaster Tools too:

Google Site Performance-Loading Speed

So anything new in SEO?
There are no additional SEO requirements due to this announcement, already loading speed is important to make the visitors happy, now it has been added as an important factor in search engines rankings.
1. Check your sites loading time at PingDom [quite accurate and recommended tool]
2. Other tools to check and optimize your blogs loading time.
3. Google itself is ready to help you to speed up the loading time - Google Speed and Helpful Tools [Check you Webmaster Tools account too - a must for everyone]
4. Also read this post [from OneCoolSite] on how you can optimize your site's loading speed.
5. Select templates with minimum graphics and javascript/css files.

Exactly when will Google update its algorithm?
May be Google has already included it, but Matt implied that it will be added to their algorithm in 2010.

Image credits: The Insider