Blogger widgets

show post title first at search engine|seo hacks

2010-03-24T05:15:00.000-07:00

For example, your blog title is " Latest Blogger Tips and Tricks" and blog post title "Show Blog Post Title First on Search Engine ". If anybody search for this post , he may see this post in search engine like this:

blogger widgets| blogger templates|seo tips|blogging tips
your blog description here
http://blogswidgets.blogspot.com/

So visitors will not get any idea about your blog post content after seeing this headline. As a result no of visitors will decrease though search engine may ranked your Blog post on 1st page. I think all of you understand the importance of this post now.

Now come to solution. You can do two things:

Blog Post Title+Blog Title
Only Blog Post Title

Determine which one you will follow. I prefer second one (Only Blog Post Title). But I will show you the both process.

Step 1: Login to Blogger.com

Step 2: From Dashboard select Layout then click on Edit HTML.

Step 3: Then search for this tag"<data:blog.pageTitle/>" . Normally it is located in <head> section.

<head>

<b:include data='blog' name='all-head-content'/>

<title><data:blog.pageTitle/></title>

Now if you want to show only Blog Post Title then replace the above tag with following code:

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>

Or If you want to Show Blog Post Title First + then Blog Title, replace the <title><data:blog.pageTitle/></title> tag with the following code.

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> ~ <data:blog.title/></title>
</b:if>

I hope this trick will help you to drive more traffic to your Blogs or Websites. It also increases SEO of your Blogger Blog. Post a comment if you have any query. Thanks a lot !!!!

Make Blog Comment DoFollow or NoFollow

2010-03-23T03:51:00.001-07:00

Now to Make Blogger Blog Comment DoFollow or NoFollow is very easy, before that let's look into what the hell is dofollow and nofollow:

Google announced in early 2005 that hyperlinks which contains rel="nofollow" attribute would not influence the link target's PageRank. In addition, the Yahoo and Bing search engines also respect this attribute.

nofollow is an HTML attribute value used to instruct some search engines that a hyperlink should not influence the link target's ranking in the search engine's index. It is intended to reduce the effectiveness of certain types of search engine spam, thereby improving the quality of search engine results and preventing spamdexing from occurring.

You might be aware that my blog is a DoFollow blog, i always look after my readers and commentators, we linkback to their site or blog from their comments (If not red flag of spam is rise), we follow strict spam policy. so as me so many other blogger also want to repay their readers with removing nofollow attribute.

How to Make Blogger Comments DoFollow:

First I would suggest you to make a backup of your blogger blog, we will edit your blog template to add dofollow attribute to your blogger comment section.

Step 1. Login to Blogger Dashboard.

Step 2. Navigate to Layout >> Edit HTML >> Expand Widgets Template.

Step 3. Search for the following code in your template.

<dl id=’comments-block’>
<b:loop values=’data:post.comments’var=’comment‘>
<dt class=’comment-author’expr:id=’”comment-” + data:comment.id’>
<a expr:name=’”comment-” +data:comment.id’/>
<b:if cond=’data:comment.authorUrl’>
<a expr:href=’data:comment.authorUrl’ rel=’nofollow’><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>

Step 4. You can see a code in red and bold font there. It’s rel=’nofollow’ and this piece of code adds Nofollow attributes to your blog. Detele the code rel=’nofollow’ (or you can remove only no, making it rel=’follow‘) and save the template.

Step 5. Click on Save to save the changes.

Step 6. You are done.

Blogger tag cloud widgets

2010-03-23T03:43:00.000-07:00

This widget is perfect for blogspot users who desire a simple tag cloud for their Categories. The Labels Cloud can easily be implemented within the sidebar of your blog and will match your template wonderfully.

Steps for Implementation

Step 1: Back it UpAlways make sure to back up your Blogger Template before doing anything else!

Step 2: The Labels Gadget

Make sure that you have the Labels Page Element installed. If you haven't already...

Go to Layout >Page Elements .

Click "Add a Gadget" and then add the "Labels" gadget.

Step 3: Locating the "Old Code"

Now go to Layout >Edit HTML

Make sure that the "Expand Widgets Template" box is unchecked.

Now we need to search for the code that looks like this.

<b:widget id='Label1' locked='false' title='Tags' type='Label'/>

Your code may look a little different. So try using your browser's search tool to find type='Label'.

Step 4: Replacing the "Old Code" with the "New Code"

Once you've located type='Label', remove the whole line of code that looks just like the code mentioned in part 3 of step 3.

Replace this code that you've just deleted with the code below:

/*
Distributed by laxman at blogswidgets.blogspot.com
*/ <b:widget id='Label1' locked='false' title='Tags' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content' style='text-align: justify;'>
<script type='text/javascript'>
/*
Simple Blogger Tag Cloud Widget
by Raymond May Jr.
http://www.compender.com
Released to the Public Domain
*/

//Settings / Variables
var max = 150; //max css size (in percent)
var min = 70; //min css size (in percent)
var showCount = false;  // show counts? true for yes, false for no
var minCount = 1;  // what is the minimum count for a tag to be shown? 1 for all


//Begin code:
var range = max - min;

//Build label Array
var labels = new Array();
<b:loop values='data:labels' var='label'>
labels.push(&quot;<data:label.name/>&quot;);
</b:loop>

//URLs
var urls = new Array();
<b:loop values='data:labels' var='label'>
urls.push(&quot;<data:label.url/>&quot;);
</b:loop>

//Counts
var counts = new Array();
<b:loop values='data:labels' var='label'>
counts.push(&quot;<data:label.count/>&quot;);
</b:loop>

//Number sort funtion (high to low)
function sortNumber(a, b)
{
return b - a;
}

//Make an independant copy of counts for sorting
var sorted = counts.slice();

//Find the largest tag count
var most = sorted.sort(sortNumber)[0];

//Begin HTML output
for (x in labels)
{
if(x != &quot;peek&quot; &amp;&amp; x != &quot;forEach&quot; &amp;&amp; counts[x] >= minCount)
{
//Calculate textSize
var textSize = min + Math.floor((counts[x]/most) * range);
//Show counts?
if(showCount)
{
var count = &quot;(&quot; + counts[x] + &quot;)&quot;;
}else{
var count = &quot;&quot;;
}
//Output
document.write(&quot;<span style='font-size:&quot; + textSize + &quot;%'><a href='&quot; + urls[x] + &quot;' style='text-decoration:none;'>&quot; + labels[x] + count + &quot;</a></span> &quot; );
}
}
</script>
<br/>
<span style="font-size:80%;float:right;">Powered by <a href="http://www.blogswidgets.blogspot.com">Blogger Widgets</a></span>
</div>
</b:includable>
</b:widget>

Step 5: Previewing the New Tag Cloud

Before saving the template make sure to click preview. The new tag cloud should now be visible. If not, make sure that you've completed all the steps correctly.

Facebook tools and widgets

2010-03-23T03:36:00.000-07:00

Facebook is the largest social networking site with more than 400 million active users and is growing larger every day!and it is the best social networking site too. Make sure to use these Facebook widgets to connect with your large Facebook audience through your blog or website. You can use these tools to easily share certain profile information, websites, blogs, and businesses with the Facebook community.

Personal Profile Widgets

Profile Badge
Create a Facebook profile badge to share selected profile information on your website. A profile badge will allow your users to easily connect with you and add you as a friend.

Photo Badge
This photo badge allows you to share your Facebook photos on websites and blogs. Choose from a vertical, horizontal, or two-column layout and also choose the number of photos to be displayed.

Fan Badge
Display your Facebook fan pages for all to see.

Website or Business Widgets

Share Button
A powerful facebook widget which allows your visitors to share your content on Facebook!

Fan Box
Lets your users easily become a fan of your site and also allows them to view your Facebook page stream.

Page Badge
Lets you share your Facebook page (one that you have created) information on your website.

Twitter Link
Connect your Facebook page with Twitter. Whenever you update your Facebook fan page your twitter followers will be updated as well with a tweet.

Developers Widgets

Publishing to Facebook
This allows your users to publish their content and activity to Facebook.

Comments Box
Lets your users comment on your website content with their Facebook account.

Live Stream
Lets Facebook users to post and share content in real-time.

ADD GOOGLE BUZZ BUTTON| BLOGGER

2010-03-11T03:49:00.000-08:00

Now talking about G-Buzz, although Google has not yet provided any official "Buzz It!" buttons, but it does allow you to synchronize your blog-feed with the Buzz, so that all your posts are directly sent to your Buzz account. Simply add your blog to the connected sites list...

Inspired by Mashable, now I too have created the Google Buzz It! buttons for the readers of BloggerStop. Here's how you can add these buttons to your blog:

STEP #1
Log in to Blogger, go to Layout -> Edit HTML
and mark the tick box "Expand Widget Templates"

Now, find this code in the template:

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

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

<a expr:href='"http://www.google.com/reader/link?url=" + data:post.url + "&title=" + data:post.title + "&srcTitle=" + data:blog.title' target='_blank'><div style='text-align:right;margin-top:-42px;'><img alt='Buzz It' src='http://i46.tinypic.com/121wg9e.jpg'/></div></a>

It will display a small Buzz It! button like this:

Or, paste this code:

<a expr:href='"http://www.google.com/reader/link?url=" + data:post.url + "&title=" + data:post.title + "&srcTitle=" + data:blog.title' target='_blank'><div style='text-align:right;margin-top:-42px;'><img alt='Buzz It' src='http://i47.tinypic.com/2j0b02c.jpg'/></div></a>

to display a larger Buzz It! button like this one:

NOTE: By default, the alignment of these buttons is kept to "Right", you may change it to "Left" too. To change the position of the button, change the value -45 pixels (in margin-top:-42px;).

STEP #3
Save the template and let the Buzzer Buzzzzzzz...

Add Tweet This or Retweet button in Blogger Posts

2010-02-12T00:59:00.000-08:00

Twitter is one of the fastest growing social networks in the recent days. Many feel it drives a lot of traffic to their blog, especially when they have a large number of followers. We should some how use this twitter to improve traffic to our blog. So, how are we going to do that? Simple, just by adding a "Tweet This" link to our blogger posts. There are certain blogs that include Tweet this in the footer of their posts, that is, at the end of the post as a social bookmarking icon. But I recommend you to place it at the top, next to the title of your post.

This post basically explains, how to add tweet this and also a retweet button to blogger posts. Many blogs have links only for "Tweet this" but not for "ReTweet". This post includes both Tweet and ReTweet option, there by, driving more traffic to your blog and making your posts more effective. This service is provided by Tweetmeme. Check the official page by clicking on the link here: Tweetmeme. The final output after installation will generate a button as shown in the picture. Fine. Enough of bla bla bla.. Let us get in to our work. Follow these steps.

1. Login to your dashboard. Navigate to "Layout>>Edit HTML" from your dashboard. Make a back up of your template before you do any changes in the template.
2. Now, expand your template, that is, make sure that you have a tick mark in that "Expand Widget Template". Now, do a search using "CTRL+F" for the following line, if you want to show the button below the title of your post:

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

Else, search for the following piece of code to add the button at the right end of your blog posts.

<div class='post-body entry-content'>

3. Paste the following piece of code just after the above line(either below the title or embedded with your blog posts).

<div style='float:right; margin-left:14px;'>
<script type="text/javascript">
tweetmeme_url = '<data:post.url/>';
</script>

</div>

4. Save your template. That is it!! Your done with the installation. Very simple I think!!

Add html code in blogger in style

2010-02-12T00:57:00.000-08:00

Recently, one my blog readers wanted to know how do I add Java scripts and other HTML codes in my blog posts. To be very frank, even I had this question when I started my blog initially. And when I tried to implement such tricks in my blog, I faced a lot of difficulties with the coding. But nowadays, I find many sites have come up with blogging tips and it has become very simple to customize your blog. Let me straight away tell you, how to implement this trick on your blog posts.

If you just want to show up HTML codes in your blogger post, that is without any customization, then use this site : Simple Code. This method will show the HTML as it is and looks very simple. If you want to customize the way it is displayed, like I do in my blog, then you should follow the next method. In this method, you will have to include some codings and then your job will be done.

Follow these simple steps to include the HTML/Java script codes in your blog post:
1. Navigate to "Layout>>Edit HTML" from your dashboard. Make a back up of your template before you do any changes in the template.

2. Now, do a search using "CTRL+F" for the following line: ]]></b:skin>

(Note: I have used the first method here. Just to show you how it looks)
3. Once you find the code, paste the following piece of code above it:

.codeview {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(http://img17.imageshack.us/img17/5162/codeview.gif) no-repeat right bottom;
border-top : 1px solid #eeeeee;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #eeeeee;
}
.codeview li {
font-size : 13px;
line-height : 24px;
font-family : "Courier New", "MS Sans Serif", sans-serif, serif;
color : #FFFFFF;
font-weight : normal;
margin : 0;
padding : 0;
}

4. Once you do this step, save your template and return to your blog post where you want to insert the HTML code. Place the HTML content in between the following two tags namely, <div class="codeview"> and </div>.
5. You can include the code straight away in the "Compose Mode" of your blog post area. After you complete your post, you can simply click the button "PUBLISH POST" and later, view the result.

If you still find problems with the display of HTML codes, then use Simple Code and get the simplified code from that site. Now, place this simplified code in between the two tags as mentioned in step four. That's all folks. Hope I made it simple and clear. Please post your views below through comments.

Add social bookmarks buttons in every blogger posts

2010-02-12T00:44:00.000-08:00

The best way to improve your reader's count is to add a social bookmark at the end of every post. This makes it easy for the readers to bookmark the post page using their favorite social bookmarking service (eg: Del.icio.us, Technorati, etc..) My post features to add some of the best social bookmarks at the end of every post.

Here's how to add social bookmark buttons at the end of each post:

1. Go to "Layout->Edit HTML (check the "expand widget templates" option is ticked). You should make a backup of your template before modifying the HTML by clicking on the "Download full template" link at the top of the page first.

2. You need to search for the following line in your expanded template.

<div class="post-footer-line post-footer-line-1">

3. Paste the following code just after the above line.

<!-- Start of social bookmarks -->
<b><i>Share this:</i>
|<a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title'
target='_blank'>Digg It</a> |
<a expr:href='"http://technorati.com/faves?add=" + data:post.url' target='_blank'>Add to Technorati</a> |
<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title'
target='_blank'>Save on Del.icio.us</a> |
<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title'
target='_blank'>Stumble It</a> |
<a expr:href='"http://www.facebook.com/share.php?u=" + data:post.url + "&title=" + data:post.title'
target='_blank'>Share on Facebook</a> |
</b>
<!-- End of social bookmarks -->

4. Preview your blog to make sure the bookmark button appears as you want at the end of the posts. Your final output should be like the one at the end of my post.

widgets-page naigation hacked for blogger

2010-02-11T21:03:00.000-08:00

Most said page navigation menu in the bottom of the page can appear only in Wordpress blogs. But Now here is a blogger hack which will help you to show Page Navigation Menu in bottom of the page ( see screenshot ) . you can Add this Page Navigation hack to your blogger template either by inserting script to your template by editing or you can add it as a widget . In this post I will write only how to add this Page navigation menu by editing template code.

I have used a background image for this Page Navigation hack. If you want to show this without the background image just remove the background image url .
Let us start :
Step 1 : Log in to your blogger account and navigate to Layout section. Now go to the edit HTML subtab.
Step 2 : search this line ]]></b:skin> and add this CSS code above that line.

CSS CODE WITH IMAGE :

.showpageArea {padding: 0 2px;margin-bottom:10px;margin-top:10px;
} .showpageArea a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
.showpageNum a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;
}
.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;}
.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

It must look like this :

Step 3 : Now search for this code or related in your template ( no need to expand widgets )

<b:section class=’main’ id=’main’ showaddelement=’yes’>
<b:widget id=’Blog1′ locked=’true’ title=’Blog Posts’ type=’Blog’/>
</b:section>
Now Add This script just below the </b:section> .

In the code above you can edit the lines in red to your wish .

1 : var pageCount = 5;

The digit in red represents number of posts to be shown in single page. Change the digit to show as many pages you want.

for example :
In my blog I have put that value as 2 . In each page you can see only 2 posts .

2 : var displayPageNum = 3;
here the digit in red represents number of pages to be listed.
For example :

In my blog I have chosen 3 , then 3 pages will be shown.
That’s it now we have added Page Navigation menu hack to our blog successfully .
That CSS code will suit almost all templates. Please don’t remove the credit link.
I hope all of you will like this Page Navigation blogger hack . If you have any doubts please ask in comment section . Comments are most welcome , please give me your feedback about this blogger Hack.

Add blog statistics widget

2010-02-11T19:40:00.000-08:00

What is Statistics Widget for Blogger?
Statistics Widget for Blogger will display the total number of posts and total number of comments on your blog. As of now, I have included only these two data for display. I do not see any value in displaying the total words in posts and total words in comments. I find them meaningless. If you are interested to display the total number of posts and total number of comments on your blog, please follow the instructions below.

Instructions to install Statistics Widget for Blogger

On your Blogger Dashboard, click on the "Layout" link

This will take you to the "Page Elements" tab. Decide where you want to insert the statistics widget and click on the "Add a Gadget" link accordingly.

Scroll down the list and find "HTML/ Javascript" and click on the "+" button

This will open the "Configure HTML/ Javascript" window. In the title section, please type "Blog Statistics" or "Blog Information" or "Blog Data" or any other title as you may wish

In the content section, please copy & paste the following code:

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

<ul><li><script src="http://yourblog.blogspot.com/feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script></li>

<li><script src="http://yourblog.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script></li></ul>

<span style="font-size:75%;"><a href="http://templates-widgets.blogspot.com/" target="_blank">statistics Widgets for Blogger</a></span>

Remember to replace the text in bold "yourblog" with your blog address. Take note to replace it in two locations.

Your window should look like the image below.

I have a link back to my blog at the bottom. You are free to remove the credit, if you don't like it

Click on "Save" button at the bottom right hand corner

That's it. You have created a widget to display the number of posts and number of comments on your blog. Please contact me if you have any doubts or you face any problems with the widget.