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.

Add Facebook Like Button on blogspot blogger

Facebook has now made a extremely easy for anyone to integrate Facebook social elements into their blog – just copy-paste a HTML code and your site will instantly become Facebook-ready.

To this, open your blogger html editor, make sure that “Expand Widget Templates” checkbox is ticked.
Now Search for the following code (you can use CTRL+F on your browser) 

<data:post.body/>

When you found it, on the next line you should past this code

<iframe expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&amp;layout=standard&amp;show-faces=true&amp;width=530&amp;height=60&amp;action=like&amp;colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:530px; height:60px' allowTransparency='true'></iframe>

If you found that, it means you are on the right spot.

Now Click “Save Template”. Refresh your main blogger blog now and you should be able to see your new Facebook Like Button.

Google Buzz share count button for Blogger / Blogspot blogs

Integrate Google Buzz Button in Blogger with some simple hacks is very easy now. After introducing Google Buzz in global market now buzz have started to dominate the micro blogging arena and every blogger wants to Add Google Buzz Button in Blogger Blogs, With this service users can now share the stuffs with each other. Google have not provided any script for adding a social bookmarking button for your blog. So if you want to Add the Google buzz Button in your Blogspot blogs then follow the steps given below here.

How to Add Google Buzz Button in Blogger:

Step 1: Login to Your Blogger Account.

Step 2: On Your Dashboard, Click on Layout

Step 3:Now Click on HTML

Edit HTML

Step 4: Now Check the box of Expand Widget Templates

Note: Before Applying Any Changes Please Download the Full Template for your Backup.

Expand template code

Step 5: Now you can add the Google Buzz Button either at the end of the each post or below the title of the each post.

Step 5.1: If you want to add the button at the end of each post then find this code in your template.

<data:post.body/>

Now paste this code belowe

<script src="http://www.buzrr.com/button.js"></script>

Now Save Template.

If you want more stylish and different button click on Image.

 

Blogger Template Designer, An Online Template Designer on Your Blogger Dashboard

Finally, Blogger has launched new feature called "Blogger Template Designer" . This online blogger template designer allow you to customize the look and layout of your blog by just clicking and dragging. There are many awesome blogger template design but maybe you want to create your own style. Blogger has facilitated your need.

Animated Image Icon Before Post Titles in Blogger / Blogspot

Blogging is all about providing valuable information to your readers. In addition to this, you can customize your blog in such a way that your readers would enjoy your blog layout with the contents. So, here is the tip to add and show animated image icon before blogger post titles. It will be displayed as the logo to your each post on blogspot. This can be done with some simple HTML edits. Lets learn this blogger trick step by step.

Finding An Image Icon To Insert Before Blogger Post Titles :

First things first. You have to do some homework before adding animated image icons. First of all you have to find an icon to place in your blog. The maximum size of your icon should be 50*50 pixels. You may make a search on Google with search phrases like “Animated icons”, “Animated logos” and choose an image. See if the image you have choosen is not protected under any copyright law. Try to get an icon which blends perfectly with your blog theme. Then upload your icon to any image hosting

site such as imageshack, photobucket, tinypic or googlepages etc and get the link to your image. When you are done with this, proceed to next step.

Making HTML Code For Your Image Icon :

After getting the link to your image icon it’s time to make a HTML code using the image link. Follow below code to make a HTML code using the link to your animated icon.

<img src="LINK TO YOUR IMAGE HERE" style="border-width:0px" />

Change the text LINK TO YOUR TEXT HERE with the link to your image. Now I guess you are done with the HTML code to your link. Move to the next step.

Editing HTML To Insert Image Code

Now it’s time to implement the above code in your blogger template and your blog will start showing your icon before blogger post titles. To do this follow below mentioned steps.

1. Go to your blogger dashboard.

2. Navigate to Layout >> Edit HTML

3. Expand Widget Templates by clicking the box next to it

4. Search for the below code in your template by pressing Ctrl+F on your browser

<b:if cond="data:post.url">

5. Add your image HTML code just above this code in your template.

6. Save the template and you are done.

Now you can see an animated image icon before all your post titles on blogger/blogspot. You can also apply this trick to add some special notes before your post titles. Simply post your text in place of the image icon code in your blogger template code and you are done.

How to add "Tweet This" button to your Blogger Posts

Twitter has become one of the most popular ever syndication and networking tools for bloggers. A few readers have asked if it is possible to add a "Tweet This" link to our Blogger templates, and while this was possible, I had not discovered a method of automatically shortening the URL of our blog posts until now.

In this tutorial, I'll explain how you can add this to your Blogger template so your readers can Tweet your posts to their Twitter followers, enabling your Blogger posts to be syndicated to a wider audience.