April 30, 2009

Dynamic Meta Tags For Blogger/BlogSpot Blogs

Make your pages are unique
If you are new to Meta tags, then in short: "Meta tags introduce your blog to search engines", and so these tags are a must for every website/blog or rather for each and every page/article of websites.
In blogger you can easily add these tags to either the HomePage or to any other "specific page". And now, you can even avoid an important error (duplication of meta tags and titles).
But even after doing all these hacks, it is not easy to manually add description and keyword tags to each and every page/post.
So here's a simple code to automate the process of assigning meta description and keyword tags to every page of your blog. Although not very effective but it may slightly improve the visibility of your pages in SERPs. These are the Dynamic meta tags, which have the same code but display different content for different pages. Actually it simply shows the blog name and title of the post in the meta description/keywords content.
Log in to Blogger, go to Layout -> Edit HTML
and find (CTRL+F) this code in the template:
<b:skin><![CDATA[
And immediately BEFORE/ABOVE it, paste this code:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName + data:blog.title + data:blog.pageName' name='Description'/>
<meta expr:content='data:blog.pageName + data:blog.title + data:blog.pageName' name='Keywords'/>
</b:if>
Along with this, DO NOT forget to do these changes in your template too:
Remove the meta tags and titles duplication problem.
Swap the Blog title position for Search Engine Optimization.

Thanks to Rajeswar for suggesting these dynamic meta tags.

Image credits: illumin8.com
Read More

April 27, 2009

Duplicate Meta Description and Titles Issues In Blogger

While reading the celebrating post at FalconHive, I realised an important point has been overlooked by me. Although I have written the articles on importance of Meta tags, and how to add meta tags to specific pages, but the solution to a serious error which is very common in almost all blogger blogs has remained un-answered till now in this blog.
The errors or issues in Blogger/BlogSpot blogs is the duplication of meta description tags and page titles.

Before I tell you the reason behind these errors, let's see what are the consequences of these errors:
Due to any of these issues, search engines like Google and Yahoo may consider your blog as filled with duplicate content and titles, which can confuse their algorithm, and thus may lead to penalization of your blog.

Now the reasons that your blog has these errors:
1. In Blogger, although you can add meta tags to the template easily, but these tags are then used for the entire blog  (all the posts). So the description tag, which is only meant for the main/home page gets copied and is displayed for all the pages. Now Google assumes that all your pages are having the same content, which is a serious offense in Search Engine Language !

2. The second issue of duplicate titles arises because Google indexes blog posts and comments separately, and while indexing comments, it again indexes the complete posts. Now this is where a serious problem of duplication of both content and titles takes place.

So you must remove these errors to make a successful and Search Engine Optimized blog.

Finally the solution to the problems:

1. First of all, in the template (Blogger-> dashboard -> Layout -> Edit HTML) find (CTRL+F) the code for meta description tag, something like this:
<meta content="GENERAL_DESCRIPTION_HERE" name="description"/>
Now put that tag in an "if" condition, so that it will be displayed ONLY in the HOME PAGE:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content="GENERAL_DESCRIPTION_HERE" name="description"/>
</b:if>

Replace the text in RED, with your blog's description. Now save the template.

2. For the second issue (duplicate titles); in the same page (Layout -> Edit HTML), click on "Expand Widget Templates".
Then find (CTRL+F) this code:
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
Replace the entire code with this new code:
<b:if cond='data:post.commentPagingRequired'>
<a expr:href='data:comment.url' title='comment permalink'> <data.comment.timestamp/> </a>
<b:else/>
<a expr:href='data:blog.url + &quot;#&quot; + data:comment.anchorName' title='comment permalink'> <data:comment.timestamp/> </a>
</b:if>
That's it. Now within a week or 2 weeks, you may see the difference and improvement brought to your blog by this method !
NOTE: For my own blog it took around 10-15 days to get these errors removed from Google.

To see the changes, you should have an account in Google's Webmaster Tools. Once you log in to your account you can see the errors at Diagnostics -> Content Analysis.

Credits for the 2nd hack: Cranked.Me

**UPDATE: This screenshot will better explain you, how Google considers the same page as two different pages with same title and content, just because it indexes comments separately:

**UPDATE: Thanks to this hack, now in my own blog (BloggerStop.Net) the number of duplicate meta tags and titles came down from around "250 and 80" to "7 and 28" within 20 days. Now Google is more frequently visiting this blog due to less (the so called) duplicate content :)
Read More

Hurry ! Get 50% Discount on .BIZ domain and hosting

.Biz Domain for $3.99

For the next 3 days (till the last day of April), 1and1 is offering *.BIZ domain names for as low as $3.99 for the first year. And other domain names (.com, .net etc.) for just $6.99 for the first year. From second year onwards normal charges of $8.99 will be applied.
Here's a comparison between 1and1, Yahoo and GoDaddy
That's not all...

They are also offering 50% discounts on Hosting services too -


So before the offer ends, Grab Your Own Domain and Hosting
Read More

April 26, 2009

Add Yahoo Messenger PingBox To Your Blog


Chat with your visitors Privately at your own Blog...
And why choose anything else when you can easily embed Yahoo! Messenger anywhere and in any dimension you want. You can also change and modify the skin and font and many other settings yourself before adding the widget to your blog.
Visit this page : Yahoo Messenger PingBox
And start building your customized widget. Finally you have to login at Yahoo so as to get your Yahoo! PingBox code.

Want to test the widget ? Chat here with me !
Read More

April 25, 2009

Goodbye GooglePages !

Although not as popular as the blogging platform owned by Google - Blogger, GooglePages has been quite popular for three years since its launch in Feb. 2006. But recently new sign ups at GooglePages were stopped and now the complete service is being migrated to GoogleSites. And because GoogleSites do not support custom CSS and JavaScript files, so it is advised to everyone to download all their files from GooglePages as soon as possible, and move to a new host.
You can read about this GooglePages to GoogleSites Migration here:
[ http://pages.google.com/migrationInfo/YOUR_GOOGLE_ID ]
(And from this same location you can download all your files in zipped format)

Migration FAQ
If you are new to GoogleSites, then you can read about this service HERE

And if you are worried about your CSS and JavaScript files that were hosted at GooglePages, then I would advice you to upload those files to MyDataNest.com and SigMirror.com, as both of these sites offer direct or hot linking of files, with considerable bandwidth limits.
And in case you still are not comfortable with GoogleSites, then you may of course try Blogger.
Read More

Create a professional WEBSITE using Blogger

One of the basic difference between blogs and websites is that blogs are dynamic whereas websites are usually static. Bloggers update their blogs frequently and thus new posts are added to the blog which show publishing dates some where near the title.
A website is where you actually display your products and services.Websites usually have (nearly) fixed number of pages and links to these pages are either shown in the side-bar or at top through a drop-down menu.

You can easily use blogging platforms like Blogger.com to create a blog with unlimited space and bandwidth. On the other hand, if you want to start a website with a new domain and a host, it may cost you many dollars per month, depending upon the bandwidth usage.

So the best economical way to start a website is to use a customized domain (www.example.com) but do not pay anything for hosting. Sign up at Blogger to start a blog and completely modify its user-interface to give it a website look.

Follow these steps to create your economical website.
Register the domain at 1and1.com
Create a blog at Blogger
Redirect your new domain to blogger blog

Upload a new and more professional template to your blog. [Change Blogger Template]
You may use these professional template from FlaconHive:
1. Bizmax
2. Zinmag Primus
3. Zinmag Tribune
4. Imprezz
5. And more free professional templates

Go to settings and disable commenting on your blog.
Also stop displaying date above title:

For this go to Layout and click on Edit link at Body Widget. And un-mark the option to display date.

*update

Disable Commenting In Your Blogger Blog

As websites do not have comment-forms in their webpages, so you can also disable commenting in your blog from Blogger-Dashboard -> Settings:
Comments - select "Hide"
Comments Default for Posts - select "New Post Do Not Have Comments" in the drop-down menu.

That's it ! now you have a professional website while you are paying just for a domain.

This post was suggested by Ned S. Levi from NSL Photography
Read More

World Wants Peace Like This !

Just got a funny forwarded mail - worth sharing !

It says:

World Wants Peace Like This...


Wait till the image loads completely [700kb]
Read More

April 22, 2009

Have You Googled Your Name ?

Recently I have written an article on how to optimize your blog, so as to display it in Google search results whenever someone searches your name. Although I still prefer the same method, but here's another method for those of you who like to select the easy way or who are not in to blogging.
You simply have to create a Google Profile, and leave rest of the work to Google. Make sure that you have included everything in the profile page that you want to share with others. Now Google will of course index the profile page, and it will be displayed every time someone searches for you (you have to enable the option to share your profile with others).
I am calling this method as 'easy' because firstly you need not create a blog for this purpose and secondly Google being far more popular any other blog, profiles directly from Google will be given more priority than other blogs.

Here's what Google says about this new feature:
To give you greater control over what people find when they search for your name, we've begun to show Google profile results at the bottom of U.S. name-query search pages. These results offer abbreviated information from user-created Google profiles and a link to the full profiles. We've also added links so it's easy to search for the same name on MySpace, Facebook, Classmates and LinkedIn.
Read More

Add a Floating Bar (Always On Top) To Your Blog


A floating bar, as the name says, floats at top or bottom of a blog, you can add any content to it (like a request to subscribe or an invite to any special event running on your blog).
The bar looks like this (of course you can customize it if you want):-
Floating Bar (see the yellow strip floating at the top)

If you want to add a similar bar to your blog, then follow these instructions:

Log in to Blogger
Go to Layout -> Edit HTML, and find (CTRL+F) this in the code:
</head>
And immediately ABOVE/BEFORE it add these lines:
<style type="text/css">
#topbar{
position:absolute;
border: 1px solid black;
padding: 2px;
background-color: lightyellow;
width: 620px;
visibility: hidden;
z-index: 100;
}
</style>

<script type="text/javascript">
/***********************************************
* Floating Top Bar script- © Dynamic Drive (www.dynamicdrive.com)
* Sliding routine by Roy Whittle (http://www.javascript-fx.com/)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
* Code via http://bloggerstop.net
***********************************************/

var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"

function iecompattest(){
return (document.compatMode &amp;&amp;
document.compatMode!="BackCompat")? document.documentElement : document.body
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}

function staticbar(){
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose &amp;&amp; get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}

if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>

Modify the code in red, as per your requirements. Now save the template.
And go to Layout -> Page Elements -> Click on "Add a Gadget" and select it as "HTML/JavaScript" type. And then paste this code in to it:
<div id="topbar">
<a href="" onClick="closebar(); return false"><img src="http://www.gigaimage.com/images/6gxult9ji6pxr9r7wo.gif" align="right" border="0" /></a>
Your content here.
</div>

Credits: DynamicDrive and JavaScript-FX
Read More

April 21, 2009

15 New and Innovative RSS Icons for Free Download

Download these 15 attractive and innovative RSS icons from 0at.org created by Matthew and use it in your blog for free.
Read More

April 19, 2009

Add a Tweet It or Retweet Button to Your Blog

Along with Digg It and Stumble It, one important social networking button most people search for, is of course a Tweet It or a Retweet button.

In this tutorial you may select any or both of them.
The Retweet button is available in two different sizes, to add any of the buttons, you need to follow these instructions:

Log in to Blogger, go to "Layout" -> "Edit HTML" and mark the "Expand Widget Templates"
Find (CTRL+F) this code in the template:

<div class='post-header-line-1'/>
And immediately BELOW/AFTER that, paste the code for the widget (copy whichever code you like from the post below).

A bigger "Digg It" like button:


Code:

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


Add a smaller one:


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

Although these buttons look quite professional but when visitors use these buttons to Retweet, then the RT will belong to @TweetMeme and not to you (author of the article).
So I would prefer adding a "Tweet This" button, instead of Retweet, where you have the additional advantage of using any twitter image/icon.

Here's the code you need to add to your template, for a Tweet This button:
<a expr:href='&quot;http://twitter.com/home/?status=Chk Out-&quot; + data:post.title + &quot; &quot; + data:post.url' target='_blank'><img alt='Tweet It!' src='http://i45.tinypic.com/2wdaoad.jpg' width='64'/></a>

And it will be displayed like this:

Twitter


You may change the twitter icon in the above code. You can freely use these free twitter icons:

| |


Follow @BloggerStop at Twitter for more such updates !

*UPDATE: Now there's another Retweet button available to you which will allow your readers to tweet your posts and it will show RT @YOUR_TWITTER_PROFILE but it will also display (via @Tweetmeme)

Here's the code for this widget:
<script type="text/javascript">
tweetmeme_url = '<data:post.url/>';
tweetmeme_source = 'YOUR_TWITTER_ID';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
Replace "YOUR_TWITTER_ID" with your own Twitter profile, in the code above.

UPDATE 2:
To show these widgets only in published post pages and NOT in homepage, add the code like this:
<b:if cond='data:blog.pageType == "item"'>
CODE FOR RETWEET or TWEET WIDGET
</b:if>
Read More

Download Six Beautiful Twitter Bird Icons

All these six images are completely free to use in both private and commercial works. The icons are designed by Gopal Raju from ProductiveDesigns.com for SmashingMagazine.com
You can download the images from ProductiveDesigns

Follow @BloggerStop for all the latest updates !
Read More

Create An Image SlideShow - Part 3

Finally here comes the third and final tutorial for creating a image slide-show. In this widget, the text layers will appear from any of the four sides (left, right, top, bottom).
Demo: s3Slider Demo [Example 3]
Introductory post: Create An Image SlideShow - Part 1.

SLIDE-SHOW 3

Instructions to add this widget:

STEP 1:
Download these files:
jquery.js
s3Slider.js

Download them as a zipped file

STEP 2:
Upload both the files to either MyDataNest.com or SigMirror.com (you need to register first), and get the DIRECT LINKS to the files.

STEP 3:
The coding part:

Log in to Blogger, go to Layout -> Edit HTML
Now find this in the template code:

</head>
And immediately ABOVE/BEFORE it, add these lines:
<!--SLIDE-SHOW-STARTS-->
<!-- CSS -->
<style type="text/css" media="screen">
#slider {
width: 410px; /* important to be same as image width */
height: 300px; /* important to be same as image height */
position: relative; /* important */
overflow: hidden; /* important */
}

#slider1 {
width: 720px; /* important to be same as image width */
height: 300px; /* important to be same as image height */
position: relative; /* important */
overflow: hidden; /* important */
}

#sliderContent, #slider1Content {
width: 720px; /* important to be same as image width or wider */
position: absolute;
top: 0;
margin-left: 0;
}
.sliderImage, .slider1Image {
float: left;
position: relative;
display: none;
}
.sliderImage span {
position: absolute;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 384px;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #fff;
display: none;
}

.slider1Image span {
position: absolute;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 694px;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #fff;
display: none;
}
.clear {
clear: both;
}
.sliderImage span strong, .slider1Image span strong {
font-size: 14px;
}
.top {
top: 0;
left: 0;
}
.bottom {
bottom: 0;
left: 0;
}
.left {
top: 0;
left: 0;
width: 110px !important;
height: 280px;
}
.right {
right: 0;
bottom: 0;
width: 90px !important;
height: 290px;
}
ul { list-style-type: none;}
</style>
<!-- JavaScripts-->
<script type="text/javascript" src="http://mydatanest.com/........./jquery.js"></script>
<script type="text/javascript" src="http://mydatanest.com/........./s3Slider.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slider').s3Slider({
timeOut: 3000
});
$('#slider1').s3Slider({
timeOut: 4000
});
});
</script>
<!--SLIDE-SHOW-STOPS-4-HELP-http://bloggerstop.net-->

Replace the links in red, with the DIRECT LINKS you got from the second step, and save the template.

STEP 4:
For smaller Widget (width=370px)
Then go to Layout -> Page Elements
And click on "Add a Gadget", select it as "HTML/JavaScript" type.

And this content to the widget:
<div id="slider">
<ul id="sliderContent">
<li class="sliderImage">
<a href=""><img src="images/410/1.jpg" alt="1" /></a>
<span class="top"><strong>Title text 1</strong><br />Content text...</span>
</li>
<li class="sliderImage">
<a href=""><img src="images/410/2.jpg" alt="2" /></a>
<span class="top"><strong>Title text 2</strong><br />Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...</span>
</li>
<li class="sliderImage">
<img src="images/410/3.jpg" alt="3" />
<span class="bottom"><strong>Title text 3</strong><br />Content text...</span>
</li>
<li class="sliderImage">
<img src="images/410/4.jpg" alt="4" />
<span class="bottom"><strong>Title text 4</strong><br />Content text...</span>
</li>
<li class="sliderImage">
<img src="images/410/5.jpg" alt="5" />
<span class="top"><strong>Title text 5</strong><br />Content text...</span>
</li>
<div class="clear sliderImage"></div>
</ul>
</div>

For larger Widget (width=680px)
Then go to Layout -> Page Elements
And click on "Add a Gadget", select it as "HTML/JavaScript" type.

And this content to the widget:
<div id="slider1">
<ul id="slider1Content">
<li class="slider1Image">
<a href=""><img src="images/wide/1.jpg" alt="1" /></a>
<span class="left"><strong>Title text 1</strong><br />Content text...</span></li>
<li class="slider1Image">
<a href=""><img src="images/wide/2.jpg" alt="2" /></a>
<span class="right"><strong>Title text 2</strong><br />Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...</span></li>
<li class="slider1Image">
<img src="images/wide/3.jpg" alt="3" />
<span class="right"><strong>Title text 2</strong><br />Content text...</span></li>
<li class="slider1Image">
<img src="images/wide/4.jpg" alt="4" />
<span class="left"><strong>Title text 2</strong><br />Content text...</span></li>
<li class="slider1Image">
<img src="images/wide/5.jpg" alt="5" />
<span class="right"><strong>Title text 2</strong><br />Content text...</span></li>
<div class="clear slider1Image"></div>
</ul>
</div>

Now replace the links in red with the Direct Links to your own images.
Change the Class="left/right" to display the text at either left or right of the widget,
and also change the titles and content (in blue).

Finally save the widget. And drag the widget to wherever you like. You may also directly embed the widget in a blog post. If you want to use the other two widgets, then wait for the next posts.
Read More

Create An Image SlideShow - Part 2

This is the second tutorial, to help you add a slide show to your blog. You may see the introductory post here : Create An Image SlideShow - Part 1.
Also check the demo here: s3Slider Demo [Example 2]

SLIDE-SHOW 2

Instructions to add this widget:

STEP 1:
Download these files:
jquery.js
s3Slider.js

Download them as a zipped file

STEP 2:
Upload both the files to either MyDataNest.com or SigMirror.com (you need to register first), and get the DIRECT LINKS to the files.

STEP 3:
The coding part:

Log in to Blogger, go to Layout -> Edit HTML
Now find this in the template code:
</head>
And immediately ABOVE/BEFORE it, add these lines:
<!--SLIDE-SHOW-STARTS-->
<!-- CSS -->
<style type="text/css" media="screen">
#slider1 {
width: 720px; /* important to be same as image width */
height: 300px; /* important to be same as image height */
position: relative; /* important */
overflow: hidden; /* important */
}

#slider1Content {
width: 720px; /* important to be same as image width or wider */
position: absolute;
top: 0;
margin-left: 0;
}
.slider1Image {
float: left;
position: relative;
display: none;
}
.slider1Image span {
position: absolute;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 694px;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #fff;
display: none;
}
.clear {
clear: both;
}
.slider1Image span strong {
font-size: 14px;
}
.left {
top: 0;
left: 0;
width: 110px !important;
height: 280px;
}
.right {
right: 0;
bottom: 0;
width: 90px !important;
height: 290px;
}
ul { list-style-type: none;}
</style>
<!-- JavaScripts-->
<script type="text/javascript" src="http://mydatanest.com/........./jquery.js"></script>
<script type="text/javascript" src="http://mydatanest.com/........./s3Slider.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slider1').s3Slider({
timeOut: 4000
});
});
</script>
<!--SLIDE-SHOW-STOPS-4-HELP-http://bloggerstop.net-->

Replace the links in red, with the DIRECT LINKS you got from the second step, and save the template.

STEP 4:
Then go to Layout -> Page Elements
And click on "Add a Gadget", select it as "HTML/JavaScript" type.

And this content to the widget:
<div id="slider1">
<ul id="slider1Content">
<li class="slider1Image">
<a href=""><img src="images/wide/1.jpg" alt="1" /></a>
<span class="left"><strong>Title text 1</strong><br />Content text...</span></li>
<li class="slider1Image">
<a href=""><img src="images/wide/2.jpg" alt="2" /></a>
<span class="right"><strong>Title text 2</strong><br /&gt;Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...</span></li>
<li class="slider1Image">
<img src="images/wide/3.jpg" alt="3" />
<span class="right"><strong>Title text 2</strong><br />Content text...</span></li>
<li class="slider1Image">
<img src="images/wide/4.jpg" alt="4" />
<span class="left"><strong>Title text 2</strong><br />Content text...</span></li>
<li class="slider1Image">
<img src="images/wide/5.jpg" alt="5" />
<span class="right"><strong>Title text 2</strong><br />Content text...</span></li>
<div class="clear slider1Image"></div>
</ul>
</div>
Now replace the links in red with the Direct Links to your own images.
Change the Class="left/right" to display the text at either left or right of the widget,
and also change the titles and content (in blue).

Finally save the widget. And drag the widget to wherever you like. You may also directly embed the widget in a blog post. If you want to use the other two widgets, then wait for the next posts.
Read More

Create An Image SlideShow - Part 1

The next three articles on BloggerStop.Net will help you to add amazing Image Slide-Shows to your blogs. These slide shows will help you to show off your best content anywhere in your blog or any other web page. Along with the images, in these slide shows you will see an overlaying text strips.
Look at the demo with three different types of slide-shows : s3Slider Demo

Now depending on your requirement you may use any of those three variants. Remember that while using any of the three widgets, the dimensions (width & height) are completely customizable.

SLIDE-SHOW 1

STEP 1:
Download these files:
jquery.js
s3Slider.js

Download them as a zipped file

STEP 2:
Upload both the files to either MyDataNest.com or SigMirror.com (you need to register first), and get the DIRECT LINKS to the files.

STEP 3:
The coding part:

Log in to Blogger, go to Layout -> Edit HTML
Now find this in the template code:
</head>
And immediately ABOVE/BEFORE it, add these lines:
<!--SLIDE-SHOW-STARTS-->
<!-- JavaScripts-->
<script type="text/javascript" src="http://mydatanest.com/........./jquery.js"></script>
<script type="text/javascript" src="http://mydatanest.com/........./s3Slider.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slider').s3Slider({
timeOut: 3000
});
});
</script>
<!-- CSS -->
<style type="text/css" media="screen">
#slider {
width: 410px; /* important to be same as image width */
height: 300px; /* important to be same as image height */
position: relative; /* important */
overflow: hidden; /* important */
}
#sliderContent {
width: 410px; /* important to be same as image width or wider */
position: absolute;
top: 0;
margin-left: 0;
}
.sliderImage {
float: left;
position: relative;
display: none;
}
.sliderImage span {
position: absolute;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 384px;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #fff;
display: none;
}
.clear {
clear: both;
}
.sliderImage span strong {
font-size: 14px;
}
.top {
top: 0;
left: 0;
}
.bottom {
bottom: 0;
left: 0;
}
ul { list-style-type: none;}
</style>
<!--SLIDE-SHOW-STOPS-4-HELP-http://bloggerstop.net-->

Replace the links in red, with the DIRECT LINKS you got from the second step, and save the template.

STEP 4:
Then go to Layout -> Page Elements
And click on "Add a Gadget", select it as "HTML/JavaScript" type.

And this content to the widget:
<div id="slider">
<ul id="sliderContent">
<li class="sliderImage">
<a href=""><img src="images/410/1.jpg" alt="1" /></a>
<span class="top"><strong>Title text 1</strong><br />Content text...</span>
</li>
<li class="sliderImage">
<a href=""><img src="images/410/2.jpg" alt="2" /></a>
<span class="top"><strong>Title text 2</strong><br />Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...</span>
</li>
<li class="sliderImage">
<img src="images/410/3.jpg" alt="3" />
<span class="bottom"><strong>Title text 3</strong><br />Content text...</span>
</li>
<li class="sliderImage">
<img src="images/410/4.jpg" alt="4" />
<span class="bottom"><strong>Title text 4</strong><br />Content text...</span>
</li>
<li class="sliderImage">
<img src="images/410/5.jpg" alt="5" />
<span class="top"><strong>Title text 5</strong><br />Content text...</span>
</li>
<div class="clear sliderImage"></div>
</ul>
</div>
Now replace the links in red with the Direct Links to your own images.
Change the Class="top/bottom" to display the text at either top or bottom of the widget.
and also change the titles and content (in blue).

Finally save the widget. And drag the widget to wherever you like. You may also directly embed the widget in a blog post. If you want to use the other two widgets, then wait for the next posts.

Credits: Serie3.info
Read More

April 11, 2009

Show Image Icon Before/After Post Titles

Here's another simple hack for Blogger/BlogSpot blogs, by which you can display a small image just before or after all your post titles. It will be displayed like this:


You may use your own image or any other image (which you can even link to either your profile or any other web page).
Follow these easy instructions to add a similar image to your blog titles:

Log in to Blogger, go to "Layout" -> "Edit HTML" -> click on "Expand Widget Templates"
Find (CTRL+F) this code in the template:
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
Now to show the image, just before the title, add the image code right between those two lines, like this:
<b:if cond='data:post.url'>
<img src='http://www.thechangeworks.com/images/still%20penpad.gif'/>
<a expr:href='data:post.url'><data:post.title/></a>
And to show the image just after the title, add the image code after those two lines:
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<img src='http://www.thechangeworks.com/images/still%20penpad.gif'/>

Finally save the template.
NOTE: Instead of using a simple image, you may add the code for Digg/Twitter submit buttons too !
Read More

April 10, 2009

Say Cheese !

You would have taken hundreds of pictures of your relatives, friends and whatever you like around you. So how can you leave your blog out of your album ;)

Here's BloggerStop.Net in full length:

Click To Enlarge

Of course taking a simple screenshot (using PRTSCN) cannot show you the whole blog from top to bottom like the one shown above, so you may use this simple free software to capture any web site (or web page) :
Simply enter the address of any website or web page in the software, and within a few seconds you will be able to save the image/screenshot of that page, right on to your desktop.
Read More

April 7, 2009

Changes at Alexa - Both UI and Algorithm

Finally there has been a BIG change at Alexa. For the last few weeks, I was observing some strange (sort of) errors and glitches at Alexa. One of those errors showed a big traffic peak for BloggerStop.Net, which exactly met with that of StumbleUpon.com (somewhere near Feb end). Of course that isn't possible, but I was really happy to see such a peak, even if it was just temporary !

Now that the Interface at Alexa has been completely changed, the data and graphs are now showing the correct results. But one more change that has been made at Alexa, may make a number of web masters happy. As many web sites and blogs, have reported big changes (mainly improvement) in their ranks, including Twitter.
Read More

April 4, 2009

Add Bricked Wall Background To Your Blog

You may use any of these bricked-walls pictures as background images for your blog. Remember to use repeat tag for these images...




Click on the images, to enlarge and save.

Read - How to add a background image in Blogger Blogs
Read More

Blog Stats [Total Posts & Total Comments] Widget


Here's another simple widget for your blog. With this widget, you can show your live stats (total posts and comments on your blog).
You may change the phrases "Total Posts" and "Total Comments" and the color of the font too.
Follow these instructions to add a similar widget to your blog:
Log in to Blogger, go to "Layout", click on "Add a Gadget", and select it as "HTML/JavaScript" type. Now add this code to the widget:
<script style="text/javascript">
function numberOfPosts(json) {
document.write('Total Posts: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
function numberOfComments(json) {
document.write('Total Comments: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
</script>
<font color="red"><script src="http://bloggerstop.net/feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script>
<script src="http://bloggerstop.net/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script></font>

Replace the code in red with your blog's address.
And you may change the code highlighted in blue to modify the appearance of this widget.
Read More

April 3, 2009

A Vertical Multi-Level Drop Down Menu For Blogger Blogs


Here's a cool widget to fit as many possible links as you want in the minimum possible space.
The widget is completely customizable (background color, text color and number of tabs/links).

Follow these simple instructions, to add this widget to your blog:
Read More

40 Amazing Bridges Around The World

Bridge The Gap





Click on the image to enlarge - Highest Bridge In The World




















This one is fully constructed and NOT in underconstruction state



Marvelous Japan



















Grand bridges from The Grand Canyon












Water Bridge In Germany



Folding Bridge






It functions like this


This one folds too...








And finally man is not the only architect







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