карточка профиля автора для BLOGGER

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

В результате получилось создать индивидуальный стиль, под собственный дизайн вполне симпатичный и информативный, скорее всего даже не виджет, а карточку - профиля. Так её назовём. Ну вот как - то так примерно



Рабочий вариант на тестовом блоге в сайдбаре в самом низу


Что на ней присутствует

1.  Ваша фотография профиля.
2. Красивый дизайн самой карты, который легко настраивается
3. Ваш ник, имя или фамилия
4 Можно указать род занятий, хобби
5.Добавим 2 кнопки на нужные страницы. Это могут быть ссылки на вашу полную страницу об авторе, на главную страницу, карту, мастер классы, на паблики в социальных сетях. Всё что угодно.
6. Карточка прекрасно впишется в боковой панели блога.

Скопируйте , приведённый ниже код и будем ваять именно вашу карту профиля дальше.


<figure class="snip1">
  <img src="https://w-dog.ru/wallpapers/10/19/380923269777589.jpg" alt="фото" />
  <figcaption><img src="https://lh3.googleusercontent.com/a-/AAuE7mA2BanaiBKNuN8BR_ECcqksSRfEzyzRUwTkbQwKqw=s96-cc

" alt="profile" class="profile" />
    <h2>Вика Барад<span>Блоггер</span></h2>
    <p>Привет, я автор блога шпаргалки блогерши, буду рада знакомству. Присоединяйтесь  </p><a href="http://www.shpargalochki.ru/" class="follow">мой блог</a><a href="https://vk.com/public150615645" class="info">Группа в ВК</a>
  </figcaption>
</figure>

<style>
.snip1 {
  font-family: 'Roboto', Arial, sans-serif;
  color: #fff;
  position: relative;
  overflow: hidden;
  margin: 10px;
  min-width: 230px;
  max-width: 315px;
  width: 100%;
  color: #ffffff;
  text-align: left;
  line-height: 1.4em;
  background-color: #141414;
}
.snip1 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
.snip1 img {
  max-width: 100%;
  vertical-align: top;
  opacity: 0.85;
}
.snip1 figcaption {
  width: 100%;
  background-color: #141414;
  padding: 25px;
  position: relative;
}
.snip1 figcaption:before {
  position: absolute;
  content: '';
  bottom: 100%;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 55px 0 0 400px;
  border-color: transparent transparent transparent #141414;
}
.snip1 figcaption a {
  padding: 5px;
  border: 1px solid #ffffff;
  color: #ffffff;
  font-size: 0.7em;
  text-transform: uppercase;
  margin: 10px 0;
  display: inline-block;
  opacity: 0.65;
  width: 47%;
  text-align: center;
  font-weight: 600;
  letter-spacing: 1px;
  text-decoration: none;
}
.snip1 figcaption a:hover {
  opacity: 1;
}
.snip1 .profile {
  border-radius: 50%;
  position: absolute;
  bottom: 100%;
  left: 25px;
  z-index: 1;
  max-width: 90px;
  opacity: 1;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}
.snip1 .follow {
  margin-right: 6%;
  border-color: #2980b9;
  color: #2980b9;
}
.snip1 h2 {
  margin: 0 0 5px;
  font-weight: 300;
}
.snip1 h2 span {
  display: block;
  font-size: 0.5em;
  color: #2980b9;
}
.snip1 p {
  margin: 0 0 10px;
  font-size: 0.8em;
  letter-spacing: 1px;
  opacity: 0.8;
}
.snip1:hover:before,
.snip1.hover:before {
  bottom: 0;
  box-shadow: 0 0 0px white;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}</style>
<script>
$(".hover").mouseleave(
  function () {
    $(this).removeClass("hover");
  }
);
</script>


https://w-dog.ru/wallpapers/10/19/380923269777589.jpg- это адрес картинки - фона в верхней части

https://lh3.googleusercontent.com/a-/AAuE7mA2BanaiBKNuN8BR_ECcqksSRfEzyzRUwTkbQwKqw=s96-cc - адрес вашей миниатюры. Его можно скопировать в вашем профиле Гугл или установить другой аватор.

В строках отмеченных розовым цветом пишите свой ник, имя, занятие и пояснительный текст.

Соответственно, то что выделено зелёным это адреса страниц на которые будет переход при нажатии на кнопку.

Основной фон карточки профиля я тоже отметила цветом в нескольких местах #141414;

Настройки самые элементарные и не думаю, что могут возникнуть вопросы. Если будут - пишите в комментариях. Разберёмся.

Готовый код виджета устанавливаем в разделе ДИЗАЙН - гаджет HTML/JavaScript  в боковой панели блога. Кстати, думаю, что она не плохо будет смотреться и вверху, когда у пользователя есть возможность сразу познакомиться с автором. Фон и картинку можно легко менять в зависимости от вашего настроения или времени года. Она всегда будет новой. Ну это на ваше усмотрение.

Всем добра и удачи. 


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

введите пожалуйста свой адрес электронной почты :

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

  1. Здравствуй, Виктория! Конечно, это очень красиво! Спасибо!

    ОтветитьУдалить
  2. Привет, Ирина. Ага, попробуй для своих котеек такое сделать.

    ОтветитьУдалить
  3. Интересна штука. Спасибо.

    ОтветитьУдалить
  4. Саша, ну да привлекает внимание.

    ОтветитьУдалить
  5. Замечательно красивая визитка. Завидую!

    ОтветитьУдалить
  6. Еще одна интересность! Спасибо большое за код и за подробные разъяснения )))

    ОтветитьУдалить
  7. Виктория, ну у тебя уже получилось с предыдущим кодом, при желании и такое получится.

    ОтветитьУдалить
  8. Ой, какая прелесть! Добрый день, Вика! Супер, обязательно надо попробовать... Очень понравилось :-)

    ОтветитьУдалить
  9. Елена, ну даже попровать стоит. Если ещё подумать то наверняка и для другого можно применить.

    ОтветитьУдалить
  10. Давно не заглядывал к тебе, а тут такая красота 😁
    Стильное оформление получилось, заберу идею и на этот раз 😁...

    ОтветитьУдалить
    Ответы
    1. Привет, Виктор, конечно забирай. Да, давненько тебя не было.

      Удалить
  11. Что случилось с виджетом "Подписчики с блогер"? Вместо аваторок только тонкая полоска.

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

    ОтветитьУдалить
    Ответы
    1. Делал, не помогло. Хотя нет. это только в моём Я.Браузере, пробовал смотреть с других - всё нормально. Спасибо.

      Удалить

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

Пользовательский поиск