codigo de botones de compartir

[alfredo11101]

Iniciado por AngelKrak

the hacian falta mas Estilos(CSS) por eso no se veia como querias >_<

HTML:

Código HTML:

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet' type='text/css' />
 
<div id="button-count-share">
  <div id="social_share">
    <div class="ct-wrapper" style="width: 670px;margin-bottom: 20px;;">
      <div id="share-buttons">
        <div class="facebook2 share-button">
          <i class="icon">
<i class="fa fa-facebook"></i></i>
          <div class="pslide">
            <p> facebook </p>
          </div>
          <div class="fb-like fb_iframe_widget" data-action="like" data-layout="button_count" data-share="false" data-show-faces="false" fb-xfbml-state="rendered" fb-iframe-plugin-query="action=like&amp;app_id=&amp;container_width=150&amp;href=http%3A%2F%2Ffabulous-themexpose.blogspot.com.es%2F2014%2F03%2Fpraesent-vitae-quam-vitae-arcu-posuer.html&amp;layout=button_count&amp;locale=en_US&amp;sdk=joey&amp;share=false&amp;show_faces=false"><span style="vertical-align: bottom; width: 76px; height: 20px;"><iframe name="f263c70cd" width="1000px" height="1000px" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" title="fb:like Facebook Social Plugin" src="http://www.facebook.com/plugins/like.php?action=like&amp;app_id=&amp;channel=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter%2F1ldYU13brY_.js%3Fversion%3D41%23cb%3Df46cc8f8c%26domain%3Dfabulous-themexpose.blogspot.com.es%26origin%3Dhttp%253A%252F%252Ffabulous-themexpose.blogspot.com.es%252Ff22e672778%26relation%3Dparent.parent&amp;container_width=150&amp;href=http%3A%2F%2Ffabulous-themexpose.blogspot.com.es%2F2014%2F03%2Fpraesent-vitae-quam-vitae-arcu-posuer.html&amp;layout=button_count&amp;locale=en_US&amp;sdk=joey&amp;share=false&amp;show_faces=false" style="border: none; visibility: visible; width: 76px; height: 20px;" class=""></iframe></span></div>
        </div>
        <div class="twitter share-button">
          <i class="icon">
<i class="fa fa-twitter">
</i>
          </i>
          <div class="pslide">
            <p> twitter </p>
          </div>
          <iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" src="http://platform.twitter.com/widgets/tweet_button.c197f64a14a7434e6e58ca9722b54406.en.html#_=1434079281248&amp;count=horizontal&amp;dnt=false&amp;id=twitter-widget-0&amp;lang=en&amp;original_referer=http%3A%2F%2Ffabulous-themexpose.blogspot.com.es%2F2014%2F03%2Fpraesent-vitae-quam-vitae-arcu-posuer.html&amp;size=m&amp;text=Praesent%20vitae%20quam%20vitae%20arcu%20posuer&amp;url=http%3A%2F%2Ffabulous-themexpose.blogspot.com.es%2F2014%2F03%2Fpraesent-vitae-quam-vitae-arcu-posuer.html"
          class="twitter-share-button twitter-tweet-button twitter-share-button twitter-count-horizontal" title="Twitter Tweet Button" data-twttr-rendered="true" style="position: static; visibility: visible; width: 78px; height: 20px;"></iframe>
          <script async="async" src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
        </div>
        <div class="google share-button">
          <i class="icon">
<i class="fa fa-google-plus">
</i>
          </i>
          <div class="pslide">
            <p> google+ </p>
          </div>
          <div id="___plusone_0" style="text-indent: 0px; margin: 0px; padding: 0px; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; display: inline-block; width: 90px; height: 20px; background: transparent;">
            <iframe frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" style="position: static; top: 0px; width: 90px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 20px;" tabindex="0" vspace="0" width="100%"
            id="I0_1434079277984" name="I0_1434079277984" src="https://apis.google.com/u/0/se/0/_/+1/fastbutton?usegapi=1&amp;count=true&amp;size=medium&amp;hl=en_GB&amp;origin=http%3A%2F%2Ffabulous-themexpose.blogspot.com.es&amp;url=http%3A%2F%2Ffabulous-themexpose.blogspot.com.es%2F2014%2F03%2Fpraesent-vitae-quam-vitae-arcu-posuer.html&amp;gsrc=3p&amp;ic=1&amp;jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.es_419.uo26R4UA1o4.O%2Fm%3D__features__%2Fam%3DAQ%2Frt%3Dj%2Fd%3D1%2Ft%3Dzcms%2Frs%3DAGLTcCOIHLVC9W8O2cGJE7KEo9t8UhusPQ#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh%2Conload&amp;id=I0_1434079277984&amp;parent=http%3A%2F%2Ffabulous-themexpose.blogspot.com.es&amp;pfname=&amp;rpctoken=41178637"
            data-gapiattached="true" title="+1"></iframe>
          </div>
          <script type="text/javascript">
            window.___gcfg = {lang: 'id'};
                                    (function() {
                                    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
                                    po.src = 'https://apis.google.com/js/plusone.js';
                                    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
                                   })();
          </script>
        </div>
        <div class="facebook1 share-button">
          <i class="icon">
<i class="fa fa-facebook"></i></i>
          <div class="pslide">
            <p> fb share </p>
          </div>
          <a class="fb-share-button fb_iframe_widget" name="fb_share" rel="nofollow" share_url="&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url" type="button_count" fb-xfbml-state="rendered" fb-iframe-plugin-query="app_id=&amp;container_width=0&amp;href=http%3A%2F%2Ffabulous-themexpose.blogspot.com.es%2F2014%2F03%2Fpraesent-vitae-quam-vitae-arcu-posuer.html&amp;locale=en_US&amp;sdk=joey&amp;type=button_count"><span style="vertical-align: bottom; width: 84px; height: 20px;"><iframe name="f1f1ef37fc" width="1000px" height="1000px" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" title="fb:share_button Facebook Social Plugin" src="http://www.facebook.com/plugins/share_button.php?app_id=&amp;channel=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter%2F1ldYU13brY_.js%3Fversion%3D41%23cb%3Df289b19248%26domain%3Dfabulous-themexpose.blogspot.com.es%26origin%3Dhttp%253A%252F%252Ffabulous-themexpose.blogspot.com.es%252Ff22e672778%26relation%3Dparent.parent&amp;container_width=0&amp;href=http%3A%2F%2Ffabulous-themexpose.blogspot.com.es%2F2014%2F03%2Fpraesent-vitae-quam-vitae-arcu-posuer.html&amp;locale=en_US&amp;sdk=joey&amp;type=button_count" style="border: none; visibility: visible; width: 84px; height: 20px;" class=""></iframe></span></a>
        </div>
      </div>
    </div>
  </div>
</div>
 

CSS:

Código CSS:

/* CSS Slide Share Button */
 
#button-count-share {
  width: 100%;
  overflow: hidden;
  background: transparent;
  margin: 0 auto;
  padding: 3px;
  margin-top: 15px;
  margin-bottom: 15px;
}
 
#button-count-share span {
  float: left;
  position: relative;
  font-size: 13px;
  color: #fff;
  margin: 12px 5px 12px 5px
}
 
.button-share {
  background: #f0f0f0;
  position: relative;
  display: block;
  float: left;
  height: 40px;
  overflow: hidden;
  width: 140px;
  margin: 4px;
  border-radius: 1px;
}
 
.slide-share {
  z-index: 2;
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  width: 140px;
  margin: 0
}
 
.slide-share p {
  font-family: 'Open Sans';
  font-weight: 400;
  color: #fff;
  font-size: 16px;
  left: 0;
  position: absolute;
  text-align: center;
  top: 10px;
  width: 100%;
  margin: 0
}
 
.button-share .slide-share {
  transition: all 0.4s ease-in-out
}
 
.facebook .fb_iframe_widget {
  display: block;
  position: absolute;
  right: 15px;
  top: 0;
  z-index: 1
}
 
.twitter iframe {
  right: 10px;
  top: 10px;
  z-index: 1;
  display: block;
  position: absolute
}
 
.google #___plusone_0 {
  width: 90px!important;
  top: 10px;
  right: 10px;
  position: absolute;
  display: block;
  z-index: 1
}
 
.facebook .slide-share {
  background: #4f79bc
}
 
.twitter .slide-share {
  background: #63cef2
}
 
.google .slide-share {
  background: #f36261
}
 
.facebook:hover .slide-share,
.twitter:hover .slide-share,
.google:hover .slide-share {
  left: 140px;
  opacity: 0.6;
}
/*  SOCIAL ICONS
/*-----------------------------------------------------------------------------------*/
 
.social {
  padding: 0;
  margin: 0 0 -5px 0;
  font-size: 0;
  line-height: 1;
}
 
.social li {
  display: inline-block;
  font-family: 'fontello-social';
  margin-right: 5px;
  margin-bottom: 5px;
}
 
.text-center .social li {
  margin: 0 2px
}
 
.social.pull-right li {
  margin: 0 0 0 5px
}
 
.social li a {
  display: table
}
 
.social li a i {
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  color: #f5f5f5;
  background: none;
  line-height: 1;
  border: 1px solid #aaa;
  width: 32px;
  height: 32px !important;
  line-height: 1;
  font-size: 18px;
  -webkit-transition: all 200ms ease-in;
  -o-transition: all 200ms ease-in;
  -moz-transition: all 200ms ease-in;
}
 

Demo:
[url]http://codepen.io/AngelKrak/pen/xGrzpK[/url]

PD: No tiene el CSS completo, solo en la demo ya que no se pueden poner mas de 10000 Caracteres en la pag tuve k eliminar algo de codigo >_<

muchas gracias amigo, es que en la plantilla que no esncontraba mas codigo con la etiqueta id="button-count-share">, gracias haber si encuentro alguna plantilla responsive que merezca la pena y si la pongo. gracias por tu ayuda
por cierto no sabras algun aweb de plantillas responsive para blogger. gracias desde ya