вторник, 2 марта 2010 г.

Слоеный заголовок Blogger

Заголовок, описание блога

Продолжаю серию постов о тюнинге заголовка Blogger. В этот раз картинка – фоновое изображение под Названием и Описанием блога.


Напомню, что в Blogger существуют три варианта виджета Заголовок. Этот – второй и в терминах «Блоггера» обозначен как


Изображение после названия и описания


Цель данного тюнинга, в первую очередь, – избавиться от громоздкого и недостаточно предсказуемого вычислимого выражения в виджете заголовка.



Для своих бесчеловечных экспериментов я снова выбрал стандартный шаблон Minima.


Этап первый: Загрузка и настройка изображения

  1. В первую очередь подготовь фоновое изображение заданной ширины. Для шаблона Minima по-умолчанию это 660 пикселей.

  2. Загрузи изображение и настрой размещение с помощью стандартной формы виджета «заголовок»

Настроить заголовокНастройка виджета «заголовок»

Получится примерно такой вид:


Заголовок Blogger. НетюнингованныйЭтап 1: Загрузка и настройка виджета «заголовок»

Тут же всплыли недостатки вычислимого выражения в виджете, о которых предупреждал разработчик:


  1. Вместо самолета получился паровоз;
  2. ненужный отступ сверху, над изображением;
  3. изображение «вылазит» за пределы рамки.

Совет «после сборки обработать напильником» по-прежнему работает. Поэтому, напильник в руки и вперед!


Этап второй: Тюнинг виджета

Перво-наперво на странице настроек шаблона (Дизайн – Изменить HTML) отметь Расширить шаблоны виджета.


Две вещи, которые должны будут подвергнуться тюнингу – это стили CSS шаблона и, собственно, сам код виджета. Точнее – тот его фрагмент, который отвечает за отображение «Изображение после названия и описания».


Полный код виджета заголовка (с комментариями) можно посмотреть здесь.


Листинг 1: Фрагмент виджета «Заголовок»


    <b:else/>
<!--
Show image as background to text. You can't really calculate the width
reliably in JS because margins are not taken into account by any of
clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
width if the user is using shrink to fit.
This results in a margin-width's worth of pixels being cropped. If the
user is not using shrink to fit then we expand the header.
-->
<div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot;
+ &quot;background-position: &quot; + data:backgroundPositionStyleStr + &quot;; &quot;
+ data:widthStyleStr
+ &quot;min-height: &quot; + data:height + &quot;px;&quot;
+ &quot;_height: &quot; + data:height + &quot;px;&quot;
+ &quot;background-repeat: no-repeat; &quot;' id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>

Листинг 2: Фрагмент стилей CSS шаблона


#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

Теперь нужно избавиться от комментариев и вычислимого выражения в коде виджета, а результат вычислимого выражения перенести в стили. Как это сделать показано в листинге 3.


Чтобы узнать адрес фонового изображения, просмотри исходный код страницы и найди в нем элемент div с id="header-inner".


# Листинг 3: Измененный фрагмент виджета «Заголовок»


    <b:else/>
<div id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>

Результат вычисленного выражения style, подсмотренный в исходном коде страницы, нужно перенести в стили шаблона, предварительно выкинув из него вычисленное значение width (чтобы избавиться от «вылезания» изображения за пределы рамки).


Листинг 4: Измененный фрагмент стилей CSS шаблона


#header-inner {
background-image: url(http://2.bp.blogspot.com/_3_wwcvitlLc/S4w1Ikt9CEI/AAAAAAAAB5g/qkeGSn2Tgns/S1600-R/polet-ekzuperi-banner-660px.jpg);
min-height: 153px;
background-repeat: no-repeat;
background-position: center;
border: 1px solid $bordercolor;
margin-left: auto;
margin-right: auto;
}

#header {
margin: 5px;
text-align: center;
color:$pagetitlecolor;
}

Замечание: правило для бордюра («рамки») я перенес из свойств стилей элемента #header в элемент #header-inner. Это сделано для того, чтобы избавиться от отступа сверху.


Не забудь сохранить шаблон.


Итогом всех этих манипуляций должно стать следующее:


Заголовок Blogger. ТюнингованныйЭтап 2: «Обработка напильником» виджета «заголовок»

Успехов!


Бонус для RSS-подписчиков: Анекдот про напильник.


Украли американцы у русских чертежи истребителя. Собрали — паровоз. Разобрали, собрали — паровоз! Что делать, выкрали русского специалиста. Спец берёт чертёж, смотрит, смотрит и говорит: «Там же внизу маленьким шрифтом: после сборки обработать напильником».

Статьи «в тему»



© 2010 dotrb.blogspot.com

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

БабочкаЯночка комментирует...

Я в прошлом году исследовала вопрос размещения в заголовке блогов больших картинок. Если вам интересно, то вот отчет:
http://kopomko.blogspot.com/2009/05/blog-post_02.html
С удовольствием свела бы "заголовок" до узкой полосочки, в которой одной строчкой помещалось бы название.

Заядлый комментирует...

я столкнулся с такой проблемой у меня почему то в заголовке текст перестал быть ссылкой(. Посомтрите пож http://dota-ru.blogspot.com/

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

Здравствуйте. У меня вопрос не по теме. Как можно удалить старые тестовые сообщения из списка чтения http://www.blogger.com/home, чтобы они не отображались в ленте? Из блога я их удалил, а в ленте они всё равно присутствуют.

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

Есть мнение, что RSS лента должна сама обновиться. Что-то подобное я проводил в гугловом RSS Reader

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

БабочкаЯночка, с отчетом ознакомился. Я считаю, что это дело личных предпочтений. Без особых проблем можно сделать узкий заголовок. Кстати, убрать ненужные или уменьшить гаджеты между Заголовком и, собственно Сообщением.

Я использую только Навигационную строку и ничего больше.

Заядлый, часто в шаблонах Blogger встречаюсь с условием:
- на странице сообщений Заголовок выводится ссылкой;
- на главной странице Заголовок – это просто текст.

Все это там же в виджете и настраивается.

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

Добрый день. замечательная статья, спасибо огромное:-)... Интересный сайт хорошо описали

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

Добрый день!
Нашла вашу статьсю в интернете.Честно прочитала.
Но обращаюсь к вам за помощью. В плане НТМЛ кода я полная бллондинка (именно та, для которых тут есть Ваши колкие замечания, судя по всему:-)). В общем, ай нид е хелп.Статью прочитала, но, признаюсь, не поняла немного технологию.
У меня есть блог на Блоггере- но не на шаблоне Блоггера, а шаблон из интернета. В общем, колонки под текст я адаптировала. А теперь полезло название и описание в разные стороны. Не могу понять, как в коде это все исправить. ПОЖАЛУЙСТА, помогите!!!!! Не считайте за рекламу своего блога- это личная ппосьба. Ыот, что напортачила http:/drugapodruga.blogspot.com/.

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

Compass,, лично я люблю блондинок =). А вот блогом совершенно не занимаюсь. …Наверное, потому, что люблю блондинок. А еще бег, горный велосипед, и всяческое насилие над собой, что лично для себя я определяю словом «фитнес».

Что касается съехавшего заголовка, то тут все просто. Дело тут в стилях CSS. Для блока содержимого (content-wrapper) у вас в блоге задана ширина 720 пикселей, а для блока заголовка (header-wrapper) – 850.

Как исправить: найдите в шаблоне блога стили для блока заголовка. Они будут выглядеть примерно так:
#header-wrapper {
height:300px;
padding:30px 0 0;
text-align:right;
width:850px;
}
..И поменяйте последнее правило на width:720px;. Примерно так:
#header-wrapper {
height:300px;
padding:30px 0 0;
text-align:right;
width:720px;
}
Сохраните шаблон. Успехов!

John Spade комментирует...

"Вместо самолета получился паровоз"

Хахаха, чуть не помер от смеха! :DD

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

Жги!