Как изменить гаджет "Страницы" в Blogger(Blogspot)

  В Blogger, кроме сообщений - постов блога, есть возможность добавить до 20-ти отдельных страниц. Они не относятся непосредственно к блогу, но являются частью сайта в целом. Чтобы показать посетителям что они есть, в Blogger существует стандартный гаджет "Страницы", его внешний вид можно легко подкорректировать используя дизайнер шаблонов, а также если для него самостоятельно добавить CSS свойства.
  Эта статья подробно расскажет и покажет, как изменить дизайн гаджета "Страницы" с помощью CSS.
  В стандартном шаблоне данный виджет имеет идентификатор #PageList1, именно его и следует использовать для записи свойств CSS. Его структура - обычный HTML список, как и у большинства стандартных меню.
  Для того чтобы выделить пункт с ссылкой текущей страницы, к секции списка <li>, автоматически добавляется дополнительный класс - .selected, который также можно использовать в оформлении.
  Ниже представлен шаблон кода CSS, свойства добавлены по минимуму, только для примера, важные моменты закомментированы.
#PageList1 {
 background: #999;
 border-radius: 5px;
 border: 3px solid #ccc;
 text-align: center; /*выравнивание текста, заголовок и названия*/
 padding: 5px;
}
/*обязательно обнуляем все стили для блока*/
#PageList1 ul {
 background: none;
 list-style: none;
 border: 0;
 padding: 0;
 margin: 0;
}
#PageList1 li a {
 display: block; /*указываем ссылку как блочный элемент, чтобы заняла всю площадь родителя*/
 background: #666;
 border: 3px solid #fff;
 border-radius: 5px;
 font: normal bold 14px Tahoma;
 color: #fff;
 text-decoration: none;
 padding: 10px;
 margin: 3px 5px;
/*
если используются изображения для кнопок,
то в значениях высоты и ширины следует указать
соответствующие параметры картинки
*/

 height: auto; /*высота*/
 width: auto; /*ширина*/
}
/*стиль при наведении курсора*/
#PageList1 li a:hover {
 background: #C0C0C0;
 color: #000;
}
/*стиль для ссылки текущей страницы*/
#PageList1 li.selected a {
 background: #eee;
 border: 3px solid #666;
 color: #000;
}
  Итог применения стиля из примера будет таким:
Скриншот измененного гаджета "Страницы" Blogger
Рис. 1 Положение в боковой колонке
Скриншот измененного гаджета "Страницы" Blogger
Рис. 2 Положение горизонтально
  Чтобы отдельно оформить заголовок гаджета "Страницы", как и для других гаджетов блога, можно использовать такую запись селектора: #PageList1 > h2. Чтобы скрыть его просто укажите это через CSS:
#PageList1 > h2 {
 display: none;
}

  Вот и пожалуй и все что я хотел поведать относительно этого замечательного гаджета. Читайте дальше и узнаете еще много интересного о возможностях CSS в Blogger! :)

Дальше по теме

Буду рад вашим комментариям :)

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

  1. Офигенно давно искал как это сделать. И фон можно залить свой да?

    ОтветитьУдалить
    Ответы
    1. Таки да :) Вместо цвета фона, указываете ссылку на желаемое, соответствующие изображение.

      Удалить
  2. а можно ли сделать из стандартного горизонтального меню выпадающие вкладки?или всплывающий текст при наведении ?
    спасибо =)

    ОтветитьУдалить
    Ответы
    1. С гаджетом "Страницы" это проделать проблематично, даже невозможно , проще поставить обычное выпадающие меню в гаджет HTML/JavaScript и вытворять с ним уже чего душе угодно.

      Удалить
  3. Скажите пожлста, а есть ли способ установить такой гаджет не под названием блога, а над сообщениями?

    ОтветитьУдалить
    Ответы
    1. http://www.magentawave.com/2012/02/add-gadget-over-header.html

      Удалить
  4. Такой вопросик, нужен переключатель страниц в блогере. Но его нужно сделать на других страницах. Можно ли это сделать. Или это нужно переделывать ихний скрипт?

    ОтветитьУдалить
    Ответы
    1. А теперь еще раз, и поподробнее.
      1. Что значит переключатель страниц?
      2 Чтобы "на других страницах" воспользуйтесь стандартными условными тегами http://www.magentawave.com/2012/10/most-popular-conditions-tags.html
      3. Насчет "переделывать ихний скрипт" тоже не совсем понял.

      Удалить
  5. Здравствуйте!

    1. Ну как на главной странице блога, внизу следующее сообщение, или вперед-назад. Но мне интересно можно ли это сделать также на других страницах, (также как и на главной)? Чтобы добавлять сообщения на другие страницы.
    3. А скрипт блогера можно переделывать, или он закрыт?

    Спасибо!)

    ОтветитьУдалить
    Ответы
    1. Так, постраничная навигация и так есть в сообщениях, просто она расположена ниже комментариев. И на какие, "другие" страницы вы хотели бы добавлять сообщения, есть посты - сообщения блога, и есть статичные страницы, на них этого переключения нет, так как это типа отдельные, не связанные с блогом страницы, Что касается переделывать, то вы можете ковырнуть непосредственно код шаблона, а также углубится в дебри с помощью Blogger API

      Удалить
  6. Здравствуйте, Саша!
    Подскажите пожалуйста, как изменить дизайн гаджета "Список ссылок" с помощью CSS?

    ОтветитьУдалить
    Ответы
    1. Здравствуйте, гаджет "Список ссылок" имеет идентификатор - #LinkList1 и селектор - .LinkList1 соответственно и состоит из обычного списка, который строится по средствам HTML-тегов <UL> и <LI>. То есть для всего блока вы можете использовать запись CSS свойств для:
      #LinkList1 ul {
      .....
      }
      Для пункта (блока) с ссылкой :
      #LinkList1 ul li {
      .....
      }
      Для самой ссылки в списке :
      #LinkList1 ul li a {
      .....
      }

      Удалить
    2. А как теперь в "Список ссылок" вносить подпункты? Раньше я для подпункта перед названием ставил знак -.

      Удалить
    3. Таким вопросом не задавался, да и не использую этот гаджет, мне легче самому написать то что мне надо и разместить в HTML/JS гаджете.

      Удалить
  7. а скажите, пожалуйста, как вставить картинку вместо названия страницы? Я вот сделала кнопочки в ФШ, а как вставить не пойму.. и как сделать, чтобы на отдельную страницу была своя кнопка? Заранее спасибо!

    ОтветитьУдалить
    Ответы
    1. На разные страницы, разная кнопка - это только с помощью JS. А чтобы картинку, так это в CSS свойство background - вместо цвета используйте изображение.

      Удалить
  8. Здравствуйте! Подскажите, как все вкладки страниц расположить по центру блога (в горизонтальном расположении).

    ОтветитьУдалить
    Ответы
    1. Не совсем понял вопрос. В чем трудность заключается?

      Удалить
  9. Здравствуйте! Спасибо за статью. Очень важно уметь использовать стандартные шаблоны. Но есть небольшая просьба) Объясните пожалуйста как установить этот код как если бы Вы объясняли пятикласснику) Я не пятиклассник но понять как устанавливать и что заменять не понял)

    ОтветитьУдалить
  10. Все понял. Вопрос снимается. Спасибо огромное.

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

Следующее Предыдущее

BestProject