Создаем шапку для блога

Сегодня возвращаемся к нашему любимому blogspot-у. Сегодня я вам покажу, как можно вставить красивую шапку легко и быстро, не меняя шаблон блога. Но это подходит для тех блогов, у которых шаблон задуман без рисунков, например, как у меня.

Итак, приступим. На самом деле все до банальности просто... Вам нужна готовая шапка, которую вы можете сделать в фотошопе, либо заказать в инете (благо сейчас таких объявлений великое множество). Шапку подбирайте по размеру вашего шаблона.

Итак, вы имеете в наличии шапку, теперь мы ее будем вставлять. Я буду, как всегда, все фиксировать скринами, но делать буду не на этом блоге, а на тестовом.

Для начала узнаем, какого размера нам нужна шапка. Вернее узнаем ее ширину, так как высота для нас значения не имеет. Заходим в Макет---Изменить HTML. Находим в шаблоне такие строки:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

660рх - это и есть ширина нашего шаблона.

Создаем шапку, загружаем ее через в интернет через www.radikal.ru
Получаем адрес ссылки на нашу шапку, например, такой: http://i030.radikal.ru/..........jpg

Теперь создаем код для вставки шапки:
<a href="http://ty-blogger.blogspot.com/">
<img src="http://i030.radikal.ru/.............jpg"/></a>

где http://ty-blogger.blogspot.com/ - адрес главной страницы вашего блога;
http://i030.radikal.ru/.............jpg - ссылка на шапку.

Далее заходим в Макет ---Элементы страницы--Добавить гаджет-- HTML/JavaScript. В этот гаджет вставляем наш полученный код.

После чего перемещаем этот гаджет прямо под заголовок блога. Он не встанет туда сразу, как в сайдбар, например. Наведите этим гаджетом чуть ниже заголовка и немного подождите, после этого появится поле для добавления гаджета. У кого не получится, связывайтесь со мной через комментарии, попробую помочь.

Теперь у нас появилась вторая шапка в блоге. Теперь нам нужно избавиться от первой. Удалить мы ее не можем, но мы можем откорректировать шрифт так, чтобы названия не было видно. Это делается просто Макет--Шрифты и цвета. Шрифт заголовка делаем самый мелкий, чтобы он занимал как можно меньше места. К тому же он должен быть одного цвета с заливкой заголовка.

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

Ну конечно же, шапку лучше сделать более яркую, а баннер менее приметным. Но я показал пример, как все это делается, а дальше уж дело ваше!

Напоследок порекомендую залезть в шаблон и найти такие строки:

#header h1 {
margin:0px 0px 0;
padding:0px 0px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

и такие:

#header .description {
margin:0 0px 0px;
padding:0 0px 0px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

То что помечено красным поставить на минимум - это отступы по вертикали. Площадь для первого (настоящего) заголовка уменьшится и место под баннер будет занято меньше.

Желаю удачи! Надеюсь, что кому-нибудь да пригодится. Вопросы пишем в комментариях!

-------------------------------------------------
Компания "Полезная полиграфия" оказывает полиграфические услуги. Мы печатаем все: от визиток до крупномасштабных плакатов. Наша компания известна качеством своих услуг и доступными ценами. Обращайтесь, мы ждем вас!

Хотите узнать, на что способны только русские люди? Читайте на WWW.RUSTUTORIAL.RU инструкцию по поддержанию чистоты в подъезде! Смех вам обеспечен!

Все мы знаем о том, что реклама - двигатель торговли. Но необходимо качественное размещение рекламы, которое принесет наибольшую выгоду вашему проекту. "Интеллект-РИЦ" уже 17 лет работает на рынке рекламы. Нашему опыту можно доверять!
-------------------------------------------------

С этой темой еще читают:

.