пятница, 15 февраля 2013 г.

Вставляем часы в шапку блога.

Из прошлой статьи Вы помните, что на экран монитора вся информация выводится тегами виджета, который должен располагаться в теге секции.
Если что то захочется удалить, то можно это сделать либо удалив виджет из HTML- части шаблона, либо в CSS-части его идентификатору написать правило display:none;
В первом случае Вы теряете виджет из шаблона и если вдруг он Вам потребуется придется создавать новый.
Во втором - просто удалите или закомментируйте правило. Естественно этот путь предпочтительней. Будем считать, что удалять Вы научились, не сложно: ломать, не строить!
Сегодня что нибудь построим, допустим часы в шапку. Вместо часов можно вставить баннер или что угодно (зависит от того какой код поместите в виджет).

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

Заголовок виджета лучше не вводить, будет несколько проблематично его убрать. В режиме Изменить HTML  вставьте полученный код и жмите кн. Сохранить.
Все, в сайтбаре появились часики. Вообщем, они здесь смотрятся неплохо. Посмотрим на них в коде шаблона:
Шаблон-->изменить HTML и опускайтесь в самый низ документа шаблона.
В секции правого сайтбара первым стоит виджет часов (указывает красная стрелка).
Можно этот гаджет вырезать из этой секции и вставить в секцию с class='header' под гаджетом заголовка и в разделе CSS шаблона написать правила для идентификатора этого гаджета (у меня id='HTML2' ).
Получится не красиво: его блок займет место под заголовком, коричневый фон заголовка расширится. Попробуйте сами.
Перетаскивайте, меняйте правила. Сделав какое то действие, нажмите кнопку Посмотреть. Что то не так, жмите Отменить изменения.
 Возможно можно влезь в код гаджета и что то изменить там.
Но можно поступить проще. Создать новую секцию и командовать ей как нам захочется. Документ шаблона не запрещает написать в нем новый код. Так и поступим. Копируем код (между желтым фоном).


<b:widget id='Header1' locked='true' title='Эксп (заголовок)' type='Header'/>
</b:section> <!--на желтом фоне существующий в шаблоне код-->
<div id='tim'>
<b:section class='tim1' id='tim1' maxwidgets='1' showaddelement='no'>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
</b:section>
</div>
    </div>

Идем в Шаблон-->Изменить HTML. Ищем секцию с заголовком (желтая) и после нее вставляем код. Удаляем строчку с моим гаджетом (голубая) и вставляем свой тег гаджета (если Вы его не трогали, то он  в самом низу документа в секции правого сайдбара.). Там вырезали! Вместо синей моей строчки вставили свой виджет.  Иначе при просмотре конструктор пошлет Вас далеко, далеко, но подскажет, что в документе два элемента с одинаковым id.

Если Вы сейчас нажмете кн. Посмотреть, то часы появятся как и раньше (рис. выше) слева внизу фона, только чуть повыше. Если у Вас не появились, но конструктор молча "проглотил" ваши старания, то чуть подождите. Мы еще не ввели правила вывода (CSS). Некоторые шаблоны прячут часы под фоном.
В прицепе, Вы можете разместить код где угодно в HTML части шаблона (только не внутри какой то секции), но логичней в <header> (заголовке).

Копируем код (правила вывода тега <div id='tim'>) между желтыми строчками. И вставляем его в документ шаблона перед квадратными скобками: ]]>

      }
#tim{
position:absolute;
top:224px;
left:787px;
z-index2;
}
      ]]>
    </b:template-skin>


Задали абсолютную позицию, расстояние сверху и слева от левого верхнего угла заголовка и в последней строчке, на всякий случай, приподняли его на верхний слой (что бы отбить у него желание прятаться под фоном).

Вы можете поиграть цифрами: изменили, кн. Просмотр. Не понравилось, закрыли просмотр и снова изменили и т.д.

Как лучше? Мне нравиться и так и эдак (в одном блоге оставлю в сайтбаре, а в этом -  в шапке. Сравните:


Вот и все. Надеюсь, Вы поняли что вместо часов можно вставить что угодно. Как Вам?
До встречи.

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

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

От Вас деловой комментарий - Вам подарок!