Авторский блок для блога

Здравствуйте, дорогие читатели!
Авторский блок в конце каждой статьи блога - не роскошь, а необходимая составляющая успеха.

Приведу несколько аргументов в защиту данного утверждения:


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

2. Присутствие в конце поста фотографии автора и минимальных данных вызывают доверие у читателей и потенциальных рекламодателей

3. Если вы относитесь к блогу, как к составляющей персонального бренда - то чем чаще посетители будут натыкаться на ваше фото или аватар в Интернете (например в Twitter, Facebook, Google+, ВКонтакте и др.), тем быстрее вы станете популярным и узнаваемым

4. Авторский блок делает дизайн страницы более солидным и профессиональным. Ранее такой блок был доступен для блогов WordPress. Теперь, благодаря любезным подсказкам BloggingeHow, мы можем установить это дополнение и на наш Blogger (blogspot)

Процесс этот занимает минимум времени и усилий. В результате наших действий должен получиться приблизительно такой вариант:

Посмотреть готовый образец можно в конце любой статьи тестового блога.

Строим авторский блок
Шаг 1. Заходим в Панель управления -- Дизайн -- Изменить HTML. Отмечаем флажком "Расширить шаблоны виджета". С помощью Ctrl + F находим строку:

]]></b:skin>

и прямо перед ней вставляем такой код, отвечающий за внешний вид нашего авторского блока:

.author-box {
background: #F7F7F7;
margin: 20px 0 40px 0;
padding: 10px;
border: 1px solid #E6E6E6;
overflow: auto;
}
.author-box p {
margin: 0;
padding: 0;
}
.author-box img {
background: #FFFFFF;
float: left;
margin: 0 10px 0 0;
padding: 4px;
border: 1px solid #E6E6E6;
}

Шаг 2. В следующий код мы должны внести персональные данные. Обычно я сначала копирую код в "Блокнот" (или другой редактор), там вношу правки и уже после этого вставляю его в шаблон. Можно, конечно, и по другому - вставить код в шаблон и вносить изменения по месту. Вот сам код:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='author-box'>
<p><img alt='' class='avatar avatar-70 photo' height='70' src='Ссылка на вашу фотографию' width='70'/><b>Имя автора</b><br/>
<div style='text-align: justify; font-family: verdana; color: rgb(0, 0, 0);'>Несколько слов о себе<br/>

Follow Me on Twitter <a href=' Ваша ссылка в Twitter '>Ваш логин в Twitter</a>
<p style='margin:-8px 0'><br/><center>
<a href=' URL вашего блога ' style='text-decoration:none;font-size:150%;'>Название вашего блога</a></center>
</p></div></p>
</div>
</b:if>

Теперь изменяем следующие данные:

• Ссылка на ваше фото
• Имя или логин автора (у меня: Сергей Мазураш aka Retliff)
• Несколько слов о себе
• Ваша ссылка в Twitter
• Ваш логин в Twitter
• Адрес вашего блога
• Название вашего блога

Шаг 3. Находим в шаблоне строчку

<data:post.body/>

и сразу после неё вставляем наш исправленный код. Сохраняем шаблон.

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

Ваш Retliff

Сергей Мазураш aka Retliff Блоггер со стажем. Стиль публикаций отличается простотой изложения и весёлым, ироничным подходом к самым серьёзным проблемам. Cпециализируется на создании и продвижении бесплатных блогов на платформе Blogger.

Твитнуть