Essential Widgets and Tweaks to your Blog(For Beginners)

  I'm an Amateur in blogging, and I'm trying to learn ways to optimise it. Last month I got Adsense approved, and since then I'm trying to pull in traffic, and add good content. In the race, I learned that you have to Read Blogs to make people read your blog. Go to other Blogs, comment your views, and its sure that their community would give a look at your too. But this is not it.
  Once they visit your blog, they might, read a post and move away just like that. Here comes your skill to make people stay and read more posts. For this purpose Ive added 3 widgets to the blog,
  • 'Recent Popular Posts' on the right sidebar - which shows the latest popular posts. You can configure the widget to make sure how the popularity is decided. You can find this widget in the Blogger widget list(Which you get by clicking Add Widget on the Design page of the blog)
  • 'Related Posts' which you can find right blow this post. This plays an important role in making people read other posts. And its important this widget catches eye, the Thumbnail view makes it more attractive. Ive typed down the steps to add this widget below. Any queries leave a comment!
  • The flash widget which shows all the labels. This makes the site attractive, make sure you add specific labels to attract traffic. The steps have been given below. Again, leave a comment if you need to know more details.
Now once you've made lots of posts on the blog, you'll feel that the posts made months ago, in which you had put in a lot of effort, are not getting the views you wished it got. Here comes the role of organizing the posts into label and framing a Menu Bar. This allows users to browse into the categories.
Making up the Menu bar and optimising could be a little confusing for newbies. For a start, here is what you have to do

  • Go to this site - cssmenumaker.com
  • Select any design you want to have on your blog
  • Before getting to this, make sure you have an idea of what all you need on the Main menu and the dropdown menu's. Of course you can edit this later, but then you will have to familiarize with CSS, which is not too difficult, but can get confusing for a beginner.
  • Download the CSS, and do as they instruct, you will have to copy two sets of codes. 
  • Optimize and customize as you wish. Ponder on the CSS code for a while, you can leave a comment if you need help!  

  The next important thing is the Commenting widget. Blogger by default provides a boring Comment system. You can use the one I'm using now, Disqus is an awesome commenting widget. Its free and easy to setup, and the plus point is that you can comment on other blogs using your Disqus account. It virtually creates a profile in Disqus, which itself acts as a Social network. Now don't spam into other sites with your Blog link, a mistake I did. I used engadget.com to drive traffic to my block, I made good comments along with it I added a signature which included a link to my blog. I was surprised with the traffic I got, around 900 views a day, and 90% of them were from US. I was getting a bit carried away and commented a lot, the moderator of course did not agree to this resulting in me getting banned from commenting on that site. So be careful, keep commenting, people will view your Disqus profile once in a while, which would bring in traffic. You can get the Disqus account here - disqus.com. Its easy to setup, but Blogger does not support Disqus for pages, so you will have this commenting system only on Blogspots. Make sure you import the existing comments to Disqus as well.
  Another option in commenting widgets is integrating Facebook Comments, this would make commenting easy, and would drive in traffic as it would be updated on the wall as well.
  The next widget I used is the Task Bar which you can see on the bottom of the screen, this is a static widget, to which we can add lots of applications from wibiya.com. This is also free and easy to setup. Ive added a search tool and Latest post button to it. For sharing to social networks, I preferred using the static tool which floats left to the Blog post. You have a wide variety of Apps available. But don't overdo it, just put in the apps you feel are necessary. 
  Finally make sure you are aware of the Terms and Conditions of Google Adsense. I had placed ads below the Menu Bar, which is not allowed as it can cause Accidental hits. I realised this when no ads were displayed on my home page, so I replaced it to the top. Another point is that you have to add the Privacy Policy for adsense as well. Don't bother creating one on your own, you'll get ready made privacy policies here - www.serprank.com These minor things can get your account disabled with no warning at all.
  I will keep updating this post, along with adding the ways to add the above mentioned widget. If you feel I'm going in the wrong way, or if you have better suggestions, Please do Comment!

Steps to add Related Posts Widget - 

  • Using your Blogger Dashboard go to Design->Edit HTML and click on Expand Widget Templates. Make sure you backup your Template before doing any modifications.
  • Find the code
    </head> in the HTML and copy the following right above </head>
<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:0;
padding-left:15;
}
#related-posts h2{
font-size: 1.3em;
color: black;
font-family: kranky, &#8220;Times New Roman&#8221;, Times, serif;
text-decoration:underline;
padding-top: 0em;
margin-bottom: none;
}
#related-posts a{
color:black;
padding-left:10em;
padding-right:15em;

}
#related-posts a:hover{
color:black;
}
#related-posts  a:hover {
background-color:#c1c1c1;
}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;http://www.10minutetravel.com/images/NO%20IMAGE%20AVAILABLE.jpg&quot;;
var maxresults=5;
var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;&quot;;
</script>
<script src='http://yourjavascript.com/929417631/vb.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
  • You can vary the number of results by changing the value of variable maxresults and the title by assigning it to relatedpoststitle(In my case its Nil)
  • Then find this code
    <div class='post-footer-line post-footer-line-1'>
    and paste the below code right below it -
<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><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=6&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'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img alt='Related Posts Widget For Blogger with Thumbnails' src='http://image.bloggerplugins.org/blogger-widgets.png' style='border: 0'/></a><a href='http://www.bloggerplugins.org/'><img alt='Blogger Widgets' src='http://image.bloggerplugins.org/blogger-widgets.png' style='border: 0'/></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->
  • There you go :) Save the template and it should work fine. Make sure you have made enough labels for each of your post.
Steps to add the Flash Widget -
  • Again go to the Edit HTML page and check 'Expand Widget Templates'
  • Find the below code if you want to place it on the sidebar
    <b:section-contents id='sidebar-right-1'>
    You can change this position later in the Design page. Copy the following code below the code mentioned
<b:widget id='Label99' locked='false' title='' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://sites.google.com/site/bloggerustemplatus/code/swfobject.js' type='text/javascript'/>
<div id='flashcontent'/>
<script type='text/javascript'>
var so = new SWFObject(&quot;http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;200&quot;, &quot;200&quot;, &quot;7&quot;,&quot;#ffffff&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
  • Save the template, now you can place the widget where you wish using the Design page. You can also manually decide which labels should be viewed. You can adjust the Height and Width in this line
    &quot;tagcloud&quot;, &quot;200&quot;, &quot;200&quot;, &quot;7&quot;,&quot;#ffffff&quot;);
    Where 200x200 indicates the size of the Widget, and #ffffff indicates the background color. To make it transparent, Uncomment this line
    //so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
 I will keep updating this post, along with adding the ways to add the above mentioned widget. If you feel I'm going in the wrong way, or if you have better suggestions, Please do Comment!