Adding a 'Share This' button

You might have noticed the 'Share This' button that appears below each of my posts. In today's tutorial we'll create this button for your blog. Why bother to use it? Well, with the 'Share this' button visitors will be able to share your content with their friends or community, and you know yourself what will happen. Loads of visitors will be coming to your blog!

Ok, without any further ado, open http://sharethis.com/publishers/ in your browser. Browse quickly through the page to see what it has got to offer you. If you have used this service before click on the 'Sign in' link at the top-right of the page, otherwise click 'Register' and create your new account.

After you've created your account, sign in, and enter http://sharethis.com/publishers/getbutton/. In this page you can customize your button to your need. First be sure that you've chosen the 'ShareThis Button for other websites' in the 'Pick your platform' section. I know, there is the Blogger option on the drop-down list, but we are using the raw script for better flexibility. After you are done tailoring the button, just click on 'Get ShareThis code' on the bottom of the page. You should now see the code for the button, copy it.

The next step is to add the button to each and every post on our blog. No, I don't want you to go edit all your post and paste the code on each one, that would be an idiotic waste of time. Instead, go to Dashboard > Layout > Edit HTML. Make sure you've ticked the 'Expand Widget Templates' checkbox. Use your browser's search function to find the code:

<p><data:post.body/></p>

Paste the code you've copied earlier after the </p> tag. It should look like this:

<p><data:post.body/></p><script type="text/javascript" src="http://w.sharethis.com/button/sharethis.js#tabs=web%2Cpost%2Cemail&charset=utf-8&style=default&publisher=9cb9c521-5831-4d0d-a90e-f1497bc6f6e6"></script>

Save the template. That's all! If you have done it correctly you should now see the 'Share This' button at the end of every post.

Create a Quiz for visitors

Are you tired of the default polls that doesn't do any good? Or is it better to make something like this?

Quizzes by Quibblo.com

Interested? Just follow the steps given below:

1. Firstly, you must have a Quibblo account, as this quiz uses their service. If you do not have an account yet, go to www.quibblo.com and click on the 'Become a member' link at the top right of the page. After you register, you'll need to confirm your email address.
   
2. Login with your email and password to access your personal Quibblo page. Then put your cursor on the top of the 'Create a Quiz' tab, but don't click it yet. A list of option should appear, and for now just select 'Scored Survey' (you can try the different types later).
3. In this page you can create your questions and answers. It'll look similar to the screenshot below:
   Fill in the Quiz title with the title of your quiz, and fill in a short description of it in the Introduction box. For now just ignore the "Upload an Image for Your Quiz Title". In the Quiz Question section, fill in your questions and answers. Use the 'Add an Answer' button to add more answers to one question, and thus making it tougher. If you want more questions, use the 'Add Another Question' button. After you're done, hit Continue.
   
4. The next page will require you to fill in the details about your new quiz. Fill in all the blanks, and if you do not want this quiz to appear in the Quibblo's list of quiz, don't forget to click on the 'Advance Option' and ticking the 'Don't list this quiz on Quibblo.com' checkbox. Click on 'Preview my quiz' to continue.
5. After you are satisfied with your new quiz, hit the 'Create my quiz' button. In the next page find the HTML code for the quiz and copy it. Now go to your Blogger Dashboard > Layout > Add a Gadget and choose html/javascript. Paste the copied code there and hit Save. You are done, and just go back to step 2 if you would like to create another quiz. Have fun!
   

Subscribe via email

Today's tutorial is on how you can let your readers subscribe via email (like that one on the right side of this page). What you need is simply one FeedBurner account; to register go to feedburner.com. Now let's begin.

If you had just created your account, you must now burn a feed first. (Feedburner users who already have their feed activated can skip this step.) To burn a feed, simply type in your blog URL in the provided "Burn a feed right this instant" box and hit 'Next'.

At this point, if you are a Blogspot user (which I assume you are), Feedburner will identify 2 (two) feeds on your blog, Atom and the RSS feed. You must select either one to continue; don't hesitate as it will make no visible difference. Click Next if you have finished deciding.

What you'll do next is to name your feed and also pick a URL. Fill in the first blank with your feed title, your blog title will suffice. Fill in your desired Feedburner URL in the second blank; keep it short as you don't want to confuse your readers. If you're done hit 'Activate Feed'.

You are done now and will be returned to your Dashboard. Click the feed that you have just created. You should see the statistic of your feed. To make people subscribe via email, click on the 'Publicize' tab, then the 'Email Subscription' link on the left side of the page.

After you hit the 'Email Subscription' link, click on the 'Subcription Management' link right below it. Now scroll down a bit and locate the html code for that feed. Copy it. Go back to your Blogger dashboard and click on Layout > Add a Gadget. Choose Html and paste the code you copy earlier. Position the gadget to wherever place you want and click on Save. Finished! You should now see the email subscription box similar to the one on this page :)

Allow everyone to post in your blog

Is it hard work to maintain all your blog? Or it's just that you want everyone to post their article in your blog, maybe to create a community, etc. Whatever the reason is, this tutorial will show you how to allow ALL (yes, you heard me right, ALL) people, not just predefined folks, to post in your blog, while retaining your authority to moderate them.

Ok, so our no. 1 step is to go to Dashboard > Setting, and choose the 'Email' tab. There you can see the 'Mail-to-Blogger feature. It's usually yourusername.(blank)@blogger.com. Now, fill in the blank with whatever word that suits you; that email address will be used by everyone to mail their post to. So if your username is Jack and you fill the blank with 'posting', any email sent to jack.posting@blogger.com will be automatically posted in your blog. After you fill the blank, hit Save.

The next step you should do is to tell everyone you email address (the one with @blogger.com) so that they can mail their post. You can do this via the Text gadget (read this for more detail http://blogger-newbies.blogspot.com/2008/12/adding-text-to-sidebar.html) or a welcome note, whatever you see fit.

If you want to see the official Blogger tutorial, see this http://help.blogger.com/bin/answer.py?hl=en&answer=41452

Adding Digg button to your posts

Digg it! Ok, but how? There isn't any button anywhere in the post. So the question is "HOW DO I ADD A DIGG BUTTON TO MY POSTS?"

First I'm going to tell you that we are dealing with html again. Follow this tutorial carefully, or you will risk ruining your blog! All right, lets get started.

As you might have expected, our number 1 step is to go to Dashboard > Layout and click on the Edit html tab. Then check the box that says 'Expand Widget Templates'. Note that this step is very important, if you don't tick the box you would not be able to see the html code properly. Now look for the tag:

<p><data:post.body></p>

At this point you have several option, either to put the button on the right, left, or after a post. Decide first, then continue reading.

If you want to put it on the right side of each post, add the following code before <p><data:post.body></p>,so it will look like this:

<div style='float:right; margin-left:10px;'>
<script type='text/javascript'>
digg_url="<data:post.url/>";
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/></div><p><data:post.body></p>

If you want to show the button at the end of each posts, add the code after <p><data:post.body></p>, so it will look like this:

<p><data:post.body></p>
<div style='float:right; margin-left:10px;'>
<script type='text/javascript'>
digg_url="<data:post.url/>";
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/></div>

Or if you want the button to appear on the left side of each post, add this line instead:

<div style='float:left; margin-right:10px;'>
<script type='text/javascript'>
digg_url="<data:post.url/>";
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/></div><p><data:post.body></p>

Note that the code is similar to all the above, but with a slight modification, that is, you reverse the float parameter from right to left and the margin from left to right.

Wait, this ain't over yet, Digg still have one more button in its sleeves: a small, compact button. This is button is handy if you want to save some space (like I do, check out the Digg button in this blog), as the regular button could easily be larger than the post itself. To add a compact button to each post, paste this code instead:

<div style='float:right; margin-left:10px;'>
<script type='text/javascript'>
digg_url="<data:post.url/>";
digg_skin="compact";
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/></div><p><data:post.body></p>

You may have notice that we have just added a single line to the code, and that's what makes the difference. That's all I've got to tell, and if you got any technical problem, just comment to this post. Happy Digg-ing!

Track your visitor

If you ever wonder how to track your visitors, try to put a counter on your blog. A well known site that offers counters for your blog is http://www.free-counters.co.uk. To add a counter to your site, simply go to their site, then hit 'Create a Counter' on the navigation bar. Choose the design you like. Then, you must configure the counter; just follow what it tells you.

The counter from free-counters.co.uk do have some limitations though, for example, we are not allowed to put the counter for over 9 month. But I suppose this is more practical than to use Google Analytics or AWStats.

Create 'Read More' link

Did you ever wonder how to cut down lengthy article? See, you got here a 300 word essay, which you publish in your frontpage; but readers get bored easily reading that post. Does this problem got any solution? Luckily, the answer is no other than a 'yes'. You could cut down your essay into a short 2 to 3 paragraph by utilizing the 'Read more...' link. Here's how you do it.

First, you need to know that you are facing the dreaded html editing, but I will make this as simple as I can. Ok, let's get started.

Open your Dashboard and go to 'Layout'. Choose the 'Edit HTML' tab. Find </head> in the html code. Once you find it, paste the following code right before the </head> tag:

<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>

So it will look like this:

]]></b:skin>
<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style></head>

Save the template. Next you need to check the 'Expand widgets' checkbox. Then look for the tag <data:post.body/>. Once you found it, you need to add the following code right after it:

<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url' >Read more...</a>
</b:if>

If you do it correctly, your code should look like the this:

<data:post.body><b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url' >Read more...</a>
</b:if>

Ok you are done for the html part. Now moving on to your posts. To cut off lengthy article, type your post like this:

A catchy summary of the article
<span class="fullpost">The lengthy description</span>

The words inside the <span class="fullpost"></span> be replaced by a 'Read more...' link.

Reference: http://help.blogger.com/bin/answer.py?hl=en&answer=42215

Recent Posts gadget

'I can't find the Recent Posts gadget, where is it?' That happens to me once, but instead of googling for hours looking for it, I decided to use the Feed gadget to do the job.

Originally the feed gadget is used to show headlines or newest article from other sites. And the feed gadget can also be used to show the newest article from your blog (that is, recent posts). So, to add the seemingly unavailable gadget to your blog, go to Dashboard > Layout > Add a Gadget, and choose Feeds. In the feed url, enter http://yourblogname.blogspot.com/feeds/posts/default. So in my case its:

http://blogger-newbies.blogspot.com/feeds/posts/default

Hit Save and position the gadget where you want it to show. Done!