понедельник, 1 июня 2009 г.

Баннер в заголовке блога

Blogger

Ответ на вопрос «Как вставить изображение (баннер) выше или ниже шапки в стандартном шаблоне», заданный Ingward.


Далее опишу самый простой способ, основанный на редактировании HTML шаблона Blogger.


Перво-наперво загрузи требуемое изображение, в свой альбом Picasa.


В редакторе HTML шаблона найди строки:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='RBB (заголовок)' type='Header'/>
</b:section>
</div>


Чтобы добавить баннер выше заголовка блога (хедера), вставь тег изображения между открывающими тегами <div id='header-wrapper'> и <b:section ...>.

<div id='header-wrapper'>
<img style="width:660px; height:30px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkwvbb7DF9BJ0ID9CLR6r2bQHSMjjgpqNjC8ooEygCpFF2TDNxpy-HT6dY4VIibvrsKI3jAEvvduxdHrDrfdb8PcJyUVFA8P5ekOa9JDXPE4Hvqc49ejCQhQj3dontBg2r1gYMT54R_QQ6/" />
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='RBB (заголовок)' type='Header'/>
</b:section>
</div>


Баннер над заголовком

Чтобы вставить баннер ниже хедера, добавь код между закрывающими тегами </b:section> и </div>.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='RBB (заголовок)' type='Header'/>
</b:section>
<img style="width:660px; height:30px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkwvbb7DF9BJ0ID9CLR6r2bQHSMjjgpqNjC8ooEygCpFF2TDNxpy-HT6dY4VIibvrsKI3jAEvvduxdHrDrfdb8PcJyUVFA8P5ekOa9JDXPE4Hvqc49ejCQhQj3dontBg2r1gYMT54R_QQ6/" />
</div>


Баннер под заголовком

Так же можно добавлять изображение перед открывающим тегом <div id='header-wrapper'> (выше) или закрывающим тегом </div> (ниже) данного примера. С той лишь разницей, что в первом случае изображение будет находиться внутри контейнера header-wrapper, а во втором – за его пределами.


24 Комментариев :

Ingward комментирует...

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

Пробовал также реализовать это с помощью виджетов (там нужно найти showaddelement='no' и вместо no
вставить yes, а потом в maxwidgets='1' поменять "1" на "3"), но еще хуже выходит - там изображение будут обрамлять и внешняя, и внутренняя рамки.

Вот бы сделать, как у Димы - bablorub.blogspot.com. Причем странно - он говорил, что только с помощью виджетов это сделал:)...

Ingward комментирует...

Все, Croaker, разобрался :). Нужно вставлять перед открывающим тегом div id='header-wrapper', тогда все на месте. Просто только сейчас решил попробовать то, что в последнем абзаце :).

Кстати, Croaker, а яваскрипт-код тоже так можно вставлять?

Croaker комментирует...

Ingward, я как раз подумывал дать следующий пример с использованием виджетов. О создании/добавлении которых как-то проскакивало в постах Статические страницы в Blogger и Футер Blogger в три колонки. Но особо на этом внимание не заострял.

Код Javascript там тоже вставлять можно без особых проблем. Хотя лично я для этого использовал бы виджеты.

Ingward комментирует...

Croaker, а случаем не знаешь, как вставить картинки по боках шапки? Тут уже, кажется, сложнее будет... Хочу опробовать одну задумку.

Croaker комментирует...

Это, думается мне, можно реализовать разными способами. Но пока не приходилось.

Ingward комментирует...

Ну тогда хотя бы один опиши, если не лень :).

Croaker комментирует...

Сегодня с утра набросал: Изображения по бокам шапки блога.

Axa комментирует...

Уважаемый Croaker.
Мой вопрос не относится к данной теме. Но, поскольку я не смог найти на сайте контактов с Вами, пишу здесь.
Можно ли Вас попросить проконсультировать меня по вопросу использования google api в сообщениях блоггера?
мой адрес akhromov@mail.ru

Croaker комментирует...

Уважаемый Axa,
К сожалению, в данном вопросе помочь не могу. Google API – это одна из тех вещей, с которыми я (еще) не связывался.

Den3er комментирует...

Доброго времени суток, блог просто обалденный, столько полезной информации .. Дизайн очень приятный - буду стремиться к такому же :) Собственно не знал куда написать - вопрос плевый, и займет менее 5ти минут, собственно: вставил нестандартный шаблон, и много чего там перерисовал/изменил, после чего, верхушка уехала вниз .. как можно ее поднять (до самого названия блога?)ссылка: http://sfasfasfafsa.blogspot.com/
Дайте шанс на жизнь блогу :) Заранее спасибо ..

Croaker комментирует...

Den3er, а почему не стандартным путем?
ДизайнЭлементы страницы → гаджет «Заголовок». Выбрать Изображение вместо заголовка и описания.

Den3er комментирует...

Получается картинка в белой рамке и кривовато. Я хочу, что бы картинка (верхушки), налегала на фон (сообщения блога) - решил скрепить их .. http://lh5.ggpht.com/_yXGLbhEXEDw/Svil-TDvgFI/AAAAAAAAACg/nZ6SaTQ1jqo/s640/TF2_and_BHF.jpg

Croaker комментирует...

Идея более-менее понятна, только тогда тебе нужно фоновую картинку втыкать не в #content-wrap, а в #outer-wrapper. Немного по ширине не подходит, но это можно подогнать.

Den3er комментирует...

Вставил, я строчку с картинкой, куда ты сказал - поднялась, на ура, спасибо .. Одно не пойму: взял оригинальный фон, размер не менял, а теперь оказывается, что шириной маловато)) Кстати, а как ее подогнать, что дописывать/изменять? И еще, теперь сообщение блога/всякие причиндалы (типа: даты, подписки), по центру становиться - сообщение, еще можно к левому краю поставить, а вот остальное?

Croaker комментирует...

Фоновая картинка имеет ширину (width) 640px, а для разметочных блоков outer-wrapper и content-outer задана ширина 700px. Разумеется, картинки не хватит.

Для тех блоков, где содержимое нежелательно центрировано (хотя лично мне нравится) задать правило CSS text-lign:left;

Croaker комментирует...

Поправка: text-align:left;

Den3er комментирует...

Спасибо за ответы. С картинкой разобрался - Picasa сжала картинку, теперь отлично встала. Одно осталось - поставить сам блог по центру (забыл упомянуть об этом выше), вот сам глянь: http://sfasfasfafsa.blogspot.com/

Croaker комментирует...

У тебя правило CSS для outer-wrapper поломано – проверь скобки "{}"

Den3er комментирует...

Спасибо. Весь текст внутри встал влево, как должен был, но сам фон (в общем весь блок с текстом и картинками), так и остался с лева ..

seo-aspirant комментирует...

Добрый день.
Весь интернет перерыл, не нашёл доступного объяснения для начинающего пользователя блоггера по такому вопросу: как вставить баннер справа от заголовка в шапку на платформе blogspot?
С уважением, сео-аспирант.

Croaker комментирует...

Несложно! В одном из ближайших постов расскажу.

Алексей комментирует...

Приветствую!
А возможно ли разместить логотип в заголовке блога слева от названия?

Croaker комментирует...

Алексей, совершенно несложно; записал вопрос в TODO-лист. Постараюсь рассмотреть; пока – увы! – нехватка времени.

SwaEgo комментирует...

Блин,я сегодня весь день ищу как вставить баннер в хедер,ничего нормального-вразумительного не нашёл,решил просто почитать блоги,на которые подписан,и тут встречаю этот пост.Я просто счастлив.Возникает вопрос,а обязательно ли весь рунет перерывать,если есть такие хорошие блоги?
Так что,СПАСИБО ОГРОМНОЕ!!!!

Отправить комментарий

Жги!