вторник, 10 мая 2011 г.

Гаджетом по виджету или работаем над дизайном блога

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


Итак что есть "гаджет"? Вообще-то считается, что гаджет это устройство, выполняющее ограниченный круг задач. В нашем случае будем считать, что это некая программулька (модуль), который призван облегчить жизнь.
В Bloggere так получается, что гаджеты являются составляющей частью дизайнерского решения, именно они помогают формировать дизайн блога.
Сегодня мы рассмотрим как установить необходимые гаджеты на наш блог, для того, чтобы  читателю было более комфортно, а нам видно, настолько востребован наш ресурс. И как поменять структура нашего блога, чтобы все гаджеты в него "вписались".
Итак, выбираем пункт меню "Дизайн" и видим следующую картинку:
 Т.е. находимся на владке "Элементы страницы" и видим структуру блога.
В самом верху отображается название Вашего блога, оно же дублируется чуть ниже гаджета "Панель навигации".
В данном случае используется двухполосный дизайн, т.е. окно разбито на две части. Это не очень удобно, с моей точки зрения, и чуть позже мы это изменим.
Итак рассматривая структуру нашего блога мы видим, что весь он состоит из неких элементов - гаджетов. Т.е. каждый гаджет, который мы визуально видим на схеме как прямоугольник, отвечает за ту или иную задачу. Например, гаджет, где размещено название блога позволяет не только разместить текстовый элемент, но и графический фрагмент (фото, картинка).
Если щелкнуть по слову "Изменить", то в появившейся форме можно изменить текст или добавить изображение.
Причем картинку можно поставить после названия и описания (если сочтете нужным делать описание), так и вместо названия. Красивую картинку вместо текстового заголовка мы поучимся делать позднее (для этого нужно будет установить редактор GIMP или Adobe Photoshop), а пока просто внесем название создаваемого блога. Нажмем кнопку "Сохранить".
Вернувшись к структуре блога найдем ссылку "Добавить гаджет" и нажмем на нее.
Перед нами появится список гаджетов, которые мы можем использовать на своем блоге.
Установим только самые необходимые. Начнем с гаджета "Окно поиска". Выбрав этот гаджет из списка, нажмем кнопку "+".
Не трогая "галочки", изменю фразу "Поиск по этому блогу" на краткое "Поиск". Хотя можно оставить и исходный вариант, нажимаем кнопку сохранить. В структуре нашего блога появился гаджет "Поиск".
Если Вы нажмете кнопку "Просмотр"
то увидите свой блог в режиме просмотра в новом окне браузера (IE, Opera и т.д.).
Т.е. на Вашем блоге пользователи смогут осуществить поиск. А Вам нужно будет закрыть окно просмотра и вернуться к работе над блогом. (В окне просмотра все кнопки блога неактивны!!!).
Снова нажмем кнопку "Добавить гаджет" и добавим по очереди гаджеты "Популярные сообщения", "Статистика""Страницы", "Постоянные читатели" (если не добавлены), "Blog List", ""Ярлыки".
Гаджет "Статистика" позволяет Вам увидеть сколько человек посетили Ваш блог (позднее мы попробуем с Вами поставить более сложный счетчик), гаджет "Постоянные читатели" позволит Вам сформировать и видеть (что еще важнее) тех, кто постоянно читает Ваш блог. Гаджет "Страницы" нужен нам для стилизации блога под сайт. Т.е. он позволит дальше сформировать верхнее горизонтальное, либо вертикальное меню с веб-страницами. А гаджет "Blogl List" позволит сформировать список блогов (и других интернет-ресурсов), который будет автоматически обновляться по мере выхода новых сообщений (постов публикаций), а гаджет "Ярлыки" позволит сформировать рубрики Вашего блога.
Итак еще раз вместе, установим гаджет в наш блог.
Нажимаем кнопку "Добавить гаджет", выбираем гаджет "Blog List", в появившейся форме
меняем название по желанию, например "Полезные ресурсы" или "Список чтения", оставляем галочки "Заголовок" и "Дата последнего обновления".
Находим ссылку "Добавить блог в список" в появившемся окне добавляем интересную ссылку, нажимаем кнопку "Добавить".
Ссылка должна появиться в списке "Blog List", далее нажимаем кнопку "Добавить в список" и добавляем новые интернет-ресурсы.
Если у Вас возникают проблемы с добавлением гаджетов, то посмотрите, с каким браузером Вы работаете.
Т.к. Blogger - детище Google, достаточно комфортно работать с блогами в браузере Mozilla Firefox.

Итак, мы с Вами установили все гаджеты в наш блог.
Давайте внимательно посмотрим, в какой последовательности они установились и насколько удобно для пользователя.
Например, гаджет "Статистика"лучше ставить последним в самом низу блога (в моем случае слева), а гаджет "Поиск", удобно, если будет в самом низу (в данном случае тоже слева).
Как передвинуть? Очень просто - подводите мышку, нажимаете левую кнопочку и тянете в то место, где должен находится гаджет.
А вот гаджет "Страницы", оптимально установить над "Сообщения блога", а гаджет "Популярные сообщения", т.к. он содержит много текста лучше всего "перетащить" и установить чуть ниже "Сообщения блога", вот как-то так:
Т.е. когда мы создадим страницы, они будут у нас в виде меню сверху, а чуть ниже каждого сообщения будет видно, какие сообщения наиболее читаемые.
Гаджетов в Blogger очень много, можно попробовать и установить много и разных, но всегда нужно помнить:
- чем больше гаджетов - тем тяжелее и дольше загружается блог (а не у всех есть высокоскоростной интернет), это относится к гаджетам, которые "крутят" слайд-шоу и видео, демонстрируют картинки и флеш-элементы;
- не у всех безлимитные тарифы.
Поэтому, поберегите время и средства Ваших читателей и используйте только необходимый набор гаджетов. Если загрузили много всего - посмотрите на компьютере, где нет "быстрого интернета", и если Ваш блог очень долго  загружается - уберите лишнее.

Возвращаясь к структуре блога. Честно говоря, я не люблю двухполосный дизайн, он хорош только тогда, когда Вы очень много пишете текста. Поэтому для тех, у кого будет много информации в гаджетах, лучше попробовать использовать трехполосную структуру блога.
Для этого перейдите на соседнюю владку "Дизайнер шаблонов" -
 и в появившемся окне, найдите ссылку "Дизайн" и щелкните по ней.
В появившемся окне щелкаем по значку, в котором изображено три колонки. Снизу в окне просмотра Вы увидите происходящие изменения.
 Все устраивает? Обязательно нажимаем кнопку "Применить к блогу".
Теперь у нас блог, в котором три колонки.
Нажимаем ссылку "Вернуться назад в Blogger", а затем еще раз просматриваем блог.

Итак, мы с Вами научились использовать гаджеты для формирования  внешнего вида и удобства читателей блога.
Но для того, чтобы они все заработали (например, гаджет "Страницы" и "Ярлыки") нам с Вами еще придется позаниматься. Но об этом - в следующем посте.

17 комментариев:

  1. Большое спасибо за продолжение уроков по составлению блогов! Очень нужная информация.

    ОтветитьУдалить
  2. Спасибо за уроки! Надеюсь, что сможем освоить библиоблоггерство.

    ОтветитьУдалить
  3. Даже не сомневаюсь, что сможете освоить :-)

    ОтветитьУдалить
  4. Уважаемая Пчелка, я в восторге от Вашего блога! Вы такая умница! Спасибо Вам за обучалки. Пытаюсь делать первые шаги по созданию собственного блога, пока очень робкие. Не могу понять, как сделать верхнюю панель, где у Вас располагается Главная страница, Интерне-акции и др. Помогите!

    ОтветитьУдалить
    Ответы
    1. Lidiy, вот в этом посте я рассказывала, как сделать горизонтальное меню - http://beeblioteka.blogspot.com/2011/05/blog-post_28.html

      Удалить
  5. Здравсвуйте, Людмила! Я - начинающий блоггер, поэтому у меня куча вопросов возникает. У вас в БИБЛИОПЧЁЛКЕ в самом начале стоит чудесная ссылка на календарь в виде баннера. Я пробовала копировать этот баннер на их сайте и вставлять себе и в виде ссылок, и сообщения, но баннер не выходит.

    ОтветитьУдалить
    Ответы
    1. BiblioTuimazi, нужно скопировать код ссылки со странички - http://www.kalen-dar.ru/banners
      Затем перейти в вкладку "Дизайн", выбрать "Добавить гаджет", далее "HTML" и скопировать код.
      Затем появившийся в "Дизайне" гаджет переместить на то место (перетянуть), где он должен находится.

      Удалить
  6. Спасибо, что не оставили мою просьбу без внимания, но к сожалению я не могу понять как открыть окно "Виртуальная правовая справка".

    ОтветитьУдалить
  7. Lidiy, а ссылочку можно на окно?

    ОтветитьУдалить
  8. Я имела ввиду пост который вы мне прислали http://beeblioteka.blogspot.com/2011/05/blog-post_28.html

    ОтветитьУдалить
    Ответы
    1. "Виртуальная правовая справка" - это название тестового блога, с помощью которого был сделан урок.
      У Вас будет название Вашего блога.

      1. Заходим в свой блог под своим логином и паролем. Переходим в вкладку "Дизайн"

      и выбираем команду "Добавить гаджет".
      2. Находим гаджет "Страницы" и выбираем его.
      3. Убираем слово "Страницы" из поля появившейся формы.
      4. Перемещаем гаджет чуть ниже поля "Заголовок"

      5. Переходим на вкладку "Отправка" команда "Изменить страницы" (если будет сообщение "Покинуть страницу?", ответьте "Да"). И нажимаем на кнопку "Создать страницу".
      6. В появившейся форме вносим название и заполняем содержание. Правила те же, что и при создании новых сообщений (постов).
      Можно пойти и другим путем. Сначала перейти на вкладку на вкладку "Отправка", выбрать команду "Изменить страницы", команду "Создать страницу" и внести название и содержание. Умный блоггер спросит "Как должен отображаться гаджет "Страницы?" и если Вы маскируетесь "под сайт", то выберите пункт "Вкладки блогов".

      Удалить
  9. Очень понравился ваш урок. Я начинающий блогер и мне ваш урок очень полезен. Скажите, пожалуйста, где можно скачать HTML-код для движущегося земного шара, такой как у вас на страничке?

    ОтветитьУдалить
    Ответы
    1. Ирина, спасибо за Ваш комментарий. Для того, чтобы в Вашем блоге появился земной шар, нужно перейти по ссылке - http://www.revolvermaps.com/, выбрать понравившееся: стандартный вариант (Get Standard Version), изображение меньшего размера (Get Mini Globe), карту (Get Plain Map) или кнопку (Get Button).
      Вы можете выбрать дизайн и скопировать код в окошке "Copy The Code To Your Site".
      Останется добавить этот код в Ваш блог.
      Успехов!

      Удалить

  10. Добрый день!Спасибо за советы. Попробую воспользоваться некоторыми.
    Вы делаете доброе дело!

    ОтветитьУдалить
    Ответы
    1. Светлана Михайловна, рада, что мои советы оказались Вам полезны.
      Blogger, к сожалению, поменял интерфейс и это создает трудности для начинающих блогеров, которые учатся по моим урокам.
      Надеюсь, в ближайшие пару недель, я смогу доработать несколько новых презентаций, адаптированных под сегодняшний вид Bloggera

      Удалить
  11. скажите как в заголовок синего цвета вставить цветную картинку, а с ютуба в блог скопировать видео

    ОтветитьУдалить
  12. Бібліобджілка, об этом я писала в постах:
    - "Уроки блоггинга. Добавляем видео с YouTube в пост" http://beeblioteka.blogspot.ru/2011/08/youtube.html ;
    - "Ох нелегкая это работа, или создаем графическое изображение для заголовка блога" http://beeblioteka.blogspot.ru/2011/11/blog-post_08.html

    Правда, было это в далеком 2011-м и могло измениться...

    ОтветитьУдалить

Спасибо за комментарий!