Random Posts Widget for Blogger [Blog Tutorials]

The Random Posts Gadget will  display a list of Random Posts from your blog on your Blog’s Sidebar. The Gadget has an options panel and can be configured to meet your needs and inherits styles from your Blog. Also you can override the colors if you want(this was done to support third party templates which doesn’t have the skin variables properly designed)as you can see in the fig :

Add The Gadget to your Blog

Credits:Thanks to Kannan of http://cre8tivenerd.com/ for the gadget image.
You can also go here For

Random Posts - http://go.bloggerplugins.org/r​andom2
Recent Posts - http://go.bloggerplugins.org/r​ecent2

How to Add Related Posts Widget to Your Blog ?

How to Add Related Posts Widget to Your Blog ? 

• Go to Layout >Edit HTML in your Blogger Dashboard.
• Back up your existing Template before making any changes!
• Make sure to check the "Expand Widget Templates" box.
• Search for the </head> tag.
• Add the following code just before the </head> tag.

<style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDDqjLoRbx8G-K19k_GdnwarYeyAiiEvhbog4C_tQxTBBA76QjgsUqpMaaghsMRsrzqpSN6rUWxwXT_RAs0Lg-npVG_6s949aQfi-sZU-v_pPo13ezjgKkIryuIldsYaVXNnDTfEisXV8/") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='http://googlemms.googlecode.com/files/Related_posts_hack.js' type='text/javascript'/> 

• Now search for <data:post.body/>. In some of the templates this code may look like this <div class='post-body> or <data:post.body/>
  
• Add the following code just beneath the code you just searched for. 

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>

• Now Save your Template and you're done!

Customization

In order to change the number of maximum related posts being displayed for each label, search for the code below (within the code given in step 7) and change the number "5" to any desired number.

How To Add Facebook Comment Box For Blogger ~ Blog Tutorials

This tutorial explains how to add facebook comment box to your blogspot blog easily  Like i have included In my blog to every post.



so let us go step by step:


1 .  Log in to your blogger account and disable blogger default comment.


Settings > Comments


Choose Hide and save your setting.
 This is optional though, it depends on whether you intend to have two comment forms on your blog.


2. Next is creating your facebook application. Click here to create a facebook application.
      i. Input the Application name
   (ex., GoogleMMS. This makes the the post on your visitor’s wall look like via GoogleMMS’s                 Journal)
     ii. Check Agree and click on Create Application. This takes you to the basic settings page.          
    iii. Change your Icon . (it must not b more dan 16*16)
         Upload your own Icon. (it must not b more dan 75*75)
         Then Scroll down and save changes
    iv. Copy your App ID to a note or notepad
    v. Click on Edit Settings and select Website.
   vi. Write your site URL in full ending with a slash /
 ( ex. http://securitypiss.blogspot.in/ or http://www.google.com/ )
   vii. Input your site domain
  (ex. google.com or blogspot.com if you’re publishing using blogspot sub domain)


3. Next is adding the required codes to your blog.
  i. xmnls attribute
 ii. SDK script
 iii. Comment form code
Log in to your blogger account and click on Design > Edit HTML > Check Expand Widget Template


i. XMNLS ATTRIBUTE


-Press Ctrl + F and search for this code:

<html

   This should be found on the second or third line of your template.
   - Right in front of this, add the following code:

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

-Be sure to have a space before and after this code. Take a look at the example below .

<html xmlns:fb=’http://www.facebook.com/2008/fbml’ expr:dir=’data:blog…………..2005/gml/expr’ >

ii. SDK SCRIPT
- Search for this code: 

<body>

-Immediately after this, add: 

<div id="fb-root"></div>


<script>


window.fbAsyncInit = function() {


FB.init({


appId : 'YOUR APPLICATION ID HERE',
status : true, // check login status


cookie : true, // enable cookies to allow the server to access the session


xfbml : true // parse XFBML


});


};


(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>

-Be sure to change ‘YOUR APPLICATION ID HERE‘ to the application ID you copied earlier!


iii. COMMENT FORM CODENow here comes the last part of the steps.


    -Press Ctrl + F and find <data:post.body/>.
    - Immediately after this, paste the following code: 

<div style='border: 1px #3b5998; background-color: #eff3fa;'><div align='center'>


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


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


<div><fb:comments width='450' expr:title='data:post.title' expr:href='data:post.url' expr:xid='data:post.id'/></div><div align="right"><a href="http://securitypiss.blogspot.in/2012/03/how-to-add-facebook-comment-box-for_12.html " target="blank"><small>[Get Facebook Comment For Blogger]</small></a></div>


</b:if>


</div></div>

Change the number (450) written in red to fit your desired width.


Also, if you’re using a magazine style template, you might have more than one <data:post.body/> in your template. You must locate the one that contains the post body on the post page.
If you’re confused about the right <data:post.body/>, search for this code instead:

<div class='post-footer-line post-footer-line-2'/>

Paste the comment form code right below it.


Update


If you’re using a dark template, the above light comment box might not be the best for your blog. You might try the dark facebook comment box below.

<div style='border: 1px #000000; background-color: #000000;'><div align='center'>


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


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


<div><fb:comments width='450' expr:title='data:post.title' expr:href='data:post.url' colorscheme='dark' expr:xid='data:post.id'/></div><div align="right"><a href=" http://securitypiss.blogspot.in/2012/03/how-to-add-facebook-comment-box-for_12.html " target="blank"><small>[Get Facebook Comment For Blogger]</small></a></div>


</b:if>


</div></div>

Share this post if it’s helpful and leave a comment if you encounter any problem trying to make it work. It’s working perfectly as you can see the comment box right below this post.