Мой Красивый Блог - Урок №5

Доброе утро, дорогие студенты! :))

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

Девочки, мы столкнулись с таким моментом: к урокам бывает много комментариев и часто они не влезают на одну страницу. Если вы пишите комментарий и не видите его - значит он попал уже на следующую страницу. Тогда после всех комментариев внизу появляется надпись Load more. Нажимайте на нее и переходите дальше. :)

Сегодня займемся боковыми панелями (сайдбарами).

Как бы мы их ни разместили, надо позаботиться о том, чтобы они не были перегружены, и информация в них была удобно упорядочена.

Профиль

Первое, что обязательно нужно сделать - создать гаджет с вашим фото и приветственным словом, где должно быть указано ваше имя и, желательно, город. Может быть, вам это кажется не важным, но это ОЧЕНЬ важно! Я много гуляю по блогам незнакомых людей и в первую очередь ищу информацию о хозяине - кто, как зовут и откуда. Имя нужно при написании комментариев, фото важно для зрительного контакта, ну а город - это просто интересно, вдруг вы - мой земляк? :)

Да, в Блоггере есть стандартный гаджет Профиль, который отображает ваш аватар и информацию, которую вы указали в профиле. Можно воспользоваться и им, выглядит он так:

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

Поэтому я советую создавать свой собственный уголок информации. :) Его можно оформить в одном стиле с остальными деталями блога. Вот такие красивые примеры я для вас нашла:

          

          

          

Давайте создадим себе красивый профиль. Я уверена, большинство из вас справится с этим без труда. Но, судя по вопросам к предыдущим урокам, некоторым моментам лучше уделить особое внимание. :) Поэтому я покажу, как сделала свой профиль, чтобы напомнить вам о некоторых простых чудесах Фотошопа. :)

Итак, открываем наше фото и выделяем круг инструментом Elliptical Marquee Tool (он прячется под инструментом Rectangular Marquee Tool. Чтобы открыть его, нажмем на нижний правый уголок кнопки - появится меню с остальными фигурами), зажав клавишу Shift:

Обрезаем изображение: Image->Crop:

Теперь нажимаем клавиши Ctrl+J - получаем обрезанное до круга изображение на новом слое. Нижний слой можно сделать невидимым, нажав на глазик:

Если мы хотим черно-белое фото, идем в Image->Adjustments->Black&White... В появившемся окошке регулируем ползунки, пока не будем довольны результатом.

Увеличим канву, чтобы было место для надписей и украшений (Image->Canvas Size). Для наглядности можно создать временный слой с белым фоном. Теперь можно добавлять нужные элементы. Не забывайте каждый элемент создавать на новом слое!

Я сделала заголовок с кистью-мазком и небольшое приветствие инструментом Horizontal Type Tool:

Приветственное слово лучше делать компактным. :) Более развернуто вы сможете написать во вкладке Обо мне.
Убираем глазик у белого фона и сохраняем картинку в формате PNG.

Вставим наш профиль в блог. Для этого используем гаджет HTML.
Код такой:

<center><img width="ширина картинки в пикселах" src="адрес картинки" /></center>

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

Сохраняем и смотрим:

Есть очень много вариантов оформить фото-профиль - все зависит только от вашей фантазии!

По такому же принципу можно добавить на панель  красивые заголовки, например Конфетки (а ниже уже будут располагаться все конфетки))).

Теперь добавим другие гаджеты на свое усмотрение. Выбирайте только полезные, перегружать панели нам ни к чему. Я часто встречаю огромной длины панели в блогах! Чего на них только нет: и часы, и новости со всего мира, и лента последних сообщений любимых блогов, какие-то цитатники, движущиеся картинки, не имеющие отношения к содержанию блога, календари, погода, конвертер валют...!! Зачем? Часы у каждого пользователя есть на компьютере, как и календарь. Мировые новости вряд ли кто-то будет заходить читать именно к вам, для этого есть специальные порталы. Для чтения ленты тоже есть сервисы - следить за обновлениями любимых блогов на панели совершенно неудобно, к тому же этот гаджет занимает огромное место! Плюс ко всему, все эти вещи жутко тормозят загрузку страницы, что чревато потерей читателей, ведь не у всех есть скоростной интернет. Я уже не говорю о том, что такие панели выглядят неакуратно. Даже если на них и есть полезная информация, читатель ее просто не найдет за всем этим великолепием))) Потому оставляем только все самое нужное!

Созданные гаджеты можно перемещать во вкладке Дизайн.

И не забывайте про возможность размещения гаджетов внизу страницы, в нижнем колонтитуле блога - это очень удобно! У себя в блоге я добавила туда Архив блога и Ярлыки.

Где читать любимые блоги?
Судя по вашим вопросам, этого момента тоже стоит коснуться) Хотя я в этом понимаю не очень много, может кто-то из вас хочет дополнить эту тему в комментариях, буду рада.
В двух словах, существует множество сервисов для чтения блогов, на которые вы подписаны. В них все обновления видны в вашем личном кабинете, и вы можете читать там сообщения, отмечать прочитанные, и оттуда переходить в блоги для комментирования. Вот тут есть небольшой список таких сервисов: Популярные RSS-ридеры
После закрытия прошлым летом Гугл Ридера, которым почти все мы пользовались, большая часть моих знакомых перешла на Bloglovin. Это очень простой и понятный сервис, я и сама отдаю предпочтение именно ему. У него существует и мобильное приложение, что очень удобно для тех, что читает блоги с мобильных устройств.
Но я регистрировалась там еще до закрытия Ридера и мне удалось, нажав одну кнопку, автоматически перенести туда все свои подписки. Теперь я не знаю, возможно ли это. Подскажите, если кто знает? Я нашла только возможность вносить каждый блог отдельно.
Надеюсь, вы найдете время зарегистрироваться и разобраться. Поверьте, это стоит потраченного времени, ведь потом вы будете здорово его экономить, пользуясь удобными сервисами. :)

Размещение кликабельных картинок

Часто на панели нужно разместить картинку с активной ссылкой (например, на конфетку). Один способ мы с вами уже узнали на прошлом уроке. Это HTML код, который мы использовали для вкладок.

Есть и другой способ, более простой, но менее гибкий. Хотя, в некоторых случаях он может подойти. Добавляем на панель гаджет Изображение:

Добавляем новый гаджет, нажав на плюсик, видим такое окно:

Заполняем все пункты (Подпись - не обязательно). В поле Связать указываем страницу, на которую должна вести картинка.

Изображение можно загрузить с вашего компьютера или указать ссылку на него, если оно опубликовано в Интернет.

Если изображение загружено правильно, оно появится для просмотра:

{Девочки, у меня в поле Связать ошибка - два раза написано http:// - должно быть один раз! :)}
Если изображение большое, не забудьте поставить галочку Сжать до размера экрана.

Когда все готово, жмем Сохранить.

В блоге это выглядит так:

Список ссылок

На панель блога можно добавить ссылки на другие страницы. Так можно разместить те страницы, которые не попали в верхнее меню.

Для этого добавим гаджет Список ссылок:

В появившемся окне заполняем пункты Новое название сайта (так ссылка будет отображаться у нас на панели), вставляем URL.

Для увеличения количества ссылок, нажимаем Добавить ссылку.

Все добавленные ссылки отображаются ниже. Их можно редактировать (Edit), удалять (Delete) и менять их порядок, щелкая на стрелочки вверх и вниз.

После сохранения гаджета в блоге появляется вот такой список:

Вы спрашивали меня, можно ли заменить маркеры в этом списке. Я долго билась над этим вопросом и все-таки нашла ответ. :) Наверняка, есть и другие способы это сделать, но я нашла этот и мне он нравится.

Для начала выбираем картинку, которая станет маркером для нашего списка. Ее можно найти в интернете или сделать самому. Главное, чтобы она была совсем маленькая, не больше 16 х 16 пикселей.

Теперь пойдем в Шаблон -> Настроить -> Дополнительно -> Добавить CSS. Мы уже были там, когда центровали нашли вкладки. Вставляем туда следующий код:

ul {
    list-style:url("адрес изображения");
}

И применяем к блогу.

Затем идем в Дизайн и создаем новый гаджет HTML. Вносим туда такой код:

<div style="text-align: left;"><ul>

 <li><a href="адрес страницы">название страницы</a></li>
 <li><a href="адрес страницы-2">название страницы-2</a></li>
 <li><a href="адрес страницы-3">название страницы-3</a></li>
</ul></div>

Вставляем адреса страниц и их названия. Вы можете сделать сколько угодно ссылок, добавляя эту строчку:

<li><a href="адрес страницы">название страницы</a></li>

В результате вместо скучных ссылок с кружочками получается вот такая красота)))

Кнопки социальных сетей

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

У себя в блоге я разместила несколько кнопок слева под шапкой, мне кажется это место удачным:

Раньше такие кнопки были у меня на боковой панели:

Magda Mizera в одном из своих дизайнов разместила такие кнопки над шапкой.

Если у вас будет много кнопок, в несколько рядов они тоже могут смотреться красиво:

Как же создать такие кнопочки?

Есть несколько сайтов, где предлагается установить уже готовые кнопки.

Вот тут есть хорошая подробная инструкция к одному из них: Как вставить кнопки социальных сетей в Блоггере.

Это быстро и удобно, а главное, не нужно ничего рисовать самому. :) Но тогда кнопки будут выглядеть стандартно:

Это удобно для навигации, но не всегда подходит по стилю к блогу.

Есть и другие порталы с более необычными кнопочками, например этот:

39 наборов иконок

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

500 иконок

Здесь есть очень симпатичные варианты, и не только социальных сетей, но и изображений, которые можно использовать как вкладки или разделы блога.

Хорошо, если какой-то из вариантов кнопок соцсетей вам понравился или подошел. А что если ни один не подходит под ваш стиль и цветовую схему блога? Тогда можно стилизовать их на свой вкус!

Давайте попробуем. Скачаем понравившийся набор кнопок. Мне приглянулся этот:

Откроем одну кнопочку в Фотошопе.

Сначала поменяем цвет в соответствии со своей палитрой. Есть несколько способов это сделать:

1. Самый ленивый и топорный. :) Наверное, мастера Фотошопа сейчас покрутили бы пальцем у виска, но мы же не мастера Фотошопа. :) Поэтому открываем Image->Adjustments->Hue/Saturations

Двигаем бегунок Hue и наслаждаемся зрелищем того, как наша иконка меняет цвет. :)

Чтобы сделать ее светлее или темнее, поменяем значение параметра Lightness. 

Этот способ подойдет только если в вашей иконке один цвет.

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

Вот тут есть пошаговый мастер-класс использования инструмента Replace Color: Замена цвета.

Теперь ваша иконка нужного цвета.

Можно добавить ей теней или придать текстуру кистями. Я поставила на нее белую прозрачную кляксу кистью:

Сохраняем иконку в формате PNG, чтобы фон остался прозрачным:

Теперь создаем иконки всех сетей, которые нам нужны.

Когда все готово, поставим их на боковую панель (или в любое другое место).

Во вкладке Дизайн создадим новый гаджет HTML.

Скопируем туда такой код:

<a href="адрес страницы, куда ведет кнопка"><img src="адрес изображения кнопки" width="ширина кнопки в пикселях"/></a>

Ширину кнопок можно менять прямо в коде. Например, мои кнопочки оказались слишком большими и мне пришлось уменьшить каждую до 34 пикселей, чтобы они уместились в один ряд на панели.

Чтобы сделать кнопку почты нужен немного другой код:

<a href="mailto:ваш адрес электронной почты"><img title="mailto" src="адрес изображения кнопки" width="ширина кнопки в пикселах"/></a>

Нажимая на такую кнопку, посетитель сразу будет загружать форму для отправки письма вам на почту.

После того как мы заполнили все коды, добавим тег центровки. Это нужно чтобы наши кнопки красиво отображались посередине панели, а не съезжали влево. Перед самым первым кодом вставим тег: <center> А в конце последнего: </center> То есть выглядеть это должно так: <center>Все наши коды кнопок</center>

Сохраняем и проверяем. У меня получилось так:

Еще я попробовала поставить кнопки над шапкой, но мне в данном случае это показалось неудобным:

Как разместить что-то над шапкой можно почитать тут: Добавляем гаджет над заголовком.

Обязательно проверьте, чтобы все кнопочки работали и вели на правильные страницы. Если что-то не так, вернитесь и поверьте каждый знак - может вы что-то забыли скопировать или, наоборот, код содержит лишние знаки.

Я не стала описывать много способов создания соц-кнопок в Фотошопе. Как и с вкладками, вы сможете сделать свои уникальные кнопочки. После тех результатов, что я вижу в ваших блогах каждую неделю, в вашей фантазии я не сомневаюсь. :))

---

Я уже высказывала мнение: панели должны быть по максимуму разгружены. Чем меньше в них разной информации, тем проще посетителю найти нужную. К тому же, разноплановые гаджеты выбиваются из общего стиля, портят его.

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

Топ комментаторов

Как обычно идем в Дизайн->Добавить гаджет->HTML. Вставляем следующий код:

<script type="text/javascript"> 
function getYpipe(feed) { 
document.write('<ol>'); 
var i; 
for (i = 0; i < feed.count ; i++) 
{ 
var href = "'" + feed.value.items[i].link + "'"; 
if(feed.value.items[i].link == "") 
var item ="<li>" + feed.value.items[i].title + "</li>"; 
else 
var item = "<li>" + "<a href="+ href + '" target="_blank">' + feed.value.items[i].title + "</a> </li>"; 
document.write(item); 
} 
document.write('</ol>'); 
} 
</script> 
<script src="http://pipes.yahoo.com/pipes/pipe.run? 
YourBlogUrl=адрес вашего блога 
&ExcludedNick1=ник, который нужно исключить из списка (например, ваш) 
&ExcludedNick2=другой исключаемый ник (можно пропустить)
&ShowHowMany=количество комментаторов с списке 
&_callback=getYpipe 
&_id=23022d7836bf2dd3c10a329feb9be26a 
&_render=json" 
type="text/javascript"></script> 

Изменяем те места, что выделены курсивом. Сохраняем, у меня получилось так:

Честно говоря, не знаю, за какой период отображаются комментарии - может за последнюю неделю? Наверное, их количество обновляется по мере добавления.

Последние комментарии

Назначение этого гаджета лично мне не понятно)) Все комментарии из вашего блога ведь приходят к вам на почту. Но надо, значит надо)))

Не буду писать свой мануал, потому что нашла хороший готовый вот тут: Последние комментарии (2 варианта)

У меня по второму варианту (с небольшой корректировкой) получилось так:

---

Далее интересная информация о корректировке расположения гаджетов на панели.

Меня, как и некоторых из вас, давно интересовал вопрос об изменении расстояния между гаджетами. И я нашла такой вот интересный способ решить эту проблему) Немного странноватый, но работает! ))

Вот пример с моей панелью. Мне не нравилось расстояние между полями подписки и поиска:

Чтобы уменьшить расстояние между двумя гаджетами, нужно вставить между ними третий. :)) Добавляем новый гаджет HTML. И вписываем туда такой код:

 <div style='margin: -5px 0px -5px 0px'> </div>

Оба значения -5 можно менять в меньшую сторону для уменьшения расстояния. Например, чтобы добавиться нужного эффекта, мне пришлось поставить значения аж -20.

Сохраняем, вставляем между гаджетами и радуемся результату. :)

Домашнее задание

1. Создайте свой фото-профиль.

2. Продумайте расположение гаджетов на вашей панели (-ях). Проведите анализ тех, которые есть у вас сейчас - каждый ли из них вам нужен? Создайте и оформите те, которых не хватает.

3. Изначально я планировала восемь уроков по курсу, так как думала давать меньшее количество информации в одном уроке. Но с теми шагами, которые мы делаем каждую неделю, восьми уроков будем слишком много. Поэтому, уроков будет меньше. Если у вас есть что-то, что вы еще не узнали - напишите в комментариях, я постараюсь это учесть и дописать, пока есть время.

В своем посте дайте, пожалуйста, активную ссылку на пятый урок. Линки для добавления постов будут открыты до 12 марта 12:00 (по Москве). Следующий урок выйдет 13 марта.

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