How to Use of Masonry Plugin on Blogger
Formerly,what is Masonry?
Masonry is a javascript library created by David DeSandro.It helps to create a dynamic layout,without leaving spaces between.I've applied it on Blogger templates,and what drawbacks I found,that what is going to share in this post.
Before start reading this post, read this post that I'd written on how to implement Masonry on Blogger blogs, then further when I researched some more I encounter some errors need to be corrected. And that is what described in this post.
To get the example see the image below.
How to implement Masonry on Blogger template
Masonry can be implemented via Javascript or you can use Jquery to make it work.In this tutorial I'm using Jquery function to make it work.To use Masonry we also need Image Loader,that is a Jquery plugin that reload images on a selected container and help to give a callback function.
- First host the Jquery,make sure that the Jquery is used once.
- To add Jquery add the following line just after <head>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>
- Then add Masonry and Image Loader into template.
- To add these plugins,add the following lines just before </head>
<script src='http://desandro.github.io/imagesloaded/imagesloaded.pkgd.min.js'></script> <script src='http://masonry.desandro.com/masonry.pkgd.min.js'></script>
- Now lets call the function,the function will call when the DOM is ready.
- So to call function,add the following line just before </head>
<b:if cond='data:blog.pageType == "index"'>
<script>
$(document).ready(function(){
var $container = $('.main');
// initialize Masonry after all images have loaded
$container.imagesLoaded( function() {
$container.masonry({
itemSelector: '.post',
});
});
});
</script>
</b:if>In my template,the container has class='main' and post have class='post',If you have different IDs or Classes,then simply replace the container and itemSelector.In above code,I've added a condition which will let the masonry work on index pages,means no disturbance of elements on post pages.For CSS
- The post should have a CSS property of float;left
- The width should be set to less than 50% or else the post will not form a dynamic layout.
Drawback
No doubt,it created a dynamic and my favourite layout,however I encountered some major problems,that should not be happen.Formerly,let me tell you that there were two elements were disturbed because they were in main container.First was Blog pager,which have next page and older page link and second was Message Wrap which shows when a reader search a term or go to the page of any label.
There is a way to remove Message Wrap that is described in this article,but it is not the deal.I was needing that message wrap,therefore I found some solution for blog pager and message wrap.
For blog pager
The blog pager comes at top overwhelming the posts,which is not good.I want it to go at bottom,therefore I used the following method.In standard Blogger blog,the blog pager have a id of blog-pager or you can check in your template if it is changed.So first add the following CSS properties in it.
position:absolute; bottom:0px;Then after adding these properties,add the following properties in the main section where all the posts lies.
padding-bottom:20px;This will create the bottom padding while blog pager properties will make it lie at bottom which is its recommended position
For Message Wrap
In message wrap the problem was same but,in this case the message wrap lie at top.So to solve the problem,I used following solution.After a long hunt I found the solution on Masonry website,it have some options,in which one is stamp.Stamp creates an element visible in posts.We can't use it for blog pager because the element with position:absolute will not work on it.
So to learn more about stamp got to Masonry site.