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

Скъпи мои читатели, има официална притурка в 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7eDF2ASo9h5jf1YKzfuGTzdjm2rTQ4uMex4Kx9U-X3IAzz_AN4pSrRyrYgDqP354Pw9IMFzqRIMDqiP8C9roJwH1J6ump-Or41gigrW5HQytNAdm0kUoVni6DFLAel0jAO5H_v_CrjMnd/s360-c-h257/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>

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

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

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

BGtop

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