2014/11/18

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.

Brak komentarzy :

Prześlij komentarz

Komentarze zawierające SPAM zostaną usunięte.

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