How to use Masonry for intermediate users in Blogger

Today I received an e-mail through contact form in which the sender was requesting to describe how to use Masonry in Blogger as he was not aware about Javascript.So to help him as well as intermediate developers to use Masonry in Blogger I've published this post.So have a look on it step by step:

First let me tell you that I'm going to go according to basic Blogger template,because this format is mostly used by the developers,but if didn't work then write in comments with your blog link and I'll help you out.

Okay before starting make sure to backup your template and start with adding jQuery,.to add jQuery (if you do not have in your template),add following line after <head>

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'/>

The second step is to determine the markup of your blog post. In a simple (default) Blogger template the post div have class date-outer. Each loop creates a post and you need to call this plugin on it. Therefore the item becomes .date-outer.

The items should be equally divided in order to get the correct layout. If the layout is based on two columns then each post have the sum of its horizontal margin, horizontal padding, width and borders on x-axis equals to 50%. Because if it reaches higher, the resultant layout will not be correct.

Now this one is the final code that will go before </head>

<b:if cond='data:blog.pageType == "index"'>
<script src='http://desandro.github.io/imagesloaded/imagesloaded.pkgd.min.js'>

</script>
<script src='http:/ / masonry.desandro.com / masonry.pkgd.min.js '></script>
<script>
$(document).ready(function() {
var $container = $('.main '); // initialize Masonry after all images have loaded
$container.imagesLoaded(function() {
$container.masonry({
itemSelector: ".date-outer",
stamp: ".status-msg-wrap"
});
});
});
</script>
<style>
.date-outer {
float:left;
width:47%;
margin:10px 1.5%;
}
</style>
</b:if>