March 30, 2009

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
Read More

March 27, 2009

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
Read More

March 25, 2009

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

March 23, 2009

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
Read More

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;
Read More

March 20, 2009

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:
Read More

March 17, 2009

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
Read More

March 15, 2009

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
Read More

March 14, 2009

How to Write Titles In Blogger/BlogSpot Blogs

While bloggers generally concentrate more on content, but equal importance should be given to titles too. Of course it is true that titles are generally read by the readers for only 10-20 seconds, and rest of the time, they'll be concentrating on your content. But titles are very important for Search Engines, 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.
By writing correct and perfect titles you will directly receive a huge amount of targeted traffic, which means the title must contain all the important keywords and should not be very lengthy.
First of all make sure you have already swapped your title location in your blog (read the comments, why you should do this).

Now let us see how 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 amount of keywords in it.

But if you are planning to write a long title, then you must consider these points:
1. In Google searches, if titles are too long, then they are truncated after around 50-60 letters (including spaces).
2. While publishing a post, although articles (a, an, the) are displayed in titles but not in the post urls.

So before publishing, place all important keywords in the beginning part of the title, do not worry about grammar.
For example, if the latest news is "Bugatti Veyron has been declared as the world's fastest car", then you should write the title like, when publishing for the first time:
"Bugatti Veyron World's fastest car 2009", so your post's url will be like this:

...blogspot.com/2009/04/bugatti-veyron-worlds-fastest-car-2009.html

Now edit the post, and type a new more meaningful title, like this:
World's Fastest Car Declared - Bugatti Veyron (around 40 letters),

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

March 13, 2009

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:
Read More

March 12, 2009

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).
Read More

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

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
Read More

March 11, 2009

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
Read More

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+
Read More

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

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

March 8, 2009

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.



.
Read More

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<=
Read More

March 5, 2009

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
Read More

March 4, 2009

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

March 3, 2009

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 !
Read More

March 1, 2009

NetLimiter - Check Which Sofware Is Using Your Internet

Whether you are having an Internet connection with limited or unlimited bandwidth, you surely cannot allow all your Internet based software to access Internet at the same time.
While you can control/prevent some software from using your precious Internet, but in certain cases the software would be working silently and thus slowing down your connection speed.
Just by checking your Windows Task Manager is definitely not enough to have a control over these annoying software.

So here's a perfect software (available as freeware as well as shareware):
NetLimiter

In their own words:
NetLimiter is an ultimate internet traffic control and monitoring tool designed for Windows. You can use NetLimiter to set download/upload transfer rate limits for applications or even single connection and monitor their internet traffic.

Along with this unique feature, Netlimiter offers comprehensive set of internet statistical tools. It includes real-time traffic measurement and long-term per-application internet traffic statistics

You can either purchase their Pro and Lite versions (allows you to monitor and control), or you can download and use their freeware - NetLimiter 2 Monitor - and simply control the software yourself :)

You can also use this software to check whether you have a problem with your ISP or if any software is causing any problem. As in my own PC sometimes Firefox hangs or obstructs the Internet connection....
Read More
Next Post Homepage Previous Post

Regular Readers


What They Say...

Divya Sai is the ingenious webmaster of Bloggerstop.Net. Divya is extremely patient, knowledgeable and responsive... Bloggerstop.net has an abundance of articles on creating widgets, templates, hacks and ways to make your blog search engine friendly.
- Stacey @Pets With Allergies
I stumbled onto a great site. Sai, over at Bloggerstop.net has helped me tremendously and with great patience...for any and all questions regarding computer issues. And again, THANK YOU Sai.
- Cheryl @Cmash Loves To Read

More Here...

Popular Posts

Get this widget

| © 2010 BloggerStop.net | Blogger Widgets | Template by Dicas Blogger | Enhanced By Divya Sai | Privacy Policy