BloggerStop.Net - Blogger Widgets, Templates, Help!

Add Facebook Buttons and Widgets To Your Blog

bloggerstop.net@gmail.com (Divya Sai) — Mon, 02 Nov 2009 10:09:00 +0000

Facebook has already overtaken Yahoo according to the stats from Alexa. So along with search engine optimization, you should also try to bring some traffic from social networking sites like Facebook.

Add these buttons to your blog and help your visitors to share your articles easily on FB.
Instructions to follow:
Log in to Blogger -> Layout -> Edit HTML, and select the tickbox "Edit Widget Templates"
Now find this code in your template:

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

Now immediately below it, paste the code for the facebook button (select the appropriate one for your blog).

As a link:

Code to paste:

<b:if cond='data:blog.pageType == "item"'>
<span style="text-align: right;">
<a name="fb_share" type="icon_link" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</span></b:if>

Button #1

Code to paste:

<b:if cond='data:blog.pageType == "item"'><span style="text-align: right;">
<a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</span></b:if>

Button #2

Code to paste:

<b:if cond='data:blog.pageType == "item"'><span style="text-align: right;">
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</span></b:if>

Other Facebook Widgets you can display on your blog:
1. Facebook Profile Badge
2. Facebook Photo Badges
3. Live Stream Box (Just like the twitter widget):

4. And visit this page to add a Facebook Fan Box Widget to your blog.

New Transparent Navbars From Blogger

bloggerstop.net@gmail.com (Divya Sai) — Sat, 31 Oct 2009 07:44:00 +0000

Now Blogger has given you another reason to show their navbar. Previously only four colors were available, viz. Blue, Black, Tan, and Silver, which of coure do not fit with all templates. Most of the bloggers usually prefer to hide the navbar completely, but a few weeks back a better method was published on BloggerStop to toggle the navbar with mouse-hover effect.

Today Blogger has introduced two new "transparent" navbars - "Transparent Light" and "Transparent Dark." To quote a few lines from the post:

These new color schemes take advantage of the ability of modern browsers to render transparency (a technique known to web designers as "alpha blending"). This allows the navbar background to blend together with your blog's background color and pattern. The "Transparent Light" color scheme has a semi-transparent white background, producing subtle pastel colors, while the background of "Transparent Dark" is a semi-transparent black that produces a shaded look.

And also, as it was already observed Blogger has simplified and slimmed down the look of all the navbars, so as to harmonize with the aesthetics of your blog.

It's Friday - Blogger BackUp Day

bloggerstop.net@gmail.com (Divya Sai) — Fri, 30 Oct 2009 11:56:00 +0000

A simple Google search will show you how many people using Blogger have lost their blog posts, comments, templates and/or widgets.
Usually blogs are blocked by Blogger if any inappropriate/illegal content is found in the blogs, but again you can see that many Bloggers aren't aware of this and they read the Blogger TOS only when their blogs get banned and they completely lose the access/control over their blogs, and so they cannot even correct or remove the inappropriate content from their blogs.

While it is important to read and follow Blogger TOS and not to spam their service, but at the same time you must take precautions and regular backups to avoid any accidental deletion of your blog.
So from now onwards, on every last Friday of the month a post will be published on BloggerStop to remind all the readers (including me) to take backup and store files safely on your PC.

Quick Links:
1. Tutorial for blog posts and comments backup.

2. Tutorial for template and widgets backup (read the first 6 steps of the tutorial).

Google PageRank - From Mystery to History ?

bloggerstop.net@gmail.com (Divya Sai) — Thu, 22 Oct 2009 21:07:00 +0000

Whether you like it or not, but "PageRank distribution of your webpages" has been permanently removed from your Google Webmaster Tools account.

Along with the recent introduction of Labs in GWT, the option to view PageRank Distribution and Page with highest PageRank under "Crawl Stats" has been removed from GWT.
In the words of Susan Moskwa, Webmaster Trends Analyst, Google.

We've been telling people for a long time that they shouldn't focus on PageRank so much; many site owners seem to think it's the most important metric for them to track, which is simply not true. We removed it because we felt it was silly to tell people not to think about it, but then to show them the data, implying that they should look at it.

Moreover many people have observed that their Google toolbar has also stopped showing the PageRank, rather it is showing N/A (No PageRank information available) for all the webpages/websites. Till now there's no official word from Google on this issue, but again we may get some idea from Susan's next message in the same thread:

Toolbar isn't primarily aimed at site owners who are looking for precise & reliable metrics that they can judge their site by or make decisions by. That's one reason it made sense to remove it from Webmaster Tools, which is designed specifically for site owners in a way that Toolbar is not. Personally I would love to see us remove PR from the Toolbar, but mine is not the only opinion in Google and the folks I have most contact with--site owners--aren't the only users or stakeholders of Toolbar.

Even Matt Cutts has given his opinion against the toolbar PR (way back in 2007):

Personally, I wouldn't mind removing the PageRank in the Google Toolbar or swapping it with some other indicator, but that would be a large undertaking. Maybe that can be a long-term goal for me.

Google PageRank almost always gets a reference when we talk about Websites, SEO and making money/building fame online. For some, it is just an algorithm, for others it's a tool to check the authority or authenticity of a webpage/website and for the rest it is as alien as the 63 moons of Jupiter.

Even if the public PageRank is no more visible to us, but the actual dynamic PageRank is still working and is one of the 200 important criteria which decide the ranking of different webpages in specific Google search results. So keep optimizing your blogs for Search Engines and if you are new to PageRank and SEO, then have a quick look here and here.

RU #3: Blogger Blogs and Search Engine Optimization

bloggerstop.net@gmail.com (Divya Sai) — Thu, 22 Oct 2009 14:58:00 +0000

This is the third post of the BloggerStop-Round Up series.

Bookmark this post, read and implement these tutorials/hacks to optimize your blog for search engines and bring organic traffic to your blog.

1. Swap title position in Blogger blogs

2. Meta tags
   (a) Importance & how to add them to your blog
   (b) Add separate meta tags to individual pages
   (c) Dynamic meta tags (add meta tags to all your pages automatically)
   (d) Duplicate meta tags and titles - issue Solved

3. Track your visitors and optimize your blog for them.

4. Find out what most people search for...

5. Add your blog to Google blog search.

6. Find and remove broken links from your blog.

7. Show only titles in Blog Archive and Labels pages.

8. How to write titles for search engines.

9. Check your website in different browsers and at different screen resolutions.

10. SEO plug-ins for Firefox.

11. Add your blogs sitemap to Google

12. Best title for your About-Me page

13. Correct way to write titles in Blogger [Important for SEO]

14. Encrypt or hide your HTML source

15. Get better and converting traffic from BlogExplosion and EntreCard

16. A quick SEO tool [Checks your blog for various parameters and accordingly gives a grade to your blog - you MUST check your blog here]

Free File Hosting Sites with Hotlinking/Direct Linking

bloggerstop.net@gmail.com (Divya Sai) — Wed, 21 Oct 2009 18:24:00 +0000

This post will solve one of the main problems faced by Bloggers working on Blogger platform, i.e. to hotlink CSS/JavaScript (.js) files within their templates.

Direct Linking or Hotlinking
Whenever you upload a file to a file hosting site, a download link is given to you to share the file with others. But there are mainly two ways in which the file can be downloaded.
Let’s say you uploaded a file “X” to example.com
And your blog/website is abc-xyz.com
Now if your readers can download that “X” file directly from a link present on your website (abc-xyz.com), then it is called hotlinking/direct linking. But if they have to visit example.com to download that particular “X” file (like in case of Rapidshare/MegaUpload etc.) then these download links are not considered as hotlinks/direct links.

Hotlink providers
These websites allow you to upload almost any file and get a direct link to that file. This post compares the following file hosts providing hotlinking facility: MyDataNest, SigMirror, BoxSTr, FileDen and HotLinkFiles.

This table will help you to select the best service out of the above listed free hosting providers.

*Websites >>*	MyDataNest	SigMirror	Boxstr	FileDen	HotLinkFiles
*Features*
Storage	2 GB	2.5 GB	5 GB	1 GB	1 GB
Bandwidth/Mo	20 GB	7 GB	1 GB / Day	5 GB	8GB
HotLinking	Allowed	Allowed	Not Allowed For .js Files	Not Allowed For .js Files	Allowed
Files Allowed	All	Almost All		.js Files Not Allowed	Allowed
Uptime	99%	99%	99%	99%	Goes down frequently

Why you should NOT use HotLinkFiles.com?
First of all, their servers go down frequently (so all the uploaded files go missing too). This is very annoying as your website/blog may stop loading due to these errors. So when selecting a file hosting server, make sure they guarantee 99.9% uptime.
Secondly there are several complaints against HotLinkFiles, for containing harmful malware, Trojans and lots of spyware. You may read about this at AboutUs.org and at MyWot.com

Why NOT BOXSTr.com and FileDen.com?
JavaScript files are used in most of the widgets and hacks. But at these websites, no direct linking/hotlinking facility is provided for your JavaScript (.js) files. Moreover according to their TOU:
To maintain a stable system and provide the highest level of storage for all members, accounts that have been inactive for 30 days will have their files removed. As long as you keep an active account your files will never get deleted, regardless to size or usage.

Why NOT Google Pages/Google Sites?
Google has already decided to close their GooglePages service.
And in case of Google Sites, other than having a not-so user-friendly UI, they never disclose their allowed bandwidth. And when the (undisclosed) bandwidth is exceeded, of course the files become inaccessible.

BOX.net - something different...
Although Box.net allows its "free users" to place a widget on their blogs, through which their visitors can easily download all the files, but it is definitely not hotlinking as it requires a widget which is based on flash/javascript. BOX.net does allow hotlinking of files, but it is limited to premium customers only.

The Winner!
Therefore the selected file host service from the list above is MyDataNest.com (and also SigMirror.com).
I would recommend you to register and use both these websites.
MyDataNest.com offers better file management system, with the option to create many folders and sub-folders to organize your files, with download statistics against each shared file.
As most of the files which are needed to be hotlinked are usually JavaScript/CSS files, so diskspace of anything more than 1GB will suffice, but bandwidth requirements may change anytime for any blog/website with increasing popularity and MyDataNest provides maximum bandwidth (20GB/month) among the above listed websites.
So give your first preference to MyDataNest and keep a back up of all your files at SigMirror.
Finally store all the direct links used in your blog/website in a text file on your PC.

Although you may try and use their free service for as long as you want, but if you think you need more space and bandwidth then have a look on their premium plans too. All the readers of BloggerStop will straight away get a discount of 50% on any of the listed premium plans (for the first year), by using the coupon code – BLOGGERSTOP

So from now onwards, wherever you require DIRECT LINKS in my tutorials, upload your files to MyDataNest

RU #2: Optimize Commenting System On Your Blog!

bloggerstop.net@gmail.com (Divya Sai) — Wed, 21 Oct 2009 14:58:00 +0000

This is the second post of the BloggerStop-Round Up series.

Bookmark this post, and read the tutorials listed below to optimize commenting on your blog and the way you display your popular/recent comments to your visitors.

01. Embed comment form below posts.

02. Recent comments widget for Blogger.

03. Top commentators widget.

04. Easily moderate comments in Blogger blogs.

05. Delete spam comments without the "Delete icon".

06. Add Yahoo smiley emoticons/icons above the comment form.

07. Change "Post A Comment" link/text.

08. Highlight Blog owners comments.

09. Redfine your comment form, by replacing it with these new comment forms [from JS-Kit/Echo, Disqus and Intense-debate]

10. Back up your comments and posts.

11. Comment like this! [Gain authority through the comments you make on other blogs]

RU #1: Optimize Your Posts - Blogger Help!

bloggerstop.net@gmail.com (Divya Sai) — Tue, 20 Oct 2009 17:25:00 +0000

This is the first post of the BloggerStop-Round Up series.

Bookmark this post, and read the tutorials listed below to optimize your posts and the way you display your popular/recent posts to your visitors.

01. Back up your posts and comments [a MUST for everyone]

02. Protect your blog - Copyright your posts for Free!

03. Add Rating and Feedback below your posts.

04. Recent posts widget for Blogger blogs

05. Auto-scrolling recent posts widget

06. A pictorial related posts widget.

07. Popular posts widget - New & Working

08. Customized popular posts widget.

09. Show your signature below all your posts

10. New fonts to use in Blogger

11. Pictures speak a thousand words
    (a) Embed images in your posts
    (b) Change position of images
    (c) Display images in original size

12. Create a scheduled post in Blogger

13. Create a Sticky post (Always on Top) in Blogger.

14. Truncate your posts [Let your blog load faster]
    (a) Manually add Read More link to your posts.
    (b) Add Read More link automatically to all your posts.
    (b) Add it in the official way.

15. Link different parts of the same webpage [anchors].

16. Add a Contact Me Page (Form) to your blog.

17. Embed "Save As PDF" button below your posts.

18. Highlight text in your posts

Bounce & Share - Social Bookmarking Widget !

bloggerstop.net@gmail.com (Divya Sai) — Sun, 18 Oct 2009 15:23:00 +0000

Here's a cool new social bookmarking widget for your blog, with on-hover animation effect. The icons will bounce up as soon as you place your mouse cursor over these icons.

Check out the live demo here: Bouncing Icons

Instructions to add these buttons:

STEP #1
Download these files:
Screen2.css
execute.js
from Ziddu as a zipped file

STEP #2
Upload those two files to MyDataNest (Registration required)
and copy the DIRECT LINKS to these two files.

STEP #3
Log in to Blogger -> Layout -> Edit HTML and select the tick-box Expand Widget Templates
Then, find (CTRL+F) this code in the template:

And immediately ABOVE/BEFORE it, paste this code:
Replace the links in RED, with the DIRECT LINKS you got in STEP #2

STEP #4:
Now find this code in the template:
And immediately BELOW/AFTER it, paste this code:

Now SAVE the template. And let your visitors share your articles.

This section of the post is ONLY FOR THOSE readers, who are not happy with the above icons or they want to use their own icons or if they want to remove/include any other bookmarking icon.
(This is a little bit difficult part. Actually not difficult, but will certainly take some time.)

This is complicated not only because of the additional coding, but also because you have to work with Adobe Photoshop (but don't worry as more than half of the work is already done for you).

Download all the circular icons (including Yahoo, Technorati etc.) from here:
BlogPerfume.

Then contact me, for the .PSD image (Icons.psd) containing all icons used in the above tutorial.

In the .PSD image, replace the icons with the new icons you got from BlogPerfume. Save the image as icons-new.png
Upload this new file to TinyPic.com and get the Direct Link to this file.
Then in the Screen2.css file, replace this link (http://i38.tinypic.com/ojpky0.jpg) with the new DIRECT LINK you just obtained from tinypic.com

Finally, in the STEP #4, change the code, depending on the network icon selected by you. [code to add other social networking icons]

*Update: You may download and use these icons too:

Red and White Pearl Social Icons by WebTreat

Silver Glossy Icons by WebTreat

Glossy Orange White Icons by WebTreat

Glossy Blue White Icons by WebTreat

Credits: Bounce & Share widget by BloggerStop. This tutorial is based on Realistic Hover Effect With jQuery by Adrian. Icons used in the widget are free-to-use icons created by BlogPerfume.

Happy Diwali To All !

bloggerstop.net@gmail.com (Divya Sai) — Sat, 17 Oct 2009 11:59:00 +0000

BloggerStop - Round Ups Are Coming !

bloggerstop.net@gmail.com (Divya Sai) — Fri, 16 Oct 2009 16:14:00 +0000

After completing more than 365 days online with over 300 posts already published, some important posts are lost in the archives and only a few regular readers are able to access them. So some round-up (RUs) posts are ready to get published at BloggerStop. These posts will be categorized in different groups and will contain links to other already published posts. I will suggest you to bookmark these posts, to easily access all the important posts anytime in future.

Check Your WebSite In Different Browsers, Resolutions and Operating Systems

bloggerstop.net@gmail.com (Divya Sai) — Wed, 14 Oct 2009 09:11:00 +0000

Optimizing your website/blog for all screen resolutions, Internet browsers and operating systems is really important. A conflict of your website with any these parameters may result in an increase in the bounce rate of your blog/website.

The stats facts!

According to the Global Stats from Statcounter, you should optimize your blog/website for these operating systems: Windows XP, Windows Vista, Mac OS X and Windows 7.
And you should make your website/blog compatible with these Internet browsers: Windows Internet Explorer 6 (and 6+), Firefox 2 (and 2+), Opera 9+ and Google Chrome.
And finally the content-area of your website should be clearly visible in these screen resolutions (that means your website should be neither too smaller nor larger than the resolution of your visitor's PC): 1024x768, 1280x1024, 800x600, 1152x864, 1280x800 and also 1600x1200.

The problem you will face
If you want to check and optimize your website for each of the above listed parameter, then it may take hours just to check your website in these different operating systems, browsers and screen resolutions.

Finally the solution
So to make your work simple, here are just four websites, that will help you to visualize your website in different combinations within minutes.

1. Adobe Browser Labs - To check your website in different combinations of operating systems and browsers. (It's Adobe - registration is required).

2. View Like Us - Check your website in different screen resolutions. (Also checks for iPhone and Wii browser)

3. BrowserShots - most famous, damn slow and I don't use it anymore !

4. NetRender - A quicker option to check your website in all versions of Internet Explorer.

My Suggestions:
1. Track your website visitors to check, in what operating systems, internet browsers and screen resolutions are they working.
2. Your website must look good in all operating systems, but do not worry much on this.
3. Internet Explorer and Firefox display many html/css elements differently. Like using transparent PNG images in older versions of Internet Explorer is not impossible but quite difficult. So you must check your website in different browsers.
4. Set your websites dimensions (width) near 1000 px. This resolution will suite almost all the screen resolutions. And use background images/colors [download free background images] for those visitors with screen resolution higher than 1000 px.

bLaughing Over Blogging !

bloggerstop.net@gmail.com (Divya Sai) — Sat, 10 Oct 2009 14:52:00 +0000

On the lighter side

Shrinking Self Esteem

The Truth Will Set You Free

A Deal's a Deal

Ergonomics for the Video Blogger

Vowing Wedding Favors

Boca Computer Repair

Understanding Women

Technorati Lover

Web Two Point Ohhhh

Please Buy My Company

To BCC or Not to BCC

Senior Netizens

The Whole Internet Truth

These are just some of the images from the funny comic strips collection of bLaugh.com Visit this site for more such random funny jokes on blogging and Internet.

Let Your Visitors Change Your Blog Theme !!!

bloggerstop.net@gmail.com (Divya Sai) — Thu, 01 Oct 2009 23:16:00 +0000

Here's another cool hack, that will allow your visitors to change the header/background image of your blog.
The theme will get modified only for that particular reader/visitor and will remain in the default state for all other users.

To quickly understand and try this hack, checkout this on this demo blog: Dynamic Css For Blogger Blogs

Although this hack can be used to change all the css elements of your blog (Header, Background image, links colors, font size and style etc.) but to keep this post short and easy to understand I will only focus on Header and Background images.
In any blogger templates, you will see codes similar to these, to change background images and header.

For Background Image:

body {
color: #fff;
background: url('http://ANY_WEBSITE.com/DzSPJQXgCBw/BackGround_Image.png') repeat;
font-family: arial,verdana,helvetica,tahoma,Sans-serif;
font-size: 100%;
width: 100%;
...
...
...
...
}

And for Header Image:

#header h1 {
background-image:url(http://i38.tinypic.com/HEADER_IMAGE.jpg);
color: #fff;
font: Trebuchet MS;
text-align: left;
}

But generally these elements ("body" and "header h1") are used only once. So you do not have an option to switch between different background and header images.

But in this hack, we will add more than one background or header elements to the template, although at any moment of time only one background image and/or header image will be shown (of course).
To add different elements, separate .css files will be used.

Now follow these instructions to add similar multiple background and header images to your blog:

STEP #1:
Download these CSS Files:
style_1.css (for background 1)
style_2.css (for background 2)
style_3.css (for background 3)

style_4.css (for header 1)
style_5.css (for header 2)

serversideSwitch.html

As a Zipped File (from Ziddu)

And download StylesheetToggle.js from KelvinLuck.com (Right click and "save target as")

STEP #2:
Edit the css files, to add your own images.
You may use as many CSS files as you want. To create more css files, simply create new text files, and save them as .css instead of .txt

In stylesheets 1-3, change the image url, like this:

body {

background: url(http://DIRECT_LINK_TO_ANY_IMAGE.jpg) repeat;

color: #333;
}

More instructions to change background image here.
And download more background images from here.

In stylesheets 4-5, change the image url and corresponding height and width, like this:

#header-wrapper {

width:800px;

height: 200px;

background: url(http://i38.tinypic.com/ivyhdc.jpg) no-repeat;

margin:0 auto 10px;
border:1px solid $bordercolor;
}

Edit the code lines highlighted in RED. Save the file.

NOTE: It is NOT necessary to use different files for header and background images. You can make combinatinos of those files too. So in stylesheets 1-3 along with background images you can simultaneously use 3 different header images too. Similarly in stylesheets 4-5 along with header images, you can insert code for background images too.

STEP #3:
Upload all the files to your MyDataNest/HotLinkFiles account (registration required).
Copy the DIRECT LINKS to these files.

NOTE: In MyDataNest, make sure that the folder where you have uploaded these files is selected as "hidden" and NOT as "private".

STEP #4:
Log in to Blogger, go to Layout -> Edit HTML
and find (CTRL+F) this code:

</head>

and immediately ABOVE/BEFORE it, paste this code:

<link href='http://mydatanest.com/files/............../Style_1.css' media='screen' rel='alternate stylesheet' title='styles1' type='text/css'/>
<link href='http://mydatanest.com/files/............../Style_2.css' media='screen' rel='alternate stylesheet' title='styles2' type='text/css'/>
<link href='http://mydatanest.com/files/............../Style_3.css' media='screen' rel='alternate stylesheet' title='styles3' type='text/css'/>
<link href='http://mydatanest.com/files/............../Style_4.css' media='screen' rel='alternate stylesheet' title='styles4' type='text/css'/>
<link href='http://mydatanest.com/files/............../Style_5.css' media='screen' rel='alternate stylesheet' title='styles5' type='text/css'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script src='http://mydatanest.com/files/............../stylesheetToggle.js' type='text/javascript'/>
<script type='text/javascript'>
$(function()
{
// Call stylesheet init so that all stylesheet changing functions
// will work.
$.stylesheetInit();

// This code loops through the stylesheets when you click the link with
// an ID of "toggler" below.
$('#toggler').bind(
'click',
function(e)
{
$.stylesheetToggle();
return false;
}
);

// When one of the styleswitch links is clicked then switch the stylesheet to
// the one matching the value of that links rel attribute.
$('.styleswitch').bind(
'click',
function(e)
{
$.stylesheetSwitch(this.getAttribute('rel'));
return false;
}
);
}
);
</script>

Replace links in RED above, with the DIRECT LINKS you got in STEP #3.

Once again, you need not use exactly 5 css files, delete or add code to the above code in STEP #4 according to the number of your css files.

Save the template.

STEP #5:
Go to Layout -> Page Elements and click on "Add A Gadget" and select it as "HTML/JavaScript" type.

And paste this in to it:

<h3>Try Changing HEADER of this blog!</h3>
<center>
<a href="http://mydatanest.com/files/................/serversideSwitch.html?style=style_4" class="styleswitch" rel="styles4"><img width="200" src="http://i34.tinypic.com/24vmrv8.jpg"/></a>
<br/>
<a href="http://mydatanest.com/files/................/serversideSwitch.html?style=style_5" class="styleswitch" rel="styles5"><img width="200" src="http://i38.tinypic.com/ivyhdc.jpg"/></a>
</center>
<h3>Choose a different Background:</h3>
<center>
<a href="http://mydatanest.com/files/................/serversideSwitch.html?style=style_1" class="styleswitch" rel="styles1"><img width="100" src="http://i34.tinypic.com/28vsgef.jpg"/></a>
<br/>
<a href="http://mydatanest.com/files/................/serversideSwitch.html?style=style_2" class="styleswitch" rel="styles2"><img width="100" src="http://i33.tinypic.com/282j7ts.jpg"/></a>
<br/>
<a href="http://mydatanest.com/files/................/serversideSwitch.html?style=style_3" class="styleswitch" rel="styles3"><img width="100" src="http://i35.tinypic.com/2d12u08.jpg"/></a>
</center>

Change the link highlighted in RED with the DIRECT LINK to the file (serversideSwitch.html).
And use the same "rel" tags in the code above as the "title" tags used in STEP #4.

Credits: Based on StyleSwicth-Toggle by Kelvin Luck from KelvinLuck.com. Follow him on Twitter @vitch.

Display Your HomePage Like BING

bloggerstop.net@gmail.com (Divya Sai) — Mon, 28 Sep 2009 07:30:00 +0000

The previous tutorial on this blog explains, how to add an overlay welcome/under construction page to your blog.
Now this post is exactly based on the same method, but with some simple modifications.

Click on the image

Or check out the Live Demo

Follow these instructions to add a BING like homepage to your blog...

Step #1
Download these two files:
leightbox.js
prototype.js

from CodeBook
and save the files on to your computer.

And download BG_Like_BING.rar (extract it to BG_Like_BING.css) from Ziddu:
BG_Like_BING.rar

STEP #2
Upload all three files to your MyDataNest account (registration required)
NOTE: Remember to edit the 'Access permission' properties of the folder (at MyDataNest) as Hidden (It should not be set as 'Private')
And then copy the DIRECT LINKS to these files.

STEP #3
Log in to Blogger, go to "Layout" -> "Edit HTML"
and find (CTRL+F) this code in your blog template

</head>

Immediately ABOVE/BEFORE it, paste these lines of code:

<link rel="stylesheet" type="text/css" href="http://mydatanest.com/files/*****/BG_Like_BING.css"/>
<script type="text/javascript" src="http://mydatanest.com/files/*****/prototype.js"></script>
<script type="text/javascript" src="http://mydatanest.com/files/*****/leightbox.js"></script>
<style type='text/css'>
div.leightbox {
color: #fff;
display: none;
position: absolute;
top: 50%;
left: 50%;
margin: -240px 0 0 -380px;
width: 745px; //Keep the WIDTH 5px LESS than the actual width of the image you are planning to use...
height: 400px;
padding: 0 0 0 5px;
border: 1px solid #FFFFFF;
background: url(http://i36.tinypic.com/2w4n40k.jpg) no-repeat;
z-index: 101;
overflow: none;
}
</style>

NOTE: Replace the links highlighted in RED with the DIRECT LINKS you got in STEP #2
Change code in blue to change the displayed image, its width, height and margin (margin: top right bottom left)

You may download more attractive images from GraphicBazaar

STEP #4
Go to "Layout" -> "Page Elements" and click on "Add a Gadget" and select it as "HTML/JavaScript"
And paste this code into it:

<div id="pop01" class="leightbox">

<div class="scrollbox">

<h1>Welcome To My Blog</h1>

<p>A blog by <a href="http://bloggerstop.net">BloggerStop.Net</a></p>
</div>
<a href="#" class="lbAction" rel="deactivate">Enter The Blog</a></div>


<script type="text/javascript">
lb = new lightbox();
lb.initCallable('pop01');
lb.activate();
</script>

Change the code highlighted in Purple and RED, and save the widget.
Do not place the widget in the sidebar, rather drag and place the widget either ABOVE/BELOW the main "Blog Posts" widget.

NOTE 1: Remember to place this widget somewhere in the top region of your blog (above "blog posts" widget if possible), to make sure that this widget loads before other widgets (including posts).
NOTE 2: Use this tutorial to restrict this widget to only HomePage.

Google Turns 11 - So Two 'L's in Google Logo

bloggerstop.net@gmail.com (Divya Sai) — Sun, 27 Sep 2009 18:16:00 +0000

Neither Google nor its logo is hacked :) Today Google turns 11.

Check out Google's history, and how Google used to look in its early days: History Of Google
Do check out that page...as it will be more interesting than reading about Google at Wiki ;)

Four days back (on 23rd September) BloggerStop turned One, which is exactly one month after Blogger's Birthday and the same day when ProBlogger was launched. So after 365 days of blogging and being surrounded by all Internet Giants I think BloggerStop had a good start too :)
Happy Blogging To All !

Professional Entrecard Traffic Tips – Drive Traffic The Smart Way!

bloggerstop.net@gmail.com (Divya Sai) — Sat, 26 Sep 2009 17:17:00 +0000

This is a Guest Post by Mohammad Mustafa Ahmedzai. Follow him on Twitter @MyBloggerTricks

Entrecard is a name that most of you know as a traffic source but are you really getting tremendous and continuous targeted traffic from it? If you have a negative answer then you are on the right stop to learn how to drive traffic from Entrecard like you never did before!

As you know Entrecard is a service, through which you can advertise your product on thousands of blogs by displaying the standard 125 by 125 AD Banner. The only thing you need to do, is to show a 125 x 125 AD Banner widget on your blog, so that other fellow bloggers can also advertise on your blog.

Bloggers who are using Entrecard usually experience these three issues:

1. Those who visit/drop at your blog are not always targeted visitors,
2. You Gain Entrecard credits/ECs by shedding a lot of sweat but lose it badly when you start advertising your product on other blogs
3. Same Droppers every second day!
4. Low Traffic from blogs where you have advertised.

If you are really suffering through all these problems discussed above, then you need to adopt a different strategy that can help you achieve what you should from Entrecard.

Entrecard is a newly born Traffic source and not as effective as the monster traffic sources like Digg and StumbleUpon and BlogExplosion. So how one should use this system to receive maximum targeted traffic? Well the answers/tips are simple yet logical. Have a look at the three best Entrecard Traffic tips shared below,

1. Advertise on Cheapest Blogs to Attract loyal Visitors and Subscribers

Your targeted visitors should be mainly the minor ones. They are the ones who turn out to be loyal visitors. Always choose publishers who costs no more than 2 ECs.

Now how come you receive traffic by advertising on these newly born blogs?

Your Targeted visitors are the publishers themselves! When you advertise on a blog, the blog owner will surely visit your blog to check if he should approve your Ad or not. The moment s/he visits your blog, you get your first targeted loyal visitor, because as a newbie, anything that you share is a new learning resource for her/him. What happens next? If your blog appears interesting to the publisher, s/he will surely subscribe to your Feed Updates. Thus becoming a Subscriber! Imagine if you have 500 Entrecard Credits in your account and you advertise on 250 blogs costing 2 ECs, you will receive 250 unique plus targeted visitors with a minimum of 20-30 subscribers! Moreover you will also receive a fair amount of traffic from the publisher’s blog that will further add to your targeted traffic.

Don’t waste ECs by advertising on popular and expensive blogs. The probability that a visitor will click the Ad is 0.1% which means that if 1000 visitors visit that popular blog only one will click the Ad. Normally only commercial websites receive 1000-10000 visitors a day. Most of the blog owners at Entrecard are normally self financed bloggers, receiving a maximum of 1000 visitors and probably not more than that (excluding some major blogs of course). So focus more on cheaper publishers and don’t expect too much of traffic from Entrecard widget.

2. Stop Dropping and Start Earning ECs Smartly

You don’t necessarily need to visit 10-100 blogs each other day to earn Entrecard Credits. This would be like wasting your time. Start acting smartly and receive ECs by not dropping at all!

The more you advertise the more EC and traffic you earn. When you advertise on a blog, the publisher will surely visit your blog as I said in Tip #1 and if your content was related to that of the publishers you will receive an advert/Ad request. For example if you advertise on 100 blogs costing 2 ECs you will surely receive a minimum of 20 AD requests which will cause the advertising cost on your blog to increase simultaneously. According to Entrecard’s algorithm the advertising cost on your blog multiply with the simultaneous increase in the number of Ad requests. Thus you earn more when you advertise more. Leading to smart ECs earning!

NT:- Stop Dropping doesn’t mean that you may not drop at all. When you drop at a niche blog the blog owner will surely drop back/visit back. Dropping at relevant blogs is encouraging and you can surely do that to expect traffic. But give more importance to Dropping when you have low ECs in your account.

3. Don’t blog about monthly Top Droppers

Don’t try to make the top dropper to your blog happy by adding his name to the monthly top droppers list on your blog. Instead act professionally and stick to your blog topic. Linking to several low PR blogs on a post will decrease the importance of your blog in the eyes of the loyal readers and search engines. Your readers will find your posts less professional because you are not blogging about what you should, thereby diverting their focus. To many links from one post to several Low PR blogs will decrease your PR significantly and is strongly not appreciated by search engines. People will start visiting your blog again and again just to give you a drop so that they could be added to the monthly droppers list. But they will not read your posts because they are not your loyal readers, as a result the bounce rate of your blog will increase immensely. Your blog will be used only for gaining back links.

In short the biggest advantage of not blogging about droppers would be that the number of publishers, adverts and unique visitors to your blog would increase. Your blog’s reputation in Entrecard Community will increase. You will gain respect also in the eyes of the Giant Entrecard users. They too will pay you a visit and will request you to place their Ad on your blog.

That’s All!

I hope you have learnt something that could help you make the best out of Entrecard. I would also advise you that pay more attention to your blog’s first impression. Use professional style blogger templates to drive even better quality traffic. It all comes with a little effort and a lot of patience. So remain motivated and keep blogging, for the world needs you.

About The Author
Mohammad Mustafa Ahmedzai is an Engineering Student with keen interest in Web development, Blogging and Social Media. He is a certified Search Engine Optimizer. During his leisure time he blogs at www.MyBloggerTricks.com

Blogger Goodies By Mohammad:
Blogger Template - MBT Church Theme
Glossy Bookmarking Icons - Set 1 & Set 2

Add A Welcome or Under-Construction Page To Blogger Blogs

bloggerstop.net@gmail.com (Divya Sai) — Tue, 22 Sep 2009 15:29:00 +0000

This tutorial is requested by Rakero from CrakerLo Blog

Add a Welcome Page To Your Blogger/BlogSpot Blog.

See this hack live at Disqus In BlogSpot blog

Follow the instructions given below to add a similar page to your blog:

STEP #1
Download these files:
leightbox.css
leightbox.js
prototype.js

from CodeBook
and save the files on to your computer.

STEP #2
Upload all three files to your MyDataNest account (registration required)
NOTE: Remember to edit the 'Access permission' properties of the folder (at MyDataNest.com) as Hidden (It should not be set as 'Private')

Copy the DIRECT LINKS to the files.

STEP #3
Log in to Blogger, go to "Layout" -> "Edit HTML"
and find (CTRL+F) this code in your blog template

</head>

Immediately ABOVE/BEFORE it, paste these lines of code:

<link rel="stylesheet" type="text/css" href="http://mydatanest.com/files/*****/leightbox.css"/>
<script type="text/javascript" src="http://mydatanest.com/files/*****/prototype.js"></script>
<script type="text/javascript" src="http://mydatanest.com/files/*****/leightbox.js"></script>

Replace the links highlighted in RED with the DIRECT LINKS you got in STEP #2

STEP #4
Go to "Layout" -> "Page Elements" and click on "Add a Gadget" and select it as "HTML/JavaScript"
And paste this code into it:

<div id="pop01" class="leightbox">

<div class="scrollbox">

<h1>Welcome To My Blog</h1>
<p>A blog by <a href="http://bloggerstop.net">BloggerStop.Net</a></p></div>

<a href="#" class="lbAction" rel="deactivate">Enter The Blog</a></div>


<script type="text/javascript">
lb = new lightbox();
lb.initCallable('pop01');
lb.activate();
</script>

Change the code highlighted in Purple and RED, and save the widget.

NOTE 1: Remember to place this widget somewhere in the top region of your blog (above "blog posts" widget if possible), to make sure that this widget loads before other widgets.

NOTE 2: Under Construction page is often required in all the pages, but as welcome page is required only in the "HomePage", so use this tutorial to show the widget only in the homepage.

You can change the background overlay color and transparency by editing the leightbox.css file before uploading it.
Here's the code you have to change in the leightbox.css file.

div#overlay {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
background-color:#000; //color default - back
-moz-opacity: 0.8; //opacity default at 80%
opacity: 0.8; //opacity default at 80%
filter: alpha(opacity=80); //opacity default at 80% for IE
}

NOTE: To display this page as entirely different web page, set opacity and -moz-opacity at 1.0 (fully opaque)

Add an UnderConstruction Page to Your Blogger/BlogSpot blog

You may sometimes want to hide your blog partially (or make it inaccessible). Especially when editing any important part of your template, like sidebar or any widget.
So to hide your blog partially temporarily, use the same method as described above, but remove the option to enter the blog. You can do this by using this code in STEP #4

<div id="pop01" class="leightbox">
<div class="scrollbox">

<h1>Welcome To My Blog</h1>

<p>A blog by <a href="http://bloggerstop.net">BloggerStop.Net</a></p>
<p>This Page Is Under Construction</p>
<p>Sorry For The Inconvenience</p>
<p>Come Back Within An Hour :)</p>
</div>


<script type="text/javascript">
lb = new lightbox();
lb.initCallable('pop01');
lb.activate();
</script>

See a working example at Blogger Blogs UnderConstruction

You may download Under Construction images from AnimatedGif.net or WebWeaver

Credits
The original creators of Leightbox, a lightweight inline div solution to the popular Lightbox ajax solution, from the people at eight.nl.
Paul van Iterson from Quaint Tech for his article on his Leightbox ‘onLoad hack’.
Richard from pixelcised for fixing the script.
And CodeBook for the OnLoad functionality

Personalized Profile Page For Bloggers !

bloggerstop.net@gmail.com (Divya Sai) — Sat, 12 Sep 2009 15:38:00 +0000

Get an elegant and customizable profile page from DooID
Have a look at my new profile page: DOOID-SAI

You can link your profile page from your blog using a small profile badge or with a simple hyperlink, like this:

To get your new profile page, first register at DooID with a unique user-id. Your profile-url will contain your username.
To modify/edit your profile page, simply log in to DooID and select any of the menu items present in the sidebar, edit and save them.
View your profile page at this address: http://dooid.com/USER_NAME

Remember to select the theme of your choice at "Edit Design and Colors", just like Twitter, here you can upload and use a theme/background image created by you.

7 Cool and Innovative Widgets For Your Blog

bloggerstop.net@gmail.com (Divya Sai) — Fri, 11 Sep 2009 17:44:00 +0000

OnePlusYou has created many creative widgets, which you can freely use on your blog. I have tried all the widgets related to blogging and here are some of the widgets that you may add to your sidebar:

#1 The Blog Verbosity Test - Find out if you talk too much in your blog
This test will count how long your blog posts are and compare them to other bloggers.

#2 The Blog Cuss-O-Meter - Do you cuss a lot in your blog or website?
The Cuss-O-Meter will tell you what percentage of pages on your website contain cuss words and compare that score to other websites.

#3 Some cool stickers for your sidebar - Get them here

#4 Send some Funny Awards to other bloggers !

#5 Find out how much are you addicted to Blogging !!!
72%

#6 Rate your blog - just like Hollywood movies...

#7 Flash countdown timer

Errors Fixed - Blogger Jump Break (Truncated Posts) Issues Solved

bloggerstop.net@gmail.com (Divya Sai) — Fri, 11 Sep 2009 16:39:00 +0000

The latest feature by Blogger, enables you to truncate your posts and show "Read more..." links beneath the posts on the homepage.

But some glitches have been reported by many users.

ERROR #1
If posts do not get truncated at all, then check the code you are using, as it should be
 and not 

notice the space used before and after the word "more".

ERROR #2
You are able to truncate the posts, but the "read more" link is not visible on the homepage:
In this case, you have to edit your template. So simply follow these instructions:
Log in to Blogger
Go to "Layout" -> "Edit HTML" and select "Expand Widget Templates"

Now find this code in the template:

<data:post.body/>

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

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if >

NOTE: You may use your own phrase instead of "read more..." by replacing <data:post.jumpText/> in the above code with your own text or a small image.

ERROR #3
Finally some bloggers have noticed that whenever they add the code "" to any of their posts, the sidebar shifts to the bottom area of the blog.
To avoid this, you simply have to make sure that the code

is not present in between any <div>...</div> tags. If you find any such tags, simply replace the words div with span.

So if you want to truncate this post,

<div style="text-align: justify;">
Visbile part of the post on homepage

Hidden part of the post on homepage
</div>

without affecting the location of your blog's sidebar

then simply replace those div tags with span tags, like this:

<span style="text-align: justify;">
Visbile part of the post on homepage

Hidden part of the post on homepage
</span>

Comment Like This !

bloggerstop.net@gmail.com (Divya Sai) — Wed, 09 Sep 2009 15:35:00 +0000

While commenting on any Blogger (BlogSpot) blog, it is easy to leave your comment through a single click if you are already signed in to your Google account. And when the comment gets published on the blog, you get a backlink to your blogger-profile as the commentator.
BUT other than making the author of the post happy, the comment doesn't give any direct benefit to you. Even if the comment is impressive and a reader clicks on the link, s/he is directed to your blogger profile. From here the reader may/may not visit your blog (and chances are further low, if you have a big list of blogs displayed on your profile page).

So here's what you have to do;
While commenting on a Blogger blog, if the blog allows 'anonymous' comments, then along with the option "Anonymous" another option gets activated, which is 'Name/URL'. Select this option and write your name along with any keyword in the "Name" field, and type your blog/blog post url in the "URL" field, like this:

Name: John @ Exam Tips
URL: www.exam-tips.blogspot.com

And in case the blog doesn't allow anonymous comments, then select the option "OpenID" and type your blog's url in the appropriate field.

The benefits you get:
Although mostly BlogSpot blogs have "nofollow" associated with the commentator's links, but some of them have "dofollow" too, so in that case the famous Google PR link juice is passed to your blog instead of your blogger profile. And sometimes Google even considers a nofollow link as a valid backlink and so your site/blog is now recognized better for a particular keyword.
Secondly as the comments remain forever in the blog, so they become a permanent passive source of traffic for your blog.

Bukisa vs Today.com - Earn Money While Blogging - Part 2

bloggerstop.net@gmail.com (Divya Sai) — Fri, 04 Sep 2009 18:44:00 +0000

Blogging is almost always associated with earning money online. But it is not necessay to write paid posts or sponsored posts to start earning. You don't even have to sign up with any advertising agencies like Adsense, Komli, or Bidvertiser etc. to earn money while blogging. There are websites, ready to add funds to your bank account simply for writing posts, and bringing visitors to them. Here's a comparison between the leaders of "make money while blogging" service providers.

Bukisa vs Today

First things first...

So how much do they pay and when do they payout?

At Bukisa, according to their previous month's total earnings, Bukisa team fixes a "Bukisa Index" every month. Presently at the time of writing this post, the index is at $3.45. That means you will earn $3.45 for every 1000 visitors your articles receive. Whereas Today.com says it will pay $2 per 1000 pageviews your articles receive (and this figure is subject to change every month). Presently I receive just around $1 per 1000 views. Even in the payout values, Bukisa beats Today.com. Payout is the minimum amount of money you need to earn to request a cashout to your paypal account. At Bukisa you can get your money transferred to your Paypal account as soon as you make $10, whereas at Today you need to earn atleast $50 before asking for a cashout.

Then why don't everyone simply select Bukisa over Today?

Blogging is not just about making money online. Being a blogger, you own a unique url on the World Wide Web. Working on your blog is just like decorating your work desk. At Bukisa, you are not assigned with any unique url (no domain/sub-domain is registered for you). You can neither change the template nor you can add any widgets to your blog.
But at Today, although the flexibility to edit your template and adding widgets is much less as compared to blogs hosted on Blogger or on Wordpress, but are much more as compared to Bukisa. So at Today.com you not only get paid to receive visitors to your blog, but you have all the permissions, edit the template colors and add some simple widgets to the blog.

So what do I suggest...

It's simple, register at both the websites and write unique content for both of them. As you are given a unique url (sub-domain) at Today.com, so it is better to keep your blog focussed on a single topic. But in Bukisa you are free to write whatever you feel to write. So for all your random ramblings switch to Bukisa.

Part 1: Make Money Blogging - Simply blog to earn money...

Create Feed (Recent Posts) Banners For Your Blog

bloggerstop.net@gmail.com (Divya Sai) — Mon, 31 Aug 2009 18:53:00 +0000

If you want to show your latest posts on standard-sized banners, then here's a perfect tutorial for you. Once you complete the steps of this tutorial, you will get some animated .GIF images, which are dynamically updated from Feedburner's servers and show latest posts of your blog, like these:

Instructions to follow:
1. Log in to Feedburner.com (using your Google account)
2. Select your Blog (Blog's feed)
3. Then select Publicize tab
4. Now click on "Create new..." link below "Headline Animator".

5. Now create and save the animated banner. Click on "Activate" button and copy the code.

If you are new to Feedburner, then first read this tutorial on "How to burn your feed at FeedBurner" (Read the first 3 steps of the tutorial).

BloggerStop.Net - Blogger Widgets, Templates, Help!

Add Facebook Buttons and Widgets To Your Blog

New Transparent Navbars From Blogger

It's Friday - Blogger BackUp Day

Google PageRank - From Mystery to History ?

RU #3: Blogger Blogs and Search Engine Optimization

Free File Hosting Sites with Hotlinking/Direct Linking

RU #2: Optimize Commenting System On Your Blog!

RU #1: Optimize Your Posts - Blogger Help!

Bounce & Share - Social Bookmarking Widget !

Happy Diwali To All !

BloggerStop - Round Ups Are Coming !

Check Your WebSite In Different Browsers, Resolutions and Operating Systems

The stats facts!

bLaughing Over Blogging !

Let Your Visitors Change Your Blog Theme !!!

Display Your HomePage Like BING

Google Turns 11 - So Two 'L's in Google Logo

Professional Entrecard Traffic Tips – Drive Traffic The Smart Way!

1. Advertise on Cheapest Blogs to Attract loyal Visitors and Subscribers

2. Stop Dropping and Start Earning ECs Smartly

3. Don’t blog about monthly Top Droppers

Add A Welcome or Under-Construction Page To Blogger Blogs

Add a Welcome Page To Your Blogger/BlogSpot Blog.

Add an UnderConstruction Page to Your Blogger/BlogSpot blog

Personalized Profile Page For Bloggers !

7 Cool and Innovative Widgets For Your Blog

Errors Fixed - Blogger Jump Break (Truncated Posts) Issues Solved

Read More is Official Now and "Static Pages" Are In The Pipeline !!!

Static Pages For Blogger (BlogSpot) Blogs

Comment Like This !

Bukisa vs Today.com - Earn Money While Blogging - Part 2

Create Feed (Recent Posts) Banners For Your Blog