The BEST Title For Your About Us/Me Page

How do you feel if someone searches for your name, and your profile or image appears right at the top of Google search results !
The chances of your name being unique in this world with over 6 Billion people are almost nil. So your name may already be present in many websites, including some of the top ranking sites and blogs. But the problem is, this name doesn't belong or represent you. So whenever someone searches for you in Google, Yahoo or any other search engine, s/he may land up at some other page (a profile belonging to some other person of course).

So if you want your blog (specially the about-us page from your blog) to come on the top of all other results, here's a simple tweak to do...

First of all create an about-me or about-us page for your blog, the same way you created a contact-us/me page (of course now there's no need to add any contact form this time. Simply write whatever you want to share with the world, about you !)

Now once you have created the page, the url will look something like this:
http://YOUR_BLOG.BlogSpot.com/2009/04/about-us.html
or
http://YOUR_BLOG.BlogSpot.com/2009/04/about-me.html

The title of the page will be either About Us or About Me. And once, twice or a maximum of three times you would have mentioned your name in that page.
So the page is perfect, with correct content and exactly what a general reader wants to see.

But this method doesn't tell the Search Engine, that out of hundreds of words from the page, it should give more importance to your name, even if you repeat the same words (your name) for two/three times, or even more.

So our next step is to tell the search engine that it must specifically concentrate on your name in the page.
Although you can do this by adding specific meta tags to the particular page, but then here's an even more easier way to do this.
Simply edit the page, and change the title, so that now it contains your name. That's it.

Now again take a look, what exactly is their in the page:

url/address:
http://YOUR_BLOG.BlogSpot.com/2009/04/about-me.html

title:
author-Your Name

and of course, content.

To make this more effective, you can add meta tags to the page, and you may add your name in the url too (but this must be done before publishing the page for the first time).

Here are the results for my name, from Google and Yahoo:





To get your image in the Image search results, place an image in the same page, with your name as the file name of the image (Your_Name.jpg), and also your name in the alt tag.


There's no rocket science in this hack, we are exploiting a simple SEO strategy that Search engines recognize and give more importance to the words in the titles.

Share this page:
http://bloggerstop.net/2009/03/your-website-when-searched-for-name.html

Another Cool New Multi Tabbed Widget For Blogger

Here's another simple and useful multi-tabbed widget, with Next/Prev page navigation available in every tab.
It is very easy to edit and add this widget to your blog, moreover you can easily control the number and color of tabs and body in the widget.
You can see the live demo in this page: Multi-Tabbed-Widget

To add a similar widget to your blog, you need to follow these instructions:

STEP1:
Download and save these files to your computer.
jquery-1.3.2.min.js
jquery-ui-1.7.custom.min.js
tabs.css [You have to edit this file, if you want to change the default settings like color/dimensions of the widget]

Download Zipped File (TabsNextPrev.zip) from CSS-Tricks.com

STEP2:
Now open an account at MyDataNest.com or Sigmirror.com, and upload those 3 files to any of these two websites, and copy the DIRECT LINKS to these files.

STEP3:
Log in to Blogger, go to Layout -> Edit HTML
and find this code:
</head>

Now immediately ABOVE/BEFORE that code, paste these lines:
<!--JQuery-Prev-Next-Tabber-Starts-http://bloggerstop.net-->
<link rel="stylesheet" href="http://sigmirror.com/........../TEMP_tabs.css" type="text/css" media="screen, projection"/>

<script type="text/javascript" src="http://sigmirror.com/........../TEMP_jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://sigmirror.com/........../TEMP_jquery-ui-1.7.custom.min.js"></script>
<script type="text/javascript">
$(function() {

var $tabs = $('#tabs').tabs();

$(".ui-tabs-panel").each(function(i){

var totalSize = $(".ui-tabs-panel").size() - 1;

if (i != totalSize) {
next = i + 2;
$(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>Next Page &#187;</a>");
}

if (i != 0) {
prev = i;
$(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>&#171; Prev Page</a>");
}

});

$('.next-tab, .prev-tab').click(function() {
$tabs.tabs('select', $(this).attr("rel"));
return false;
});

});
</script>
<!--JQuery-Prev-Next-Tabber-Stops-http://bloggerstop.net-->
Make sure, you replace the links in RED color above with the DIRECT LINKS of the three files, you got from the previous step.

STEP4:
Save the template, and go to Layout -> Page Elements, and click on "Add a Gadget", select it as "HTML/JavaScript" type.
Now paste this code in to the widget:

<div id="page-wrap">

<div id="tabs">

<ul>
<li><a href="#fragment-1">1</a></li>
<li><a href="#fragment-2">2</a></li>
<li><a href="#fragment-3">3</a></li>
<li><a href="#fragment-4">4</a></li>
<li><a href="#fragment-5">5</a></li>
<li><a href="#fragment-6">6</a></li>
<li><a href="#fragment-7">7</a></li>
<li><a href="#fragment-8">8</a></li>
<li><a href="#fragment-9">9</a></li>
<li><a href="#fragment-10">10</a></li>
<li><a href="#fragment-11">11</a></li>
<li><a href="#fragment-12">12</a></li>
<li><a href="#fragment-13">13</a></li>
<li><a href="#fragment-14">14</a></li>
<li><a href="#fragment-15">15</a></li>
</ul>

<div id="fragment-1" class="ui-tabs-panel">
<p>Start</p>
</div>

<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide">
<p>Content of Tab 2 </p>
</div>

<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide">
<p>Content of Tab 3 </p>
</div>

<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide">
</div>

<div id="fragment-5" class="ui-tabs-panel ui-tabs-hide">
</div>

<div id="fragment-6" class="ui-tabs-panel ui-tabs-hide">
</div>

<div id="fragment-7" class="ui-tabs-panel ui-tabs-hide">
</div>

<div id="fragment-8" class="ui-tabs-panel ui-tabs-hide">
</div>

<div id="fragment-9" class="ui-tabs-panel ui-tabs-hide">
</div>

<div id="fragment-10" class="ui-tabs-panel ui-tabs-hide">
</div>

<div id="fragment-11" class="ui-tabs-panel ui-tabs-hide">
</div>

<div id="fragment-12" class="ui-tabs-panel ui-tabs-hide">
</div>

<div id="fragment-13" class="ui-tabs-panel ui-tabs-hide">
</div>

<div id="fragment-14" class="ui-tabs-panel ui-tabs-hide">
</div>

<div id="fragment-15" class="ui-tabs-panel ui-tabs-hide">
<p>The end.</p>
</div>

</div>
</div>
<a href="http://bloggerstop.net" target="_blank">Blogger Templates Widgets</a>
Change the names and content (of tabs) in the code above, before saving the widget.

You may be interested in viewing these widgets too:
Advanced Collapsible Multi-Tabbed Widget
New Multi-Tabbed Widgets For Blogger / BlogSpot Blogs
How To Create A Multi-Tab Widget In BlogSpot/Blogger Blogs

Image and Widget Credits: CSS Tricks

Highlight Text In Posts Through Colored HTML Text Boxes

Highlight Text In Posts Through Colored HTML Text Boxes
By highlighting specific regions of your post/article, you make it easier for your readers to understand the post in a better way. Although in Blogger, you can tweak the quote boxes (like the gray boxes, I use in my blog to show HTML codes), but as it is done directly in the template of the blog, so it will be applied to the whole of your blog, and therefore the boxes will have same appearance every time you use them anywhere in the blog.
So here's another easy method through which you can control and change all the settings like background color, text color size, font style etc. every time you use these boxes:
An example:
The Best way to make your dreams,
come true is to wake up.

To display a similar box in your blog, use this code:
<div align="center">
<div style="background-color: #cccd94; border: 1px solid black; font-family: sans-serif; font-weight: bold; padding: 10px; text-align: center; text-transform: capitalize; width: 300px;">
<i>The Best way to make your dreams,
come true is to <span style="color: blue; font-weight: bolder;">wake up.</span></i></div>
</div>
You can adjust the colored parts in the code to match your blog and requirements.

You may also like to read this post:
How to show different background color or image for separate posts or paragraphs.

More Twitterers Than Diggers

Recently Google took the lead as the most visited website and Search engine on Internet.
Twitter is young and powerful, although initially many people including some pro-bloggers doubted the potential of 'small tweets' of just 140 words, but now that the dust has settled, Twitter presently at it's maximum growth has not only crossed one of the most famous social networking website Digg.com in terms of traffic and popularity, but has helped a number of other web masters to create new websites entirely being used as add-ons to Twitter.
According to the stats from Alexa, both in terms of unique visitors and page views per visit, Twitter has clearly overtaken Digg by a large margin.
It's not just Alexa that is showing Twitter above Digg, Compete has something more than this to say:

Velocity from Compete:
Velocity is used to determine the relative growth of a domain over a particular timeframe or compared to other sites.
And the other parameter from Compete (Daily/Monthly Attention), shows that people are enjoying their stay at Twitter too. According to Compete, the traffic from US are spending their 0.2% time at Twitter while only 0.03% at Digg.
So if you haven't yet started tweeting, then you should better start doing it, as already the big leaders are waiting for you to follow them at Twitter:

@Google
@Yahoo
@live_search
@Digg (So Digg is itself tweeting :)
@Stumbleupon (planning to integrate with Twitter)
@NASA
@New York Times
and of course @BloggerStop

Change Opacity - Image Hover Effect

This is one of the most common and popular image hover effects, you would have seen on many blogs, including a number of pro-blogs too. Simply hover your mouse cursor on these images:


The hack is very simple, a small CSS code changes the opacity level of the images, whenever you place the mouse cursor over these images.

To add this effect to the images in your blog, follow these steps;

Delete Spam Comments Without Delete Icon In Blogger Blogs

With increasing popularity of your blog, you will see an increase in spam comments too.
In my own blog I get a number of spam comments mainly from these 2 websites:
itemplatez.com, and
FortuneHotels.in
I personally wrote to them from their contact forms, but neither have I got a response from them nor is their a decrease in the number of spam comments from them.
So my simple advice to everybody is to stay away from these SPAMMERS

If you are too facing a similar problem, and are unable to delete these spam/unwanted comments, then follow this method:

Mac Like Animated Dock Taskbar For XP/Vista

By adding a quickly accessible animated Dock task bar to your desktop, you not only access your files easily, but it also makes your desktop look more attractive which will definitely impress your colleagues and friends.
Here's a screenshot of the software:

Click to enlarge

ObjectDock™ is a program that enables users to organize their shortcuts, programs and running tasks into an attractive and fun animated Dock. The software is available both as free and as a paid shareware (with some added features).
Both the free and paid versions can be downloaded from this page:
ObjectDock-StarDock

Make Money From Blogs - Kontera vs Infolinks

Recently while writing a comparison between banner advertising and in-text link advertising, where of course in-text advertising has been proved a lot better than banner ads for majority of the bloggers, I promised a comparison between Kontera and Infolinks (as both of them have exactly the same kind of in-text advertising service).
I tried these services on BloggerStop.Net, in 3 phases:
 - Kontera alone
 - Kontera + Infolinks together (Although Kontera doesn't allow you to run another in-text ad service simultaneously ;)
 - Infolinks alone

How to Write Titles In Blogger/BlogSpot Blogs

Last updated on 20 September, 2016 - to add information about Permalink feature in Blogger

While bloggers generally focus more on content, but they should give equal (if not more) effort in framing perfect titles for their articles. Titles are important not only for Search Engines (or specifically the search engine bots which scan the titles for keywords) but these titles also play a key role in attracting the audience from various sources like Search Results, Social Media and other discussion forums.
Recently after a discussion with "heythere", I thought it will be very helpful to my fellow bloggers, to discuss the correct way of writing perfect titles for their blog posts.
Correct and perfect titles are the ones which do not miss any important keyword, are written in an attractive way (should sound anything but boring) and should never be very lengthy.
First of all make sure that you have already swapped your title-blog name location in your blog (also read the comments in that page to know why you should do this).

Now let's see the correct way to write titles in Blogger

If you are planning to write a short title, then do not worry about this trick, just make sure it has the sufficient number of keywords in it.

But if you are planning to write a long title, then you must keep in mind that in Google SERPs, if titles are too long, then they are truncated after around 50-60 letters (including spaces) (UPDATE: recently this has been updated to 70-71 characters).

In Blogger, you have two things to consider while writing a post title: The URL (Permalink) and the Title itself.


While it is not necessary for the permalink to make any sense (to read), but it should have all the keywords in a readable sequence. On the other hand, your actual title must have all the important keywords and at the same time it should make sense and be attractive enough to catch the attention of the readers.

For example, if you want to write a title something like this: World's Fastest Car Declared - Bugatti Veyron (around 40 letters), then remember that the word "declared" might be eating up some important space in your permalink.

...blogspot.com/2009/04/worlds-fastest-car-declared-bugat.html

So, to avoid the auto truncation, you may tailor the Permalink yourself in Blogger, to something like this:
...blogspot.com/2009/04/worlds-fastest-car-bugatti-veyron.html

By this way you will not miss any important keyword in the title or in the url.

NOTE: Never use titles like, New Post January, Post 1276 etc or anything irrelevant. Always write titles in the way you expect people will search, which means the titles may sound like questions, or like answers or like breaking news etc.

Dock Menu For Blogger/BlogSpot Blogs

As Dock-Menu may be something new for you, so just have a visit to this blog to see the widget in action : Dock-Menu (Look at the bottom of the page)

This is one of those widgets, which you would have probably never seen in any BlogSpot or Blogger blog.
Although mostly bloggers love to add these sort of new widgets but usually nobody searches for these widgets/hacks, so I suggest you to subscribe to this blog to get regular updates from this blog directly to your mail and you will never miss any such unusual widget !
Enter your email address:

Now if you are impressed with the widget, and your mind is bubbling with some more ideas to customize it with your own images, lets see how to get it, in to your blog:

How to change Blogger/BlogSpot address

I get numerous mails from bloggers, regarding "How to change their web-address". Although Blogger does allow you to change your blog url, easily and anytime as you wish, but I would not suggest you to do this frequently or if you have a well-established blog. The upside of this change is of course you will get a blog url as per your choice. But there are many disadvantages of changing your blog url.

  • First of all, you may lose any of your loyal visitors who frequently visit your blog, if they are not informed about this change.
  • Secondly you will lose your Alexa ranking, which solely depends on your blog's url.
  • Thirdly if you have any pages bookmarked in social bookmarking websites, then those links will now be considered as invalid links.
  • And lastly if you have been linked by any other blogs with your present blog's address, then you will even lose the link juice you were previously getting.
So in case you have a relatively new blog (around 2/3 months old) and not having more than 50 blog posts, then you may change the url, otherwise do it only if you think it is absolutely necessary for you.

Direct Method:
Log in to Blogger,
Now go to "Settings" -> "Publishing" tab.

Change the url (blog-address), enter the captcha and hit the "Save Settings" button. That's it. You have a new blog-url now.

Alternatively, you can follow this method (In case you do not have too many posts in your present blog):
Create a new blog, with the desired blog-address.
Export your present blog (From Settings -> Basic tab).
And now import your present blog to the new blog.

By this method, both your blogs (new and old) will be live and you can place some banners at your present blog, for your regular readers, telling them about your new blog, making sure that you do not leave anyone behind.

NOTE: If you are planning to shift to a custom domain, then I would suggest you to do it without delay despite of the disadvantages described above, because you not only get a professional domain, but you can also redirect your present web-traffic to the new domain easily. Also remember that with increasing web traffic and popularity of blogs, global TLDs are now really very difficult to register (as most of the web-domains are already registered), so if you are serious about blogging then register a domain as soon as possible (it hardly costs you $8/9 per domain per year).

A Simple Drop-Down Menu Using Jquery

The last two drop down menu tutorials on this blog use background images in the menu-tabs, and hence it is not so easy to customize them for your blogs. So here's a new widget code, in which you can easily change the colors of the menu so as to match with your blog.


Live demo can be seen here:
Demo1: ClubVista Blogger Template (In Green)
Demo2: JavaScript-Array (In Blue) (Widget author's blog)

To add a widget similar to these, follow these steps:

STEP1:
Log in to Blogger, go to "Layout" -> "Edit HTML"

STEP2:
Now find this code:
</head>
and immediately BEFORE/ABOVE it, paste this code:
<!--jquery-DD-Menu-Starts-->
<style type="text/css">
/* menu styles */
#jsddm
{ margin: 0;
padding: 0}

#jsddm li
{ float: left;
list-style: none;
font: 12px Tahoma, Arial}

#jsddm li a
{ display: block;
background: #324143; /*DARK-GREEN*/
padding: 5px 12px;
text-decoration: none;
border-right: 1px solid white;
width: 70px;
color: #EAFFED;
white-space: nowrap}

#jsddm li a:hover
{ background: #24313C}

#jsddm li ul
{ margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white}

#jsddm li ul li
{ float: none;
display: inline}

#jsddm li ul li a
{ width: auto;
background: #A9C251; /*LIGHT-GREEN*/
color: #24313C}

#jsddm li ul li a:hover
{ background: #8EA344}
</style>


<!-- script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;

function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');}

function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}

$(document).ready(function()
{ $('#jsddm > li').bind('mouseover', jsddm_open);
$('#jsddm > li').bind('mouseout', jsddm_timer);});

document.onclick = jsddm_close;
</script>
<!--jquery-DD-Menu-Stops-http://bloggerstop.net-->
Now before you save the template, make these changes in the code :
To get the HTML color codes, you can refer to this image:
http://homepages.ulb.ac.be/~dgonze/INFO/htmlcolors.png
STEP3:
and go to "Layout" -> "Page Elements"
and click on "Add a Gadget", select it as "HTML/JavaScript" type

and finally paste this code in to the new widget:
<!--BODY-CODE-->
<ul id="jsddm">
<li><a href="#">JavaScript</a>
<ul>
<li><a href="#">Drop Down Menu</a></li>
<li><a href="#">jQuery Plugin</a></li>
<li><a href="#">Ajax Navigation</a></li>
</ul>
</li>
<li><a href="#">Effect</a>
<ul>
<li><a href="#">Slide Effect</a></li>
<li><a href="#">Fade Effect</a></li>
<li><a href="#">Opacity Mode</a></li>
<li><a href="#">Drop Shadow</a></li>
<li><a href="#">Semitransparent</a></li>
</ul>
</li>
<li><a href="#">Navigation</a></li>
<li><a href="#">HTML/CSS</a></li>
<li><a href="http://bloggerstop.net">Blogger Help</a></li>
</ul>
And save the widget.

Show Your Visitors Their Location On Your Blog

Show Your Visitors Their Location On Your Blog
If you want to amaze your visitors by showing their own details on your website/blog, like IP address, ISP name, Country, region and time zone, then here are some images that you have to add to your blog.
The two images displayed below, presently would be showing your details, similarly it would show the details of anyone reading your blog/web site if you place these on your blog.


Code to be added:
<img border="0" src="http://www.ip2location.com/images/ip2location.png"/>

OR you may add this image:


Code to be added:
<img border="0" src="http://www.ip2location.com/images/ip2locationbig.png"/>

Simply add a HTML/JavaScript widget in your blog, and add any of the two codes shown above. That's it....no javascripting or any other complex coding required for this hack.

Credits: IP2Location

NOTE: The data shown above is only visible to the visitors, and is not recorded/stored for you. In case you want to track and optimize your blog, then you should read this post:
Track your visitors and optimize your blog

New Multi-Level Drop-Down Menu

Drop down menu makes the navigation in your blog a lot easier, as you can put a number of links in a single row or column.
See this widget in action: ClubVista Template
Similar Widgets:
1. Multi Level Drop Down Menu - Black
2. Sliding Drop Down Menu

To use this drop down menu on your blog, follow these instructions:

STEP #1:
Log in to Blogger, go to Layout and click on "Edit HTML"

Find (CTRL+F) this code in the template:
</head>
and immediately ABOVE / BEFORE that, paste this code:
<!--MULTI-LEVEL-DD-MENU-STARTS-->
<link rel="stylesheet" href="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/style.css" type="text/css" />
<script type="text/javascript" src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/script.js"></script>
<!--MULTI-LEVEL-DD-MENU-http://bloggerstop.net-->

STEP #2:
Now go to "Layout" -> "Edit HTML" -> "Page Elements" and click on "Add a Gadget" and select it as "HTML/JavaScript" type.

And add this code to it:
<!--MULTI-LEVEL-DD-MENU-STARTS-->
<ul class="menunew" id="menu">
<li><a href="#" class="menulink">Dropdown One</a>
<ul>
<li><a href="#">Navigation Item 1</a></li>
<li>
<a href="#" class="sub">Navigation Item 2</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
<li><a href="#">Navigation Item 3</a></li>
<li><a href="#">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
</ul>
</li>
<li>
<a href="#" class="sub">Navigation Item 3</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
<li>
<a href="#" class="sub">Navigation Item 3</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
<li><a href="#">Navigation Item 3</a></li>
<li><a href="#">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
<li><a href="#">Navigation Item 6</a></li>
</ul>
</li>
<li><a href="#">Navigation Item 4</a></li>
</ul>
</li>
<li><a href="#">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
</ul>
</li>
<li><a href="http://bloggerstop.net" class="menulink">Blogger Help</a></li>
<li>
<a href="#" class="menulink">Dropdown Two</a>
<ul>
<li><a href="#">Navigation Item 1</a></li>
<li>
<a href="#" class="sub">Navigation Item 2</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
<li><a href="#">Navigation Item 3</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#" class="menulink">Dropdown Three</a>
<ul>
<li><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
<li><a href="#">Navigation Item 3</a></li>
<li><a href="#">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
<li>
<a href="#" class="sub">Navigation Item 6</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
</ul>
</li>
<li><a href="#">Navigation Item 7</a></li>
<li><a href="#">Navigation Item 8</a></li>
<li><a href="#">Navigation Item 9</a></li>
<li><a href="#">Navigation Item 10</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
var menu=new menu.dd("menu");
menu.init("menu","menuhover");
</script>
<!--MULTI-LEVEL-DD-MENU-http://bloggerstop.net-->
Of course you have to edit the content before saving this widget.


NOTE: Although the required css and js files are already uploaded and linked in the code in STEP #1, but I suggest you to download and save these files as a backup on your PC:

BackUp - STEP #1:
Download these 2 files:
DDM1_script.js, and
DDM1_style.css

Download zipped file

BackUp - STEP #2:
Upload them to MyDataNest.com, and get the DIRECT LINKS to these files.

Credits for the widget: Leigeber
Widget Requested by: Roady

Advanced Collapsible Multi-Tabbed Widget

UPDATE: This widget is no longer working. A new tutorial has been written on "How to Add Collapsible Multi-Tabbed Widget"

I have already two tutorials in this blog on 'how to add multi-tabbed widgets' - Post 1 and Post 2, but this one is very different and more professional too.
Requested by maboroshine, this widget is capable of auto-adjusting the height of different tabs according to their content.

The widget looks like this:

But when you select tab 2 or tab 3, the height of the widget will adjust itself according to the content in tab 2 or tab 3.

To see this widget in action see this blog: Club-Vista Template
Or see it live here: Demo 2

Instructions to add this widget to your blog:

Step1:
Download these two files:
jquery-ui-personalized-1.5.2.packed.js
sprinkle.js

from NetTutsPlus | (Download the Source.zip file)

NOTE: Delete extra files (index.html, jquery-1.2.6.min.js, star.png, style.css) included in the downloaded zipped file.

Also download
new-tabber-Style.rar
from Here - Ziddu.com
Extract and save the file as new-tabber-Style.css

Step2:
Now go to MyDataNest.com and upload all those 3 files. And copy all the DIRECT LINKS to these files.
NOTE: In your MyDataNest account, edit and save the properties of the folder as "hidden" and NOT as "private" where you just uploaded the files.

Step3:
Log in to Blogger
Go to "Layout" -> Edit HTML
and find (CTRL+F) this in the template code :
</head>

And immediately BEFORE/ABOVE it, paste this code:
<!--MULTI-TABBED-WIDGET-STARTS-->
<link href='http://mydatanest.com...../new-tabber_style.css' rel='stylesheet' type='text/css'/>
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script src='http://mydatanest.com...../new-tabber_jquery-ui-personalized-1.5.js' type='text/javascript'/>
<script src='http://mydatanest.com...../new-tabber_sprinkle.js' type='text/javascript'/>
<!--MULTI-TABBED-WIDGET-STOPS-->

Before pasting the code in to your template, replace the links in RED to the DIRECT LINKS of the files you got from step 2.

Step4:
Now save the template.

Step5:
Go to "Layout" -> Page Elements and Add a Gadget (HTML/JavaScript type)

Step6:
And finally copy and paste this code in to the new widget:
<div id="tabvanilla" class="widgettab">

<ul class="tabnav">
<li><a href="#popular">Popular</a></li>
<li><a href="#recent">Recent</a></li>
<li><a href="#featured">Featured</a></li>
</ul>

<div id="popular" class="tabdiv">
<ul>
<li><a href="#">Welsh Zombie Sheep Invasion</a></li>
<li><a href="#">Sheep Rising From The Dead</a></li>
<li><a href="#">Blogosphere Daily Released!</a></li>
<li><a href="#">Aliens Infiltrate Army Base In UK Town</a></li>
<li><a href="#">U2 Rocks New York's Central Park</a></li>
<li><a href="#">TA Soldiers Wear Uniforms To Work</a></li>
<li><a href="#">13 People Rescued From Flat Fire</a></li>
<li><a href="#">US Troops Abandon Afghan Outpost</a></li>
<li><a href="#">Are We Alone? A Look Into Space</a></li>
<li><a href="#">Apple iPhone 3G Released</a></li>
</ul>
</div><!--/popular-->

<div id="recent" class="tabdiv">
<p>Your recent posts widget here</p>
</div><!--/recent-->

<div id="featured" class="tabdiv">
<ul>
<li><a href="#">Aliens Infiltrate Army Base In UK Town</a></li>
<li><a href="#">Are We Alone? A Look Into Space</a></li>
<li><a href="#">U2 Rocks New York's Central Park</a></li>
<li><a href="#">TA Soldiers Wear Uniforms To Work</a></li>
<li><a href="#">13 People Rescued From Flat Fire</a></li>
<li><a href="#">US Troops Abandon Afghan Outpost</a></li>
<li><a href="#">Sheep Rising From The Dead</a></li>
<li><a href="#">Blogosphere Daily Released!</a></li>
<li><a href="#">Apple iPhone 3G Released</a></li>
<li><a href="#">Welsh Zombie Sheep Invasion</a></li>
</ul>
</div><!--featured-->

</div>

Of course change the colored code as per your requirement.

NOTE: To adjust the width of the widget or margin around the widget or to replace the silver star with any other image, you have to EDIT the .css file (new-tabber_style.css) before uploading it to HotLinkFiles.com

So add this professional widet to your blog ASAP !

Credits for the widget: Dan Harper and NetTuts+

Beautiful Glossy Blossom Icons

Blossom Icons - This is one of best icons set that I have seen on the web !
Created and copyrighted by DryIcons.com
Preview of icons:
Visit their website, to download these icons: DryIcons (I would suggest you to download the ".PNG Icon set")

Please have a look on their Free and Commercial license before using these icons. If you want to use these icons for free of charge, then linking to them (Dryicons.com) is necessary.

Create A Sliding Side Menu

I think better than words these images will explain you, what this hack/widget is all about:

Sliding Side-Menu in it's normal position
 
Sliding Side-Menu expanded on mouse hover

And to see the widget in action, click on this link: Dark Wooden Template

Now if you are impressed with the widget and want to add a similar widget to your blog, then simply follow these steps:

1. Download these two javascript files from DynamicDrive:
ssm.js, and
ssmItems.js [LINK to DynamicDrive]

2. Now open the second file (ssmItems.js) with note/text pad, and edit it :
<!--

/*
Configure menu styles below
NOTE: To edit the link colors, go to the STYLE tags and edit the ssm2Items colors
*/
YOffset=150; // no quotes!!
XOffset=0;
staticYOffset=30; // no quotes!!
slideSpeed=20 // no quotes!!
waitTime=100; // no quotes!! this sets the time the menu stays out for after the mouse goes off it.
menuBGColor="black";
menuIsStatic="yes"; //this sets whether menu should stay static on the screen
menuWidth=150; // Must be a multiple of 10! no quotes!!
menuCols=2;
hdrFontFamily="verdana";
hdrFontSize="2";
hdrFontColor="white";
hdrBGColor="#170088";
hdrAlign="left";
hdrVAlign="center";
hdrHeight="15";
linkFontFamily="Verdana";
linkFontSize="2";
linkBGColor="white"; //White color behind links
linkOverBGColor="#FFFF99"; //Blue Color Behind Menu and External Links
linkTarget="_top";
linkAlign="Left";
barBGColor="#444444"; //Gray color behind Side Menu
barFontFamily="Verdana";
barFontSize="2";
barFontColor="white";
barVAlign="center";
barWidth=20; // no quotes!!
barText="SIDE MENU"; // <IMG> tag supported. Put exact html for an image to show.

///////////////////////////

// ssmItems[...]=[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a header
ssmItems[0]=["Menu"] //create header
ssmItems[1]=["BloggerStop", "http://bloggerstop.net", ""]
ssmItems[2]=["Contact Us", "http://bloggerstop.net/2008/09/contact-us.html",""]
ssmItems[3]=["Earn Money", "http://join-ziddu.co.cc/", ""]
ssmItems[4]=["Cheap Domain", "http://main.bloggerstop.net/contests/1and1/1and1.html", "_new"]
ssmItems[5]=["Blogger Templates", "http://bloggerstop.net/2008/09/blogger-help-free-blogger-templates.html", ""]
ssmItems[6]=["Blogger Help", "http://bloggerstop.net/2008/09/blogger-help.html", ""]
ssmItems[7]=["FAQ", "http://any_FAQ_PAGE", "", 1, "no"] //create two column row
ssmItems[8]=["Email", "http://Your_Email_Add", "",1]
ssmItems[9]=["External Links", "", ""] //create header
ssmItems[10]=["JavaScript Kit", "http://www.javascriptkit.com", ""]
ssmItems[11]=["Gallery", "http://gallery.main.bloggerstop.net/image1.htm", ""]
ssmItems[12]=["Reviews", "http://review-the-web.blogspot.com", ""]

buildMenu();

//-->
Now change everything in RED, GREEN and BLUE as per your requirements.
The code shown in purple color are comments, you can change them to modify the background colors.

Now after editing, save the file.

3. Now upload these two files to MyDataNest.com (You have to register for free as a member to upload files).
4. Then copy the direct links to these files.

5. Finally change the links (in red color) in the following code with your new links from MyDataNest.com
<!--SIDE-MENU-STARTS-->
<STYLE>
<!--
A.ssmItems:link {color:black;text-decoration:none;}
A.ssmItems:hover {color:black;text-decoration:none;}
A.ssmItems:active {color:black;text-decoration:none;}
A.ssmItems:visited {color:black;text-decoration:none;}
//-->
</STYLE>

<SCRIPT SRC='http://dsai.588.googlepages.com/ssm.js' language='JavaScript1.2'>

//Dynamic-FX slide in menu v6.5 (By maXimus, maximus@nsimail.com)
//Site: http://maximus.ravecore.com/
//For full source, and 100&#39;s more DHTML scripts, visit http://www.dynamicdrive.com

</SCRIPT>

<SCRIPT SRC='http://dsai.588.googlepages.com/ssmItems.js' language='JavaScript1.2'/>
<!--SIDE-MENU-STOPS-->

Go to your blog template (Log in to Blogger -> Go to Layout -> Edit HTML), and find (CTRL+F) this code:
</head>
And paste the code (obtained from step 5) just BEFORE/ABOVE it.

Credits: DynamicDrive and MaXimus
Feel free to ask your doubts...

Wi-Fi and Noise Detecting T-Shirts !

Wi-Fi and Noise Detecting T-Shirts !
You would have heard about wrist watches and key chains with Wi-Fi detectors, which can only tell you whether or not you are in a Wi-Fi zone. But the thinking geeks at ThinkGeek have created some cool, techie t-shirts which detect and tell everybody around that they can start using their Wi-Fi enabled gadgets !
The shirts are fixed with Animated Decals, operated by AAA alkaline batteries. While washing the shirts, this has to be removed (of course you know that).
Each shirt costs $20 and the batteries add another $3 to the total cost..not bad to impress your friends or you can even give them off as gifts to your geeky friends ;)

If you are a music lover, then they have created another black shirt with an embedded equalizer, each Equalizer bar reacts differently depending on sound frequency.

And that's not all, there's a third shirt which plays music with the touch of a simple wired-remote. You can add your sounds/music to it, and it can also easily synchronize to your iPods or any other portable audio player.



.

A Simple Dark Wooden Style Blogger Template


Recently Blogger is not allowing the use of customized 'xml templates' in Blogger blogs, and that is why a number of bx-errors are being displayed while bloggers are trying to upload a customized template.
According to Gatsby (Blogger employee) :
We did this because we had seen a lot of data corruption due to 'bad
templates,' and we are trying to stave off some of these issues pre-emptively.
Now we realize that this has caused some inconvenience to folks, so we
are re-thinking our decision and will post an update on that shortly.
In the meantime, I thought I'd pass along a workaround that should
work for most people.
And, as I only create blogger templates based on the simplest blogger theme - Minima, so these templates have simple and correct coding and upload without any errors.

Here's a new Blogger Template - Dark Wooden Texture


Instructions: How to change Blogger Templates

If you want to improve it further, and make it more search engine friendly, then see these blogger tips and tricks


=> Download More Templates from Here<=

Make Money From Blogs - Banners vs In Text Ads

With 100+ hacks and tricks for bloggers [compiled list of tips, tricks and widgets] available on this blog, you can easily optimize your blog for both search engines and your readers.
Once you have optimized your blog and started getting hundreds (or even thousands) of visitors daily, you may think of monetizing your blog. As you know that money follows fame, you just need to show the CORRECT path to it, so as to monetize with maximum potential and to get a continuous flow of money.

One of the easiest way of making money is of course advertising. Although direct selling of ads on your blog is the most convenient way of advertising, but generally it is not advised to new bloggers, as it can take several months and attempts to get a single advertiser (and of course you'll initially earn less than your expectations after all negotiations), due to which bloggers may even start losing interest in blogging.
So other than direct advertising usually the choice of majority of bloggers is either Google Adsense or Bidvertiser or any other similar service where you are supposed to place some javascript files on your blog and hence, banner ads will be shown on your blog. And a certain amount of commission is paid to you by the service provider.
May be 5 years back this would have worked for you, but now these banners have gone really bad [Banner Blindness]. With most of the new bloggers reporting a very low CTR (clicks per 1000 page-impressions), only experienced bloggers are able to make money by this method with correct placing and blending of the ads with their content, and of course with millions of page views per month. Moreover with tools like Adsense-blockers, many visitors do not even allow your ads to be displayed in their browsers.

So the better way to advertise is In-Text Advertising, (DO NOT confuse it with TEXT-LINK ads). In text link ads, you have to hyperlink any text to the sponsor (with HTML of course), BUT in case of IN-TEXT ads, a small javascript file is placed in your blog template. This javascript file creates VIRTUAL hyperlinks in your blog for specific keywords, already present in the post.
When visitors notice these VIRTUAL hyperlinks and click on the ads, you'll get paid for those clicks.

You have many advantages by using this system over banner ads:
1. Readers will notice the ads while they are reading the post (so more chances of the ads being clicked)
2. As these are VIRTUAL hyperlinks, which is due to the javascript file and NOT due to direct HTML coding, so you will NOT be penalized by Google and so there's NO risk to your blog's PageRank.
3. You can yourself decide the color of the links, number of links per page, and whether they should be underlined with a single line or double lines.

You can use the services from these websites:
Kontera
Infolinks

NOTE: I am personally using these services presently on my blog and the results are really a lot better than banner ads. I will be soon writing a post comparing the two services (Infolinks and Kontera).


*UPDATE: Kontera vs Infolinks - Winner declared

A Quick SEO Tool

A Quick SEO Tool
Search Engine Optimization does take a lot of time (well, if not being done right from the beginning), and the way you optimize your blog/website also changes with time. But certain SEO techniques are quite constant (at least till now). So if you want to get some traffic from the search engine giants like Google, Yahoo and MSN Live, then you must consider and optimize certain features in your blog, these include (but of course not limited to): Optimizing the meta-data, optimizing the images used in your blog, domain registration, getting indexed in Google through sitemaps, adding your posts/articles to social networking sites, etc.
If you want to check your blog's present status with respect to these parameters, then you can do this quickly by visiting this website: WebSite Grader.

Simply type your blog's url and hit the "Generate Report" button. Within minutes you will get a percentile for your blog (90 percentile means out of 100 blogs you are better than 89 blogs and 10 blog are better than you).
But for you this percentile is NOT important, you should better check for the PINK boxes displayed in your result page.

Because these PINK boxes show the problems present within your blog. You must correct them and then again submit your blog, and see if your blog improves the percentile score.

PS: As there are many SEO optimizing tools and web sites available on Internet, no one can guarantee you COMPLETE success, so you must try more than one tool and try to optimize those problems which are being shown by most of those tools.

Change Newer Posts, Older Posts and Home Links In Blogger

As requested by Mohammad, from TecFun, here's a simple hack to change the Older posts, Newer Posts and Home links in your blog (displayed below all your blog posts):

1. Log in to Blogger
2. Go to Layout -> Edit HTML -> Click on "Expand Widget Templates"
3. Now search (CTRL+F) for this code in the template code:

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

</div>
<div class='clear'/>
</b:includable>
Now carefully replace the colored code regions with your own custom image icons.
The first red colored code is for "Newer Posts" link.
The second red colored code is for "Older Posts" link.
The blue colored codes are for "Home" link.

For icons, you can visit this web site:
Icon Search

To add images, simply use this code:

<img src="http://DIRECT_LINK_OF_YOUR_IMAGE.jpg"/>

Finally save your template, that's it !