Stylowy widżet - wizytówka autora z ikonami społecznościowymi

przez - kwietnia 21, 2015

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.

Zobacz również

0 komentarzy