Притурки. "За автора" със социални бутони в Blogger

Скъпи мои читатели, има официална притурка в Blogger, известна като „Потребителски профил“. Ние, блогърите, си я знаем като притурка „За автора“. Тя е важна, за да се запознаят с вас лоялните ви читатели и блогър последователи.
Срещала съм я в различни варианти. С този съм ви запознала отдавна.

А за този писа скоро колегата и приятел Виктория Барад.

Ако проявявате интерес към нейния вариант ще ви запозная и с него.
Днес имам за вас един много лесен урок. Как да добавите в страничната лента на Blogger изчистена и стилна притурка - визитна картичка на автора на блога?  Като тази.

Тя съдържа и социални бутони, така че можете да споделяте в своите различни социални медийни профили връзки заедно с кратко и просто описание.
➤Тази притурка е идеална опция за показване на информация за вас по най-стилния, но изчистен начин;
➤В нея има място за изображение, вашето име, кратка информация за вас и някои социални медийни бутони;
➤Всичко може да се редактира и персонализира, и е много лесна за настройка;
Така че без да губим време, нека започнем. Как изглежда? Вижте моята визитна картичка в лявата странична лента.
Първото нещо, което трябва да направите, е да влезете в профила си в Blogger и отидете на Оформление ➔ Добавяне на притурка ➔ изберете HTML/JavaScript ➔ поставете в празното пространство следния код:

<div class="widget-content">

<div class="sidebar_about_author">

<div class="inner_wrapper">

<div class="aboutme-img">

<img alt="Author" class="img-responsive" height="auto" src="http://4.bp.blogspot.com/-NZ20iDmM36s/VPqinUgYD0I/AAAAAAAAC3E/rqHR1YRT4tY/s360-h257-c/048.jpg" title="Author" width="150" />

</div>

</div>

<div class="aboutme-info">

<center><h4><a href="https://www.blogzablogove.com/p/za-avtora-na-bloga.html">PEPA TABAKOVA</a></h4></center>

<center><p>Автор и администратор на <a href="https://www.blogzablogove.com">Блог за блогове</a>, <a href="https://www.thelibrary-bg.com">Библиотека"Пъстри халища"</a>, <a href="https://pepatab.blogspot.com">ZigZag</a> и <a href="https://peredkaminom.blogspot.com">Перед камоном</a>.</p></center>

</div>

<div class="aboutme-wrpicon">

<ul class="extender">

<li class="aboutme-icon"><a href="https://www.facebook.com/blogzablogove/" rel="nofollow" target="_blank" title="Facebook-Блог за блогове"><i class="fa fa-facebook"></i></a></li>

<li class="aboutme-icon"><a href="https://twitter.com/blogzablogove" rel="nofollow" target="_blank" title="Twitter"><i class="fa fa-twitter"></i></a></li>

<li class="aboutme-icon"><a href="https://www.pinterest.com/blogzablogove/" rel="nofollow" target="_blank" title="Pinterest"><i class="fa fa-pinterest-p"></i></a></li>

<li class="aboutme-icon"><a href="https://www.facebook.com/thelibrarybgcom/" rel="nofollow" target="_blank" title="Facebook-Библиотека"Пъстри халища""><i class="fa fa-facebook"></i></a></li>

</ul>

</div>

</div>

<style>

.aboutme-img {

position: relative;

max-height: 150px;

overflow: hidden;

}

.aboutme-img img {

max-width: 100%;

width: 100%;

}

.aboutme-info {

margin-top: 20px;

font-size: 13px;

}

.aboutme-info h4 {

margin-bottom: 10px;

font-size: 16px;

text-transform: uppercase;

color: #26c5da;

font-weight: 700;

}

.aboutme-info p {

margin: 5px 0;

}

.aboutme-wrpicon {

display: block;

margin: 15px auto 10px auto;

position: relative;

}

.aboutme-wrpicon .extender {

width: 100%;

display: block;

}

.extender {

text-align: center;

font-size: 16px;

}

.extender .aboutme-icon {

background: rgba(0,0,0,.06);

display: inline-block;

border: 0;

margin: 0;

padding: 0;

border-radius: 3px;

}

.extender .aboutme-icon a {

display: inline-block;

font-family: fontawesome;

font-weight: 400;

color: #aaa;

height: 32px;

width: 32px;

line-height: 32px;

border-radius: 3px;

}

</style>

</div>

➤Променете маркирания в червено и синьо текст с вашето изображение, име, описание и връзки към профилите ви в социалните мрежи;
➤Позиционирайте притурката в страничната лента, колкото се може по-горе;
➤Запазете подредбата;
➤Отворете блога си и проверете притурката на живо в действие;

Доскоро и успехът да споходи всички!

За въпроси моля, в коментарите. А може и на тази страница. Ще съм благодарна да оцените моя труд. Моля, гласувайте за блога ми на:


Здраве за всички вас! Не забравяйте да правите добро на други хора!