Меняем стиль главной страницы Blogger

Привет, бесценные друзья и просто хорошие люди! Как я заметил, дамы и господа, большинство пользователей Blogger используют стандартный шаблон для своего блога, поэтому урок для них. Я вас сегодня на долго не задержу, покажу только, как поменять стиль главной страницы Blogger, то есть, сделать её в виде сетки - плитки с миниатюрами и с названием сообщений, уверен видели такое.

Это в первую очередь хорошо для тех, у кого много фото в сообщениях (фото блог), да и для остальных неплохо будет.

Главная страница Blogger будет выглядеть более компактней и прокручивать страницу не надо, чтобы увидеть все записи на главной. Вот, пожалуйста, скриншот:

Даже и не знаю, как правильно назвать такой макет главной страницы блога, наверное плиточный стиль с эскизами или стиль галереи, хотя какая разница. Главное, чтобы было красиво.

Как поменять стиль главной страницы Blogger на сетку с миниатюрами

Прежде чем вносить изменения в шаблон вашего блога, обязательно делайте резервную копию. И ещё, повторяю вновь и вновь, создайте новый блог для экспериментов, с таким же шаблоном и проверяйте работу виджетов, и другие изменения. И так, чтобы поменять макет главной страницы блога, зайдите в панели управления Blogger - Шаблон - Изменить HTML. В коде шаблона найдите тег </head> и чуть выше вставить вот такой код:

<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 = 'http://3.bp.blogspot.com/-7Ie-cUwxWB4/U2KIRWgvpNI/AAAAAAAAIfU/Mj6qpg5S2fk/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>

Всё, сохраните изменения. Если нужно поменять размер выводимых миниатюр, то можете поменять ширину и высоту картинок - width = 200; height = 170; Или воспользуйтесь настройкой ширины столбцов в дизайнере шаблонов, для того, чтобы смотрелось гармонично:

Вот так. Я пробовал поменять стиль в стандартном шаблоне Blogger с названием Simple, все вышло хорошо, только, пришлось чуть - чуть подправить ширину столбца блога.

Надеюсь, друзья, вам этот урок пригодится. Позвольте на этом, мне, с вами попрощаться, совсем не на долго. Удачи и до новых встреч.