Browsing "Older Posts"

How To Add 'You Might Also Like Widget' For Blogger Posts?
"How to add a "Related post widget/gadget" for Blogger?" Related post widget is an important part to decrease the bounce rate of your website. Today, we will add a custom designed widget which shows the related posts with their photo thumbnail.

Related post widget gives the users to go to the next post and next post and more when they see it below every post. It gives professionalism to the website. If you hate coding and don't want to break your head implementing a related post widget to your HTML Blogger template, you can always go with ready made tools like "Linkwithin" and "nRelate".

This tool is very similar to Linkwithin. Please go ahead and implement it for your blog.

IMPORTANT:
BACKUP THE TEMPLATE

Tutorial:
Step 1. Go to Blogger dashboard > Template > Edit HTML

Step 2ADDING JavsScript to HTML:
Search for </head>

Just before </head> add the following code:

<script type='text/javascript'>
var defaultnoimage=&quot;http://downloads.itechcolumn.com/home/thumbnail_img/no_image_thumbnail.jpg&quot;;
var maxresults=4;
var splittercolor=&quot;#000&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='http://itechcolumn.googlecode.com/files/blogger_thumbnail_plugin.js' type='text/javascript'/>

Done!!!

Step 3ADDING CSS Styling to the Widget:
Search </head> and add the below code as you added JavaScript code in step 2:
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts  a:hover {
background-color:#cccccc;
}

Step 4ADDING CODE FOR WIDGET TO APPEAR:
Search for the below code:

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

Or

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

Note: if you find many <div class='post-footer-line post-footer-line-1'> codes, then choose the first one.

Important: if you don't find <div class='post-footer-line post-footer-line-1'> look for a code with <div class='post-footer-line post-footer-line-X'> where is a number like 1, 2, 3 etc.

Paste the below code after <div class='post-footer-line post-footer-line-1'> :
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=4&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<br/>
</b:if>

Step 5. Save the template.

We are done...

CUSTOMIZATION:
1. Control the number of thumbnail related posts to display:
Change both the maxresults=4 and max-results=4 to 3, 5, 6 and so on.

2. To change the hover thumbnail background:
Change in the CSS code:
#related-posts  a:hover {
background-color:#cccccc;
}

to any other hexa-decimal value.

3. To Display the widget on home page as well:
Remove the if condition from step 4.
Remove:
<b:if cond='data:blog.pageType == &quot;item&quot;'> and
</b:if>

4. If you need any customizations/doubts in the widget, please let me know. I will modify the code accordingly and upload it.

Thanks for reading and trying the widget.
~iTechColumn
 

How To Add 'You Might Also Like Widget' For Blogger Posts?

By Vinod Suthersan → Wednesday, February 29, 2012
How To Add Meta Tags To Individual Blogger Posts?
We have already seen what Meta tags are and how to add them to Blogger template. Today, we will learn how to add meta tags to Blogger posts. Wordpress rules this part, where Blogger has the limitations of adding meta tags to individual posts. This limitation can be easily overcome by tweaking the Blogger template to some extent to add meta tags to all the Blogger posts.

Note: Please take some time to take backup of your template before proceeding.

Straight to the method:

Step 1. Go to Blogger Dashboard > Select Blog > Template > Edit HTML.

Step 2. Search(Ctrl+F) for <head>
<head> tag can be found in the first few lines of the start of the HTML template.
Immediately after this add the following code:


<b:if cond=’data:blog.url == “http://ANY_POST_URL_TARGETED.html”‘>


<meta content=’YOUR_UNIQUE_POST_DESCRIPTION_HERE’ name=’description’/>
<meta name=”keywords” content=”ADD_UNIQUE_POST_KEYWORDS_SEPARATED_BY_COMMAS_HERE” />
<meta name=”ROBOTS” content=”INDEX,FOLLOW”/>
</b:if>

Note: Repeat the above set of codes for each post you like to target for search engine rankings and better search hits.

Step 3. Save the template. You are done!

Tips: This is a tedious work to add for each and every post on your blogspot bog. Hence target only the posts which are not doing well on the search results. 

What is going to happen after adding separate meta tags to Blogger posts?
1. Search rankings might increase.
2. Overall SEO of the blog and blog posts will raise.
3. Indexing of the pages would be meaningful and better after performing this operations.
4. PageRank for the individual posts would increase.
5. Raise in overall traffic to your site.

Word of Warning
1. Never use the same description for each and every post. This can have reverse effects on your Blog and Blog posts.
2. Don't repeat Keywords within a single meta tag code for a post.
3. Don't overload the template HTML with too many meta tags of all the posts.

Eg:

<b:if cond=’data:blog.url == “http://www.itechcolumn.com/2011/09/how-to-add-meta-tags-in-blogger.html”‘>

<meta content=’About Meta Tags and How to add Meta Tags to Blogger Template’ name=’description’/>
<meta name=”keywords” content=”Meta Tags, SEO, SERP, Traffic, Search Engine, Ranking” />
<meta name=”ROBOTS” content=”INDEX,FOLLOW”/>
</b:if>

Hope you enjoyed this post. Thanks for reading. If you have any doubts regarding meta tags implementation, please let me know via comments or you can contact me directly. Catch you again with more posts.

~iTechColumn

How To Add Meta Tags To Individual Blogger Posts?

By Vinod Suthersan → Tuesday, February 28, 2012
Today, we shall see some cool clocks which are created using CSS, CSS3, JavaScript and/or jQuery. Some of the clocks here are using only CSS3 or only JavaScript or only jQuery. Some of the clocks use combinations of CSS and JavaScripts. We will see some great digital and analog clocks for the web world.

NOTE: There are clocks which run on webkit browsers like Safari, Mozilla Firefox and Chrome. Other browsers may not support.

Here are the inspiring clocks for your display: Find the demo and post link below the image.

1. CSS3 Digital Clock With jQuery
10 Cool Clocks Using CSS, JavaScript and jQuery
Web technology used:
jQuery
CSS3

Post Tutorial Link
Demo Link

2. A jQuery and CSS Clock
A Beautiful jQuery and CSS Clock
Web technology used:
jQuery
CSS

Post Tutorial Link
Demo Link

3. Old School Clock With CSS3 and jQuery
Old School Clock With CSS3 and jQuery
Web technology used:
jQuery
CSS3

Post Tutorial Link
Demo Link

4. HTML Clock Using JavaScript and CSS Rotation
HTML Clock Using JavaScript and CSS Rotation
Web technology used:
jQuery
CSS

Post Tutorial Link
Demo Link

5. jQuery Plugin DigiClock (HTC Hero Inspired)
HTC Clock - jQuery Plugin DigiClock
Web technology used:
jQuery

Post Tutorial Link
Demo Link

6. An Analogue Clock Using Only CSS
An Analogue Clock Using Only CSS

Web technology used:
CSS

Post Tutorial Link
Demo Link

7. jQuery Sliding Clock v1.1
jQuery Sliding Clock v1.1
Web technology used:
jQuery
CSS

Demo Link

8. jQuery Digital Clock
jQuery Digital Clock
Web technology used:
jQuery
CSS

Demo Link

9. CSS3 and jQuery Clock
CSS3 and jQuery Clock
Web technology used:
jQuery
CSS3

Post Tutorial Link
Demo Link

10. Pendulum Clock Using Pure CSS
Pendulum Clock Using Pure CSS
Web technology used:
CSS

Post Tutorial Link
Demo Link

A BONUS WORLD CLOCK
A BONUS WORLD CLOCK

Web technology used:
JavaScript
CSS3

Post Tutorial Link
Demo Link

Hope you liked this inspiration article about clocks made using web technologies. Thanks for checking it out. Have a great time. If you know any other great clocks, please do let our readers know by commenting in the comment section.

~iTechColumn

10 Cool Clocks Using CSS, JavaScript and jQuery

By Vinod Suthersan → Monday, February 27, 2012
How To Add Digital Clock To Blogger?
Similar to the date program on our Blogger blog, we can also add an Analog clock with seconds ticking. Sounds cool right? Though, there are hundreds of sites which offers ready-made clock HTML which can be pasted directly into the Blogger template or any other site. But, today we shall implement an Analog clock using JavaScript on Blogger blog. Check out the previous article on implementing date to Blogger.

DEMO

The above clock can be implemented to our Blogger blog easily using the below code:

Code:
<span id="tick2">
</span>

<script>
<!--

/*By JavaScript Kit
http://javascriptkit.com
Credit MUST stay intact for use
*/

function show2(){
if (!document.all&&!document.getElementById)
return
thelement=document.getElementById? document.getElementById("tick2"): document.all.tick2
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var seconds=Digital.getSeconds()
var dn="PM"
if (hours<12)
dn="AM"
if (hours>12)
hours=hours-12
if (hours==0)
hours=12
if (minutes<=9)
minutes="0"+minutes
if (seconds<=9)
seconds="0"+seconds
var ctime=hours+":"+minutes+":"+seconds+" "+dn
thelement.innerHTML="<b style='font-size:14;color:blue;'>"+ctime+"</b>"
setTimeout("show2()",1000)
}
window.onload=show2
//-->
</script>

Note: Take a backup of your Template before implementing.

How to add to Blogger?
1. Add the below JavaScript to </head> section of the Blogger HTML template:

Code:
<script> <!-- /*By JavaScript Kit http://javascriptkit.com Credit MUST stay intact for use */ function show2(){ if (!document.all&&!document.getElementById) return thelement=document.getElementById? document.getElementById("tick2"): document.all.tick2 var Digital=new Date() var hours=Digital.getHours() var minutes=Digital.getMinutes() var seconds=Digital.getSeconds() var dn="PM" if (hours<12) dn="AM" if (hours>12) hours=hours-12 if (hours==0) hours=12 if (minutes<=9) minutes="0"+minutes if (seconds<=9) seconds="0"+seconds var ctime=hours+":"+minutes+":"+seconds+" "+dn thelement.innerHTML="<b style='font-size:14;color:blue;'>"+ctime+"</b>" setTimeout("show2()",1000) } window.onload=show2 //--> </script>

2. To render the clock. Add the below code wherever you wish - With Blogger HTML, In HTML/JavaScript gadget, Post page, page, and so on.

Code:
<span id="tick2">
</span>

CUSTOMIZATION:
1. To make the clock appear to the top right/left of the blog.
In step 2 above, replace the code as:

Code: For Left
<span id="tick2" style="position:absolute;left:0;top:0;">
</span>

Code: For Right
<span id="tick2" style="position:absolute;right:0;top:0;">
</span>

2. To change the font size and color of the digital clock:
In the JavaScript code(In step 1)
Change font-size:14;color:blue; for changing font size and color respectively.

Hope you liked this tutorial as well. You can use the date and time at one shot on your blog side by side to make it look more cooler. Thanks for reading. If you have any other doubts, please let me know by comments, I will be happy to help you.

~iTechColumn

How To Add Digital Clock To Blogger?

By Vinod Suthersan → Friday, February 24, 2012
How To Show Current Date On Blogger Blog?
I have seen that some custom templates already showing current dates in them. So, thought why not add it any Blogger template. Today, I came across scripts which can show the current or present date on your time zone on your Blogger. This script also can be used on any other website or blog.

DEMO BELOW: Date Format one

Code for the above date format

Code:
<script language="Javascript">
<!--

var dayNames = new Array ("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday")

var monthName = new Array ("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December")

var now = new Date

document.write("DATE is " + dayNames[now.getDay()] + ", " + monthName[now.getMonth()] + " "+now.getDate() +".")

//-->
</script>

DEMO BELOW: Date Format two

Code for the above date format

Code:
<script language="Javascript">
<!--

var currentTime = new Date()
var month = currentTime.getMonth() + 1
var day = currentTime.getDate()
var year = currentTime.getFullYear()
document.write(month + "/" + day + "/" + year)

//-->
</script>

DEMO BELOW: Date Format three

Code for the above date format

Code:
<script language="Javascript">
<!--

var currentTime = new Date()
var month = currentTime.getMonth() + 1
var day = currentTime.getDate()
var year = currentTime.getFullYear()
document.write(day + "/" + month + "/" + year)

//-->
</script>

Where the above code can be pasted?

1. In a HTML/JavaScript gadget.
2. Directly into your Blogger Template HTML (Within <head> and </head> tags or <body> and </body> tags).
3. In your Blogger post HTML section.
4. In your Blogger page HTML section.
5. To your Footer, header, sidebar, below the navigation and so on.

CUSTOMIZATION
1. To display the date on the top left of the Blogger site:

Code:
<span style="position:absolute;left:0;top:0;">
//ANY SCRIPT FROM ABOVE DEMOS
</span>
2. To display the date on the top right of the Blogger site:

Code:

<span style="position:absolute;right:0;top:0;">
//ANY SCRIPT FROM ABOVE DEMOS
</span>
3. To increase the font style and size of the date.

Code:
<span style="font-family:Times New Roman,Georgia,Serif;font-size:15px; color: red;position:absolute;right:0;top:0;">
//ANY SCRIPT FROM ABOVE DEMOS
</span>
The above code will display the date in Time New Roman with font size set to 15px and color set to RED.

Hope you liked this tutorial. If you have any other doubts regarding this tutorial. Please let me know, so that the tutorial can be more refined. Stay tuned for more interesting ones in the future. Thanks for reading.

~iTechColumn

How To Show Current Date On Blogger Blog?

By Vinod Suthersan → Thursday, February 23, 2012
Today, is a simple post about some of the inspiring stuffs I came across about Blogger. I bet, this post will definitely inspire many of the Bloggers who are blogging using Google Blogger. I should admit that am exhilarated that Blogger can so much for us.
Thanks to Blogger!!! :-)
Enjoy!!!!.....!!!!

Coming to the post content, We will see some sites powered using Blogger platform.
I said "WOW" after seeing these websites. You should see them for yourself. Here are my inspirations and for your inspiration to go on further with Blogger.

Blogger Site 1: 360 Stl
Amazing Blogger Sites For Inspiration

Blogger Site 2: Renewpilates
Amazing Blogger Sites For Inspiration 2

Blogger Site 3: Pinch Gallery
Amazing Blogger Sites For Inspiration 3

Blogger Site 4: Shop Impish
Amazing Blogger Sites For Inspiration 4

Blogger Site 5: Ode Boutique
Amazing Blogger Sites For Inspiration 5

From the above the sites, my favorite one is the first site 360-stl. These are just an example websites to inspire my Blogger friends and audience using Blogger platform. Special thanks to The Confluent for giving these sites.

Thanks for reading and have a great time.

~iTechColumn

Amazing Blogger Sites For Inspiration

By Vinod Suthersan → Wednesday, February 22, 2012
5 Best Blogging Platforms 2012
Blogging platforms are the base to implement and run a blog. A good blogging platform is required to run a successful blog. Blogspot or Blogger is one of them which is used by millions are users to run their blogs. Today, we will see some of the best blogging platforms for 2012.

The top 5 best blogging platforms are:

1. Wordpress
This is the best blogging platform out there with a tight competition from Blogger.
Service- Free(Wordpress.com) and Paid(Wordpress.org)
Wordpress Snapshot

2. Blogger
Blogger is giving a very tight competition to Wordpress. In fact Blogger has some features and facility which can't be performed on Wordpress. But, there are still some disadvantages of using Blogger. Hence, this is ranked second.
Service - Free and Paid(With help of Go Daddy)
Blogger Snapshot
3. Tumblr
Tumblelog service can be experienced by the ease of use and posting. Tumblr is again a very powerful platform for the blogging world with more than 40 million blogs. They still have many users who find problems in Blogger and Wordpress.

Service - Free . Domains and Premium themes needs to be purchased.
Tumblr Snapshot

4. LiveJournal
LiveJournal is also called LJ and this is again a powerful blogging platform for bloggers. LJ can specially be used for creating journal or dairy.

Service - Free and paid
LiveJournal Snapshot

5. Movable Type
Movable Type is a nice blogging platform which has features such as standalone pages, trackback links, tags, templates and much more. Movable Type blogs are powered using a free software re-licensed under GNU public license.
Movable Type Snapshot

The last one requires little bit of technical knowledge to set up the blog. Rest all need not require any tech knowledge.
Other blogging platforms are:
1. Drupal
2. SquareSpace
3. Joomla
4. Express Engine
5. LifeType
6. Blog.com
7. Weebly
8. Open Dairy
9. Wix
10. Webs.com

Hope you liked this article. Thanks for reading. Catch you again with more articles. If you know more blogging platforms, please share with us. Enjoy guys.

~iTechColumn

5 Best Blogging Platforms 2012

By Vinod Suthersan → Tuesday, February 21, 2012
10 Ways To Amazing Post Ideas
Bloggers always need some ideas to keep up their blog running. It is always more than a necessity to keep posting new articles/tutorials on their blog to taking the blog to the next level. Today, I thought that all the bloggers should know the ideas to keep posting articles on their website/blog. The source of idea is as important as writing a great article. Let's see some 10 amazing post ideas one can gather from.

1. Find your inspiration -
Inspiration is the highest rated factor to keep going on further with your site or anything for that matter. For example, I started this blog out of many inspirations I've come across on the internet and outside. Your inspirations maybe from your friend, family members, colleagues, successful bloggers and so on. Find the right one to set up the fire burning. You definitely need that fire to keep going and succeed.
"Find your zeal and enthusiasm to succeed on your goal"

2. Read Books/Magazines/Newspapers - 
I seriously say, believe me you can get a lot of information by reading books or magazines or newspapers. Let's say that your blog is about cooking, you can come across a different recipe on a cooking magazine or a newspaper article. 

3. Watch and Listen -
When something is depicted pictorially, you learn more from it. You tend to visualize things the way it should be. Watching a podcast on YouTube can definitely teach you a lot. Listening is equally important to as watching or reading. Why not write your experience and learning after watching and listening to a podcast on TV or YouTube?

4. Learn from others -
If you are not an expert on a subject, but you want to start a blog on the subject. Then, it is time to learn from the experts. Internet is full of professionals, experts, and geeks. Internet is a great place to learn new things. Read other's blogs, interact with them and ask for more. 

5. Ask and Gather information - Google Magic
You see that the above words "Ask" and "Gather" are stressed. Ask questions to yourself daily. Why? How? When? What? Where? Search for the answers to your own questions from Google. Open a notepad/word doc to take down the points what you have gathered. Compose the article or post once it is time to shoot.
Note - You can also ask questions from others (Friends or Family)

6. Be in touch with Fresh Source -
Keep yourself updated on your niche. For example, if your niche is about SEO then bookmarking a site like seomoz is a great way to kick start. That was just an example :-) 
There are super top performing sites/blogs on every niche where you can be touch of new and fresh information.

7. Subscribe to Newsletter -
This is a superb method to get ideas to your mailbox daily or weekly. If your topic of choice or blog is about mobile phones, there are cool websites which offers newsletter delivery to your mail boxes as and when a new product is reviewed. You get ideas at your door step. 

8. Join Forums -
Joining a forum on your niche can get you to learn new things daily by your interactions there. Even the latest news may not be known to you because you forgot to read your newspaper, but from forums, the news are easily briefed up quickly to get an idea. New ideas come up by interactions.

9. Set up a Suggestion box -
Make friends on the blogosphere to get some suggestions from them quickly. Setting up a suggestion form on your website is highly recommended. Though, my blog doesn't have one as of now. Maybe I still have some ideas left in me or maybe am doing the above suggested methods. :-) But, I would like you guys to set up one for yourself to get new ideas from your site's true fans. You even set up a survey on your site.

10. Think and Rethink -
Last but not the least, think after doing the above 9 methods. If you stop thinking, then you would end up with nothing but empty hands. Once you execute at least some of the above methods, stop for a while, sit alone and think deeply. This way, I bet you would generate many creative ideas for your next article. 
Mix up on what you have learnt to come up with a new idea for the next post. 
Note - Meditation of 10min daily morning can help you think creative.

Best of luck guys :-) You guys are gonna rock the floor. Thanks for reading the article. Do come back again tomorrow.
photo credit: Stuart Miles
~iTechColumn
 

10 Ways To Amazing Post Ideas

By Vinod Suthersan → Monday, February 20, 2012
How To Add Social Buttons Below Blogger Posts Horizontally?
We already saw how to add some nice social buttons/bookmarking buttons on Blogger posts. Today, we shall see how to add some of my favorite buttons together in one single post. We shall consider adding Facebook, Twitter, Google Plus, Digg and StumbleUpon buttons to Blogger. We will align the buttons horizontally below the Blogger post titles.

Straight to the tutorial

IMPORTANT:
Backup the template before proceeding.

Let's implement the Social Media Buttons with below Blogger Post titles:

Step 1. Go to Dashboard > Choose Blog > Template > Edit HTML > Expand Template Widget.

Step 2. Search(Ctrl+F) for <data:post.body/>
            and just before that add the following code.
Note: if you find multiple <data:post.body/> then consider the first code.

Step 3. Code for Social buttons to appear:


<!-- Code for Social Buttons Starts -->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div style='padding:4px;'>

<table border='0'>

<tbody><tr>

<td>

<div style='margin-right:5px;'>

<a class='twitter-share-button' data-count='horizontal' data-via='iTechColumn' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>

</div>

</td>



<td>

<div style='margin-right:5px;'>

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&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; margin-left:0px; width:100px; height:20px;'/>

</div>

</td>



<td>

<div style='margin-right:5px;'>

<g:plusone expr:href='data:post.url' size='medium'/>

</div>

</td>




<td>

<div style='margin-right:5px;'>

<script type="text/javascript">

(function() {

var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];

s.type = 'text/javascript';

s.async = true;

s.src = 'http://widgets.digg.com/buttons.js';

s1.parentNode.insertBefore(s, s1);

})();

</script>

<a class='DiggThisButton  DiggCompact' expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title'></a>

</div>

</td>




<td>

<div style='margin-right:5px;'>

<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/>  

<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>

</div>

</td>




<td>

<div style='margin-right:5px;'>

<script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=1&amp;r=&quot; + data:post.url'/>

</div>

</td>




</tr>

</tbody></table></div>

</b:if>




<!--Code For Social Button Ends-->

The above codes would produce the following Social media buttons:

CODE COLORS:
Orange - Twitter tweet Code
Green - Facebook like Button Code
Blue - Google Plus one Code
Brown - Digg Code
Red - Facebook share button code
Pink - StumbleUpon code

To reorder/remove the social buttons, just cut and replace it accordingly based on the color.

Step 4. Save the template!!!!! :-)

CUSTOMIZATION:
1. In the first code, change iTechColumn to your Twitter short name.
2. For Google Plus one button, add the following code in your Blogger template:<<IMPORTANT

In your template HTML, search(CTRL+F) for ]]></b:skin> and just below it add the following code:


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

If you already have a plus one code on your Blog, then please skip this code.

Hope you liked this article. Thanks for reading. Catch you again later with more tutorials.

~iTechColumn

How To Add Social Buttons Below Blogger Posts Horizontally?

By Vinod Suthersan → Friday, February 17, 2012
Custom Subdomain For Blogger Using GoDaddyWhen you purchase a custom domain from Google, your domain would be hosted on Go Daddy. During the registration process, you get a Google Apps account from where you can access all the settings for your domain. This is a normal procedure, wherein the domain settings are automatically configured for you by Google/Go Daddy. You just need to redirect your Blogspot URL to the newly purchased domain.

But, if you want to set up a new subdomain for your primary domain name. Say your domain is example.com or www.example.com
You want a subdomain as:
demo.example.com

So, here demo is a subdomain. We will see how to set up a subdomain for Blogger today.

Steps to set up a subdomain for Blogger:
Step 1. Create a new blog which needs to be redirected to the new subdomain.

Step 2. Go to your Google Apps account:
You should see something like the one shown below:
https://www.google.com/a/cpanel/YOURDOMAIN.COM

Once you are in, you will be in the dashboard.

Step 3. Move on to "Domain Settings" tab:
Domain Settings

Step 4. Next, go to "Domain names" > Click "Advanced DNS settings".

Step 5. Here you should see:

To change Advanced DNS settings, sign in to your DNS console 
with the following information :

Sign-in name : XXXXXX
Password : XXXXXX
Customer service PIN : XXXX
godaddy customer service email : gdomains@secureserver.net


Click on "Sign in to DNS console"

Step 6. Use the "Sign-in" name and "Password" to login to more advanced features of DNS settings.
That is nothing but the Go Daddy control panel.

Step 7. If you have more than one domain listed, please click on the domain name you want to use for sudomain forwarding.

Step 8. Under "DNS Manager", you should see a "Launch" button. Click on it.

ADDING CNAME ALIAS:

Step 9. Under CNAME Alias:
Click on "Quick add"
A new entry field opens up.
Give a subdomain name and pointing server as shown below:
Adding CNAME alias

Subdomain: example
Points to: ghs.google.com

Click on "Save Zone File" on the top:
Save Zone File
Confirm by clicking "OK"

Note: It can take upto 48 hours for the subdomain to be real active. If you don't notice anything after this procedure. Don't be disappointed, be patient. But, usually it take just 15min or lesser to get the subdomain activated.

Step 10. Go back to "Domain Manager" again. You should see it on the top.

FORWARD SUBDOMAIN:

Step 11. Scroll down, you should see a tab "Forward subdomain".
Click on "Manage" or "Add" if it is the first time.

Step 12. In the next pop up.
Click on "Add subdomain"
You should see something like this:
Add Subdomain

2 Entries:
First one is "Example"
Second field is "exampleblogspot.blogspot.com" which you created.

Click on "Preview" whether everything is fine or not.
Click on "OK"
Click on "OK" again.

BACK TO BLOGGER BLOG SETTINGS:
Step 13. Go to the Blogspot's Dashboard > Select the blog > Settings > Publishing > Click "Add a custom domain"> Click "Switch to advanced settings":
See below:
Advanced Settings For Custom Domain Blogger

Click on "Save".

You are done!!!

After some time, probably after half an hour your sub-domain should be live for everyone. There is also a possibility of some more time for the sub domain to come up.

Hope you liked this tutorial. Catch you again with more tutorials tomorrow.

~iTechColumn

Custom Subdomain For Blogger Using GoDaddy

By Vinod Suthersan → Thursday, February 16, 2012
Understanding Bounce Rate For Websites
This article is on a request from my friend Meena. I dedicate this article to her.
Bounce rate is a very important entity for webmasters and site owners. Bounce rate is nothing but the percentage of visitor traffic which is "bouncing" away from your site after landing on a page.

Eg:
"Say a visitor visited your article page and left the page/site without clicking on a second page linked on the landing page".

Reasons for bounces to occur:

1. Visitor's browser got closed automatically or manually.
2. Visitor's network went down.
3. Visitor din't find the information looking for and closed it.
4. Visitor hit the back button on the browser.
5. Visitor's PC got restarted/shutdown.
6. Visitor clicked on an external link on your landing page.
7. Visitor clicked on an ad.
8. Visitor typed in a new URL on the browser.
9. Visitor searched something new on the browser.
10. Visitor got annoyed by the site graphics, layout, ads, popup, and so on.

All of the above reasons can cause your visitor to leave your site*.

*Conditions apply: If the visitor clicks on any other link within the site after landing on the web page.

Formula for bounce rate:

Bounce rate = Visits that left after one page / Total number of visits

"Obviously, the lower the bounce rate the better for your site because visitors are being engaged by the content and design of your site and they are clicking a second page, third page and so on"

How to find bounce rate of your site?

Web analytic program like Google Analytics can easily track the bounce rate of your site. This tool is a very handy tool to keep track of our site's traffic.

What is a low bounce rate?

At this point, you may be wondering what is a low bounce rate? whether a low bounce rate is 60%? 20%? or 40%?
Unfortunately, there is no definite answer for this question. The low bounce rate can vary for different sites, or different contents or the source sending you the traffic

Content based websites like blogs and news portals will naturally have lower bounce rate because of the nature of the site. But, online shopping portals or a product based website will have a high bounce rate comparatively. With the former, visitors will be more excited to read more articles/news, whereas the latter will want you to either buy or leave right away.

Some numbers/rates for reference:

High - 80% and more(regardless of the type of website)
Normal - 40% - 80% ( for most websites)
Very good - Below 40%
Excellent (Rare) - Below 20% mark

Hope you liked this article. Your comments are welcome. Stay tuned for more such interesting stuffs.

photo credit:renjith krishnan
~iTechColumn

Understanding Bounce Rate For Websites

By Vinod Suthersan → Wednesday, February 15, 2012
How To Add StumbleUpon Counter On Blogger Posts?
StumbleUpon is a great social networking site to try which helps us to discover the right website of our taste. When I compose this article, the PR of StumbleUpon is 8 and Alexa is 130. This itself says that, StumbleUpon is a great site for some good amount of traffic. People go with the normal social networking sites like Facebook and Twitter. Very few who are social enthusiastic will go with other social networking sites like StumbleUpon. That definitely doesn't mean that it doesn't have traffic. If you are a Blogger, then StumbleUpon is very important.

StumbleUpon code is very simple and easy to add. Read on...

IMPORTANT:
Backup the template before proceeding.

Let's implement the StumbleUpon Buttons with Counter below Blogger Post titles:

Step 1. Go to Dashboard > Choose Blog > Template > Edit HTML > Expand Template Widget.

Step 2. Search(Ctrl+F) for <data:post.body/>
            and just before that add any of the button codes from step 3.
   
Step 3Adding the StumbleUpon Buttons (Choose the right Button From the following types of StumbleUpon buttons)
StumbleUpon Button 1 -


Code:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=1&amp;r=&quot; + data:post.url'/>
</b:if>

StumbleUpon Button 2 -


Code:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=2&amp;r=&quot; + data:post.url'/>
</b:if>


StumbleUpon Button 3 -

Code:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=3&amp;r=&quot; + data:post.url'/>
</b:if>


StumbleUpon Button 4 -


Code:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=4&amp;r=&quot; + data:post.url'/>
</b:if>


StumbleUpon Button 5 -

Code:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=5&amp;r=&quot; + data:post.url'/>
</b:if>


StumbleUpon Button 6 -

Code:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=6&amp;r=&quot; + data:post.url'/>
</b:if>

That's it done.

Step 4. Save the template.

Customization
1. Code in Blue -  For changing the button types.

2. To make the StumbleUpon button appear on Home page as well:
Remove the "if" condition as:

Code:
<script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=1&amp;r=&quot; + data:post.url'/>

3. To align the button to left/right of the post content:

Code: (Left Float)
<div style='float: left; padding: 4px;'>
YOUR StumbleUpon Code Here
</div>

Code: (Right Float)
<div style='float: right; padding: 4px;'>
YOUR StumbleUpon Code Here
</div>

Done!!.

Thanks for reading. Hope you enjoyed it. Have a nice time trying it on your Blogger site.


You might like these as well:
Like button below Blogger title
XFBML like button below Blogger title
XFBML send button below Blogger title
Digg button below Blogger title
Google Plus one button below Blogger title
Twitter Button Below Blogger title
Delicious Button with Counter for Blogger posts


~iTechColumn

How To Add StumbleUpon Counter On Blogger Posts?

By Vinod Suthersan → Tuesday, February 14, 2012