Serenkaja's Design

Сапожник без сапог...

Точнее, уже с ~~сапогами~~ дизайном :)

Сделала, наконец, дизайн и своему блогу! А также кнопку-баннер и favicon.

Использован замечательный набор / Credits: The Essence of Spring By NLD & O.N. Designs

Кнопка:

Related Posts Plugin for WordPress, Blogger...

Дизайн блога Школы скрапбукинга

Сделала дизайн блога для замечательной Лены, автора школы скрапбукинга, вдохновительнице многих начинающих скрапбукеров и просто замечательному человеку...

Если вам интересно это направление, очень советую посетить ее блог!

Там же вы сможете лучше рассмотреть и шаблон.

Использовано / Credits: Lily Design (Cherry Blossom)

Blogger. Создание одностраничного шаблона или картинки-фона

Обещаю, что в этом посте не будет много слов :)

Как я уже писала в посте “Установка шаблона, состоящего из картинки-фона”, создание такого дизайна не вызовет много трудностей (я не имею в виду дизайнерские способности, творческие муки и прочее, а то, что для его создания вам не нужны знания html, css). Но еще раз напомню: у подобных шаблонов немало минусов! О них я писала в упомянутом посте. Отдельно упомяну еще раз самый главный минус: на мониторах с разным разрешением они будут смотреться по-разному! У кого-то картинка обрежется, у других будут пустые места.

А теперь о создании. Результатом вашей работы должны быть картинка-фон размером, например, 1280х1024px, видела вариант 1280х800px... сама делала 1280х960px…

Центральная область – шириной примерно 700px. Тут нет строгих правил – может зависеть и от настроек вашего основного шаблона, и от вашего желания.

В дополнение к фону вы можете создать и так называемую “шапку” блога в том же стиле – картинка вместо или вместе с заголовком.

Сохранять в формате jpg, качество примерно 70% (внешне не заметно сжатия, но значительно выигрываете в размере файла). Далее загружаете на ваш любимый фотохостинг. Про установку уже писала :)

Посмотреть подобные шаблоны, так сказать, вдохновиться вы можете на следующих сайтах (я не задавалась целью найти много, просто примеры, при желании вы и сами сможете):

cute bloglayouts
shels scraps
allie browns’ layouts
ну и мои пробы: serenkaja’s design (в категории simple)

Если что-то упустила, спрашивайте!

Blogger. Прячем под “кат”. Шаблоны сообщений.

Я в свое время была очень удивлена, что в блоггере нет встроенной возможности прятать часть длинного поста под кат… Для меня – это, в первую очередь, уважение своих читателей! Даже имея достаточно шутрый интернет без ограничений по траффику надоедает листать длиннющий пост!

В поисках решения я находила много вариантов, но сами же авторы признавали минусы своих вариантов. То ссылка "Читать далее..." добавлялась ко всем сообщениям, даже если мы это и не предполагали, то скрывался абсолютно весь пост – а я люблю, чтобы было какое-то предисловие…

А вот Yin Wang, автор статьи A better way to create expandable post summaries in Blogger (для классических шаблонов) догадался, как сделать чтобы ссылка "Читать далее..." появлялась только в статьях, где мы убирали под кат часть статьи, что собственно нам и нужно.

Итак, Панель инструментов - Макет - Изменить Html. Ставим галочку “Расширить шаблоны виджета”. (На всякий случай сохраните ваш текущий шаблон!)

Затем ищем закрывающий тег </head> и перед ним пишем следующий код:

<style>
a.more{display:none;}
<b:if cond='data:blog.pageType != "item"'>
span.fullpost {display:none;}
span.fullpost + a.more {display:inline;}
span.fullpost + div + a.more {display:inline;}
<b:else/>
span.fullpost {display:inline;}
</b:if>
</style>

После чего находим слова data:post.body. После строки с этим текстом вставляем код:

<a class='more' expr:href='data:post.url' style='font-size:110%;' title='Read full text'>Читать дальше...</a>

Если вы знакомы с css, можете сами еще что-то настроить по вкусу. Смотрим, сохраняем. Что-то поломалось – отменяем изменения.

Что же надо делать при написании поста, чтобы прятать часть его под кат?

Переходим в режим "Изменить Html" и ту часть статьи, которую мы будем прятать, заключаем между тегами <span class="fullpost"> и </span>

После всего этого ваш пост будет выглядеть примерно так:

Как видно из заголовка поста, я хотела еще упомянуть о шаблонах сообщений.

Зачем это нужно? Если у вас посты с повторяющейся структорой, вам будет удобно использовать шаблон, чтобы не писать каждый раз одно и то же… Опять же теги, о которых я писала выше (чтобы прятать под кат), вам не обязательно их помнить – достаточно указать в шаблоне.

Панель инструментов - Настройки – Форматирование.

И внизу странички напротив пункта “Шаблон сообщения” вставляем текст шаблона:

Самый простой шаблон (только с тегами для ката):

Начало поста <br/><span class="fullpost"><p>Здесь размещаем спрятанную часть</p></span>

Вы также можете его расширить вашим кодом.

Уголок для души

Забыла показать вам шаблон, который сделала для блога Людмилы.

~~Ближе рассмотреть можно на блоге у Люды.~~ Уже нельзя... скоро покажу новый

Использовано / Credits: mp design

Установка шаблона, состоящего из картинки-фона

Кроме шаблонов, описанных в предыдущем посте (в формате xml), часто можно встретить шаблоны в виде картинки-фона для блога (+ иногда прилагается картинка для заголовка). Особенно популярны такие шаблоны, как мне показалось, среди скрапбукеров…

Примером может служить мой шаблон (у меня в блоге они будут под тегом "simple") из элементов наборов от Bel Vidotti Scraps:

Дальше »

Шаблон в формате xml. Установка, ссылки

Итак, возможности включенных готовых шаблонов мы рассмотрели… Но вам не обязательно ограничиваться этими стандартными шаблонами. Если вам не подошел ни один стандартный, вы можете найти подходящий вам дизайн в интернете. Это сделать не сложно, поскольку в сети полно разных вариаций 2-х, 3-х колоночных шаблонов, светлых, темных и других. Для поиска ищем ресурсы по словосочетанию «Blogger templates». (В конце поста, если не забуду, я выложу ссылки-подборки сайтов с шаблонами)

Допустим, вы нашли шаблон, который вам понравился. Скорее всего, это файл в формате xml. Для установки такого шаблона достаточно просто загрузить его. Сначала сохраняете его себе на компьютер с сайта шаблонов, где он был найден (при необходимости разархивируете). Затем переходите к пункту “Изменить HTML” и с помощью кнопок “Обзор” (“Browse”) и “Загрузить” производите установку:

После загрузки может быть показано сообщение о том, что существующие информационные блоки (элементы блога) будут удалены. Нужно с этим согласиться и нажать ОК (или не соглашаться – но тогда шаблон не будет установлен). Конечно, предварительно текст, настройки и коды скриптов тех или иных блоков нужно запомнить или где-то записать. Так будет гораздо проще их создать заново уже для нового шаблона.

Для примера можете посмотреть мою первую пробу создания шаблона для blogger’а. Можете потренироваться на этом шаблоне и/или даже взять его для своего блога (буду рада, если после использования вы напишете мне об этом!)

Ссылки на сайты с шаблонами:

Использование стандартных шаблонов, а также возможности настройки

Как я уже писала в предыдущем посте (не пугайтесь, я решила разбить на несколько), есть много способов изменить дизайн блога. Одним из способов является использование стандартных готовых шаблонов.

Чтобы посмотреть и применить их, выбираем пункт “Выбрать новый шаблон”:

Их немного и они довольно простые, но вы можете их настраивать по своему усмотрению.

Дальше »

Внешний вид вашего блога на blogger’е

Добралась я до темы, которую больше всего хотела затронуть… Сразу скажу, материал довольно разноплановый, многое хочется охватить, поэтому могу увлечься… Но постараюсь собрать мысли в кучку и написать подробно, но без ухода ”в дебри".

Нестандартный, а еще лучше - индивидуальный, дизайн для блога может произвести хорошее впечатление на ваших посетителей, поэтому следует уделить ему отдельное внимание.

Для манипуляций с внешним оформлением вашего блога служит меню настроек Макет и его 4 подпункта:

Но! Прежде, чем вы начнете что-то менять, я советую вам сохраненить текущий вариант шаблона, чтобы вы всегда могли его восстановить в случае возникновения неполадок. Для этого переходим к пункту “Изменить HTML”, затем нажимаем ссылку «Загрузить весь шаблон» сразу под меню. После чего текущий макет будет сохранен на ваш локальный компьютер в формате XML.