Adding recent comments to your blogger blog

• First of all, login to your Blogger blog.
• From your Dashboard blog, to go Design then click on Add a Gadget from Page Elements panel.
• Choose HTML/JavaScript and copy/paste the code below in it

<script language="javascript">
var numcomments = 7;
var numchars = 50;
</script>
<script src="http://yourbloggerblog.blogspot.com/feeds/comments/default?
alt=json-in-script&callback=commentDisplay"></script>

• Click on SAVE button and you're done.

* Remember to change the URL "yourbloggerblog.blogspot.com" to your blogger's domain name to show your recent comments. In this hack, you can change the number of comments that you want to display on your blog in the line "var numcomments = 7;" and the line "var numchars = 50;" will show the characters in each comment.

This looks better than Adding recent comments to your blogger blog by using Feed URL

How to create a "Random posts" list on your blog

Like its name, this hack will help you show your blog posts by random and help you to increase the number of page impressions from readers.

Creating a "Random Posts" list on your blog is very easy.

Login to Blogger with your account.

• From your Blogger dashboard, go to Design then click on Add a Gadget, choose HTML/JavaScript Add
• Copy/Paste the code shows below to Content section
  

  <script type="text/javascript">
  var randarray = new Array();var l=0;var flag;
  var numofpost=10;function randomposts(json){
  var total = parseInt(json.feed.openSearch$totalResults.$t,10);
  for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
  if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
  for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
  for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
  document.write(item);}}
  }document.write('</ul>');}
  </script>
  <script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>

• Click on SAVE button to save your work and you're done.

* You can change the number shown in red any time you want to change the number of posts will be displayed on your own list.

How to adding Facebook button after every of your Blogger posts

The Faceook Like button lets a user share your content with friends on Facebook. When the user clicks the Like button on your site, a story appears in the user's friends' News Feed with a link back to your website.

When your Web page represents a real-world entity, things like movies, sports teams, celebrities, and restaurants, use the Open Graph protocol to specify information about the entity. If you include Open Graph tags on your Web page, your page becomes equivalent to a Facebook page. This means when a user clicks a Like button on your page, a connection is made between your page and the user. Your page will appear in the "Likes and Interests" section of the user's profile, and you have the ability to publish updates to the user. Your page will show up in same places that Facebook pages show up around the site (e.g. search), and you can target ads to people who like your content.

Here is how to adding Facebook button after every of your Blogger posts:

• From your Blogger Dashboard, go to Design | Edit HTML
• Check on the Expand Widget Templates
• Scroll and find the code <data:post.body/> then copy/paste this code after it:
  

  <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:40px;'/>

• Click Save Template and you're done.

Magazine Style Drop Caps

Dropcaps like in a fancy magazine is what you see in this post. If you like this tip, just follow this guide step by step.

Go to Design | Edit HTML in your Blogger Dashboard, and then paste the code below to your CSS-definitions between the HEAD tag.

.dropcaps { float:left; color: $headerBgColor; font-size:100px; line-height:80px; padding-top:1px; padding-right:5px; }

Now in every of your posts, you need to put the fisrt letter between the tag SPAN like this: <span class="dropcaps">D</span> in Edit HTML section. The result is very nice: a large capital that stretches over 5 lines in your post.

Remember that you can change the font size bigger or smaller or setting the color in different from the code above if you want.

* Tips: To make it easier, Post Template will help you save your time by pre-formatting the post editor with text or code that will appear each time you create a new post.

• In your Blogger Dashboard, go to Settings | Formatting then scroll down and you'll see the Post Template section at below of the page.
• Copy/paste your text or code that you want to edit here.
• Click Save Settings to save your changes.

Here is an example for Dropcaps hack in this article:

How to add HTML code in your Blogger post

For some reasons, many of you need to put HTML code in Blogger post but may not know how to show them in posting. So this method will teach you how to do it by manual:

• Open your Notedpad
• Copy and paste the code into your Notedpad
• Use Edit | Replace (or Ctrl+H) then type < in Find what and type &lt; in Replace with. Click Replace all to replace them.
• Do the same for > with &gt;
• Now copy and paste all your code from Notepad into your Blogger post.

Publish your post and see your work. Good luck!

How to hide the Blogger Navbar

It's easy if you want to hide the Blogger Navbar. All you need to do is copy/paste this code to the Edit Template section.

#navbar { display: none; }

- In your Blogger Dashboard, go to Design | Edit HTML.in your Blogger dashboard.
- Next, find the line ]]></b:skin>, then insert the following lines of code above.
- Click Save Template to save your work.
- And you're done.

Paste the code like this