Видеоурок: Меняем картинку для шапки блога
Хотя авторы шаблонов оформления действительно вкладывают душу в свои творения и делают гармоничный дизайн, каждый блоггер видит свой блог по-своему. И поэтому всегда хочется что изменить в готовой теме блога.
Самым ярким элементом оформления блога является его шапка. Именно шапка задает настроение и тематику блога и много говорит о его авторе.
Сегодняшний видеоурок рассказывает о том, как можно добавить в шапку свою картинку: определить размер для нее, сделать нужный файл и изменить настройки темы блога для отображения этой картинки.
Все действия в программе PhotoShop в этом уроке выполняются с помощью инструмента Move Tool (Указатель)
Скачать видеоурок «Меняем картинку для шапки блога» 5 Мб
Если ваш блог стал популярным и благодарные посетители буквально атакуют его своим вниманием, то выделенный сервер как раз и поможет вам справиться с таким наплывом читателей. Он обеспечит повышенную производительность и безопасность вашего проекта в Интернете.
Вы правы, иногда хочется, что то поменять в своем дизайне. Нужно подумать, как лучше это сделать.
Дизайн блога, как одежда – всегда хочется примерить или даже купить что-то новенькое
Марина! СПАСИБО! Просто сверхполезная статья! Пойду менять шапку!))
Спасибо, за дельный сайт и уроки. Как раз собралась менять шапку на одном из своих блогов. Правда, для начала придется ее как следует прорисовать.
Ну, что девочки, встретим новый год в новых “шапках”?
Приглашаю вас к себе в гости на “Самопрезентацию” и узнать кое-что обо мне.
Спасибо большое! В гости уже сходила
Хоть шапку менять умею, но очень интересно было посмотреть и послушать, спасибо!))
Спасибо, Маруся, что зашла в гости
Марина, а откуда нужно заходить чтобы редактировать тему… Что то я торможу… Прямо их блога? Если из панельки инструментов заходишь, то она выглядит совсем по другому. Помогите пожалуйста разобраться!
Нужно зайти в админпанель блога, найти в левом меню пункт Внешний вид – Редактор, а там уж искать файл для редактирования.
Посмотрите еще мои видеоуроки, я там подробно все показываю:
http://marina-makarova.info/?p=117
http://marina-makarova.info/?p=130
http://marina-makarova.info/?p=221
Если не получиться, то заходите и спрашивайте
Марина, подскажие пожалуйста, я нарисовала шапку на 1из блогов. Буквы др сделала и чобы название блога недублировалось, убрала в настройках блога его название.
Шапка то мне нравится, но во первых, она не кликабельная.
а во-вторых получается, что главная станица блога у меня без названия.
вот тут посмотрите: http://women.zakonyuspeha.ru/
подскажите как сделать ее шапку кликабельной?
Не все темы поддерживают логотип блога в виде картинки. У меня тоже такая проблема была на “Розочках” в шаблоне Pistachio
и сам заголовок блога появляется в названии главной страницы.
Я оставила там текстовый заголовок блога, но в стилях сделала его “прозрачным”. От этого, правда, вся шапка блога не стала кликабельной, но какая-то часть ее, где располагался заголовок, кликается
Вот кусок кода в файле style.css, который нужно добавить для прозрачности (выделено жирным)
.header h1{
font-size: 48px;
margin-bottom: 10px;
font-weight: bold;
filter:alpha(opacity=0);
-moz-opacity:0;
opacity:0;
}
Марина, у меня не получилось, почему-то когда подставляю эту часть картинку вобще не видно
вот у меня такой код там:
#header{float:left;height:320px;width:1000px;padding:0;background:url(‘images/var1.jpg’) no-repeat;margin:0px;padding:0px;}
#header h1 {margin:0px;font:50px Georgia;color:#FFFFFF;text-align:right;font-style:italic;padding-top:20px;}
#header h1 a {font-weight:normal;color:#FFFFFF;}
#header h1 a:hover {text-decoration:none;}
Нужно этот код вставлять не для картинки просто в #header, а для заголовка Н1.
Зпись #header h1 обозначает “Заголовок Н1, который расположен в хедере”. И тебе нужно код добавлять именно для него.
Ну, например, в
#header h1 {margin:0px;font:50px Georgia;color:#FFFFFF;text-align:right;font-style:italic;padding-top:20px;}
добавляешь еще
filter:alpha(opacity=0);
-moz-opacity:0;
opacity:0;
Чтобы получилось так:
#header h1 {margin:0px;font:50px Georgia;color:#FFFFFF;text-align:right;font-style:italic;padding-top:20px; filter:alpha(opacity=0); -moz-opacity:0; opacity:0;}
Марина, спасибо, все получилось.
только я еще увеличила размер букв перед тем как сделать их бесцветными, чтобы увеличить кликабельную область
Молодец, Мариночка!
ксати, жалко, что вы убрали последние комменты с этого блога. Было очень удобно)
Было удобно? Ну чтож, я добавлю их в сайдбар
Марина я снова к вам, по поводу букв . Дело в том что в Мозиле буквы прозрачные, а в интернет-эксплорере -остались белыми
что можно сделать?
Вот тут я так сразу и не знаю что ответить…
У меня на Розочках так сделано, и буквы в эксплорере тоже прозрачные.