Gadget:Botones para compartir al lado del post






Conforme se crea un sitio y/o blog las personas quieren que su sitio se haga más reconocido y la mejor forma de hacerlo es compartiendolo en la redes sociales como facebook, blogger, myspace y google+.
pues hay les traigo un nuevo Gadget que les hará posible hacerlo y siempre estará visible en la entrada.
este gadget se ha visto en varios sitios.
  • Ve a Plantilla, luego a Edicion de HTML.
  • Haces click en expandir plantilla de artilugios y busca la etiqueta ]]></b:skin>.
  • y encima de ella pega lo siguiente.
.hb_social_floating {
position: fixed;
bottom: 10%;
margin-left: -80px;
float: left;
width: 70px; /* ancho del gadget */
background-color: #ffffff; /* fondo del gadget */
padding: 5px 0 0px 0px;
border-top: 1px solid #ddd;
border-left: 1px solid #ddd;
border-bottom: 1px solid #ddd;
z-index: 9999px !important;
border-radius: 5px; /* radio del gadget */
-moz-border-radius: 5px; /* radio del gadget */
-webkit-border-radius: 5px; /* radio del gadget */
}

.hb_social_floating .hb_side_social_button {
margin-bottom: 5px;
float: none;
height: auto;
width: 70px;
}

.hb_social_floating .st_twitter_vcount, .hb_social_floating.st_plusone_vcount, .st_email {
margin-left: 5px;
}

.hb_social_floating .st_fblike_vcount {
margin-left: 5px;
}

.hb_social_floating .stButton_gradient {
background: none !important;
height: 21px !important;
padding-left: 0 !important;
}

.hb_social_floating .chicklets, .hb_social_floating .stMainServices {
background: url(''
) no-repeat !important;
height: 19px !important;
width: 50px !important;
padding: 0 !important;
}

.st_email .chicklets {
background-position: 0 -77px !important;
background-image: url(''
) !important;
}

.hb_social_floating .st_twitter_vcount .st-twitter-counter {
background-position: 0 -58px !important;
}

.hb_social_floating .stButton_gradient {
border: none !important;
}

.hb_social_floating .stBubble_count {
width: 59px !important;
font-size: 15px !important;
font-weight: normal !important;
padding-top: 7px !important;
height: 23px !important;
background: none !important;
}

.hb_social_floating .st_twitter_vcount .stBubble_count {
color: #00a6df;
background-color: #f8fbfc !important;
}

.st_fblike_vcount {
margin-bottom: 0px;
display: block;
}

.st_twitter_vcount {
margin-bottom: 3px;
display: block;
}

.st_email {
margin-bottom: 5px;
margin-top: 3px;
display: block;
}

.hb_social_floating .stBubble {
background-position: 21px 31px !important;
height: 35px !important;
}
  • Lo que ves negreado es lo que puedes editar, recomiendo que el color de fondo sea el mismo de las entradas.
  • Ahora busca la siguiente etiqueta.
<b:includable id="post" var="post">
  • Y justo debajo de ella pega lo siguiente.
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div class='hb_social_floating'>
<center><a class="addthis_button_facebook_like" fb:like:layout="box_count"></a>
<a class="addthis_button_tweet" tw:count="vertical"></a>
<a class="addthis_button_pinterest_pinit" pt:count="vertical"></a><a class="addthis_button_google_plusone" g:plusone:size="tall"></a>
<a style='margin-left:10px' class="addthis_counter"></a></center>
</div>
<script src="//assets.pinterest.com/js/pinit.js" type="text/javascript"/>
<script src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4ff768ba574abf90" type="text/javascript"/></b:if></b:if>
  • Puedes cambiar donde dice FUTUdownloads por el nombre de tu blog.
  • Donde dice iho_jose es el nombre del usuario twitter recomendado, puedes cambiarlo por el tuyo.
  • Y guardas los cambios, listo ya tendras tu gadget flotante con las redes sociales más visitadas para compartir tus entradas.