14 kwietnia 2015

Widżet z informacją o autorze dla Bloggera z przyciskami społecznościowymi

Demo

Jak umieścić widżet na Bloggerze?

Zaloguj się do panelu administracyjnego na Bloggerze. Przejdź do menu Układ i Dodaj gadżet.
Wybierz HTML/JavaScript.
W tytuł możesz wpisać, np. Informacja o autorze. W treść wklej skopiowany kod widżetu, który znajdziesz poniżej. Na koniec Zapisz.

Kod widżetu

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>

<div class='author'>
<img src='http://3.bp.blogspot.com/-iMcOMzSMreU/VNODr7iaylI/AAAAAAAAI5Y/K_7fmjgq1oY/s1600/girl-flowers.jpg' style='border-radius:50%;width:250px'/>
<h2>Agata</h2>
Miłośniczka podróży, rękodzieła oraz literatury z epoki Romantyzmu. Uwielbia styl Vintage, na którym wzoruje wykonywaną własnoręcznie biżuterię oraz przedmioty codziennego użytku.
<ul class='socials'>
<li><a href='http://www.facebook.com/blokotek'><i class='fa fa-facebook-official'></i></a></li>
<li><a href='http://twitter.com/Blokotek'><i class='fa fa-twitter'></i></a></li>
<li><a href='https://plus.google.com/+BlokotekPlDodatki'><i class='fa fa-google-plus'></i></a></li>
<li><a href='http://www.pinterest.com/blokotek/'><i class='fa fa-pinterest'></i></a></li>
<li><a href='http://instagram.com/Blokotek.pl'><i class='fa fa-instagram'></i></a></li>
<li><a href='http://www.bloglovin.com/blog/13115087'><i class='fa fa-heart'></i></a></li>
<li><a href='http://feeds.feedburner.com/blokotek'><i class='fa fa-rss'></i></a>
</ul>
</div>

<style>
/* Author widget in sidebar
----------------------------------------------- */
.author {
text-align: center;
}
ul.socials {
margin: 10px auto;
padding: 0;
z-index: 999;
position: relative;
}
.socials li {
display: inline-block;
margin: 0;
}
.socials li a {
display: block;
text-align: center;
line-height: 1em;
font-size: 16px;
border: 0;
height: 30px;
width: 30px;
color: #fff; /* kolor ikon */
background: #F62459; /* kolor tła przycisków  */
}
.socials li a:hover {
background: #22313F; /* kolor tła przycisków po najechaniu myszą  */
}
.socials i {
position: relative;
top: 25%;
left: 0;
}
</style>

Jak dostosować widżet?

  • Link zaznaczony na pomarańczowo zamień na bezpośredni adres do swojego zdjęcia.
  • Tekst zaznaczony na żółto zamień na swoje imię.
  • Tekst zaznaczony na zielono zamień na swój opis.
  • Link zaznaczony na granatowo zamień na adres swojego profilu/strony na Facebooku.
  • Link zaznaczony na turkusowo zamień na adres swojego profilu na Twitterze.
  • Link zaznaczony na czerwono zamień na adres swojego profilu/strony na Google+.
  • Link zaznaczony na różowo zamień na adres swojego profilu na Pinterest.
  • Link zaznaczony na fioletowo zamień na adres swojego profilu na Instagramie.
  • Link zaznaczony na limonkowo zamień na adres swojego profilu na Bloglovin'.
  • Link zaznaczony na cytrynowo zamień na adres swojego kanału Rss.
Designed by Blokotek. All rights reserved.