Display Blogger Posts In Grid View Mode With Thumbnails Prajjwal Rajput Saturday, September 06, 2014 2 Comments

Source : helplogger.blogspot.com

Hello Friends how are you I'm after a month with the interesting tutorial which i can share with today last time we had shared a helpful trick that is how to host JavaScript and CSS files in Safe place i hope this post are really helped you so any way today i am going to share a trick which is are very useful and beautiful for your blogger blog. So today I sharing Grid View with Thumbnails is a script for self-hosted Blogger blogs which will display blog posts as a thumbnail grid of images in homepage and archive pages. Instead of sending your blog visitors to a page that displays all the posts in full length with a large image which takes up too much space and requires too much scrolling, now you could have a clean page that displays a gallery grid, with thumbnails and post titles, linking back to the source post for that thumbnail.

Before implement this take a look of its demo by clicking the below live demo button.

                                                                       Live Demo

If you have a picture gallery or any type of wallpaper blog then this trick are best suitable in your wallpaper blog because this trick are show only thumbnails in your blogger blog home page.

How To Implement This?

After some gaining knowledge about this tutorial let's begin the tutorial but you make sure that you have a backup of your blogger template and properly saved in your hard disk. To Add This style in your blogger just follow below steps.

• Go To Blogger Dashboard>>Template>>Edit HTML
• Find below tag using (Ctrl+F)

</head>

• Just above the </head> tag, Paste the following below code.

 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function() {
    var width = 200;
    var height = 170;
    var placeholder =
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinuqFe2NpfnMKpvDV_Fv0ReruwX-VZ-4zRaIqf_AepduwAbGmFw_NXyzfcWHCyBNFg3Nt4Vj6aX8t02aVgkBh1OHD9dw9s5jXvEeHuba6iNXNB2Q1p1YuGer-yZTDkWRfwCbzaDue0E-E/s1600/no-thumb.png';
    var margins = "0px 0px 10px 10px";
    var fitThumb = 1;
    var titleTopPadding = 5;
    var titleBottomPadding = 8;
    var titleLeftRightPadding = 5;
    var titlePadding = titleTopPadding + 'px ' + titleLeftRightPadding + 'px ' + titleBottomPadding + 'px ' +
titleLeftRightPadding + 'px';
    $('.post-body').each(function(n, wrapper) {
        var wrapper = $(wrapper);
        var image = $(wrapper).find('img').first();
        var link = wrapper.parent().find('h3 a');
        var linkURL = link.attr('href');
        var linkTitle = link.text();
        $(link).remove();
        wrapper.empty();
        if (image.attr('src')) {
            var thumbHeight = image.attr('height');
            var thumbWidth = image.attr('width');
            var thumbParent = $(image).parent();
            wrapper.append(thumbParent);
            if (fitThumb) {
                image.attr({
                    src: image.attr('src').replace(/s\B\d{3,4}/, 's' + width + '-c')
                    });
                image.attr('width', width).attr('height', height);
            } else {
                image.attr({
                    src: image.attr('src').replace(/s\B\d{3,4}/, 's' + width)
                    });
                image.attr('width', width);
                var changeHeight = (thumbHeight / thumbWidth * width).toFixed(0);
                image.attr('height', changeHeight);
            }
        } else {
            var image = $('<img>').attr('src', placeholder).attr('height', height).attr('width', width);
            var thumbParent = $('<a>').append(image).appendTo(wrapper);
        }
        thumbParent.attr('href', linkURL).css('clear', 'none').css('margin-left', '0').css('margin-right',
'0').addClass('postThumbnail');
        var thumbTitle = $('<div>').prepend(linkTitle).css('padding', titlePadding).css('opacity', '0.9').css('filter',
'alpha(opacity=0.9)').css('width', width).appendTo(thumbParent);
        var ptitleHeight = thumbTitle.height();
        var summary = parseInt(ptitleHeight) + parseInt(titleTopPadding) + parseInt(titleBottomPadding);
        thumbTitle.css('margin-top', '-' + summary + 'px');
        wrapper.css('float', 'left').css('height', height).css('width', width).css('margin', margins).css('overflow', 'hidden');
    });
    $('#blog-pager').css('clear', 'both');
});
function hideLightbox() {
    var images = document.getElementsByTagName('img');
    for (var i = 0; i < images.length;++i) {
        images[i].onmouseover = function() {
            var html = this.parentNode.innerHTML;
            this.parentNode.innerHTML = html;
            this.onmouseover = null;
        };
    }
}
if (window.addEventListener) {
    window.addEventListener('load', hideLightbox, undefined);
} else {
    window.attachEvent('onload', hideLightbox);
}
//]]>
</script>
<style>
.post {
    border-bottom: 0 dotted #E6E6E6;
    margin-bottom: 0;
    padding-bottom: 0;
}
h2,.post-footer {
    display: none;
}
a.postThumbnail div {
    text-decoration: none;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    text-transform: capitalize;
    background: rgb(125,126,125);
 /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,126,125,1)),
color-stop(100%,rgba(14,14,14,1)));
 /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
    background: -o-linear-gradient(top,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
    background: -ms-linear-gradient(top,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
    background: linear-gradient(to bottom,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;
    #7d7e7d&#39;, endColorstr=&#39;#0e0e0e&#39;,GradientType=0 );
}
a.postThumbnail:hover div {
    display: block;
}
.post-body img {
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    opacity: 1;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}
.post-body img:hover {
    -ms-filter: &quot;
    progid: DXImageTransform.Microsoft.Alpha(Opacity=70)&quot;
    ;
filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    -khtml-opacity: 0.7;
    opacity: 0.7;
}
</style>
</b:if>

• Click On Save Template.
• You've Done!

Last Words

So friends this is our today's tutorial and I hope this tutorial are really helped you if you're facing problems or getting errors during this process so please leave your comments for your solutions and don't forget to like our Facebook page and also share this tutorial with your friends on social networking sites.
Happy Blogging!

Tweet

Tags: Blogging Tips / Posts / Tutorials