Beauty

Kolorowy widżet z przyciskami udostępniania

Demo - najedź myszą na przyciski

Umieszczanie widżetu na Bloggerze 

Zaloguj się do panelu admina, wejdź w menu Układ i dodaj gadżet tam, gdzie chcesz, by się wyświetlał przycisk.
Wybierz HTML/JavaScript.
W tytuł możesz wpisać Obserwuj nas, lub inny własny tekst, a w treść wklej skopiowany kod widżetu. Na koniec Zapisz.

Kod widżetu

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/> 
<script src="https://apis.google.com/js/platform.js" async defer></script>
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>
<script src="//platform.linkedin.com/in.js" type="text/javascript">  lang: pl_PL</script>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/pl_PL/sdk.js#xfbml=1&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<section id="aa_wpfs_wrap" class="" >
<div id="aa_wpfs_block">
 <div class="aa_wpfs_block_img aa_wpfs_block_img_fb" >
  <i class="fa fa-facebook aa_wpfs_block_icon" ></i>
 </div>
 <div class="aa_wpfs_block_dsc aa_wpfs_block_dsc_fb" >    
  <div class="aa_wpfs_block_follow">
   <div id="fb-root"></div>
       <div class="fb-like" data-href="https://facebook.com/blokotek/" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>  
     </div>
 </div>
</div>
<div id="aa_wpfs_block">
 <div class="aa_wpfs_block_img aa_wpfs_block_img_twt" >
  <i class="fa fa-twitter aa_wpfs_block_icon" ></i>
 </div>
 <div class="aa_wpfs_block_dsc aa_wpfs_block_dsc_twt" > 
  <div class="aa_wpfs_block_follow">
   <a href="https://twitter.com/share" class="twitter-share-button" data-lang="pl">Tweetnij</a>
  </div>
 </div>
</div>
<div id="aa_wpfs_block">
 <div class="aa_wpfs_block_img aa_wpfs_block_img_yt" >
  <i class="fa fa-youtube aa_wpfs_block_icon" ></i>
 </div>
 <div class="aa_wpfs_block_dsc aa_wpfs_block_dsc_yt" >
  <div class="aa_wpfs_block_follow">
   <div class="g-ytsubscribe" data-channel="Blokotek" data-layout="default" data-count="default"></div>
  </div>
 </div>
</div>
<div id="aa_wpfs_block">
 <div class="aa_wpfs_block_img aa_wpfs_block_img_ggl" >
  <i class="fa fa-google-plus aa_wpfs_block_icon" ></i>
 </div>
 <div class="aa_wpfs_block_dsc aa_wpfs_block_dsc_ggl ">
  <div class="aa_wpfs_block_follow">
   <div class="g-plusone" data-annotation="bubble" data-height="" data-href="https://plus.google.com/+BlokotekPLDodatki/" data-rel="author"></div>
  </div>
 </div>
</div>
<div id="aa_wpfs_block">
 <div class="aa_wpfs_block_img aa_wpfs_block_img_pin" >
  <i class="fa fa-pinterest aa_wpfs_block_icon" ></i>
 </div>
 <div class="aa_wpfs_block_dsc aa_wpfs_block_dsc_pin" >
  <div class="aa_wpfs_block_follow">
   <a data-pin-config="beside" data-pin-do="buttonBookmark" href="//pinterest.com/pin/create/button/"><img src="//assets.pinterest.com/images/PinExt.png" /></a>
  </div>
 </div>
</div>
<div id="aa_wpfs_block">
 <div class="aa_wpfs_block_img aa_wpfs_block_img_li" >
  <i class="fa fa-linkedin aa_wpfs_block_icon" ></i>
 </div>
 <div class="aa_wpfs_block_dsc aa_wpfs_block_dsc_li" >
  <div class="aa_wpfs_block_follow">
   <script type="IN/Share" data-counter="right"></script>
  </div>
 </div>
</div>
</section>

<style>
#aa_wpfs_wrap {
    display: block;
    width: 200px;
    margin: 10px auto;
    padding: 0;
    text-align: center;
    background: #fff;
    overflow: hidden;
}
#aa_wpfs_block {
    display: table;
    width: 100%;
  margin-bottom:2px
}
.aa_wpfs_block_img {
    display: table-cell;
    width: 25%;
    vertical-align: top;
    padding: 13px;
}
.aa_wpfs_block_dsc {
    display: table-cell;
    width: 75%;
    vertical-align: top;
    padding: 10px;
}

.aa_wpfs_block_follow {
    display: block;
    text-align: left;
}
.aa_wpfs_block_icon {
    color: #fff;
    font-size: 20px !important;
}
/* Facebook */
 .aa_wpfs_block_img_fb {
    background: #3b5998;
}
.aa_wpfs_block_dsc_fb {
    background: rgba(59, 89, 152, 0.24);
}
/* Twitter */
 .aa_wpfs_block_img_twt {
    background: #55acee;
}
.aa_wpfs_block_dsc_twt {
    background: rgba(85, 172, 238, 0.43);
}
/* Google */
 .aa_wpfs_block_img_ggl {
    background: #dd4b39;
}
.aa_wpfs_block_dsc_ggl {
    background: rgba(221, 75, 57, 0.34);
}
/* Pinterest */
 .aa_wpfs_block_img_pin {
    background: #cc2127;
}
.aa_wpfs_block_dsc_pin {
    background: rgba(204, 33, 39, 0.35);
}
/* Youtube */
 .aa_wpfs_block_img_yt {
    background: #b31217;
}
.aa_wpfs_block_dsc_yt {
    background: rgba(179, 18, 23, 0.52);
}
/* LinkedIn */
 .aa_wpfs_block_img_li {
    background: #0976b4;
}
.aa_wpfs_block_dsc_li {
    background: rgba(9, 118, 180, 0.39);
}
/*------------------------------------*\
    RESPONSIVE
\*------------------------------------*/
 @media only screen and (min-width:320px) {
    .aa_wpfs_block_img {
        display: block;
        width: 100%;
        vertical-align: top;
        padding: 10px;
    }
    .aa_wpfs_block_dsc {
        display: block;
        width: 100%;
        vertical-align: top;
        padding: 10px;
        text-align: center;
    }
    .aa_wpfs_block_dsc_txt_h4 {
        text-align: center;
    }
    .aa_wpfs_block_follow {
        text-align: center;
    }
}
@media only screen and (min-width:480px) {
    .aa_wpfs_block_img {
        display: block;
        width: 100%;
        vertical-align: top;
        padding: 10px;
    }
    .aa_wpfs_block_dsc {
        display: block;
        width: 100%;
        vertical-align: top;
        padding: 10px;
        text-align: center;
    }
    .aa_wpfs_block_dsc_txt_h4 {
        text-align: center;
    }
    .aa_wpfs_block_follow {
        text-align: center;
    }
}
@media only screen and (min-width:768px) {
    .aa_wpfs_block_img {
        display: block;
        width: 100%;
        vertical-align: top;
        padding: 10px;
    }
    .aa_wpfs_block_dsc {
        display: block;
        width: 100%;
        vertical-align: top;
        padding: 10px;
        text-align: center;
    }
    .aa_wpfs_block_dsc_txt_h4 {
        text-align: center;
    }
    .aa_wpfs_block_follow {
        text-align: center;
    }
}
@media only screen and (min-width:1024px) {
    .aa_wpfs_block_img {
        display: table-cell;
        width: 25%;
        vertical-align: top;
        padding: 13px;
    }
    .aa_wpfs_block_dsc {
        display: table-cell;
        width: 75%;
        vertical-align: top;
        padding: 10px;
    }
    .aa_wpfs_block_dsc_txt_h4 {
        text-align: left;
    }
    .aa_wpfs_block_follow {
        text-align: left;
    }
}
@media only screen and (min-width:1140px) {
    .aa_wpfs_block_img {
        display: table-cell;
        width: 25%;
        vertical-align: top;
        padding: 13px;
    }
    .aa_wpfs_block_dsc {
        display: table-cell;
        width: 75%;
        vertical-align: top;
        padding: 10px;
    }
    .aa_wpfs_block_dsc_txt_h4 {
        text-align: left;
    }
    .aa_wpfs_block_follow {
        text-align: left;
    }
}
@media only screen and (min-width:1280px) {
    .aa_wpfs_block_img {
        display: table-cell;
        width: 25%;
        vertical-align: top;
        padding: 13px;
    }
    .aa_wpfs_block_dsc {
        display: table-cell;
        width: 75%;
        vertical-align: top;
        padding: 10px;
    }
    .aa_wpfs_block_dsc_txt_h4 {
        text-align: left;
    }
    .aa_wpfs_block_follow {
        text-align: left;
    }
}
</style>

Dostosowywanie widżetu

  • Tekst zaznaczony na granatowo zamień na nazwę użytkownika na Facebooku.
  • Tekst zaznaczony na czerwono zamień na nazwę użytkownika na Google+.
  • Tekst zaznaczony na żółto zamień na nazwę użytkownika na YouTube.

Instagram