Стиль журнала для шаблона Blogger

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

Сегодня инструкция для желающих превратить свой обычный, стандартный шаблон блога Blogger в журнальный стиль. Для справки: это когда на главной странице вашего блога записи идут не как обычно, друг за другом, а расположены в два ряда и над ними расположена запись в обычном, чуть изменённом стиле. Ну вообщем, как в новостных блогах. Вроде понятно объяснил. Да, что же это я, слова да слова, а изображения где?  Скриншот в студию - cтиль журнала для шаблона Blogger:

Как создать стиль журнала для шаблона Blogger
Журнальный стиль шаблона Blogger

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

Как стандартный шаблон Blogger переделать в журнальный

Первым делом, друзья, перед тем как, что то менять в шаблоне блога настоятельно рекомендую создать его резервную копию или как я всегда не устаю повторять, создайте для себя новый экспериментальный блог, где вы сможете проводить различные опыты над ним, без боязни повредить основной. И так, найдите в вашем шаблоне такую строку <data:post.body/> имейте ввиду, что таких строчек может быть 4, остановитесь на второй. Затем, замените её вот этим кодом:

Я изменил подсветку кода на этом блоге, сделал его более компактным и добавил панельку управления, для удобства, пользуйтесь ей. Продолжим. Найдите другую строчку, вот такую - <b:include data='post' name='post'/> и так же удалите её и вместо, вставьте этот код:

Далее, ищем тег </head> и над ним (чуть выше) добавляем эту конструкцию:

В начале скрипта есть настройки, на всякий случай: количество символов для сообщений, когда не будет миниатюр в статье; количество символов с изображениями; высота и ширина эскизов (картинок)  и так далее.  Продолжаем, последний и заключительный шаг. Нам надо добавить стили CSS, для этого добавим так же, чуть выше тега </head> код CSS:

Тут, есть строки width: auto; height: 250px; и  width: 46%; height: 230px; где можно в случае чего, подстроить стиль для правильного отображения макета. На стандартном шаблоне Simple, где я пробовал, всё работает и отображается журнальный стиль правильно. Вот и всё на этом, позвольте с вами попрощаться, совсем не надолго. Удачи и до новых встреч. Пока.

Комментарии

  • Теперь красивенько!!:) БлагоДарю, в очередной раз!

  • Здравствуйте, спасибо очень нравиться такой стиль, но у меня в блоге не получается выровнять высоты маленьких табличек с постами: когда просматриваешь ссылки ярлыков то первые две верхние таблички находящиеся рядом находятся не на одном уровне, т.е. первая выше вторая ниже, следующие за ними уже выстроены ровно на одном уровне. Надеюсь понятно объяснила, может подскажете как это можно исправить? спасибо

  • Доброго времени! Сергей, шикарный стиль! Спасибо Вам большое!
    Искала газетный, перепробовала несколько вариантов. Ранее стоял с blogger4you.blogspot.ru/2009/08/blogger-read-more-for-laziest-bloggers.html Все отлично работало, но поменяла шаблон (водяной знак на простой) и все слетело….((( в том числе и LinkWithin. Кучу времени потратила на эксперименты с кодами для «Похожие сообщения». Ни один не заработал (( С газетным стилем было чуток проще, но код с blogger4you не заработал, а другой не делал пропорциональные фото (смотрелось тяп-ляп). Ваш стиль спас меня! Решил эти две задачи одним махом ))) И сообщения частично свернутые и наглядность хорошая (взамен LinkWithin). Есть вопрос: на главной странице на свернутых сообщениях не отображается количество комментариев — можно ли это решить? И второй вопрос: как можно увеличить фото, чтобы смотрелось и красиво и крупнее фото было?

    Благодарю Вас!!!

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

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

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