Beauty

Informacja o autorze - widżet na bloga


W tym poradniku pokażę ci, w jaki sposób umieścić na bloga ładny widżet z informacją o autorze. Zawiera on zdjęcie, tekst oraz przyciski społecznościowe. W tle możesz dodać własny obrazek.
Demo

Jak umieścić widżet na Bloggerze?

W panelu admina wejdź w menu Szablon => Edytuj kod HTML.
Kliknij w okno edytora, wciśnij kombinację klawiszy Ctrl + F i w wyszukiwarkę wpisz poniższy kod, po czym kliknij Enter.

<div class='region-inner tabs-inner'>

Następnie liczbę 1 zawartą w maxwidgets zamień na 2 (patrz obrazek poniżej), by uzyskać możliwość dodania drugiego gadżetu poza kartami z menu stron. Na koniec Zapisz szablon.
Teraz przejdź do menu Układ w panelu admina i tam, gdzie widnieją Strony - dodaj gadżet.
Wybierz HTML/JavaScript.
Tytuł gadżetu pozostaw pusty a w treść wklej poniższy kod widżetu, po czym kliknij Zapisz.

<script type="text/javascript">
  WebFontConfig = {
    google: {
      families: [ 'Marck+Script::latin,latin-ext' ] }
  }
    ;
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  }
  )();
</script>

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<style>
.authorinfo {
    width: 100%;
    text-align: center;
    background: #BAD1D1 url(http://1.bp.blogspot.com/-2c1YTxlHQkM/VKEtyvEo19I/AAAAAAAAHnE/f0olJ7IwSLE/s1600/2673730.png) repeat;
    font-family: 'Marck Script', cursive;
}

.authorinfo img {
    border-radius: 50%;
    border: 7px solid #FCB3B3;
    margin-top: 10px;
    cursor: pointer;
    -webkit-transition: all 1 ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

.authorinfo img:hover {
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
    transform: scale(1.3);
    -webkit-transition: all 1 ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

.authorname {
    font-weight: bold;
    margin: 10px 0;
    font-size: 40px;
    font-weight: bold;
}

.authordesc {
    font-size: 25px;
    background: #fff;
    opacity: 0.8;
    width: 60%;
    margin: 0 auto;
    padding: 20px;
    border-radius: 10px;
}

.social a:hover {
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
}

a.social {
    font-size: 30px;
    padding: 6px 0px;
    margin: 0 7px;
    width: 54px;
    text-align: center;
    color: #fff!important;
}

.social i.fa.fa-facebook {
    background: #3B5998;
    padding: 8px 18px;
}

.social i.fa.fa-google-plus {
    background: #D14836;
    padding: 8px 14px;
}

.social i.fa.fa-twitter {
    background: #00ACED;
    padding: 8px 14px;
}

.social i.fa.fa-pinterest {
    background: #CB2027;
    padding: 8px 14px;
}

.social i.fa.fa-rss {
    background: #F88F16;
    padding: 8px 14px;
}

.social i.fa.fa-youtube {
    background: #CD332D;
    padding: 8px 14px;
}

.social i.fa.fa-linkedin {
    background: #65B7D2;
    padding: 8px 14px;
}

.social i.fa.fa-instagram {
    background: #2b618f;
    padding: 8px 14px;
}

.social span a:hover {
    color: #fff;
}

.social {
    margin: 10px;
}

.social span a {
    list-style: none;
    text-align: center;
    display: inline-block;
    margin: 0 5px;
    width: 35px;
    color: #fff;
    height: 35px;
    line-height: 35px !important;
    -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    -webkit-transition: all 1 ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;

</style>
<div class="authorinfo">
  <br/>
  <img src="http://1.bp.blogspot.com/-Q71Y-aFOGZw/VKAvEZQjI_I/AAAAAAAAHkk/dBuMnKJwmik/s1600/2014-12-28_17h25_40.png" />
  <div class="authorname">
    Małgorzata
  </div>
  <div class="authordesc">
    Blogująca młoda mama, której pasją jest śledzenie modowych i urodowych nowinek.
  </div>
  <div class="social">
    <span>
      <a href="#" title="">
        <i class="fa fa-facebook">
        </i>
      </a>
    </span>
    <span>
      <a href="#" title="">
        <i class="fa fa-twitter">
        </i>
      </a>
    </span>
    <span>
      <a href="#" title="">
        <i class="fa fa-pinterest">
        </i>
      </a>
    </span>
    <span>
      <a href="#" title="">
        <i class="fa fa-linkedin">
        </i>
      </a>
    </span>
    <span>
      <a href="#" title="">
        <i class="fa fa-youtube">
        </i>
      </a>
    </span>
    <span>
      <a href="#" title="">
        <i class="fa fa-google-plus">
        </i>
      </a>
    </span>
    <span>
      <a href="#" title="">
        <i class="fa fa-rss">
        </i>
      </a>
    </span>
  </div>
  <br/>
</div>

Jak dostosować widżet?


1. Link zaznaczony na różowo zamień na bezpośredni adres do obrazka. Możesz użyć tych dowolnych teł, np.
 
Miliony ślicznych teł znajdziesz na ColourLovers.
2. Teksty zaznaczone na zielono zamień na swoje imię lub nick oraz opis.
3. # zaznaczone na turkusowo zamień na linki do swoich profili społecznościowych: Facebook, Twitter, Pinterest, Instagram, Youtube, Google+, Rss.

Instagram