![картинка в шапке блога миниатюра в шапке блога](https://2.bp.blogspot.com/-W5EI0jbYYJ8/WhKCD3E9G_I/AAAAAAAAIb4/YjKFMnlyEI89wSqa5DKdJdtg796oCfPTwCLcBGAs/s320/%25D1%2581%25D0%25BE%25D0%25B1%25D0%25B0%25D0%25BA%25D0%25B0.jpg)
Привет, друзья. В каких - то случаях можно добавить в заголовок блога маленькую картинку, чтобы поздравить своих пользователей с очередным праздником. Будь то Новый год, 8 марта или просто юбилей блога. Даже миниатюру сезона года. Вариантов много. Если вы проводите какие - то конкурсы тогда и логотип - картинка тоже будет хорошо смотреться.
Это добавит уникальность и привлечёт внимание пользователей. Не надо на стороне заказывать ничего, потому что в Blogger это очень легко организовать. Как только что - то становится уже не актуальным, можно убрать и в очередной раз установить опять, но уже другое. Посмотрите примерно несколько вариантов.
![миниатюра в шапке блога картинка в шапке](https://1.bp.blogspot.com/-BK4xZ97Wuf8/Wg74KH4D98I/AAAAAAAAIZo/mhtVV5sivvg5Jtq4PCofDU5U6_DAnIMmwCLcBGAs/s320/%25D1%2581%25D0%25B5%25D1%2580%25D0%25B4%25D0%25B5%25D1%2587%25D0%25BA%25D0%25B8.jpg)
![миниатюра в шапке блога картинка в шапке](https://4.bp.blogspot.com/-jckavmKhf9I/WhJ03kwKBJI/AAAAAAAAIbk/3bENXRNwQTwnbsB-iHJ7M6ugFgrV07quQCLcBGAs/s320/%25D0%25BA%25D0%25B0%25D1%2580%25D1%2582%25D0%25B8%25D0%25BD%25D0%25BA%25D0%25B0%25D1%2588%25D0%25B0%25D0%25BF%25D0%25BA%25D0%25B0.jpg)
![](https://4.bp.blogspot.com/-nxCKH2Q5_9k/WhJ08TbuuvI/AAAAAAAAIbo/-zqKYPgKjVgKUeo8D5dzhOhSln7aTOj2gCLcBGAs/s320/%25D0%25BA%25D0%25B0%25D1%2580%25D1%2582%25D0%25B8%25D0%25BD%25D0%25BA%25D0%25B0%25D1%2588%25D0%25B0%25D0%25BF%25D0%25BA%25D0%25B01.jpg)
Живой пример на тестовом блоге.
Нам понадобится маленькая картинка или иконка, соответствующая случаю, в формате Png. Вы можете такую найти в интернете или создать сами. Можно воспользоваться сервисом iconfinder.com. О нём я писала в этом сообщении.
И наконец совсем малюсенький код.
#header-inner:after {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhibFSvtJxhHTiCEC_ku6ng2aQeLtPCkdOjOZ1kjlAgQzf7denCMVQ17eoLKOvRH_QBx49EXIRzekzAJ-GscNxgBD2JLcX4h45Mxr6atoRhpXNJMD2vus1dAwkFTKQy-X96LjGF1CIaUz4/s1600/Valentines-BloggerSpice.png);
position: absolute;
z-index: 9999999;
margin-left: 35%;
margin-top: -12.6%;
}
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhibFSvtJxhHTiCEC_ku6ng2aQeLtPCkdOjOZ1kjlAgQzf7denCMVQ17eoLKOvRH_QBx49EXIRzekzAJ-GscNxgBD2JLcX4h45Mxr6atoRhpXNJMD2vus1dAwkFTKQy-X96LjGF1CIaUz4/s1600/Valentines-BloggerSpice.png);
position: absolute;
z-index: 9999999;
margin-left: 35%;
margin-top: -12.6%;
}
Скопируйте его в блокнот и замените адрес изображения на адрес вашей картинки. Или для пробы можете просто взять этот код. Идём во вкладку тема. Находим знакомую всем уже строку ]]></b:skin> и прямо над ним его устанавливаем. Сохраните и просмотрите результат.
Возможно, картинка не совсем корректно отобразиться относительно заголовка. Но это поправимо. Поиграйтесь со значениями margin-left: 35%; и margin-top: -12.6%;, которые я отметила синим цветом. Пример в статье отступы и поля.
margin-left: 35%; расстояние относительно левого края. Добавляйте или уменьшайте значение.
margin-top: -12.6%; отступы сверху.
Сделать это нужно всего один раз. Потом просто сохранить код для следующего случая.
Не думаю, что у вас будут проблемы с реализацией, но если всё же возникнут вопросы, обращайтесь.
Всем спасибо за визит. Увидимся.
здесь можно оформить подписку на новые шпаргалки
Виктория, очень ИНТЕРЕСНО! А эта картинка будет видна в начале каждого поста? А если она мне нужна только для одного поста? Попробую пока сделать ее в тестовом блога! Если получится или понравится, то можно попробовать поставить в пост!
ОтветитьУдалитьИрина, так это ведь для изображения в шапки блога а не для поста. Вроде по названию понятно.
ОтветитьУдалитьКартинка перед названием поста здесь http://www.shpargalochki.ru/2015/05/ikonka-v-zagolovke-posta.html
ОтветитьУдалитья пробую и в шапку блога и в пост,не видно у меня на предварительном просмотре
ОтветитьУдалитьОпять что - то не так делаешь. Пробуй на тестовом блоге. Там ещё нужно с отступами играться, а статье написано как. тем более у тебя ширина блога большая. Я уже говорила . Код совершенно простой без скриптов, косяков вообще не должно быть никаких.
Удалить