ГЛАВНАЯ СТРАНИЦА | ВХОД
Свой блог я хочу посвятить таким же новичкам в сети, каким являюсь и я.
Здесь я буду делиться с вами всем тем, чему я научился за время существования моего блога.
И пусть опытные Веб-мастера не удивляются банальности моих тем, ведь я еще сам "чайник", поэтому и делиться советами буду прежде всего с такими же новичками, как и я.
Надеюсь, что мои советы кому-то помогут.
С уважением, Алексей

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

Сегодня возвращаемся к нашему любимому 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 лет работает на рынке рекламы. Нашему опыту можно доверять!
-------------------------------------------------

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

25 комментариев:

  1. Нужно еще учесть, что шапка может быть резиновая. Тогда шапку нужно делать определенного размера, а остальное заливкой.

    ОтветитьУдалить
  2. у меня вопрос помогите если знаете.У меня шаблон и я хочу чтобы в сообщениях рамка (когда картинку вставдяю)была белого цвета а у меня серого.Дело в том что "Шрифты и цвета"не работают поетому это надо в шаблоне менять.Подскажите код рамки в шаблоне.Зарание благодарю!

    ОтветитьУдалить
  3. Алексей здравствуйте. Шапку с Вашей помощью одела (огромное Вм мерси!). Но теперь же хочется и шубку! Ходила-ходила, искала-искала, так нигде инструкции и не нашла. Даже не знаю, как оно и называется грамотно то, то что по бокам :). Помогите, если можете?

    ОтветитьУдалить
  4. ukuwu, все что написано под тегом header - это заголовок. Пробуйте методом тыка менять color - вставлять свои коды цветов. Тогда и найдете то, что вам нужно.
    Смотрите код только до тега body, дальше уже пойдет основная страница блога.

    GukAlex, вам в шаблоне нужно искать теги sidebar, там менть цвета, как и ukuwu

    ОтветитьУдалить
  5. Супер!!! Класс!!! Спасибо огромное!!! Все получилось! Хочу прыгать от восторга, да боюсь сына разбудить)))

    ОтветитьУдалить
  6. Спасибо,много полезной информации.

    ОтветитьУдалить
  7. Здравствуйте, делала "шапку" по вашим подсказкам, приходите посмотреть что получилось, http://yulechka-mypages.blogspot.com/, почему-то по бокам картинки зеленые полоски, подскажите что не так? Картинку вставляла через радикал как HTML/JavaScript

    ОтветитьУдалить
  8. Юлечка, эта статья уже несколько неактуальна. Поскольку раньше нельзя было в ставить рисунок через редактирование шаблона.
    Сейчас зайдите в Дищайн -Элементы страницы -- изменить заголовок. Там загрузите вашу картинку и поставьте галочку "Поместить описание под изображение".
    Получится лучше. Вот тут можете посмотреть (жена делала так). Название блога осталось под шапкой, а на картинке написала и вставила ее потом:
    http://zozh-so-mnoi.blogspot.com/

    А полоски, видимо, заложены в стандартином шаблоне.

    ОтветитьУдалить
  9. Алексей, спасибо большое за Скорую Помощь, всё получилось!(правда кривовато стоит, но все же лучше чем было).

    ОтветитьУдалить
  10. У вас очень короткая шапка. Сделайте ее длиньше. Можно в шаблоне посмотреть ширину страницы.

    ОтветитьУдалить
  11. Алексей, не знаю, куда это писать. Кто в курсе, как прикрепляется домен к сайту blogspot.com??? Ничего не понимаю, где эти адреса серверов взять, чтобы их прописать для делегирования? Звонить из Болгарии в Москву слушать "тили-бом" в трубке, что все заняты, не могу. :(

    ОтветитьУдалить
  12. http://www.green-html.ru/2009/08/privyazka-vashego-domena-na-blogspotcom.html#comment-form

    Вот такую инструкцию нашла. Пытаюсь разобраться.

    Для всех информация. Лучше всего покупать доменное имя на сайте Reggi.Ru, если у Вас блог на blogspot.com, тогда не надо ничего настраивать, одну кнопку только нажать - все само настроится.

    ОтветитьУдалить
  13. Виктория, а оно вам надо? Меня вполне устраивает домен третьего уровня. Какие цели вы преследуете, пытаясь купить другой домен?

    ОтветитьУдалить
  14. а, я решила, что надо. У меня появились интересные варианты сотрудничества, меня домен 3 уровня уже не устраивает. Я все прикрепила. Теперь интересная ситуация. Я не вижу сайт, а другие видят. www.vicamilleri.com Робот яндекса уже успел мне 4 страницы по домену 3 уровня проиндексировать с текстом: Blogger - это бесплатное средство для ведения блога от компании Google, которое позволяет с легкостью поделиться своими мыслями с людьми по всему миру. С его помощью очень легко публиковать тексты, фотографии и видеозаписи в личном или...
    vicamilleri.blogspot.com/2010/05/malta-…
    Ерунда какая-то. Как такое может быть, что у кого-то сайт открывается, а у кого-то нет? Из-за браузера?

    ОтветитьУдалить
  15. Валерия, у меня ваш сайт прекрасно открывается. А через Яндекс тоже не открывается? Разными браузерами пробовали?
    Я даже не знаю, в чем может быть проблема. А где домен и хостинг покупали?

    ОтветитьУдалить
  16. Сайт стал открываться и у меня тоже через пару часов после того, как сменила хостинг-провайдера. Не знаю, это помогло или что другое. Рекомендовал знаток http://freedns.ws
    Домен покупала на www.nic.ru. Их консультант ничего умнее перезагрузить ПК или подождать тоже рекомендовать не смог.
    А вообще скорее всего пока все провайдеры в нескольких странах между собой не договорились, ничего не работало. Эти международные отношения портят жизнь даже в Интернете. :) Но, несомненно плюсом стало то, что пока выясняла как это все делается, познакомилась еще с несколькими знатоками и несколько пополнила запас знаний по Интернет-технологиям.

    ОтветитьУдалить
  17. Виктория, я очень рад, что у вас все получилось! Желаю вам удачи в продвижении вашего сайта!

    ОтветитьУдалить
  18. Алексей, а как сделать карту сайта в блоггере? И еще вопрос. Вы что-то делали, чтобы индексировались в этом блоге картинки? У меня фото не индексируются. Может подписи к ним надо сделать как Вы описывали? Сразу 2 темы Вам для заметок. :)

    ОтветитьУдалить
  19. Валерия, с вами очень интересно общаться. Но ВОПРОСЫ нужно задавать на форуме, так как в большинстве статей комментарии превращаются в длинную ленту общения причем не по теме поста.

    Итак, отвечаю все же.
    Подробную карту сайта вы сможете сделать только ручками. Сидеть и тупо забивать ссылки для каждой новой статьи.
    Второй вариант: жена у меня себе сделала вот такую навигацию (см. http://zozh-so-mnoi.blogspot.com/).
    Третий вариант: попробовать заказать скрипт (может быть вот тут http://www.o-ucoze.ru/forum/2). Не знаю, возможно ли его написать, скрипты не пишу.
    Четвертый вариант: испробовать новый гаджет горизонтального меню, который появился у нас в Блоггере.

    По поводу картинок. Точно опять же ничего сказать не могу. Если честно, раньше никогда не задавался вопросом, индексируются они у меня или нет. Сейчас чуть глянул, похоже, что нет. Предлагаю вам после добавления картинки переходить во вкладку HTML и добавлять в код картинки свое описание alt="Ваш текст" title="Ваш текст".
    Думаю, что по крайней мере так они проиндексируются и в поиске будут выдавать ваши картинки по этой теме.

    ОтветитьУдалить
  20. Спасибо, попробую. А форумы на сайтах Юкоза - страшно неудобная вещь. Не знаю никого, кому бы нравились. Вот и тусуемся у Вас в комментариях. :Р

    ОтветитьУдалить
  21. Виктория, тусите тогда ;)) А к Юкозу я привык...мне нра..

    ОтветитьУдалить
  22. В рамках продолжающейся тусовки чайников подкинула на форум головоловку. У меня уже мозги дымятся, пока ничего не получается с такой шапкой... :(((

    ОтветитьУдалить
  23. а я просто нарисовал в фотошопе шапку с названием и нужной картинкой и поставил в настройках заголовка галочку "вместо заголовка и описания"
    http://partycat2012.blogspot.com/

    ОтветитьУдалить

В комментариях оставляем мнения и советы к данной статье. Все вопросы задаем ТОЛЬКО на ФОРУМЕ. Отвечаю и стараюсь помочь всем!