Весенний фотоколлаж-открытка. Мастер-класс для сайта “Блоги мам”

Наверно, уже все с нетерпением ждут весну, хочется зеленых красок, тепла, весеннего солнышка! Уже совсем скоро! Надеюсь, не только календарная :) А еще скоро замечательный весенний праздник – отличный повод порадовать любимых мам, бабушек! А особенно бабушки любят все, что связано с их внуками (чуть отвлекусь: у нас в семье уже который год лучший подарок на новый год – перекидной календарь с фотографиями дочурки, каждый месяц – с фотографией Маши, сделанной в этом месяце прошлого года). А еще открытки. Вот я вам и хочу предложить оформить коллаж с фотографиями для открытки (или календаря, плаката, даже кружки – что вам больше всего захочется).
Вот, что получилось у меня:

Надо признать, когда мне предложили делать МК по коллажу, мне не просто было собраться. Т.к. понятие коллажа настолько размытое, а я лично не люблю, когда большое количество фотографий разбросано по странице. Но и пришлось сдерживать себя, чтобы коллаж не превратился в скрап-страничку. Надеюсь, вы сможете почерпнуть что-то новое для себя.
Читайте МК на сайте “Блоги мам”

Upd: А Наташа Судибор из всех мастер-классов Великолепной восьмерки сверстала сборник.

Добавление кода кнопки блога

Довольно часто спрашивают, как добавить в блог код своей кнопки (моргалки), как, например, у меня:


Все просто!

1. Добавляете Html/Javascript виджет на странице Дизайн - Элементы страницы

2. Вставляете код:

<img style="width: 200px; height: 67px;" src="адрес картинки" alt="текстовое описание" /><p><textarea rows="3" cols="25" onfocus="this.select()" onmouseover="this.focus()" name="textarea"><a href="адрес блога" title="текстовое описание"><img border="0" src="адрес картинки" alt="текстовое описание" /></a></textarea></p>

Отмеченное красным цветом, исправляете под себя.

Использование QP (Quick Page). 2 способа

... или иначе - вставляем фотографии в готовые скрап-странички.

Эту мини-инструкцию писала давно уже для Школы Скрапбукинга... сегодня подумалось. а вдруг кому из моих читателей или случайных посетителей тоже пригодится :)

О том, как подбирать фото и рамку, написано здесь. О различиях между QP и обычной графической рамкой рассказала Олянка в статье Еще раз о... рамках

Теперь вы подкованы в этих вопросах и готовы перейти к уроку, как вставить ваши фотографии в выбранную страничку-полуфабрикат (QP). Хотя, возможно, вам еще будут полезны уроки по фотошопу для начинающих, как, например, "Для начинающих: открытие, создание и сохранение файлов в Photoshop" и др. Вы их можете найти в сообществе "Компьютерная грамотность" (список уроков). Как показывает практика, очень многих бы вопросов не было, если потратить чуть больше времени и ознакомиться с азами!

Для урока использовалась QP Waiting for you от DitaB

Blogger. Прячем под кат. Дополнение!

А я и не обратила внимание, что в новом редакторе блоггера появилась встроенная (родная) возможность прятать часть сообщения под кат (без махинаций с css-ом и проч.).

Но наткнулась на отличный блог ВСЕ для BLOGGER(а) на BLOGSPOT(e)! и собственно статью Blogger: Как вставить 'Читать дальше' и чтобы боковая колонка осталась на месте. О самом способе, проблемах и их решениях вы прочитаете в этой статье. Кстати, всем ведущим блог на blogger/blogspot рекомендую этот блог! Много полезностей!

Blogger. Редактируем шаблон

Меня пару раз просили рассказать о редактировании шаблонов на блоггере. Честно говоря, я долго не бралась за это, т.к. чтобы основательно менять дизайн блога, надо бы знать хотя бы основы html, css… Но по вашим просьбам я постараюсь помочь вам поправить некоторые моменты в вашем блоге и без этих знаний.

Итак, начнем с начала – выберем шаблон Minima (не забыли предварительно сохранить архив текущего? если не с нуля начинаете, конечно).

Что имеем? Блог с двумя постами (вы ж должны видеть измения, на пустом блоге не то!), с парочкой виджетов, белый фон и т.д… Да смотрите сами :)

Что будем менять:

• Ширину основной части
• “Шапку” блога
• Заголовки постов, виджетов, текст постов, ссылки
• Оформление картинок
• Добавим favicon

Продажа фотографий, иллюстраций в фотобанках

Зачем снова писать про фотобанки/фотостоки/стоки?

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

Если вы не понаслышке знакомы с фотобанками, вряд ли вы найдете для себя что-то новое… Но, может, кто-то наткнется, кто не сталкивался или раньше проходил мимо. Да и мне не придется каждый раз искать, где в последний раз я писала, что нового вносила и т.д.

Хватит лирики!

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

Фотобанки работают круглосуточно и без выходных. Каждая продажа не требует отдельных усилий – вы один раз сфотографировали/нарисовали, описали карточку, загрузили на сток и все. Это как гонорары за книгу. Нельзя, конечно, сказать, что одна отличная работа будет кормить вас годами (хотя кто знает?), многие банки любят “свеженькое”… Поэтому приходется постоянно трудиться, пополнять портфолио, если хотите получать существенное вознаграждение!

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 != &quot;item&quot;'>
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>

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

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

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

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

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

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

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

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

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

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

• 50 самых красивых шаблонов для Блоггера
• btemplates.com
• eBlog Templates
• BlogCrowds
• 101 Excellent Blogger XML Templates
• 70 Fresh And Modern Blogger Templates

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

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

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

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

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

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

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

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

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

Теперь спокойно можно менять :)

Итак, есть много способов изменить дизайн блога. Им посвящены следующие посты:

• Использование стандартных шаблонов, а также возможности настройки
• Шаблон в формате xml. Установка, ссылки
• Установка шаблона, состоящего из картинки-фона
• Создание одностраничного шаблона или картинки-фона
• Прячем под “кат”. Шаблоны сообщений.
• Blogger. Прячем под кат. Дополнение!
• Blogger. Редактируем шаблон 

In English:

• How to use my templates

Blogger. Об использовании шаблонов

1. Нажмите "Настроить" в правом верхнем углу вашего блога (вы должны быть залогинены!)
2. Жмите Выбор нового шаблона и установить шаблон Minima! (Вы не потеряете ваши виджеты/панели). Сохраните.