Сообщения в виде сетки на Blogger(Blogspot)

Логотип Blogger и макет сетки сайтаВ последнее время стало модным создавать на страницах сайтов миниатюры страниц или анонсы статей расположенных в несколько колонок(столбцов). В Blogger также можно расположить сообщения в виде сетки. То есть посты на главной странице, странице поиска и ярлыков, можно сделать в виде информера, который будет состоять из изображения-превью, наводя на которое появляется дополнительная информация о количество комментариев, дата публикации, присвоенных ярлыках и т.п., а по клику происходит переход в само сообщение.
  Для реализации нам понадобится jQuery, поэтому если еще не подключили - подключаем.
Чтобы код работал только на тех страницах где это необходимо не забываем пользоваться условными операторами при добавлении.
Условие !important в CSS добавлено чтобы новые свойство использовались в первую очередь и не конфликтовали с уже имеющимися для обрабатываемых блоков.
  Само расположение постов и появление добавочных элементов можно организовать средствами только CSS.
.column-center-outer {
 width: 100%!important;
 float: none!important;
}
.column-right-outer,
.column-left-outer,
.fauxcolumn-right-outer,
.fauxcolumn-left-outer,
.jump-link,
.item-control {
 display: none!important;
}
.main-inner .columns {
 padding-right: 0 !important;
}
.main-outer {
 padding: 0 25px!important;
}
.date-posts,
.column-right-outer,
.column-left-outer,
.post-body,
h3.post-title a,
.date-header span {
 padding: 0!important;
 margin: 0!important;
}
.date-header,
h3.post-title,
.post-body::before,
span.post-comment-link,
span.post-labels {
 padding: 0!important;
 margin: 0!important;
 position: absolute!important;
}
.date-outer {
 position: relative!important;
 overflow: hidden!important;
 margin-bottom: 1em!important;
 height: 450px!important; /* высота всего блока ячейки */
 width: 47%!important; /* если три колонки 31%, если две - 45%-47% */
 float: left!important;
 margin: 0 1.5%!important;
}
.date-header,
h3.post-title {
 z-index: 999!important;
 width: 100%!important;
}
span.post-comment-link,
span.post-labels {
 display: block!important;
 float: right!important;
 background:none!important;
 color: #FFF!important;
 border: none!important;
 font: normal normal 120% Tahoma!important;;
 text-align: right!important;
 width: auto!important;
 top: 320px!important;
 opacity: 0!important;
 z-index: 1000!important;
}
span.post-comment-link {
 padding: 10px 0 0 3px!important;
}
span.post-labels {
 padding: 10px 0 0 20px!important;
}
.post-labels a {
 background: none !important;
 border: none!important;
 color: #FFF!important;
 font-size: 14px;
 padding: 2px!important;
 margin: 0;
}
.post-body {
 height: 350px!important; /* высота тела ячейки - картинка */
 visibility: hidden!important;
 overflow: hidden!important;
}
/* если нет картинки */
.post-body::before {
 content: '';
 display: block!important;
 top: 0!important;
 left: 0!important;
 background: url('/images/Cake2.jpg') center center no-repeat;/*ССЫЛКУ НА КАРТИНКУ ЗАМЕНИТЕ НА СВОЮ*/
 height: 100%!important;
 width: 100%!important;
 visibility: visible!important;
 z-index: 997!important;
}
.post-body img {
 visibility: hidden!important;
}
h3.post-title {
 top: 370px!important;
 left: 0!important;
 text-align: left!important;
 font: normal normal 1.5em Tahoma, sans-serif!important;
}
h3.post-title a {
 display: block!important;
 color: #000!important;
 height: 150px!important;
}
.date-header {
 top: 320px!important;
 background: #00CED1!important;
 text-align: right!important;
 margin: 0: 100px!important;
 opacity: 0!important;
 max-height: 100px!important;
}
.date-header span {
 color: #FFF!important;
 background: none!important;
 font: normal normal 1em/50px Tahoma!important;
}
.date-outer:hover > .date-header,
.date-outer:hover > .post-comment-link,
.date-outer:hover .post-labels {
 opacity: .7!important;
}
.imgBox {
 position: relative;
 background-repeat:no-repeat;
 background-position: center center;
 background-size: 100%;
 visibility: visible;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 998;
}
.imgBox a {
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 height: 100%;
 width: 100%;
}
#blog-pager {
 clear: both!important;
}

  Далее добавляем скрипт, который будет делать основную работу.
//<![CDATA[
$(function(){
 $('.post').each(function(){

 var postLink = $(this).find('.post-title a').attr('href'),
    postBody = $(this).find('.post-body'),
    imgSrc = postBody.find('img:first').attr('src');

 postBody.find('img').remove();
 postBody
  .prepend("<div class='imgBox'><a href="+postLink+"></a></div>")
  .children('.imgBox')
  .css('background-image', 'url('+imgSrc+')');
 });
});
//]]>
  Скрипт не большой, т.к. логика его проста как дважды-два:
  - во всех постах скрипт находит и запоминает - ссылку на соответствующие сообщение и ссылку на первое изображение, в случае, если в сообщении нет картинки, в дело вступает CSS и покажет то, что мы указали для псевдоэлемента ::before. Далее удаляет имеющиеся картинки из постов, создает дополнительный блок с ссылкой и фоном из первого изображения соответствующего поста.
  На рабочем сайте результат выглядит так:
  Вот и все. Тестируем и делимся впечатлениями как и всегда в комментариях. Если будут возникать дополнительные потребности, буду дописывать чего не хватает.

 P.S. Для любителей "только CSS". Если у кого получится реализовать без скрипта, поделитесь вариантом, у меня пока что ступор с универсальным методом изъятия первой картинки если она в дополнительной обертке.

©http://magentawave.com

14 комментариев:

  1. Спасибо большое за урок! Было очень интересно и полезно. Но как по мне эти плитки больше актуальны для блогов фотографов.
    В любом случае спасибо вам! =)

    ОтветитьУдалить
    Ответы
    1. Да, для фотоблогов сетка постов более актуальна, да и для видео тоже. Но мало ли, может кому и так захочется.

      Удалить
  2. Подскажите пожалуйста код, чтобы сетка была только на главной странице.
    С уважением, Юлия Н. nextyale@mail.ru

    ОтветитьУдалить
    Ответы
    1. Вам сюда:
      http://www.magentawave.com/2012/10/most-popular-conditions-tags.html
      http://www.magentawave.com/2012/10/hide-elements-from-some-pages.html

      Удалить
  3. Александр, у меня ваш код не заработал... наверное я что-то не так сделал... может поможете разобраться?

    ОтветитьУдалить
    Ответы
    1. Пример предназначен для стандартных, не динамических шаблонов. Если шаблон самописный или скаченный с другого сервиса, то в 99,9% случаев в представленном коде необходимо указывать иные, селекторы. которые обозначены в этом шаблоне.

      Удалить
    2. У меня тоже некорректно отображается

      Удалить
    3. Показывайте пример, где не работает.

      Удалить
  4. А можно такое проделать не с главной страницей, а с отдельным виджетом (расположенном под статьями блога), который будет выводить статьи с заданной меткой? Если да, то, может, подскажите как?

    ОтветитьУдалить
    Ответы
    1. Конечно можно оформить ваш виджет в виде сетки, как это сделать не подскажу, как минимум до момента просмотра виджета. Если его нужно делать, то совершенно другой вопрос.

      Удалить
    2. Вот под постом у меня установлен виджет "Что ещё почитать...", выводящий посты с определённой меткой (код имеется).
      Пример: www.veganboom.ee/2013/11/vegan-questions.html

      Но выглядит он не очень солидно. Хотелось бы, чтобы фотографии стали большего размера: в виде такой сетки, как в вашем посте или, например, просто в ряд, но более красивого вида (как на этой странице: http://proba-roba.blogspot.com/search)

      Удалить
    3. Все это вполне решаемые вопросы, особых проблем с этим нет.

      Удалить
  5. Здравствуйте,Александр! Ваш блог изменился,а мне так нравилась просто завораживающая шапка!

    ОтветитьУдалить
    Ответы
    1. Здравствуйте. Долго не решался на изменения дизайна, да и времени не было, теперь вот дошли руки :) Да, прежняя шапка была хороша, но в этом дизайне я еще не решил как ее оформить по эффектнее, но что-нибудь обязательно придумаю.

      Удалить

Следующее Предыдущее

BestProject