Email Subscription Box For Blogger

Email Subscription Box For BloggerEmail Subscription box let your blog readers to get your latest post updates directly to their mailbox.  All of us like to have a good template with matching design and widgets but Feedburner provides a default Email Subscription Widget which may not suit to your templates. This post contains simple techniques to Customize your Feedburner Email Subscription Box.

For those who don't have a feed burner account first you need to setup your blog feed in Feedburner so, for that log in to http://feedburner.google.com/ with your Google Account.

Copy your blog feed URL and paste that url at feedburner.com
Setup feedburner for blogger
Now hit the "Next" button & it will take you to a page where you have to assign a "Title" & " Feed Address"(the Feed Address will be your FEEDBURNER-ID) to your feed.
Setup feedburner for blogger
Hit the "Next" button and you are done.

Now go to Publicize > Email Subscriptions and hit the “Active”  button.
setup-email-subscription in feedburner
setup-email-subscription in feedburner
setup-email-subscription in feedburner



Login to your Blogger account and navigate to, Layout > Add a Gadget > Javascript/HTML

Blogger Multi-Tabbed Widget
Multi-Tabbed Widget For Blogger
Blogger HTML/JavaScript

Now copy and paste the code below:

<style>
.wb-email{
background:url(http://www.webaholic.co.in/other/subscribe.png) no-repeat 0px 12px ;
width:300px;
padding:10px 0 0 55px;
float:left;
font-size:1.4em;
font-weight:bold;
margin:0 0 10px 0;
color:#686B6C;
}
.wb-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:3px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:12px sans-serif;
}
.wb-emailsubmit:hover{
background:#E98313;
}
.textarea{
padding:2px;
margin:6px 2px 6px 2px;
background:#f9f9f9;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
font-size:13px;
width:170px;
color:#666;}
</style>
<div class="wb-email">
Subscribe via Email
<form
action="http://feedburner.google.com/fb/a/mailverify"
method="post" target="popupwindow" onsubmit="window.open
('http://feedburner.google.com/fb/a/mailverify?uri=YOUR-FEEDBURNER-ID', 'popupwindow', 'scrollbars=yes, width=550, height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" value="Enter email address here" onfocus="this.value='';" onblur="if(this.value==''){this.value='Enter email address here';}" type="text" />
<input type="hidden" value="Blog Title" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input class="wb-emailsubmit" value="Submit" type="submit" />
</form>
</div>


Note:
  • Replace YOUR-FEEDBURNER-ID with your feedburner ID.
  • Replace Blog Title with your blog title.
  • And hit the "Save" button.
Read More

Multi-Tabbed Widget For Blogger

Multi-Tabbed Widget For BloggerMulti tab Widget is a great space efficient widget for Blogger. It helps to decrease the load time of your Blogger blog by combining three or more than three widgets into one. The tabbed navigation widget features tabs and a content window; when clicking on the tabs, different content is visible in the window beneath. You can use it for Popular posts, Top commenters, Recent Posts, Recent Posts or any widget as you like.

Follow these steps to add a Multi-Tabbed Widget to your Blogger blog.


Step 1:

Login to your Blogger account and navigate to, Template >> Edit HTML, hit Proceed and check Expand Widget Templates.


How To Add Facebook Comments Box To Blogger Blog

Step 2:

Find (CTRL+F) this in the code:

</head>

and paste the following piece of code just before/above it

<script src="http://www.webaholic.co.in/other/blogger-tabbed-widget-javascript.js" type="text/javascript"></script>
<link href="http://www.webaholic.co.in/other/blogger-tabbed-widget-css.css" rel="stylesheet" type="text/css" />

Step 3:

Now go to Layout > Add a Gadget > Javascript/HTML


Blogger Multi-Tabbed Widget
Multi-Tabbed Widget For Blogger
Blogger HTML/JavaScript

Now copy and paste the code below:

<form action="tabtampil.html" method="get">
<div id="TabTampil" class="TabTampil">
<div style="width: 300px;" class="TTs"> <a>Tab 1</a> <a>Tab 2</a> <a>Tab 3</a></div>
<div style="width: 300px; height: 300px;" class="Halamans">
<div class="Halaman">
<div class="Alas">
<br/>
Tab 1 content goes here
</div>
</div>
<div class="Halaman">
<div class="Alas">
<br/>
Tab 2 content goes here
</div>
</div>
<div class="Halaman">
<div class="Alas">
<br/>
Tab 3 content goes here
</div>
</div>
</div>
<small><a style='margin-left:10px;align:right;' href='http://www.blogger.webaholic.co.in/2011/10/multi-tabbed-widget-for-blogger.html' target='_blank'>Multi-Tabbed Widget</a> | <a href='http://www.webaholic.co.in/' target='_blank'>Webaholic</a></small>
</div>
</div></form>
<script type="text/javascript">tabtampil_inisial('TabTampil');</script>


Note:
Replace these with your tab titles

Tab 1Tab 2  , Tab 3

Replace these with your widget codes.

Tab 1 content goes hereTab 2 content goes here ,  Tab 3 content goes here


Step 4:

Preview and save the template.
Read More

Blogger Introduces 7 New Dynamic View Templates

Blogger Adds dynamic ViewsRecently Blogger introduces seven new "dynamic view" templates in Bloger Buzz. These templates are built with latest web technologies like AJAX, HTML5 and CSS3 and 40% faster than traditional templates.  This will help you to organize your blog's content in a number of visually rich ways to aid content discovery.


Once a single dynamic view is enabled by the blogger, your readers can check out the alternative views. There are seven newly added views:
  • Classic: A modern twist on a traditional template, with infinite scrolling and images that load as you go
  • Flipcard: Your photos are tiled across the page and flip to reveal the post title
  • Magazine: A clean, elegant editorial style layout 
  • Mosaic: A mosaic mix of different sized images and text
  • Sidebar: An email inbox-like view with a reading page for quick scrolling and browsing
  • Snapshot: An interactive pin board of your posts 
  • Timeslide: A horizontal view of your posts by time period 
To see these dynamic views in your blog just add the "/view/" tag after your blogspot URL.

Like:  http://www.blogger.webaholic.co.in/view/

Now to add these dynamic views to your Blogger blog just follow these simple steps.
Log into your blogger account and navigate to Template:

Blogger introduces 7 new dynamic templates

You'll see a new segment with the "Dynamic Views" header. Note that you can apply any of the seven views as your default, but doing so will automatically enable users to switch to the other views.

Blogger introduces 7 new dynamic templates

You can click on any of the formats shown here to get a preview of your blog in the chosen format.

Blogger Dynamic View

From the preview screen, click on Apply to Blog. Alternatively, you can apply one of the seven formats directly from the Templates screen.

While using these blogger dynamic view templates you won't be able to customize most of the design but you can still change the background colors and images, add a header image, and make other minor tweaks.

Read More

Facebook Comments Box Advantage

Facebook Comments Box Advantage
Facebook Comments Box is a great social plugin that fortunately now works just perfect with blogger. One should be ware of the advantages of all tools he is planning to use to make his web experience a more favorable one. For webmasters like us traffic is the fruit of our hard work and to get this fruit we try all possible methods. In our last post we discussed about how to add Facebook comments Box to Blogger blog and today we will explain 9 most important advantages of using this great social plugin.

  1. Simple Authentication: Facebook comment box makes it easy to comment for your visitors. No more typing in the same name, email address, website URL in the comment box. If a visitor is already logged into his Facebook account, they can simply type in the comment and hit the “Publish” button. That’s it!
  2. Social Relevance: The second advantage is the social feature. Whenever someone posts a comment on your website, the comment is instantly shared on the person’s Facebook profile, which is good for both the user and the owner of the website. The visitor shares his comment and views within his social circle while the site owner gets some free publicity and traffic.
  3. Moderation and Spam Control: Facebook comments can be moderated from Facebook apps dashboard and you can selectively delete specific comments which you don’t want to show. Other features include blacklisting specific words or phrases and it’s no wonder that Facebook will roll out more advanced comment moderation and notification in the coming days. And since posting a comment using Facebook’s comment form would expose who you are, spammers and link brokers would have a tough day spamming the comments section of your blog with irrelevant comments.
  4. Multiple Platforms Commenting Option: Your visitors no more need to log into blogger or create an open ID. They can comment using their Facebook account, Hotmail, AOL or Yahoo. Almost every online user in the world uses at least one of these services. So you visitors are provided with multiple options to post their comments.
  5. Threaded Comments: Your blog readers no more need to feel neglected because you no more need to reply them all at once. Rather you can pay them proper attention by replying to each reader under their comments. This way a comment thread is set up which further makes the conversation more useful and fun!
  6. Comment With Profiles: You can now happily turn off the "Anonymous" comment option by going to Blogger > Settings > Comments. The users as I said can use any of their ID to leave a comment so you really no need to worry about who is commenting!
  7. Delete Comments Easily Without Leaving Window: In Blogger comment form to delete a comment you need to click the trash icon and the you are taken to a separate window where you select the option of deleting the comment permanently. But With Facebook comment box you delete comments just the way you delete comments on your Facebook profile. With a click of a mouse!
  8. All links are by default no follow: The links left on your comment box are by default tagged as nofollow and according to the Facebook developers search engine robots cannot crawl the content of your comments as the plugin is enclosed inside a iframe where robots cannot enter to crawl data. This way the quality of your content in the eyes of search engines will increase because the robots will have to crawl only the body of your posts and not the distracting comments.
  9. Comments Insight: Track Comments Box performance stats with Facebook Insights..

Read More

Facebook Comment Box For Blogger

Facebook Comments Box For BloggerIn 2009 Facebook developers introduced their best social plugin called "Facebook Comments Box". This plugin can be embedded in any website or blog and visitors can use their IDs of Facebook, Yahoo, AOL or Hotmail to leave a comment at your site.

Facebook comment box is one of the useful tool for bloggers to increase conversations. Now to add Facebook Comment Box to your Blogger blog follow these steps.


Step 1: Disable Default Comments

Let's start with disabling blogger default comments because you might not want to have 2 comments forms. Now to do this log into Blogger account and go to settings >> posts and comments


Facebook Comments Box For Blogger
Next to "Show Comments" field choose Hide and hit Save Settings.


Step 2. Generate your Facebook App ID

Now to get a facebook comments box in your blogger blog you should generate your own Facebook APP ID/API KEY, it’s really easy and one step process.

Log into your Facebook and go to https://developers.facebook.com/apps/
Then click + Create New App at the top right corner of the page. A new pop-up window will show up.

Facebook Comment Box For Blogger Blog

Enter an application name, check "I agree to the Facebook Terms"  and click "Continue".

After passing a capcha you will get a new form

FAcebook Comment Box ForBlogspot Blog

Fill the following info:

App Namespace: Enter anything but if you use more than one word use "-" as a seperator not space.


App Domain: You must type blogspot.com but if your using blogger custom domain you should enter your domain name.

In the end select "Website" to integrate with facebook. and enter your Blog URL and hit Save Changes.

On the next page Facebook will give you the App ID


Facebook Comments Box FOr Blogger Blog

Just copy it and paste it in a text editor like notepad, we’ll need use in the next steps.


Step 3. Codes To Add To Your Template:

You must add the following codes to your blogger template to ensure that the comments box will work for your blog in the right way.
  • xmlns attribute
  • Javascript SDK
  • Open Graph Protocol tags
Adding the xmlns attribute:

Now go to your Blogger account once again and navigate to, Template >> Edit HTML, hit Proceed and check Expand Widget Templates


How To Add Facebook Comments Box To Blogger Blog

Now find (CTRL+F) this in the code:

<html

and at the following code at the end (before closing the > ). Put a space before it.

xmlns:fb='http://www.facebook.com/2008/fbml'

Adding the Javascript SDK Code:

Now find (CTRL+F) this in the code:

<body>

Add the following code just below/after it.

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({  appId  : 'YOUR APP ID',
status : true, 
cookie : true, 
xfbml  : true 
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol +
   '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>


Note: don’t forget to change YOUR APP ID to your app id ( You got in Step 2).

Adding the Open Graph protocol tags:

Copy the following code

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>  
<b:else/>  
<meta expr:content='data:blog.title' property='og:title'/>  
<meta expr:content='data:blog.homepageUrl' property='og:url'/>
</b:if>  
<meta content='YOUR-BLOG-NAME' property='og:site_name'/>  
<meta content='LOGO-URL' property='og:image'/>  
<meta content='YOUR-APP-ID' property='fb:app_id'/>  
<meta content='FACEBOOK-PROFILE-ID' property='fb:admins'/>
<meta content='article' property='og:type'/>

and change the colored text to the following,

Change YOUR-BLOG-NAME with your Blog name.
Change LOGO-URL with your blog logo, or remove the all tag if you don’t want it.
Change YOUR-APP-ID with your application ID number ( You got in Step 2).
Change FACEBOOK-PROFILE-ID with your own Facebook user Profile ID.

After making these changes paste the above code just before/above


</head>


Step 4. Adding the Comments Box to your Blogger template:

Now find (CTRL+F) this in the code:

<data:post.body/>

and paste the following code just below/after it.

<br/><br/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<fb:comments migrated='1' width='450' expr:title='data:post.title'
expr:href='data:post.url' expr:xid='data:post.id'/>
</div>
</b:if>


Step 5.

Save the template.

Note:

For comment moderation just go to http://developers.facebook.com/tools/comments and click the settings at the rignt.

Facebook Comment Moderation

A pop up window will come up

FAcebook COmment Moderation

Here you can moderate comments, add your own blacklist words or choose the standard Facebook restrictions.

 


Read More

Facebook Like Box For Blogger

Facevook Like Box For BloggerFacebook like box is widely used now days. It is a social plugin that enables Facebook Page owners to attract and gain Likes from their own website. 

A Fan Box or Like Box allows your Blog visitors to see how many users already like your Facebook Fan Page. Shows recent posts from your Facebook Fan Page. Allows to Like your Facebook Fan Page with one click, without leaving your blog.

If you haven't created a Facebook Fan Page for your blog you can create one from here : http://www.facebook.com/pages/create.php

To add the fanbox to blogger, follow these steps:

Step 1:

Go to your Facebook Fan Page, and copy the url in the address bar.


Step 2:

Visit This page http://developers.facebook.com/docs/reference/plugins/like-box
Now paste facebook fan page url into the Facebook Page URL field.
Facebook Fan Box For Blogger
Now secelect the appropreate choices and hit the "Get Code" button. Copy any of the code either iframe or XFBML.


Step 3:

Now log into Blogger account. Go to your Blogger Dashboard > Design/Layout > Page Element > Add a Gadget > HTML/JavaScript


Blogger Design
Blogger page elements
Blogger add a gadget
Blogger HTML/JavaScript

Paste the code we got from Step 2 and hit save. And we are done visit your blog to see it on your blogger sidebar.

 
Read More

Facebook Send Button For Blogger

Facebook send button for blogger Facebook has recently launched a new button for sharing in private. This button features are amazing and it’s completely different from the “facebook like button”. It allows your visitors (if they logged in FB accounts) to send your blog posts to their facebook friends, there is no need to mention how important is this and facebook for marketing your blog as we all know that facebook already sending blogs thousands of visitors every day.

Facebook send button for blogger

As Facebook mentioned in their Developer Blog:

"The Send button is a social plugin that websites can use to let people send a link to a friend through Facebook Messages, post it to a Group, or email it to an individual. For example, if you see a Mother's Day gift idea on 1-800-Flowers.com, you can now send a message or email to your family members to discuss. Or say you're training for a marathon and you come across a great article about running shoes on The Huffington Post. Now you can share it with your entire running group in just one click."

Try this :

Follow these steps to add the "Facebook Send Button" to your Blogger blog.

Step 1 :

Log in to Blogger, go to Design / Layout > Edit HTML and tick the "Expand Widget Templates" checkbox.

blogger design

blogger edit html

blogger expand widget

 

Step 2 :

Now find (CTRL+F) this in the code:

</head>

And place the following code just before/above it:

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/>

 

Step 3 :

Now find (CTRL+F) this in the code:

<data:post.body/>

To place the Facebook Send button at the top left corner of your post paste this code before/above it :

<div style="float:left; padding:4px;">
<fb:send expr:href="data:post.url" font="arial" colorscheme="light"></fb:send>
</div>

Note :

  • To change the button position from "Top-Left" to "Top-Right" just change the float position to left. i.e. float:right changes to float:left.
  • To place the Facebook Send button at the end of your post paste the code after/below <data:post.body/>.
  • To change the light light color scheme button to dark, just change this code in the above codes, colorscheme="light" to colorscheme="dark"

 

Step 4 :

Save the template.

 

Read More

Recent Posts Widget With Thumbnails For Blogger

Recent Posts Widget With Thumbnails For Blogger If your blog have long posts and you want to help your visitors to find your recent posts quickly, without spending time browsing you blog searching for your older posts. Then displaying small thumbnail images adjacent to post titles in the recent post widget on your Blogger blogs could be the right fix. This not only looks nice, but also entice visitors to click on your posts.

You can easily customize whether or not you would like to display thumbnails, post summaries, and the number of comments for each post along side the titles.

Follow these steps to add the "Recent Posts Widget With Thumbnails" in your Blogger (Blogspot) blog.

Step 1 :


Log into Blogger. Go to your Blogger Dashboard > Design/Layout > Page Element > Add a Gadget > HTML/JavaScript


Blogger Design
Blogger page elements
Blogger add a gadget
Blogger HTML/JavaScript




Step 2 :


Copy and paste the code below:

<style type='text/css'>
img.recent_thumb {padding:1px;width:55px;height:55px;border:0;

float:left;margin:10px;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}
.recent_posts_with_thumbs a {text-decoration:none;}

.recent_posts_with_thumbs strong {font-size:10px;}</style>
<script style='text/javascript' src='http://www.webaholic.co.in/other/recent-posts-widget-with-images.js'></script>
<script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;</script>
<script src='http://www.YOUR-BLOG-URL.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
<small><a style='margin-left:10px;align:right;' href='http://www.blogger.webaholic.co.in/2011/08/recent-posts-widget-with-thumbnails-for.html' target='_blank'>Recent Posts Widget</a> | <a href='http://www.webaholic.co.in/' target='_blank'>Webaholic</a></small>


Step 3 :


Change YOUR-BLOG-URL with your blog url.


Step 4 :


Save the template.

Note :


var numposts = 5; where 5 is the number of posts to be displayed.

Read More

Google +1 Button For Blogger

BloggerLike Facebook, Twitter sharing button where user can share the content which he/she likes on facebook or Twitter respectively, Now Google has also released an similar button which is know as Google +1.

By adding +1 to your pages you can make your Blogger blog stand out. +1 buttons let your readers share your content recommend it on Google search. Read more in this post Google +1 : Public Stamp of Approval

When a signed-in Google user is searching, your Google search result snippet may be annotated with the names of the user’s connections who’ve +1'd your page. If none of a user’s connections has +1'd your page, your snippet may display the aggregate number of +1's your page has received.

Now Google has released a new set of code for the +1 button. To add this Google +1 button with the fresh set of code in your Blogger / Blogspot blog just follow these simple steps.

 

Step 1 :

Log in to Blogger, go to Design / Layout > Edit HTML and tick the "Expand Widget Templates" checkbox.

blogger design

blogger edit html

blogger expand widget

 

Step 2 :

Now find (CTRL+F) this in the code:

</body>

And place the following code just before/above it:

<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})(); </script>

 

Step 3 :

Now find (CTRL+F) this in the code:

<data:post.body/>

To place the Google+1 button at the top left corner of your post paste this code before/above it :

<div style="float:left; padding:4px;">
<g:plusone size="standard" expr:href="data:post.url"></g:plusone>
</div>

Note :

  • To change the button position from "Top-Left" to "Top-Right" just change the float position to left. i.e. float:right changes to float:left.
  • To place the Google +1 button at the end of your post paste the code after/below <data:post.body/>.
  • To change the button style just change size="standard" to smal, medium or tall.

 

 

Step 4 :

Save the template.

 

Read More

4 Widgets To Increase Blogger Comments

4 Widgets To Increase Blogger Comments
Comments on the blog makes a interaction between the blogger and the users.So the comment feature on the blog is considered as an important part of  a blog. Getting more comments makes the blog a special one.It will help the users to engage with your blog. Below you will find 4 widgets which wil help you to get more more comments in your Blogger blog.

  1. Reply to the comments you receive:

  2. When someone does leave a comment, make sure you show them that you read it by replying.  You can reply to them by typing a comment that starts with @TheirName, or you can add a reply button, which allows you to post a direct response comment. Here is How to Add a Reply Button to Blogger Comments

  3. Reward your active participants:

  4. There are thousands of other things someone could be doing besides commenting on your blog, so when they do take the time to do so, make sure they know their contributions are appreciated.  In addition to replying to their comment, you can reward the people who are contributing the most by adding a Top Commentators Widget for Blogger, which will display a list of the people who have left the most comments in your sidebar.

  5. Show readers where others are talking:

  6. Although not every reader will want to start a discussion, most will be more than happy to join in on an existing one.  With the Recent Comments Widget for Blogger, readers will be able to see a list of the most recent comments in your sidebar.

  7. Customize Blogger Comment Message and Links to Boost Post Reply

    If you were a new visitor to a blog and you read through a blog post and saw "0 comments" what would that make you think about the blog, or about the blog post? You might easily come to the conclusion that the blog was not popular, or that the blog post was not popular enough to deserve commenting.
Here are a few hacks to fix these issues.

Customize Blogger Comment Message
Customize Blogger Comment Link
Change Blogger "Post A Comment" Message

By using using of these widgets you won’t get 1000's of comments over night. But by using these widgets you can increase the number of comments with your Blogger blog.
There are lot of other tips to increase blog comments. Here is a great post by Darren Rowse a.k.a ProBlogger 10 Techniques to Get More Comments on Your Blog.


Read More