Здравствуйте друзья. У многих вебмастеров в блогах на платформе blogspot вижу установлены гаджеты Google поиск в блоге, статистики и др. Все правильно, для безопасности лучше использовать родные гаджеты, чем сторонние скрипты.
Только вот не всегда они вписываются в дизайн блогов, и сегодня тема статьи об оформлении гаджетов поиск в блоге, статистики, последних сообщений, списка ссылок и меню "страницы" с использованием CSS.
Только вот не всегда они вписываются в дизайн блогов, и сегодня тема статьи об оформлении гаджетов поиск в блоге, статистики, последних сообщений, списка ссылок и меню "страницы" с использованием CSS.
О гаджетах страницы (меню) и статистики я уже писала в постах Как самостоятельно создать и красиво оформить простое меню для блога и Как красиво оформить стиль нижнего колонтитула в блоге Blogspot.
Хочу предложить еще вариант оформления меню для сайдбара, используя гаджет "страницы" PageList. Переходим по вкладке шаблон. Делаем резервную копию шаблона, нажимаем изменить. В шаблоне раскрываем самую первую стрелку слева и выше строки ]]><b:skin> вставляем стиль CSS.
Хочу предложить еще вариант оформления меню для сайдбара, используя гаджет "страницы" PageList. Переходим по вкладке шаблон. Делаем резервную копию шаблона, нажимаем изменить. В шаблоне раскрываем самую первую стрелку слева и выше строки ]]><b:skin> вставляем стиль CSS.
#PageList1 ul{padding-left:0}#PageList1 ul li{background:#FFF url(https://1.bp.blogspot.com/_7wsQzULWIwo/SmodosCuJCI/AAAAAAAABh4/ZSXbVW9Qpa8/s400/261.gif) no-repeat scroll 5px 10px;list-style-type:none;margin:0 0 5px;padding:5px 5px 5px 20px !important;border:1px solid #ddd;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px}#PageList1 ul li:hover{border:1px solid #6BB5FF}#PageList1 ul li a:hover{text-decoration:none}
Для виджета Список ссылок, измените PageList на LinkList 1 или 2, смотрите ID виджета.
CSS для последних пяти опубликованных сообщений
#Feed1 ul{padding-left:0}#Feed1 ul li{background:#FFF url(http://1.bp.blogspot.com/_7wsQzULWIwo/SmodosCuJCI/AAAAAAAABh4/ZSXbVW9Qpa8/s400/261.gif) no-repeat scroll 5px 10px;list-style-type:none;margin:0 0 5px;padding:5px 5px 5px 20px !important;border:1px solid #ddd;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px}#Feed1 ul li:hover{border:1px solid #6BB5FF}#Feed1 ul li a:hover{text-decoration:none}
Пример в этом блоге, гаджеты "полезные ссылки блога" и "новые публикации". Как установить гаджет последних пяти сообщений, читайте в статье Родной гаджет Google-Канал для комментариев и новых постов.
Захотите изменить цвет фона, размер и цвет границ рамки и другое, читайте в статье Оформление гаджета Google Популярные сообщения с использованием CSS. В коде я изменила только название гаджета и точку на решетку.
Захотите изменить цвет фона, размер и цвет границ рамки и другое, читайте в статье Оформление гаджета Google Популярные сообщения с использованием CSS. В коде я изменила только название гаджета и точку на решетку.
Оформление гаджетов поиск в блоге и статистики, пример на скриншоте или живой в демо блоге, виджет статистики внизу страницы.
Оформление гаджетов Google с использованим CSS |
Для виджета статистики
#Stats1 { background:#141414; border:10px double #00688b;border-radius:10px;}
Измените фон, форму, размер и цвет окантовки рамки и радиус закругления углов. Чтобы корректно настроить, особенно цвет цифр и трафика, используйте одновременно настройку в дизайне изменить гаджет.
Для гаджета Поиск в блоге
#BlogSearch1{
padding:12px;
background:#141414;
border:10px double #00b27d;
border-radius:5px;}
В CSS для поиска обратите внимание на значение padding:12px;. Это положение самого окна на фоне сверху и снизу.
И еще одно: заголовок в обоих виджетах поиска и статистики будет на фоне. Мне не очень нравится, поэтому не пишите заголовок. Оформить цвет и размер шрифта заголовка читайте в статье как красиво оформить стиль нижнего колонтитула, по ссылке выше. При необходимости добавьте нужные значения CSS.
Все вопросы по оформлению задавайте в комментариях или контактная форма для связи. Я не знаю, что еще добавить, чтобы было понятно. Будем разбирать индивидуально.
На этом закончу. Поделитесь информацией со своими друзьями в социальных сетях, спасибо и всего доброго.
Предыдущий пост: Удалить или подписаться читать блог в панели инструментов blogger; Так же посмотрите Простое горизонтальное выпадающее меню для блогов blogspot;
Предыдущий пост: Удалить или подписаться читать блог в панели инструментов blogger; Так же посмотрите Простое горизонтальное выпадающее меню для блогов blogspot;
Рекомендуемый контент: