Эта статья подробно расскажет и покажет, как изменить дизайн гаджета "Страницы" с помощью 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;
}
Итог применения стиля из примера будет таким: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;
}
Рис. 1 Положение в боковой колонке
Рис. 2 Положение горизонтально
#PageList1 > h2 {
display: none;
}
display: none;
}
Вот и пожалуй и все что я хотел поведать относительно этого замечательного гаджета. Читайте дальше и узнаете еще много интересного о возможностях CSS в Blogger! :)
Дальше по теме
Буду рад вашим комментариям :)
Офигенно давно искал как это сделать. И фон можно залить свой да?
ОтветитьУдалитьТаки да :) Вместо цвета фона, указываете ссылку на желаемое, соответствующие изображение.
Удалитьа можно ли сделать из стандартного горизонтального меню выпадающие вкладки?или всплывающий текст при наведении ?
ОтветитьУдалитьспасибо =)
С гаджетом "Страницы" это проделать проблематично, даже невозможно , проще поставить обычное выпадающие меню в гаджет HTML/JavaScript и вытворять с ним уже чего душе угодно.
УдалитьСкажите пожлста, а есть ли способ установить такой гаджет не под названием блога, а над сообщениями?
ОтветитьУдалитьhttp://www.magentawave.com/2012/02/add-gadget-over-header.html
УдалитьТакой вопросик, нужен переключатель страниц в блогере. Но его нужно сделать на других страницах. Можно ли это сделать. Или это нужно переделывать ихний скрипт?
ОтветитьУдалитьА теперь еще раз, и поподробнее.
Удалить1. Что значит переключатель страниц?
2 Чтобы "на других страницах" воспользуйтесь стандартными условными тегами http://www.magentawave.com/2012/10/most-popular-conditions-tags.html
3. Насчет "переделывать ихний скрипт" тоже не совсем понял.
Здравствуйте!
ОтветитьУдалить1. Ну как на главной странице блога, внизу следующее сообщение, или вперед-назад. Но мне интересно можно ли это сделать также на других страницах, (также как и на главной)? Чтобы добавлять сообщения на другие страницы.
3. А скрипт блогера можно переделывать, или он закрыт?
Спасибо!)
Так, постраничная навигация и так есть в сообщениях, просто она расположена ниже комментариев. И на какие, "другие" страницы вы хотели бы добавлять сообщения, есть посты - сообщения блога, и есть статичные страницы, на них этого переключения нет, так как это типа отдельные, не связанные с блогом страницы, Что касается переделывать, то вы можете ковырнуть непосредственно код шаблона, а также углубится в дебри с помощью Blogger API
УдалитьЗдравствуйте, Саша!
ОтветитьУдалитьПодскажите пожалуйста, как изменить дизайн гаджета "Список ссылок" с помощью CSS?
Здравствуйте, гаджет "Список ссылок" имеет идентификатор - #LinkList1 и селектор - .LinkList1 соответственно и состоит из обычного списка, который строится по средствам HTML-тегов <UL> и <LI>. То есть для всего блока вы можете использовать запись CSS свойств для:
Удалить#LinkList1 ul {
.....
}
Для пункта (блока) с ссылкой :
#LinkList1 ul li {
.....
}
Для самой ссылки в списке :
#LinkList1 ul li a {
.....
}
А как теперь в "Список ссылок" вносить подпункты? Раньше я для подпункта перед названием ставил знак -.
УдалитьТаким вопросом не задавался, да и не использую этот гаджет, мне легче самому написать то что мне надо и разместить в HTML/JS гаджете.
Удалитьа скажите, пожалуйста, как вставить картинку вместо названия страницы? Я вот сделала кнопочки в ФШ, а как вставить не пойму.. и как сделать, чтобы на отдельную страницу была своя кнопка? Заранее спасибо!
ОтветитьУдалитьНа разные страницы, разная кнопка - это только с помощью JS. А чтобы картинку, так это в CSS свойство background - вместо цвета используйте изображение.
УдалитьЗдравствуйте! Подскажите, как все вкладки страниц расположить по центру блога (в горизонтальном расположении).
ОтветитьУдалитьНе совсем понял вопрос. В чем трудность заключается?
УдалитьЗдравствуйте! Спасибо за статью. Очень важно уметь использовать стандартные шаблоны. Но есть небольшая просьба) Объясните пожалуйста как установить этот код как если бы Вы объясняли пятикласснику) Я не пятиклассник но понять как устанавливать и что заменять не понял)
ОтветитьУдалитьВсе понял. Вопрос снимается. Спасибо огромное.
ОтветитьУдалитьСтатья конечно интересная но - к сожалению из за важных моментов, что вы за комментировали - статья для так сказать чайников совершенно бесполезна.
ОтветитьУдалитьНа тот момент ее и писал чайник. Что не понятно спрашивайте.
Удалить