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

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

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

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

Grid View сообщений Blogger
Главная страница блога - плиточный стиль Blogger

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

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

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

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

Настройка ширины шаблона Blogger
Ширину столбцов можно задать в дизайнере шаблонов.

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

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



Комментарии

  • Добрый день! Спасибо за статью, давно было интересно, как это делается. Только в моем случае миниатюрки так и стояли одна в строку, наверное, это связано со скриптом похожих сообщений снизу под постом? Его надо предварительно снести, чтобы не мешал? Или сетка должна была сразу появиться?

    • Привет! Должна была сразу появится, может шаблон для этого не подходит или что то сделали не так. А похожие сообщения можно убрать с главной, чтобы они отображались только на страницах записей.
      В ближайшее время я покажу несколько других стилей для главной страницы блога. Будет из чего выбирать. 🙂

      • Спасибо за ответ. Шаблон вроде стандартный. А как убрать с главной похожие сообщения? У вас был об этом пост?

        • Конечно есть. Посмотрите про установку LinkWithin, используйте поиск по блогу или найдите запись в содержание. 🙂

  • Добрый день, Сергей! Подскажите пожалуйста, как создать категории для blogger как у вас? Как я понимаю, делается это не с помощью ярлыков. То есть я хотела бы сделать так, чтобы это выглядело примерно так же, как и у вас:
    Категория: Настройка блога Теги: стиль главной страницы блога Автор: Сергей. Закладка: ссылка.

    • Привет, Анастасия!
      Ни как. В Blogger только ярлыки. Этот блог на платформе WordPress, где всё можно. 🙂

      • Как обидно 🙁 Я нашла в сети лишь одну статью amateurblogger.ru/kak-sdelat-rubriki-v-blogge-rblogspot
        Но там из текста вырван кусок скрипта.. И больше нигде и ничего. Хотя мне кажется что я во многих блогах на Blogger вижу те же категории, а как настроено — непонятно.

  • Здравствуйте.
    Я так и не поняла, этот блог на какой платформе? Если на Блоггере, то подскажите, плиз, как Вы прикрутили такую форму комментариев.

  • Добрый день! А как убрать кнопку «Дальше» под каждым сообщением? Из-за нее некрасиво вставляется мозаика.

  • Сергей, подскажите пожалуйста, если знаете как настроить автоматически подгоняемую ширину шрифты блога под разные разрешения экрана? Ну, вы наверное понимаете о чём я… есть такая штука как метатег viewport, его надо куда то прописать и какие-то параметры задать для него. Может у вас статья есть на эту тему?
    У меня монитор 1280х1024, соответственно и ширину блога я подкручивал в настройках шаблона под себя — где то 1200 вроде сделал. Но посетители с другим разрешением экрана — видят блог либо обрезанным по краям (потому что не влазит, если у них низкое разрешение), либо видят страницы блога слишком маленькими, если у них фул-хд монитор.

    Читал в справке гугла на эту тему, но нифига не понял… Вставлял этот метатег в шаблон, выдаётся ошибка и шаблон не сохраняется.

    • Нет Алекс, это не по моей части. Я в такие дебри не залезаю. Если стандартный шаблон, то оставь как есть. Настрой его в дизайне шаблона и всё. Шаблон сам адаптируется под размер монитора, а мониторы сейчас в основном с большим разрешением.

      Вот есть метатег <meta name="viewport" content="width=1100"> — Размещается на десктопной версии сайта с учётом требуемой минимальной ширины. Может он.

      • В том то и дело — что нифига шаблон не адаптируется под разные размеры монитора… я уже весь мозг сломал с этой темой. Шаблон у меня стандартный — Picture Window, убрал старый мета viewport, добавил новый — так как гугл советует, но нифига не получается. На больших мониторах получается маленький размер шаблона и всего вида сайта, на маленьких мониторах наоборот — весь шаблон не влазит и приходится горизонтальную прокрутку делать.

  • Ого 124 строки, css + javascript + jquery, но почему бы не сделать так, вего-то 15 строк:

    .Blog {text-align:center}
    .date-outer, .date-posts {
    vertical-align: top;
    display: inline-flex;
    }
    .post-outer {
    display: inline-block;
    max-width: 250px;
    margin: 10px;
    }
    #blog-pager {clear:both}

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Решите задачку: *