Page Navigation with number For Blogger

Page navigation is need for all blogger because it can make navigation easy for your visitors.
 




To see the result go my home page.
 
 
Step 1 : Apply Style

1. Login to Blogger Dashboard and navigate to Layout > Edit Html
2. Don’t click the checkbox which says ‘Expand Widget Templates’
3. Find this 

]]></b:skin>

and replace it with

.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
border:1px solid #999;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #ddd;
}
.showpageOf {
margin:0 8px 0 0;
}
.showpageNum a:hover {
border:1px solid #888;
background: #ccc;
}
.showpagePoint {
color:#fff;
text-shadow:0 1px 2px #333;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
-webkit-border-radius:3px;-moz-border-radius:3px;
border:1px solid #999;
background: #666;
text-decoration: none;
}
]]></b:skin>

Step 2 : Aplly Javascript
Find This :

</body>

Replace with :

&lt;script type='text/javascript'&gt;
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=4;
var upPageWord ='Prev';
var downPageWord ='Next';
&lt;/script&gt;
&lt;script src='http://scriptabufarhan.googlecode.com/svn/trunk/pagenaviv202-min.js' type='text/javascript'&gt;&lt;/script&gt;
</body>

Change based on your blog setting :
var postperpage=7;
var numshowpage=4;
Postperpage : How many Post every Page for your blog
numshowpage : how Many number will show in Your page Navigation
Step 3 : Customize Label
Go to the Edit HTML page and “Expand Widget Templates”
Find this (all of this text in your xml or template)

'data:label.url'

and Replace with this

'data:label.url + "?&max-results=7"'

Change 7 base on how many post every page
only That, I hope it can work and make your blog easy to navigate.

Twitter Introduce - Official Twitter Share Button (Tweet Button) for Blogger

For those of you who use Twitter on a daily (or even hourly) basis to share and read information about celebrities, friends, or businesses, you may be interested in Twitter’s new addition — The Tweet Button.

The aim of the Tweet Button is to simplify the sharing of web links by its day-to-day users and web publishers who use the social networking website to distribute information about its products and services.

When the Tweet Button is pressed or clicked, a pop-up box appears where an ‘automagically’ shortened URL of the page or object shared is displayed, Twitter said in their blog post released Thursday.

The Tweet Button also aims to grow traffic to the site and extend the Twitter followers. They aim to do this with publishers having the ability to preconfigue the custom text with every Tweet Button they wish to display to users, as well as the option to suggest other Twitter accounts they may also be interested in.

TweetMeme is another company who have provided similar capabilities, but will now retire and phase out its “retweet” service in aid of assisting Twitter with the growth of the Tweet Button.

It was only a matter of time before Twitter adopted such a service, as Facebook did some while ago with its infamous “Like” button that has also become a favorite on YouTube and many other blogs and social networking websites.

Do you like the new Tweet Button? Will you be adopting it on your website?

To install the new tweet button on blogger, Follow these steps

1. Login to your Blogger Dashboard and Navigate to Design > Edit HTML

2. Click on the Check box which says “Expand Widget Templates”

3. Now Look for

<data:post.body/>

and immediately above it paste the following code snippet(after proper editing)

<div style="float:left;padding:4px;">
<a href='http://twitter.com/share' rel='nofollow' class='twitter-share-button' expr:data-url='data:post.url' expr:data-text='data:post.title' data-count='vertical' data-via='BlogCommander'>Tweet</a>
<b:if cond='data:post.isFirstPost'>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js">
</script>
</b:if>
</div>

4. Save your template.

5. Now you should see the twitter button near each of your blog posts.

Editable parameters

1. float:left - you can change this to float:right if you need the button on the right side of the post instead of on the left

2.data-count='vertical' - you can change this to data-count='horizontal' or data-count='none'

3.data-via='BlogCommander' - you can edit BlogCommander with your twitter user name. So if your twitter handle is michael, then change it to data-via='michael'

4. Adding some extra text in the tweet – With the current code, the button will make a tweet with the title of the blog post. If you want to add some extra text to the tweet, change expr:data-text='data:post.title' to

expr:data-text='"I am Reading: "+data:post.title' This will append “I am Reading:” to the tweet :)

Displaying the Tweet Button on the Post Page Only

If you want to display the Twitter button on the post page only, then wrap the code with conditional tags like

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style="float:left;padding:4px;">
<a href='http://twitter.com/share' rel='nofollow' class='twitter-share-button' expr:data-url='data:post.url' expr:data-text='data:post.title' data-count='vertical' data-via='BlogCommander'>Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js">
</script>
</div>
</b:if>

Demos

1.data-count='vertical'
Tweet

2.data-count='horizontal'
Tweet

3.data-count='none'
Tweet

Something more about the Tweet Button
 

Make Money With Your Blog and Google AdSense

AdSense is a great way to get paid for doing what you love to do: blogging! AdSense allows you to show targeted ads on your blog and earn revenue from your traffic. It also helps your visitors find things they may be interested in, based on the content of your blog posts. Best of all, AdSense is free and you have the option to remove the ads at any time.

The AdSense system shows ads relevant to the content of your blog and you can easily customize the look and feel of the ads to match your blog. If your blog is about fashion, you may show ads for shoe designers or clothing stores. If your blog is about cars, you may see ads for car dealerships or auto shops. Using filters, you can have control over the content of the ads you display by choosing to block categories of ads or even specific advertisers.

With the free suite of powerful AdSense reporting tools, you can pull detailed reports that will help you track your revenue and identify opportunities to earn more money. You can see earnings by day, page, domain or specific ad unit and can also use Google Analytics to see the source of your traffic and earnings.

Adding AdSense to your blog is easy. Just follow these steps:

1. Log in to Blogger, choose your blog, and go to the “Monetize | Set up AdSense” tab.
2. Choose where you want to show your ads on your blog and hit “Next.”
3. If you’re new to AdSense, follow the easy online steps to sign up for a new AdSense account. If you already use AdSense, you can log in to AdSense and link your Blog to your AdSense account.

If you’re using a Classic template, you can add AdSense to your blog by following the steps outlined here.

To learn even more, come take a tour with Google AdSense.

Get Related Content for Your Blog with the Zemanta Gadget

About a year ago this blog featured Zemanta, a tool that helps you get more out of blogging. Previously, Blogger users could install a Zemanta browser plugin to recommend content while you blog, enabling you to:

* Read news to learn more about the topic
* Link articles to improve the value of your post
* Use pictures to make your post richer

Today we are pleased to announce that we've teamed up with Blogger to make it easier to use Zemanta on Blogger. To use Zemanta, just follow these three easy steps:

Blogger Buzz: Get Related Content for Your Blog with the Zemanta Gadget

New Gift From Blogger

Although some of you use Google Analytics or other third party tools to track your blog traffic, many of you have requested an easier-to-use, fully-integrated stats feature for Blogger. We heard that, and we are excited to announce that Blogger in Draft now has built-in stats. Just go to Blogger in Draft, and you'll notice a new "Stats" tab. You don't have to install or configure anything to start benefitting from Stats.

The coolest thing about the new Blogger Stats is that it monitors and analyzes your visitor traffic in near-real-time. You can see which posts are getting the most visits and which sites are sending traffic to your blog right now. For example, if a reader shares one of your blog posts on Twitter and the post is getting lots of clicks, you will see a traffic increase in Blogger Stats almost instantly, with the particular Tweet mentioning your post being identified as the traffic source. Of course, traffic data across longer time periods (day/week/month) and all-time historical data are available as well.

There's also a lot more data that's being tracked, such as popular search keywords that send visitors to your blog, which country your visitors come from, and which web browsers they are using. Basically, with the new Stats feature, you know what's going on with your blog right now.

The new Stats feature shows all of this data in a simple, easy-to-understand graphical user interface. Since Stats are part of Blogger, you don't have to sign up for another service, or embed any code in a gadget.
Additionally, if you want the enterprise-level power and flexibility of Google Analytics, you can still use it, as outlined in this Help Center article. Note that the pageview data in Blogger Stats and in Google Analytics may not be identical, due to different collection mechanisms used. Also, Blogger Stats do not support private blogs for now.

Blogspot Bloggers Official Sharing Buttons

Blogger has been rolling out new features to improve the looks and usability of the blogs. Blogger is now testing out a new Social Sharing icon set consisting of Email, Blogger,Twitter(with goo.gl shortener),Facebook and Google buzz buttons. The set looks simple and elegant with some cool mouse over effects. These Sharing buttons are still in draft(still not published on the official draft blog) and so wont be available in your regular dashboard.If you need to take a peek at these new sharing icons, then take a look at my post page(and try sharing it :P ).

You are still reading. So  i guess that you are really interested in implementing these Sharing buttons on your Blogger Blog.

Then don’t wait. Just follow these simple steps

• Login to Your Blogger in Draft Dashboard at http://draft.blogger.com
• Go to Design > Page Elements and Click on the Edit Button near the Blog Posts Gadget and check the “Show Share Buttons” Option

• You can Drag and Drop the Share buttons and place it where you want.

• Now if everything went right, then you should be able to see the Share buttons on your Blog. If not then read on. :)
• If it didn’t appear then don’t worry, That is because you are having a modded template. Just Got to the Edit HTML page under the Design Tab and locate 

<p class='post-footer-line post-footer-line-3'>

Or if that is not there then find

<div class='post-footer-line post-footer-line-3'>

and place the following code just below any of these lines[whichever is present in your template].

<div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div>

and Save your template.

Optional Tweaks

• Show the Sharing Buttons on Post pages only - Find the Following Code in your template

<div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div>

and wrap it within conditional tags as

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div>
</b:if>

• Hide Some of the Sharing Buttons – If you want you can hide some of these buttons using CSS. For example to hide the Blogger sharing button, add the following code above ]]></b:skin> in your template 

.sb-blog{display:none}

sb-email , sb-twitter, sb-facebook, sb-buzz and sb-blog are the different Button Classes. If you hide the mail or  buzz buttons, then it might look a little bad as these have rounded edges,

Automatic Read More Hack For Blogger With Thumbnail

Automatic Read More Hack For Blogger With Thumbnails i.e expandable post hack for blogger with thumbnail of image used in blogger posts and all this work is done by the script automatically,you just dont need to locate your image the script will do all work for you automatically.Just you have to write your post and publish it with one image in post related to post.

If you dont want to add thumbnail image in post summary then i had an post previously on automatic read more hack for blogger,read this.

Now how to install Automatic Read More Hack For Blogger With Thumbnails Demo snapshot is below.

Lets start with its installation:-

Now Login to Blogger Go to Layout > Edit HTML in your Blogger dashboard and check the "expand widget templates" box.

Find the closing </head> tag in your blog template, and paste the following section of code immediately before it:

<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}


//]]>
</script>

Note in above codes we can change the numeric numbers according to our need

summary_noimg = 430; is post cut height without image

summary_img = 340; is post cut height with image

img_thumb_height = 100; is thumbnail image height

img_thumb_width = 120; is thumbnail image width

Now find this code <data:post.body/> in your template and replace it with below codes.

<b:if cond='data:blog.pageType != "item"'>

<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> read more "<data:post.title/>"</a></span>

</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Preview Your template if its showing thumbnail with read more hack Save it.

To show thumbnail it should have one image in your blogger posts and please upload the .js file to your server and dont forget to change the link with yours in codes to make this hack work.

I am sure everybody will love this hack for sure.

Change background color in blog posts

In this article I am going to show you how to change the background color of your blog posts.Many of the people would like to differentiate each wrapper with a different color, so I have decided to share this hack with you.
 
Follow the steps
 

• Login to your blog account
• Dashboard appears on successful login
• Go to Layout – Edit Html
• Search for the code ” post-body { “ (Use your browsers find function dude)
• After searching the code add the following lines to it

background: #F5F2EE;

• After adding the code it would look like this

 

* Click on Save template

* Congrats ! If you followed my steps correctly only the posts section will have the background color.

If you want to apply a different color replace the code in red to your favorite color

Statistics Widget for Blogger

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

• Log in to your Blogger account
• 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://blogspot-n-blogger.blogspot.com/2010/05/statistics-widget-for-blogger.html" target="_blank">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.