Оформление гаджета Опрос Blogger в индивидуальном стиле



Оригинальное оформление родного гаджета создать Опрос

Здравствуйте гости и читатели моего блога. Сегодня будем оформлять на свой вкус и цвет родной гаджет Google-Создать Опрос. Отвлекусь немного от темы: настоятельно Вам советую, если есть возможность пользоваться родными гаджетами Google, непременно воспользуйтесь этим и вот почему.

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

Я тоже не большой специалист в HTML кодах, но для своих читателей стараюсь по возможности удалять все лишние ссылки. Так же как и все, напихала в шаблон разных красивостей, а когда проверила свой блог на битые ссылки, у меня наступил шок. Две недели мне понадобилось, чтобы очистить свой блог. Ссылок было полно в основном в теле шаблона. Что значат битые ссылки в блоге, читайте в моем посте как найти и исправить битые ссылки в блоге.

Это еще повезло, что ссылки без вирусов, а так даже не хочу и думать, что могло бы быть. А теперь давайте вернемся к нашей теме, и я расскажу как можно оформить гаджет опрос с использованием стилей CSS.

Для начала давайте добавим гаджет опрос в макет блога. В дизайне нажимаем добавить гаджет, находим Опрос

Как добавить и настроить гаджет Опрос

Создаете нужный опрос, нажимаете сохранить. Далее в черновике blogger нажимаем шаблон. Обязательно делаем резервную копию шаблона. Далее нажимаем изменить шаблон и рядом с первой стрелкой находим строку <b:skin>...</b:skin>

Нажимаем на стрелку, прокручиваем не спеша вниз и выше строки ]]></b:skin вставляем код CSS, который Вы видите ниже

/* Sidebar Content */
#Poll1{
background:#03b4cc;
border:2px dotted #ffffff;
width:auto;
padding:0 10px;
}

#Poll1 h2{
text-align:center;
font-size:11px;
color:#ffffff;
font-family:arial;
font-weight:bold;
}

При настройке возникнут небольшие неудобства. При просмотре в шаблоне блога, содержание гаджета не будет отображаться при соединении. Поэтому придется настраивать в "темную". Но окантовку рамки и фон Вы видеть будете.

Выделенное красным-ID гаджета Опрос. Если будете создавать несколько опросов, то ID будет такой: Poll2, Poll3 и.т.д; синим-фон гаджета; оранжевым-форма, цвет и размер границы рамки; голубым-ширина гаджета. У меня настроено на автоматическую ширину, но Вы можете регулировать ширину своего виджета, измените auto на 150px к примеру; 

Вторая часть-это настройка заголовка гаджета. Потребуется в том случае, если захотите, чтобы заголовок опроса отличался от заголовков других гаджетов. Выделенное фиолетовым-текст выровнен по центру, размер шрифта 11 рх, цвет белый; лиловым-семейство шрифтов Arial жирный.

А теперь смотрим, что мы можем получить 

Как изменить фон, настроить границы и изменить размер шрифта заголовка гаджета

Сами понимаете, на скриншотах вид не всегда впечатляет, я всего лишь хочу показать, как можно красиво изменить гаджет.

Вместо цветового фона можно вставить картинку, тогда получим гаджет в таком оформлении:

Как вместо цветового фона оформить фон гаджета картинкой

В коде вместо background:#03b4cc; вставьте background:url (адрес изображения);
Остальные настройки те же, что и в первом варианте.

Вот пока и все. Оформляйте, пишите отзывы, не забывайте делиться с друзьями и знакомыми в социальных сетях. Всем всего Доброго, до новых встреч.

Почитайте по теме: как самостоятельно создать и красиво оформить простое меню для блога; как сделать фон изображения прозрачным; как скопировать не копируемый код


Автор статьи ✎ Olga Protasova Выпуск ✹ 7/08/2014 Ярлыки ►


Открыть комментарии →

2 коммент. :

  1. Оля, привет.Очень красивая форма получилась. Я никак не могу до неё добраться. Пока не знаю куда и какую ставить. Столько всего можно. кто бы времени добавил. Кстати очень лёгкая форма получается. А битые ссылки-проверять только успевай.

    ОтветитьУдалить
    Ответы
    1. Здравствуй Вика. А прямо сейчас возьми и создай опрос, не откладывай на потом. Времени нам всем катастрофически не хватает-это факт. Что касается битых ссылок, только избавилась от них. Вчера проверяла-по нулям в обоих блогах. Но проверять надо чаще, согласна с тобой.

      Удалить


 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *