Оформление гаджета поиск Google и других с использованием CSS

---

Здравствуйте друзья. У многих вебмастеров в блогах на платформе blogspot вижу установлены гаджеты Google поиск в блоге, статистики и др. Все правильно, для безопасности лучше использовать родные гаджеты, чем сторонние скрипты.

Только вот не всегда они вписываются в дизайн блогов, и сегодня тема статьи об оформлении гаджетов поиск в блоге, статистики, последних сообщений, списка ссылок и меню "страницы" с использованием CSS.

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

Хочу предложить еще вариант оформления меню для сайдбара, используя гаджет "страницы" 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

Для виджета статистики

#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;

Рекомендуемый контент: