Объявление
Уважаемые читатели, друзья, подписчики. В связи с участившимся и, порядком надоевшим спамом в комментариях от всяких анонимах(будь они не ладны), я вынуждена включить модерацию комментариев на некоторое время. Очень надеюсь на ваше понимание.

Информация об авторе блога под каждым сообщением в Блоггер.

Здравствуйте, дорогие друзья, читатели и гости блога. Как сделать блок с информацией  об авторе сайта и расположить его под каждым сообщением. Речь пойдёт не о виджите, который нам предлагают разработчики Blogger, а о красиво оформленном участке, где можно обозначить, кто автор статьи, рассказать немного о себе и о  вашем проекте.
Установить иконки социальных сетей. Или ещё дать какую-то интересную информацию для посетителей.

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


Я на скорую руку скромно набросала, что на ум пришло. Ниже разберём какие строки за что отвечают. А тут уж личное дело каждого как раскрываться (или скрываться).

Шаг 1.  Для установки информации об авторе сначала приготовим сам HTML код. Предлагаю сначала скопировать его и сделать необходимые настройки.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='author_info'>
<div class='author_photo'>
<img alt='author' src='http://i50.tinypic.com/iw7lec.jpg'/></div>
                    <h3>Автор этого сообщения:</h3>
                                        <p><a href='http://www.shpargalochki.ru/ ' title=' автор'>Вика Барад</a> это уже 100 пост на моём блоге<a href='http://www.shpargalochki.ru/ '> Шпаргалки блогерши </a> . </p>
                    <p>Мне очень приятно, что вы посетили мой блог. Присоединяйтесь ко мне. Я в  <a href='https://twitter.com/vikserv '>Twitter</a> в <a href="https://www.facebook.com/viktoria.barad ">Facebook</a> в <a href="https://plus.google.com/u/0/102675035951405180575/posts " >Гугл+</a><br style='clear:both;'/></p>
                   </div>
</b:if>



Зелёный цвет это адрес вашей аваторки или фотография профиля. Можно просто зайти в свой профиль Гугл+ нажать на своё фото и копировать URL. Красным цветом я выделила сам текст, который вы должны сочинить. Синие строки - адрес блога и адреса ваших страниц в социальных сетях. Сюда можно добавлять и убирать, что не нужно. Используя этот участок в коде.

<a href="https://plus.google.com/u/0/102675035951405180575/posts " >Гугл+</a>

Шаг 2.  код CSSЕсли сам дизайн всей коробки ваc устраивает в этом коде ничего менять не нужно. 


.author_info {
        float: left;
        width: 573px;
        padding: 10px;
        border: 1px solid #ccc;
        margin-bottom: 15px;
        margin-top: 15px;
        background: #eee;
}
.author_info h3 {
        margin-bottom: 10px;
}
.author_photo {
        float: right;
        margin: 0 0 0 10px;
}
.author_photo img {
        border: 1px solid #666;
}


width: 573px; ширина блока
 border: 1px solid #ccc; ширина и цвет рамки
background: #eee; общий фон
 border: 1px solid #666; ширина и цвет рамки аватора.

Со значениями  margin и padding можно поиграться если что-то не то.

А сейчас сама установка.

Идём в админпанель блога - вкладка шаблон. Обязательно делайте резервную копию на случай если что-то пойдёт не так. С помощью клавиш Ctrl+F находим такую строчку.

<div class='post-footer-line post-footer-line-1'>или
<div class='post-footer-line post-footer-line-1'>


Сразу под ней устанавливаем первый код HTML (шаг1).


Далее, там же в шаблоне ищем строку  ]]></b:skin> и над ней устанавливаем второй код CSS (шаг2).

Нажимаем просмотр. И если нет никаких предупреждений, что код не может быть принят, щёлкаем сохранить шаблон. Возвращайтесь в свой блог и просмотрите любое сообщение. В конце должна отобразится коробка с информацией о вас.

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

И у меня сегодня всё. Спасибо, что заглядываете в мои шпаргалки. Удачи всем.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


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

  1. когда-нибудь, когда и мой блог станет (эх, мечты) популярным, в обязательном порядке буду Ваши уроки на практике применять.

    ОтветитьУдалить
    Ответы
    1. Спасибо, Семён. А совмещать не пробовали?

      Удалить
  2. Действительно полезный пост, особенно для тех, кто борется за авторство статей в гугл.

    ОтветитьУдалить
    Ответы
    1. Кстати, да,Николай я об этом и не подумала как-то.

      Удалить
  3. Вика можешь мне кого-то посоветовать. кто бы посмотрел, почистил код блога. Он у меня стал тормозить нереально. Естественно не за бесплатно, но оплата, исключительно с карты, на карту, другим способам не доверяю. Последний раз мне оптимизировал код sv9t с Blogger Форум. Хорошо сделал всё, но видимо Гугл что-то там все меняет и нужно вновь оптимизировать, чистить.

    ОтветитьУдалить
    Ответы
    1. Саша, сейчас сама посмотрю сначала тормозит или нет. Через код элемента гляну и если что-то увижу -придумаем.

      Удалить
    2. Спасибо. Но точно тормозит не по детски. Особенно. если открываю отдельное стихотворение.

      Удалить
    3. Да , есть немного. Первое на что обратила внимание-убрала бы гаджет блоги которые я читаю. Куча ссылок с картинками. Они останутся у тебя в списке чтения так или иначе.
      битые ссылки проверь здесь http://www.brokenlinkcheck.com. Как пользоваться в этом посте http://www.shpargalochki.ru/2014/06/bitye-ssylki-i-kak-ih-proverit.html
      Картинки сжимаешь или нет?

      Удалить
  4. Викуль я в этом ничего не понимаю.

    ОтветитьУдалить
  5. Ответы
    1. Саша, вышли мне твой адрес почты эл. Через форму связи ниже.

      Удалить
  6. Asidorovnin@yandex.ru или Asidorovnin@gmail.com

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

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML