{"id":1581,"date":"2016-07-17T10:37:00","date_gmt":"2016-07-17T15:37:00","guid":{"rendered":"http:\/\/linuxitos.com\/main\/botones-de-compartir-personalizados-para-blogger\/"},"modified":"2016-07-17T10:37:00","modified_gmt":"2016-07-17T15:37:00","slug":"botones-de-compartir-personalizados-para-blogger","status":"publish","type":"post","link":"https:\/\/linuxitos.com\/main\/botones-de-compartir-personalizados-para-blogger\/","title":{"rendered":"Botones de Compartir personalizados para Blogger"},"content":{"rendered":"
\n
<\/div>\n
<\/a><\/div>\n
<\/div>\n
Una de las caracter\u00edsticas que hace llamativo una p\u00e1gina, blog o revista son los detalles que se la hacen a la misma, ya sea en colores, formas texturas, fondos tipo de letra, etc., todo esto hace que se agradable al momento de leer o navegar el contenido.<\/span><\/div>\n

<\/span><\/div>\n
He estado modificando algunos estilos de este blog, como son el buscador, el tipo de letra, tama\u00f1o, \u00edconos, y m\u00e1s recientemente, los botones de compartir en las redes sociales m\u00e1s utilizadas.<\/span><\/div>\n

<\/span><\/div>\n
A continuaci\u00f3n les describir\u00e9 c\u00f3mo agregar esos \u00edconos a su blog, o igual y pueden utilizarlo en sus p\u00e1ginas personales.<\/span><\/div>\n

<\/span><\/div>\n
\n
\n
\n
\n
Nota: primero antes que nada, debo aclarar que los pasos realizados aqu\u00ed, fueron para blogger.<\/span><\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

<\/span><\/div>\n
Los botones de compartir por default  de blogger se muestran de la siguiente manera:<\/span><\/div>\n
<\/div>\n

<\/p>\n

<\/a><\/div>\n
Paso 1:<\/span><\/div>\n
Ir a su blog, seleccionar la pesta\u00f1a plantilla:<\/span><\/div>\n
<\/a><\/div>\n

Ir a la opci\u00f3n <Editar HTML><\/span><\/p>\n

<\/a><\/div>\n
Paso 2:<\/span><\/div>\n
Entonces les mostrar\u00e1 el modo edici\u00f3n de HTML, entre las etiquetas <head><\/head> pegar el siguiente c\u00f3digo.<\/span><\/div>\n

<\/span><\/div>\n
<link href='https:\/\/maxcdn.bootstrapcdn.com\/font-awesome\/4.3.0\/css\/font-awesome.min.css' media='all' rel='stylesheet' type='text\/css'\/><\/pre>\n
<\/div>\n
\n
Esa instrucci\u00f3n es para anexar un estilo de css, el cual contiene la definici\u00f3n y estilos de fuentes (tipograf\u00edas) de las redes sociales, de facebook, twitter etc., es necesario, ya que sino se declara, dichos iconos no se visualizar\u00e1n.<\/span><\/div>\n<\/div>\n

<\/span><\/div>\n
Y quedar\u00e1 como se muestra en la siguiente im\u00e1gen:<\/span><\/div>\n
<\/p>\n
<\/a><\/div>\n

<\/span><\/div>\n
Paso 4:<\/span><\/div>\n
Agregar el c\u00f3digo css para los botones:<\/span><\/div>\n
El siguiente c\u00f3digo se pega antes de la etiqueta <\/span>]]><\/b:skin>, la cual la van a encontrar en el c\u00f3digo de la plantilla.<\/span><\/span><\/div>\n
<\/div>\n
.post-footer{
 margin-top:30px;
}
.share-post, .multiauthor-box {
 margin-bottom:50px;
}
.share-post ul {
 padding:0;
 margin:0;
 text-align:center;
}
.share-post li{
 list-style:none;
 display:inline-block;
 margin-right:10px;
 padding:0;
 font-weight:700;
 text-transform:uppercase
}
.share-post li:first-child {
 font-size:16px;
 color:#22a1c4;
}
.share-post li a{
 display:block;
 text-align:center;
}
.share-post span{
 display:none;
}
.share-post li a i{
 display:block;
 color:#fff;
 width:40px;
 height:40px;
 line-height:40px;
 font-size:18px;
 border-radius:40px;
 font-weight:normal;
 transition:all .3s;
}
.share-post{
 width: 90%;
  margin: 0 auto;
 border-top:1px solid #eff0f0;
 border-bottom:1px solid #eff0f0;
 line-height:52px;
 min-height:52px;
 
}
.share-post li a i.fa.fa-facebook{
 background:#3b5998;
 border:1px solid transparent;
}
.share-post li a i.fa.fa-twitter{
 background:#19bfe5;
 border:1px solid transparent;
}
.share-post li a i.fa.fa-google-plus{
 background:#d64136;
 border:1px solid transparent;
}
.share-post li a i.fa.fa-linkedin{
 background:#006699;
 border:1px solid transparent;
}
.share-post li a i.fa.fa-pinterest{
 background:#cb2027;
 border:1px solid transparent;
}
.share-post li a i.fa.fa-facebook:hover{
 background:#fff;
 color:#3b5998;
 border:1px solid #4666aa;
}
.share-post li a i.fa.fa-twitter:hover{
 background:#fff;
 color:#19bfe5;
 border:1px solid #2acef4;
}
.share-post li a i.fa.fa-google-plus:hover{
 background:#fff;color:#d64136;
 border:1px solid #e95247;
}
.share-post li a i.fa.fa-linkedin:hover{
 background:#fff;
 color:#006699;
 border:1px solid #017ab6;
}
.share-post li a i.fa.fa-pinterest:hover{
 background:#fff;
 color:#cb2027;
 border:1px solid #e33239;
}<\/span><\/span><\/pre>\n
<\/div>\n
Para buscar dicha l\u00ednea, posicionarse en el c\u00f3digo, y presionar las teclas Ctrl + F, y buscar ]]><\/b:skin>.<\/span><\/div>\n
<\/a><\/div>\n

<\/span>Al encontrar la l\u00ednea, pegar el c\u00f3digo antes de la misma, quedando de la siguiente manera:<\/span><\/p>\n
<\/a><\/div>\n

<\/span>No se les olvide ir guardando cambios, para hacerlo clic en el bot\u00f3n <Guardar Plantilla>.<\/span>

<\/span>Paso 5: Agregar el c\u00f3digo html para definir los botones:<\/span>
El c\u00f3digo html que define los botones es el siguiente:<\/span>

<\/span><\/p>\n
<div class='share-post'>
<ul class='entry-share-list clearfix'>
 <li>Compartir en: <\/li>
 <li class='facebook_share'>
 <a expr:href='&quot;http:\/\/www.facebook.com\/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
<i class='fa fa-facebook'\/> <\/a> <\/li>
<li class='twitter_share'>
<a expr:href='&quot;http:\/\/twitter.com\/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
<i class='fa fa-twitter'\/><\/a> <\/li>
 <li class='google_share'>
<a expr:href='&quot;https:\/\/plus.google.com\/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-google-plus'\/><\/a> <\/li>
<li class='linkedin_share'>
 <a expr:href='&quot;http:\/\/www.linkedin.com\/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
<i class='fa fa-linkedin'\/><\/a> <\/li>
<li><a expr:href='&quot;http:\/\/pinterest.com\/pin\/create\/button\/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description=&quot; + data:post.snippet' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow'>
<i class='fa fa-pinterest'\/><\/a>
<\/li>
<\/ul>
<\/div><\/span><\/span><\/pre>\n
<\/div>\n
\u00c9stas etiquetas, pegarlas despu\u00e9s del segmento de c\u00f3digo de los botones de compartir por default que vienen con blogger, de nuevo, utilizar el buscador Ctrl+f, para buscar la l\u00ednea, el segmento es parecido al siguiente:<\/span><\/div>\n
<\/p>\n
<div class='post-share-buttons'>
       <b:include data='post' name='shareButtons'\/>
<\/div>
<!-- El bloque de etiquetas se pegar\u00eda aqu\u00ed -->
<\/pre>\n

<\/span><\/p>\n
Despu\u00e9s de pegar el bloque de etiquetas personalizado, ahora es necesario comentar el c\u00f3digo por default de blogger, para que no aparezca en e blog, al comentarlo quedar\u00eda as\u00ed:<\/span><\/div>\n
<!-- div class='post-share-buttons'>
    <b:include data='post' name='shareButtons'\/>
<\/div -->
<\/pre>\n
<\/div>\n
El c\u00f3digo al pegarlo en el editor se ver\u00e1 de la siguiente manera:<\/span>

<\/span><\/p>\n
<\/a><\/div>\n

<\/span>
<\/span><\/p>\n
Finalmente guardamos la plantilla, visualizamos el blog y tendremos el resultado como lo vez al final de este blog.<\/span><\/div>\n

<\/span><\/p>\n
Espero que sea de utilidad y cualquier duda sobre este post dejarla en los comentarios o contactar con alguna de las redes sociales.<\/span><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
Una de las caracter\u00edsticas que hace llamativo una p\u00e1gina, blog o revista son los detalles que se la hacen a la misma, ya sea en colores, formas texturas, fondos tipo de letra, etc., todo esto hace que se agradable al momento de leer o navegar el contenido. He estado modificando algunos estilos de este blog, […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[512,460,509,508,510,511,513],"tags":[],"class_list":["post-1581","post","type-post","status-publish","format-standard","hentry","category-blog","category-blogger","category-botones-de-compartir-para-blogger","category-css","category-css-shared-buttos-blogger","category-share-buttons","category-share-buttons-css"],"_links":{"self":[{"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/posts\/1581","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/comments?post=1581"}],"version-history":[{"count":0,"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/posts\/1581\/revisions"}],"wp:attachment":[{"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/media?parent=1581"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/categories?post=1581"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/tags?post=1581"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}