2015/04/21

Stylowy widżet - wizytówka autora z ikonami 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. Wizytówka autora. 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-container">
<div class="profile-box">
<div class="profile-cover-image">
<img src="http://3.bp.blogspot.com/-iMcOMzSMreU/VNODr7iaylI/AAAAAAAAI5Y/K_7fmjgq1oY/s1600/girl-flowers.jpg" />
</div>
<div class="profile-picture">
<img src="http://3.bp.blogspot.com/-iMcOMzSMreU/VNODr7iaylI/AAAAAAAAI5Y/K_7fmjgq1oY/s1600/girl-flowers.jpg" />
</div>
<div class="profile-content">
<h1>
Agata
</h1>
<p>
Miłośniczka podróży, rękodzieła oraz literatury z epoki Romantyzmu.
</p>
<div class="socials">
<a href='http://www.facebook.com/blokotek'>
<i class='fa fa-facebook'>
</i>
</a>
<a href='http://twitter.com/Blokotek'>
<i class='fa fa-twitter'>
</i>
</a>
<a href='https://plus.google.com/+BlokotekPlDodatki'>
<i class='fa fa-google-plus'>
</i>
</a>
<a href='http://www.pinterest.com/blokotek'>
<i class='fa fa-pinterest-p'>
</i>
</a>
<a href='http://instagram.com/Blokotek.pl'>
<i class='fa fa-instagram'>
</i>
</a>
<a href='http://www.bloglovin.com/blog/13115087'>
<i class='fa fa-heart'>
</i>
</a>
</div>
</div>
</div>
</div>

<style>
.author-container {
margin: 20px auto;
width: 400px;
font-family: inherit;
}

.author-container a {
display: inline-block;
transition: all ease 0.3s;
}

.profile-box {
background: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
position: relative;
overflow: hidden;
}

.profile-box .profile-picture {
position: absolute;
top: 240px;
left: 50%;
margin-left: -55px;
}

.profile-box .profile-picture img {
border: 5px solid #fff;
border-radius: 100%;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
width: 100px;
height: 100px;
}

.profile-cover-image {
height: 300px;
overflow: hidden;
}

.profile-cover-image img {
width: 100%;
}

.profile-content {
padding: 40px 20px;
text-align: center;
}

.profile-content h1 {
font-weight: normal;
margin-bottom: 0.2em;
}

.profile-content p {
font-size: 1.1em;
line-height: 1.6;
color: #d2d2d2;
text-align: justify;
}

.profile-content .socials a {
color: #d2d2d2;
margin: 0 15px;
font-size: 1.6em;
transform: translateY(4px);
}

.profile-content .socials a:hover {
color: #aaa;
transform: translateY(0);
}
</style>

Jak dostosować widżet?

  • Linki zaznaczone na pomarańczowo zamień na bezpośrednie adresy do swojego zdjęcia.
  • Tekst zaznaczony na żółto zamień na swoje imię.
  • Tekst zaznaczony na zielono zamień na swój opis.
  • Linki zaznaczone na turkusowo zamień na adresy swoich profili społecznościowych.

Brak komentarzy :

Prześlij komentarz

Komentarze zawierające SPAM zostaną usunięte.

Szablon stworzony z przez Blokotka. Wszelkie prawa zastrzeżone.