Are you a fan of Pinterest, and like the way that they have a fluid layout of boxes down the site, seemingly haphazard, but tucked in nicely like a stone wall? Perhaps you thought to yourself, "I wish my Blogger site could look like that!" After all, there are Tumblr blog templates that have this cool look.
Using some of the tips we've already written about you can make this happen on your own site in under 30 lines of code. (clean version of the code). You can see a recent example of it in action here.
The first thing to know is that we're using JQuery and a JQuery script called Masonry to accomplish this.
<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script language='javascript' src='http://masonry.desandro.com/jquery.masonry.min.js' type='text/javascript'/>
<b:if cond='data:blog.pageType == "index"'>
<script type='text/javascript'>//<![CDATA[
/**
this script was written by Confluent Forms LLC http://www.confluentforms.com
for the BlogXpertise website http://www.blogxpertise.com
any updates to this script will be posted to BlogXpertise
please leave this message and give credit where credit is due!
**/
$(document).ready(function(){
// the dimension of your content within the columns
var dimension = 180;
$('#Blog1').find('img').each(function(n, image){
var image = $(image);
var height = image.attr('height');
var width = image.attr('width');
var newHeight = height/width * 180;
image.attr('width',180).attr('height',newHeight);
});
// the dimension of your columns
$('#Blog1').masonry({
itemSelector : '.post-outer',
columnWidth : 200
});
});
//]]></script>
<style>
.post-outer {
// the dimension of your content within the columns
width: 180px;
}
.post-icons, .post-share-buttons {
display: none;
}
</style>
</b:if>
In the first part of this script we're including the javascript files. You want to do this right before </head> in your template.
The second part of this code we want to have added right before the </head> in your template. In this second part you'll see a line that reads "if blog pagetype = index"; what we're doing here is making the code below that line and before the </b:if> only act on the pages within your site that are considered indexes. Those are pages such as the home page, label pages, and search pages.
Inside that we're going to be making some changes to your site's CSS styling, in particular we're going to be setting the post-outer div to have a width of some number (in this case 180 pixels wide). The post-outer is the wrapper around each blog post in your site.
After that, our first part of our javascript is going to find all of the images that you have in your blog articles and resize them so they fit within the new container size, again in this example 180 pixels wide. We also make the height resize retain the original ratio to the width.
The second part of our javascript then calls the masonry functionality. Using the item selector of post-outer (the outer container for all blog posts on each index page), we're going to set a column width for the masonry elements to fill in (your blog posts). In this example I've made the column 200 pixels wide so that there is a nice margin between the articles.
Enjoy!
Popular
-
Hangout on Air: Friday Request Line for 10/19/2012Less is more, user-centric design, focusing on your user experience, and lots of template manipulat…
-
Featured Blogger Site: Pinch GalleryPinch Gallery in Northampton, MA is a vibrant, eclectic artisan gallery with a focus on art for th…
-
Question: Why is my Blogger blog not displaying correctly in IE 9?As web developers we learn to live with what we call "cross-browser compatibility" issues…
-
Question: Need help moving from Wordpress to Blogger?There are a number of reasons why we recommend using Blogger instead of Wordpress including: 1) fre…
-
Tip: Easy instructions for adding Pinterest to each postAdding Pinterest correct to your Blogger site can be a bit challenging; most people take the easy w…
-
Tip: How do I remove the Blogger bar at the top of my site?This is, far and away, the #1 question we're asked when people see the work we've done with…
-
Transforming a Blogger RSS feed into a slideshowThis tip was created by us to solve a challenge that one of our readers left for us on our Resizing…
Post a Comment
Post a Comment