How to Let Visitors Listen to Your Blogger Posts

Tweet

 

I don’t know if you are aware of the cool service named Vozme (http://vozme.com/). It offers a great service that lets your visitors listen to your Blogger posts by simply adding a Vozme Link or Vozme Button to your blog.This is especially helpful if you publish very long Blogger posts. In the following short post I’m going to explain how to add this widget to your Blogger blog.

How to let visitors listen to your Blogger posts

1. Login to Blogger. Go to Dashboard -–> Layout --> Edit HTML.

2. Click on "Expand Widget Templates".

3. Search for (Crtl + F) the following code:

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

Note: If you can't find <div class='post-header-line-1'/> in your template, look for <data:post.body/>.

4. Copy one of the codes below and paste it just after <div class='post-header-line-1'/> or just before <data:post.body/>.

CODE 1 : Using a Simple Text Link

<div style='float:right; margin-right:10px;'>
<script src='http://vozme.com/get_text.js' type='text/javascript'/><a expr:onclick='"get_blogger(\"" + data:post.id + "\",\"en\",\"ml\");"' href='javascript:void(0);' style='margin-left:1.5em;'>((&#8226;)) Hear this post</a>
</div>

CODE 2 : Using an Image and a Text link

<div style='float:right; margin-right:10px;'>
<div id='voice'>
<script src='http://vozme.com/get_text.js' type='text/javascript'/> <a expr:onclick='"get_blogger(\"" + data:post.id + "\",\"en\",\"ml\");"' href='javascript:void(0);'><img src='http://vozme.com/img/paper_sound32x32.gif' align='left' alt='' border='0' style='margin-right:0.4em;'/></a>
<a expr:onclick='"get_blogger(\"" + data:post.id + "\",\"en\",\"ml\");"' href='javascript:void(0);' style='font-size:10px;'>Hear<br/>this post</a>
</div>
</div>

Note: You can change the voice to female by entering fm instead of ml.

5. Save your template.

Your visitors should now be able to hear your posts.

Good luck!

P.S.: The service is currently available in English, Spanish, Italian, Portuguese, Hindi and Catalan.

How to Add the Official Twitter Follow Button to Your Blogger Blog

Tweet

 

Adding the stylish Twitter Follow Button to your Blogger blog allows you increase its interactivity and deepen the relationship with your readers. To follow you they just need to click on the button. By clicking your username next to the button they can view profile and latest Tweets of your account.

For publishers and brands, adding the Follow Button to your blog and/or website and using Twitter to stay connected with your audience is a powerful combination. People who follow your account are much more likely to retweet and engage with your Tweets, and to repeatedly visit your Blog or website. Adding the official Twitter Follow Button to your website is easy and a matter of minutes.

How to add the official Twitter Follow Button to your Blogger blog

1. Sign in to Blogger. Then go to Edit HTML. Click on „Expand Widget Templates“.

2. Search (Ctrl + F) for the following line of code:

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

3. Now copy the code you find below and paste it just below the above line:

NOTE: If you can't find <div class='post-header-line-1'/> in your template, paste the code just before <data:post.body/>.

<div style='float:right;margin-right:5px;'>
Your Twitter Code Here
</div>

4. Now replace "Your Twitter Code Here" with the code you get by following this link:

http://twitter.com/about/resources/followbutton

5. Save your template.

That’s all!

Good luck!

How to Add Google +1 (plus 1) Button to Blogger Share Buttons

Tweet

 

In this short and easy tutorial I am going to explain how to add the new Google +1 Button to Blogger Share Buttons. If you are already using Blogger Share Buttons on your blog, you can skip step 1.

"+1" is often used as a digital shorthand for "this is pretty cool." It’s also a way for friends, contacts, and the rest of the world to find great things on Google search. Google launched the +1 button back in March as a way to help share web content and make search more personal and relevant.

From Blogger Buzz

The following short video offers more information about the Google +1 Button:

How to add the Google +1 Button to Blogger Share Buttons

1. Enable the share buttons for Blogger by editing the Blog Posts widget from the Page Elements section.

2. Go to Edit HTML. Click on Expand Widget Templates.

3. Now find (Ctrl + F) the line

<b:include data='post' name='shareButtons'/>

and remove it.

Note: If you can not find above code, then skip that step.

4. Add the following code just above the </head> tag.

<script type="text/javascript" src="http://apis.google.com/js/plusone.js">
{lang: 'en-US'}
</script>

5. Now find the line

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

6. Copy the following "Blogger Sharing buttons" code and paste it just below the above line of code.

NOTE: If you can't find <div class='post-header-line-1'/> in your template, paste the "Blogger Sharing buttons" code just before <data:post.body/> .

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

This code will show the Blogger Sharing Buttons below the post header on all Blogger post pages. If you prefer the share buttons to be displayed below your Blogger posts, then paste the above code just after <data:post.body/>.

Note: If you want to show the share buttons on every page, then remove the 2 blue lines form above code.

7. Save the template.

That’s all!

Good luck!

How to Add a Stylish Facebook Like Box to Your Blogger Blog

Tweet

 

The attractive and useful Facebook Like Button allows you to provide one more Sharing Option to your Readers. It enables your readers to share your posts on Facebook by simply clicking on it. Have you added the Like button? An you are still not getting any “Likes”? :(. Ok, then it is time to will the Like button in a much better and more elegant way.

Here is a screenshot of the Facebook Like Box. Isn’t it lovely and more “likable” than the default Like Button?

Of course, the  Facebook Like box also includes a link to  your Facebook Fan Page. This awesome Facebook Like Box was designed, styled and coded by Mia of Dezign Matterz. Many thanks to her for designing and styling this great Like Box.

How to add the Facebook Like Box to your Blogger blog

1. Login to your Blogger Account and navigate to Design --> Edit HTML. Check the box where it says “Expand Widget Templates”.

2. Now search for (Ctrl + F)

]]></b:skin>

3. Directly above that line place the following code:

.fb_like_box {
margin-top:10px;
-moz-border-radius:10px 10px 10px 10px;
border-radius:10px;

background-color:#3B5999;
border:3px solid #2B2B2B;
margin-bottom:10px;
padding:10px 7px;
width:560px;
}
.fb_like_top {
overflow:visible;
padding:0;margin:0 0 5px;
width:349px;
height:24px;
background:url("http://lh5.ggpht.com/_u4gySN2ZgqE/TJ3dpjy9PaI/AAAAAAAABr0/PTUXIS8ykps/fblogo%5B3%5D.jpg") no-repeat scroll left top transparent;
}
.fb_like_top a {
height:24px;
width:114px;
background:url("http://lh6.ggpht.com/_u4gySN2ZgqE/TJ3do-mtwuI/AAAAAAAABrw/NXxp85pCaD0/beafan%5B3%5D.jpg") no-repeat scroll left top transparent;
display:block;
margin-left:445px;
text-indent:-5000px;
}.fb_like_button_holder {
-moz-border-radius:10px 10px 10px 10px;
border-radius:10px;
background:none repeat scroll 0 0 #FFFFFF;
padding:12px 12px 0 12px;
width:535px;
height:42px;
}

Note: Width in green: Choose the width of the like box so that it fits into your template (x). Width in blue: Your chosen width –115 (x-115). Width in orange: Your chosen width –25 (x-25).

4. Now look for

<data:post.body/>

and just below that add the following code:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='fb_like_box'>
<div class='fb_like_top'><a rel='nofollow' href='http://www.facebook.com/eb....ks'>Become a Fan</a></div>
<div class='fb_like_button_holder'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px;height:30px;'/>
</div>
</div>
</b:if>

Note: Insert the URL of your own Facebook page.

5. Save your template. You will now see a Facebook Like Box on your post pages.

That’s all!

Good luck!