Здравствуйте, дорогие друзья, читатели и гости блога. Как сделать блок с информацией об авторе сайта и расположить его под каждым сообщением. Речь пойдёт не о виджите, который нам предлагают разработчики Blogger, а о красиво оформленном участке, где можно обозначить, кто автор статьи, рассказать немного о себе и о вашем проекте.
Установить иконки социальных сетей. Или ещё дать какую-то интересную информацию для посетителей.
Сейчас на современных шаблонах такие блоки, о себе любимом, можно увидеть сплошь и рядом. В этом сообщении уже был предложен вариант коробки об авторе, которая размещена в сайдбаре. Так что, если скрывать нечего, этот пример тоже и в дизайн прекрасно впишется, и зашедший обязательно обратит на это внимание. Вот что в итоге будем иметь.
Я на скорую руку скромно набросала, что на ум пришло. Ниже разберём какие строки за что отвечают. А тут уж личное дело каждого как раскрываться (или скрываться).
Шаг 1. Для установки информации об авторе сначала приготовим сам HTML код. Предлагаю сначала скопировать его и сделать необходимые настройки.
Зелёный цвет это адрес вашей аваторки или фотография профиля. Можно просто зайти в свой профиль Гугл+ нажать на своё фото и копировать URL. Красным цветом я выделила сам текст, который вы должны сочинить. Синие строки - адрес блога и адреса ваших страниц в социальных сетях. Сюда можно добавлять и убирать, что не нужно. Используя этот участок в коде.
<a href="https://plus.google.com/u/0/102675035951405180575/posts " >Гугл+</a>
Шаг 2. код CSS. Если сам дизайн всей коробки ваc устраивает в этом коде ничего менять не нужно.
border: 1px solid #ccc; ширина и цвет рамки
background: #eee; общий фон
border: 1px solid #666; ширина и цвет рамки аватора.
Со значениями margin и padding можно поиграться если что-то не то.
А сейчас сама установка.
Идём в админпанель блога - вкладка шаблон. Обязательно делайте резервную копию на случай если что-то пойдёт не так. С помощью клавиш Ctrl+F находим такую строчку.
Сразу под ней устанавливаем первый код HTML (шаг1).
Установить иконки социальных сетей. Или ещё дать какую-то интересную информацию для посетителей.
Сейчас на современных шаблонах такие блоки, о себе любимом, можно увидеть сплошь и рядом. В этом сообщении уже был предложен вариант коробки об авторе, которая размещена в сайдбаре. Так что, если скрывать нечего, этот пример тоже и в дизайн прекрасно впишется, и зашедший обязательно обратит на это внимание. Вот что в итоге будем иметь.
Шаг 1. Для установки информации об авторе сначала приготовим сам HTML код. Предлагаю сначала скопировать его и сделать необходимые настройки.
<b:if cond='data:blog.pageType == "item"'>
<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>
<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; ширина блока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;
}
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'>
<div class='post-footer-line post-footer-line-1'>
Сразу под ней устанавливаем первый код HTML (шаг1).
Далее, там же в шаблоне ищем строку ]]></b:skin> и над ней устанавливаем второй код CSS (шаг2).
Нажимаем просмотр. И если нет никаких предупреждений, что код не может быть принят, щёлкаем сохранить шаблон. Возвращайтесь в свой блог и просмотрите любое сообщение. В конце должна отобразится коробка с информацией о вас.
Ура, мы это сделали. Поздравляю. Пробуйте если вас такой вариант заинтересовал. Поверьте, иногда дольше расписываешь что и как. А сам процесс установки оказывается совершенно несложным. За то результат радует.
И у меня сегодня всё. Спасибо, что заглядываете в мои шпаргалки. Удачи всем.
здесь можно оформить подписку на новые шпаргалки
когда-нибудь, когда и мой блог станет (эх, мечты) популярным, в обязательном порядке буду Ваши уроки на практике применять.
ОтветитьУдалитьСпасибо, Семён. А совмещать не пробовали?
УдалитьДействительно полезный пост, особенно для тех, кто борется за авторство статей в гугл.
ОтветитьУдалитьКстати, да,Николай я об этом и не подумала как-то.
УдалитьВика можешь мне кого-то посоветовать. кто бы посмотрел, почистил код блога. Он у меня стал тормозить нереально. Естественно не за бесплатно, но оплата, исключительно с карты, на карту, другим способам не доверяю. Последний раз мне оптимизировал код sv9t с Blogger Форум. Хорошо сделал всё, но видимо Гугл что-то там все меняет и нужно вновь оптимизировать, чистить.
ОтветитьУдалитьСаша, сейчас сама посмотрю сначала тормозит или нет. Через код элемента гляну и если что-то увижу -придумаем.
УдалитьСпасибо. Но точно тормозит не по детски. Особенно. если открываю отдельное стихотворение.
УдалитьДа , есть немного. Первое на что обратила внимание-убрала бы гаджет блоги которые я читаю. Куча ссылок с картинками. Они останутся у тебя в списке чтения так или иначе.
Удалитьбитые ссылки проверь здесь http://www.brokenlinkcheck.com. Как пользоваться в этом посте http://www.shpargalochki.ru/2014/06/bitye-ssylki-i-kak-ih-proverit.html
Картинки сжимаешь или нет?
Викуль я в этом ничего не понимаю.
ОтветитьУдалитьЯ просто пишу стихи.
ОтветитьУдалитьСаша, вышли мне твой адрес почты эл. Через форму связи ниже.
УдалитьAsidorovnin@yandex.ru или Asidorovnin@gmail.com
ОтветитьУдалить