Foros del Web » Creando para Internet » HTML »

codigo de botones de compartir

 Estas en el tema de codigo de botones de compartir en el foro de HTML en Foros del Web. hola buenas como extraer codigo de botones de compartir he visto esta plantilla esta bien pero no me gusta mucho, fabulous-themexpose.blogspot.com.es/2014/03/praesent-vitae-quam-vitae-arcu-posuer.html lo que me ha ...
  #1 (permalink)  
Antiguo 10/06/2015, 17:38
 
Fecha de Ingreso: junio-2015
Mensajes: 3
Antigüedad: 9 años, 8 meses
Puntos: 1
codigo de botones de compartir
hola buenas
como extraer codigo de botones de compartir
he visto esta plantilla esta bien pero no me gusta mucho,
fabulous-themexpose.blogspot.com.es/2014/03/praesent-vitae-quam-vitae-arcu-posuer.html

lo que me ha gustado de la plantilla son los botones de compartir del final de cada posts(como el que viene en el link de arriba)
dejo una captura para mas detalle http://i.imgur.com/A3OvI4e.png


lo he intentado he extaredo unos codigo pero no funcionan si quedan asi los botones http://i.imgur.com/xqQYfyN.png
el codigo que habia extraedo era este

Codigo CSS es esto;
Código HTML:
/* 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;}
Codigo HTML esto;

Código HTML:
<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><div class='pslide'><p> facebook </p>
</div>
<div class='fb-like' data-action='like' data-layout='button_count' data-share='false' data-show-faces='false'/>
</div>
<div class='twitter share-button'>
<i class='icon'>
<i class='fa fa-twitter'>
</i>
</i>
<div class='pslide'>
<p> twitter </p>
</div>
 <a class='twitter-share-button' data-count='horizontal' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' title='Share via Twitter'>
                 
                </a>
                <script async='async' src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</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 class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url' rel='nofollow'/>
                <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><div class='pslide'><p> fb share </p>
</div>
  <a class='fb-share-button' name='fb_share' rel='nofollow' share_url='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' type='button_count'/>
</div>
</div>
</div>
</div>



        
        </div>
Nose que estoy haciendo mal.
programadores alguien sabe algo. gracias desde ya
Última edición por alfredo11101; 10/06/2015 a las 18:30
  #2 (permalink)  
Antiguo 11/06/2015, 21:27
Avatar de AngelKrak  
Fecha de Ingreso: noviembre-2014
Mensajes: 917
Antigüedad: 10 años, 2 meses
Puntos: 91
Respuesta: codigo de botones de compartir
the hacian falta mas Estilos(CSS) por eso no se veia como querias >_<

HTML:
Código HTML: 
Ver original
  1. <link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet' type='text/css' />
  2.  
  3. <div id="button-count-share">
  4.   <div id="social_share">
  5.     <div class="ct-wrapper" style="width: 670px;margin-bottom: 20px;;">
  6.       <div id="share-buttons">
  7.         <div class="facebook2 share-button">
  8.           <i class="icon">
  9. <i class="fa fa-facebook"></i></i>
  10.           <div class="pslide">
  11.             <p> facebook </p>
  12.           </div>
  13.           <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>
  14.         </div>
  15.         <div class="twitter share-button">
  16.           <i class="icon">
  17. <i class="fa fa-twitter">
  18. </i>
  19.           </i>
  20.           <div class="pslide">
  21.             <p> twitter </p>
  22.           </div>
  23.           <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"
  24.           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>
  25.           <script async="async" src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
  26.         </div>
  27.         <div class="google share-button">
  28.           <i class="icon">
  29. <i class="fa fa-google-plus">
  30. </i>
  31.           </i>
  32.           <div class="pslide">
  33.             <p> google+ </p>
  34.           </div>
  35.           <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;">
  36.             <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%"
  37.             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"
  38.             data-gapiattached="true" title="+1"></iframe>
  39.           </div>
  40.           <script type="text/javascript">
  41.             window.___gcfg = {lang: 'id'};
  42.                                     (function() {
  43.                                     var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
  44.                                     po.src = 'https://apis.google.com/js/plusone.js';
  45.                                     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  46.                                    })();
  47.           </script>
  48.         </div>
  49.         <div class="facebook1 share-button">
  50.           <i class="icon">
  51. <i class="fa fa-facebook"></i></i>
  52.           <div class="pslide">
  53.             <p> fb share </p>
  54.           </div>
  55.           <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>
  56.         </div>
  57.       </div>
  58.     </div>
  59.   </div>
  60. </div>

CSS:
Código CSS: 
Ver original
  1. /* CSS Slide Share Button */
  2.  
  3. #button-count-share {
  4.   width: 100%;
  5.   overflow: hidden;
  6.   background: transparent;
  7.   margin: 0 auto;
  8.   padding: 3px;
  9.   margin-top: 15px;
  10.   margin-bottom: 15px;
  11. }
  12.  
  13. #button-count-share span {
  14.   float: left;
  15.   position: relative;
  16.   font-size: 13px;
  17.   color: #fff;
  18.   margin: 12px 5px 12px 5px
  19. }
  20.  
  21. .button-share {
  22.   background: #f0f0f0;
  23.   position: relative;
  24.   display: block;
  25.   float: left;
  26.   height: 40px;
  27.   overflow: hidden;
  28.   width: 140px;
  29.   margin: 4px;
  30.   border-radius: 1px;
  31. }
  32.  
  33. .slide-share {
  34.   z-index: 2;
  35.   display: block;
  36.   height: 100%;
  37.   left: 0;
  38.   position: absolute;
  39.   width: 140px;
  40.   margin: 0
  41. }
  42.  
  43. .slide-share p {
  44.   font-family: 'Open Sans';
  45.   font-weight: 400;
  46.   color: #fff;
  47.   font-size: 16px;
  48.   left: 0;
  49.   position: absolute;
  50.   text-align: center;
  51.   top: 10px;
  52.   width: 100%;
  53.   margin: 0
  54. }
  55.  
  56. .button-share .slide-share {
  57.   transition: all 0.4s ease-in-out
  58. }
  59.  
  60. .facebook .fb_iframe_widget {
  61.   display: block;
  62.   position: absolute;
  63.   right: 15px;
  64.   top: 0;
  65.   z-index: 1
  66. }
  67.  
  68. .twitter iframe {
  69.   right: 10px;
  70.   top: 10px;
  71.   z-index: 1;
  72.   display: block;
  73.   position: absolute
  74. }
  75.  
  76. .google #___plusone_0 {
  77.   width: 90px!important;
  78.   top: 10px;
  79.   right: 10px;
  80.   position: absolute;
  81.   display: block;
  82.   z-index: 1
  83. }
  84.  
  85. .facebook .slide-share {
  86.   background: #4f79bc
  87. }
  88.  
  89. .twitter .slide-share {
  90.   background: #63cef2
  91. }
  92.  
  93. .google .slide-share {
  94.   background: #f36261
  95. }
  96.  
  97. .facebook:hover .slide-share,
  98. .twitter:hover .slide-share,
  99. .google:hover .slide-share {
  100.   left: 140px;
  101.   opacity: 0.6;
  102. }
  103. /*  SOCIAL ICONS
  104. /*-----------------------------------------------------------------------------------*/
  105.  
  106. .social {
  107.   padding: 0;
  108.   margin: 0 0 -5px 0;
  109.   font-size: 0;
  110.   line-height: 1;
  111. }
  112.  
  113. .social li {
  114.   display: inline-block;
  115.   font-family: 'fontello-social';
  116.   margin-right: 5px;
  117.   margin-bottom: 5px;
  118. }
  119.  
  120. .text-center .social li {
  121.   margin: 0 2px
  122. }
  123.  
  124. .social.pull-right li {
  125.   margin: 0 0 0 5px
  126. }
  127.  
  128. .social li a {
  129.   display: table
  130. }
  131.  
  132. .social li a i {
  133.   text-align: center;
  134.   display: table-cell;
  135.   vertical-align: middle;
  136.   color: #f5f5f5;
  137.   background: none;
  138.   line-height: 1;
  139.   border: 1px solid #aaa;
  140.   width: 32px;
  141.   height: 32px !important;
  142.   line-height: 1;
  143.   font-size: 18px;
  144.   -webkit-transition: all 200ms ease-in;
  145.   -o-transition: all 200ms ease-in;
  146.   -moz-transition: all 200ms ease-in;
  147. }

Demo:
http://codepen.io/AngelKrak/pen/xGrzpK

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 >_<
  #3 (permalink)  
Antiguo 12/06/2015, 19:14
 
Fecha de Ingreso: junio-2015
Mensajes: 3
Antigüedad: 9 años, 8 meses
Puntos: 1
Respuesta: codigo de botones de compartir
Cita:
Iniciado por AngelKrak Ver Mensaje
the hacian falta mas Estilos(CSS) por eso no se veia como querias >_<

HTML:
Código HTML: 
Ver original
  1. <link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet' type='text/css' />
  2.  
  3. <div id="button-count-share">
  4.   <div id="social_share">
  5.     <div class="ct-wrapper" style="width: 670px;margin-bottom: 20px;;">
  6.       <div id="share-buttons">
  7.         <div class="facebook2 share-button">
  8.           <i class="icon">
  9. <i class="fa fa-facebook"></i></i>
  10.           <div class="pslide">
  11.             <p> facebook </p>
  12.           </div>
  13.           <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>
  14.         </div>
  15.         <div class="twitter share-button">
  16.           <i class="icon">
  17. <i class="fa fa-twitter">
  18. </i>
  19.           </i>
  20.           <div class="pslide">
  21.             <p> twitter </p>
  22.           </div>
  23.           <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"
  24.           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>
  25.           <script async="async" src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
  26.         </div>
  27.         <div class="google share-button">
  28.           <i class="icon">
  29. <i class="fa fa-google-plus">
  30. </i>
  31.           </i>
  32.           <div class="pslide">
  33.             <p> google+ </p>
  34.           </div>
  35.           <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;">
  36.             <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%"
  37.             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"
  38.             data-gapiattached="true" title="+1"></iframe>
  39.           </div>
  40.           <script type="text/javascript">
  41.             window.___gcfg = {lang: 'id'};
  42.                                     (function() {
  43.                                     var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
  44.                                     po.src = 'https://apis.google.com/js/plusone.js';
  45.                                     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  46.                                    })();
  47.           </script>
  48.         </div>
  49.         <div class="facebook1 share-button">
  50.           <i class="icon">
  51. <i class="fa fa-facebook"></i></i>
  52.           <div class="pslide">
  53.             <p> fb share </p>
  54.           </div>
  55.           <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>
  56.         </div>
  57.       </div>
  58.     </div>
  59.   </div>
  60. </div>

CSS:
Código CSS: 
Ver original
  1. /* CSS Slide Share Button */
  2.  
  3. #button-count-share {
  4.   width: 100%;
  5.   overflow: hidden;
  6.   background: transparent;
  7.   margin: 0 auto;
  8.   padding: 3px;
  9.   margin-top: 15px;
  10.   margin-bottom: 15px;
  11. }
  12.  
  13. #button-count-share span {
  14.   float: left;
  15.   position: relative;
  16.   font-size: 13px;
  17.   color: #fff;
  18.   margin: 12px 5px 12px 5px
  19. }
  20.  
  21. .button-share {
  22.   background: #f0f0f0;
  23.   position: relative;
  24.   display: block;
  25.   float: left;
  26.   height: 40px;
  27.   overflow: hidden;
  28.   width: 140px;
  29.   margin: 4px;
  30.   border-radius: 1px;
  31. }
  32.  
  33. .slide-share {
  34.   z-index: 2;
  35.   display: block;
  36.   height: 100%;
  37.   left: 0;
  38.   position: absolute;
  39.   width: 140px;
  40.   margin: 0
  41. }
  42.  
  43. .slide-share p {
  44.   font-family: 'Open Sans';
  45.   font-weight: 400;
  46.   color: #fff;
  47.   font-size: 16px;
  48.   left: 0;
  49.   position: absolute;
  50.   text-align: center;
  51.   top: 10px;
  52.   width: 100%;
  53.   margin: 0
  54. }
  55.  
  56. .button-share .slide-share {
  57.   transition: all 0.4s ease-in-out
  58. }
  59.  
  60. .facebook .fb_iframe_widget {
  61.   display: block;
  62.   position: absolute;
  63.   right: 15px;
  64.   top: 0;
  65.   z-index: 1
  66. }
  67.  
  68. .twitter iframe {
  69.   right: 10px;
  70.   top: 10px;
  71.   z-index: 1;
  72.   display: block;
  73.   position: absolute
  74. }
  75.  
  76. .google #___plusone_0 {
  77.   width: 90px!important;
  78.   top: 10px;
  79.   right: 10px;
  80.   position: absolute;
  81.   display: block;
  82.   z-index: 1
  83. }
  84.  
  85. .facebook .slide-share {
  86.   background: #4f79bc
  87. }
  88.  
  89. .twitter .slide-share {
  90.   background: #63cef2
  91. }
  92.  
  93. .google .slide-share {
  94.   background: #f36261
  95. }
  96.  
  97. .facebook:hover .slide-share,
  98. .twitter:hover .slide-share,
  99. .google:hover .slide-share {
  100.   left: 140px;
  101.   opacity: 0.6;
  102. }
  103. /*  SOCIAL ICONS
  104. /*-----------------------------------------------------------------------------------*/
  105.  
  106. .social {
  107.   padding: 0;
  108.   margin: 0 0 -5px 0;
  109.   font-size: 0;
  110.   line-height: 1;
  111. }
  112.  
  113. .social li {
  114.   display: inline-block;
  115.   font-family: 'fontello-social';
  116.   margin-right: 5px;
  117.   margin-bottom: 5px;
  118. }
  119.  
  120. .text-center .social li {
  121.   margin: 0 2px
  122. }
  123.  
  124. .social.pull-right li {
  125.   margin: 0 0 0 5px
  126. }
  127.  
  128. .social li a {
  129.   display: table
  130. }
  131.  
  132. .social li a i {
  133.   text-align: center;
  134.   display: table-cell;
  135.   vertical-align: middle;
  136.   color: #f5f5f5;
  137.   background: none;
  138.   line-height: 1;
  139.   border: 1px solid #aaa;
  140.   width: 32px;
  141.   height: 32px !important;
  142.   line-height: 1;
  143.   font-size: 18px;
  144.   -webkit-transition: all 200ms ease-in;
  145.   -o-transition: all 200ms ease-in;
  146.   -moz-transition: all 200ms ease-in;
  147. }

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
  #4 (permalink)  
Antiguo 16/06/2015, 11:44
Avatar de AngelKrak  
Fecha de Ingreso: noviembre-2014
Mensajes: 917
Antigüedad: 10 años, 2 meses
Puntos: 91
Respuesta: codigo de botones de compartir
aki tienes el link de 60 Templates Responsive Bests ;)
https://www.freshdesignweb.com/free-...ger-templates/

Etiquetas: botones, css
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 12:23.