Изображения для заголовков виджета



Здравствуйте гости, друзья и читатели блога. На этой странице подборка картинок для заголовков виджетов. В блоге я уже писала Как оформить заголовок виджета фоновым цветом. В статье информация оформления заголовка фоновым цветом. Для оформления заголовка изображением можно использовать код, данный в статье, только вместо цвета фона вставить адрес картинки.

.sidebar .widget h2 {
background-image:url(адрес картинки);
height:25px;
width: 225px;
margin-left: 0px;
padding-top:7px;
font-size: 12px;
text-align: center;
}
Шаблоны у всех разные, поэтому придется настраивать параметры картинок. Обращайте внимание на заданную в шаблоне ширину сайдбара. При необходимости увеличьте высоту заголовка. Для настройки названия заголовка (текста) выделено сиреневым. При тестировании приходилось подгонять почти во всех шаблонах моих тестовых блогов. Но думаю Вы справитесь. Можно посмотреть в тестовом блоге, как смотрится картинка-заголовок.

В шаблон-изменить шаблон найдите между строками <b:skin>...</b:skin> sidebar .widget h2 { и можно просто вставить одну строку background-image:url(адрес картинки);. Если изображение заголовка не корректно отображается, вставляйте другие параметры.

Кому затруднительно таким способом настроить, копируйте код и вставляйте выше строки ]]></b:skin>. Как найти в шаблоне такую строку, читайте в статье Как быстро и красиво оформить текст в блоге. Не забывайте делать резервную копию шаблона.


http://3.bp.blogspot.com/-W8NmwOYDqew/T-JI_0h7ylI/AAAAAAAADjM/vO6X50YSMuw/s1600/h2.jpg


http://3.bp.blogspot.com/-vwqDitxvsG0/TybFV0wfeeI/AAAAAAAACtA/BnGTkqGgC4Y/s1600/h2.png


http://2.bp.blogspot.com/-9zov1IAPpeo/TuNTq8ndD_I/AAAAAAAABxk/68HabfUliTw/s1600/h2bg.png


http://2.bp.blogspot.com/-YyV7Y7Rlq5Q/T2Xqv4czhvI/AAAAAAAAGqk/p0vmrx96Ob4/s1600/h2.png


http://4.bp.blogspot.com/-qRhOIK8BxgY/TvNc93577oI/AAAAAAAAA2s/IuVqwW_Oo0E/s1600/h2.png

http://1.bp.blogspot.com/-Vz-irI_xg9I/T9Ibqn_y1VI/AAAAAAAAC7k/tNouziv02M0/s1600/h2.png

http://1.bp.blogspot.com/-5K_FP57h6ro/TvIO8y5NAII/AAAAAAAAA04/tm74Bo_fmng/s1600/h2.png


http://1.bp.blogspot.com/-39g07LtvqoA/T8uZwiJpr_I/AAAAAAAACwk/LQTHcvpkK_0/s1600/h2.png


http://2.bp.blogspot.com/-JTdcP4_6JAI/TsI4HcwUG4I/AAAAAAAABm8/zDmDzR1ImIQ/s1600/h2bg.png


http://1.bp.blogspot.com/-mGmaILT1mG0/T9pnnDoYE7I/AAAAAAAADSk/sU1vAFuu3pA/s1600/h2.jpg


http://1.bp.blogspot.com/-8MIhAhwpc9A/T3cbtl0FrYI/AAAAAAAAABg/UKpJOMRMzH0/s1600/h2.jpg


http://1.bp.blogspot.com/-gkLxpX6PBcM/TzLrSgYCgpI/AAAAAAAADxY/T5fjgPWQa9A/s1600/111.png


http://2.bp.blogspot.com/-5tNNiftlrEw/TezSD2p0ltI/AAAAAAAABUk/dI9DJQ412Ns/s1600/h2bg.png


http://4.bp.blogspot.com/-YCUII8XUFBw/T48IAAuaYDI/AAAAAAAABW8/QAbxolSVeFw/s1600/h2.png


http://2.bp.blogspot.com/-Ycr1qD8IwEs/T6GgsDdap3I/AAAAAAAAB0Q/6DLTUZLunjo/s1600/h2.png


http://2.bp.blogspot.com/-ZB6erFiaNqc/TfMUPi5CZqI/AAAAAAAAACA/9Hid56jDxKU/s1600/h2bg.png


http://4.bp.blogspot.com/_uW7vQWFtStk/TH0LTQeHu4I/AAAAAAAABbY/5NQ0fDW_xhk/s1600/h2bg.png


http://3.bp.blogspot.com/_Ax-O2ayi6kU/TRikIOqs2RI/AAAAAAAAA84/rhNmXew3uFo/s1600/h2bg.png


http://3.bp.blogspot.com/-5ulk0p55We8/TtU737kgthI/AAAAAAAAE_I/TzxKypIbvOs/s1600/h2.jpg


http://4.bp.blogspot.com/-AjW9oyuTVvY/T5B1RTro3oI/AAAAAAAABbQ/yQUEAxDuz0c/s1600/h2.png


http://2.bp.blogspot.com/-FXb5kebyMzA/Ts0qBP3mflI/AAAAAAAAEzI/Z9ocu5OLerg/s1600/h2bg.png


http://4.bp.blogspot.com/-i5pmeDlNVGs/T-nmgpyKABI/AAAAAAAADqM/IJ8-V1HrgdM/s1600/h2.jpg

http://1.bp.blogspot.com/-rKkZBAUXx6A/TYsjo5xk6FI/AAAAAAAABrc/qQQHN6EwxjE/s1600/h2bg.png


http://2.bp.blogspot.com/_uW7vQWFtStk/TKshnp_6XoI/AAAAAAAAChQ/njXiENjnGD0/s1600/h2bg.png


http://1.bp.blogspot.com/-DrrBmjXN7I0/TqLYZlHxN-I/AAAAAAAAAU8/YqUUjcaI9ys/s000/untitled-2.png

http://4.bp.blogspot.com/-V4kuMsc97Dk/TjMR-nCsf_I/AAAAAAAAAko/YgmVgkM9QHE/s1600/h2bg.png

http://1.bp.blogspot.com/-d-FJIetJyaw/ToHthB5J3XI/AAAAAAAAB9U/FPahJDheTBA/s1600/side.png


http://4.bp.blogspot.com/-in1a6soHptI/TxxeBRYEcqI/AAAAAAAACLY/0cjgAJO0weI/s1600/h2.png


http://2.bp.blogspot.com/-mOP5_fnJ55c/UBfieziJxYI/AAAAAAAAAU0/UMib93bP1ZM/s1600/h2.jpg


http://3.bp.blogspot.com/-OV078OOSBv0/T56ynazJIbI/AAAAAAAABvQ/tHOJKzWhhyw/s1600/h2.jpg


http://1.bp.blogspot.com/-M7IaEw6qj-Y/Tt5es2tNO2I/AAAAAAAAFNA/ZXq6832vw9g/s1600/h2.png


http://2.bp.blogspot.com/_iI6SgnnhWEM/SqaiPbgA2vI/AAAAAAAAAAc/Y3Lsk4pptDs/s1600/widget-title.gif


http://2.bp.blogspot.com/-jNxuEWNpGTk/UV7-6ovsE3I/AAAAAAAABYs/tXcNlEqxCwM/s1600/h2.jpg


http://2.bp.blogspot.com/-ayetlRMkKD8/UQcDD9alzMI/AAAAAAAAAsM/O9IBmb-yTk8/s1600/h2.jpg


http://3.bp.blogspot.com/-Cu8l2wJLAQ8/UX2H6wq-DkI/AAAAAAAABss/PK05vQx9Ho0/s1600/h2.jpg


http://4.bp.blogspot.com/-nyst3TxHYNc/Ty6F_Mg3MCI/AAAAAAAADZ8/eJjBWgqm6Go/s1600/h2.png

http://4.bp.blogspot.com/-QD1ZZ8s16CE/UBqY4haFibI/AAAAAAAAAe8/fF_wQPseLOM/s1600/h2.jpg


http://3.bp.blogspot.com/-Bkip3DMuxpQ/URbr2wpLZ6I/AAAAAAAAA1o/U2i39VqsDJQ/s1600/h2.jpg


http://3.bp.blogspot.com/-J6Whp-RULV8/USQMvj_a8DI/AAAAAAAAA7A/8LgXXfhTkfQ/s1600/h2.jpg


http://3.bp.blogspot.com/-8f0UfGqIa3A/UZvD5GpB29I/AAAAAAAAB30/jduklpasKoI/s1600/h2.png 

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



Автор статьи ✎ Olga Protasova Выпуск ✹ 4/25/2015 Ярлыки ►


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

2 коммент. :

  1. Приветик Оленька! Очень красиво, мне понравилось! Только я трусиха, опасаюсь в шаблон-изменить шаблон заходить.. так как в кодах не сильна, даже с подсказками..А так мне бы очень хотелось украсить свой блог..

    ОтветитьУдалить
    Ответы
    1. Валя здравствуй. Спасибо за отзыв. Если боишься, сделай резервную копию шаблона, создай новый тестовый блог, загрузи копию резервного шаблона на тестовый блог и на нем экпериментируй. Когда настроишь, скопируй код и вставь в шаблон основного блога. Не надо бояться.

      Удалить


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

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

Имя

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

Сообщение *