Tutorial: Botones para compartir personalizados en Blogger

ZKreations · 15 Ene 2018

Buenas tardes amigos, en esta ocasión les voy a compartir otro de mis más recientes desarrollos para blogger, se trata de los que podrían ser los mejores botones para compartir en blogger, aunque esteticamente podrían ser mejores, pero no tuve mucho tiempo para diseñarlos, aun asi les prometo traer mas aportes referente a botones de compartir personalizados.

Demostración

---------------------------------------------

¿Cómo funcionan?

Casi todo el código es generado usando los mismos datos proporcionados por blogger, sobre todo los operadores de Blogger. Gracias a esto he logrado "fusionar" los botones personalizados y tomar los datos correctos para cualquier ocasión. Además los desarrolle en torno a los enlaces canónicos, para que siempre se comparta tu dominio global, en lugar de los dominios geolocalizados.

Instalar

Vamos a dar clic en Temas, presionamos el botón "Personalizar", opciones avanzadas y "CSS Personalizado", en donde agregamos el siguiente código:

Insertar CODE, HTML o PHP:

/*!* Share Buttons v1.0.1
* by zkreations
*/
/*woff Base64 (fontastic)*/
[class*=" share-"]:before,[class^=share-]:before,[data-icon]:before{font-family:share-daniel!important;font-style:normal!important;font-weight:400!important;font-variant:normal!important;text-transform:none!important;speak:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@font-face{font-family:share-daniel;src:url(data:application/font-woff;charset=utf-8;base64,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) format("woff");font-weight:400;font-style:normal}[data-icon]:before{content:attr(data-icon)}.share-facebook:before{content:"\61"}.share-googleplus:before{content:"\62"}.share-pinterest:before{content:"\63"}.share-twitter:before{content:"\64"}.share-tumblr:before{content:"\65"}.share-telegram:before{content:"\66"}.share-send:before{content:"\67"}.share-vk:before{content:"\68"}.share-linkedin:before{content:"\69"}.share-whatsapp:before{content:"\6a"}
/*contenedor*/
.share-btns {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    font-size: 16px;
    padding: 1em 0;
    clear: both;
}
/*Estilo de los botones*/
.share-btns__item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin: 2px;
    font-size: 1em;
    padding: .4em .6em;
    color: #fff;
    border-radius: 3px;
    box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.2);
    font-weight: 400;
    -webkit-transition: color .5s, -webkit-transform .5s;
    transition: color .5s, -webkit-transform .5s;
    transition: transform .5s, color .5s;
    transition: transform .5s, color .5s, -webkit-transform .5s;
    border: 4px solid rgba(255, 255, 255, 0.05);
    -webkit-transform: scale(1) translateY(0);
            transform: scale(1) translateY(0);
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}
/*Hover*/
.share-btns__item:hover {
    -webkit-transform: translateY(-.5em);
            transform: translateY(-.5em);
    -webkit-transition: color .1s, -webkit-transform .1s;
    transition: color .1s, -webkit-transform .1s;
    transition: transform .1s, color .1s;
    transition: transform .1s, color .1s, -webkit-transform .1s;
    color: #fff;
}
/*Se agrega martin solo al primer 
icono ya que contiene texto*/
.share-btns__item:first-child::before {margin-right: .5em;}
/*Colores por defecto*/
.share-facebook {background-color: #475993;}
.share-googleplus {background-color: #263238;}
.share-twitter {background-color: #00BCD4;}
.share-pinterest {background-color: #bb262b;}
.share-tumblr {background-color: #314358;}
.share-telegram {background-color: #279fd3;}
.share-vk {background-color: #4c75a3;}
.share-linkedin {background-color: #225982;}
.share-whatsapp {background-color: #4CAF50;}
.share-send {background-color: #9E9E9E;}
/*Decoloramos los botones*/
.share-btns--discolor .share-btns__item {
    background-color: #eae8de;
    border-color: rgba(0, 0, 0, 0.03);
    color: rgba(0, 0, 0, 0.5);
}
/*Hover si el boton esta decolorado*/
.share-btns--discolor .share-btns__item:hover {color: rgba(0, 0, 0, 0.75);}

Damos clic en "aplicar" para que los cambios se guarden y ahora vamos a Temas > EDitar html y buscan esto:

Insertar CODE, HTML o PHP:

<b:includable id='shareButtons'>

Arriba de eso pegan el siguiente código:

Insertar CODE, HTML o PHP:

<b:includable id='shareButtons-new'>   <div class='share-btns'><!-- Share buttons by zkreations v1.0.1 -->
      <b:with value='"share-btns__item share-"' var='shareCss'>
         <a expr:class='data:shareCss + "facebook"' expr:href='params("//facebook.com/sharer/sharer.php",{u: data:post.url.canonical})'>Compartir</a>
         <a expr:class='data:shareCss + "googleplus"' expr:href='params("//plus.google.com/share",{url: data:post.url.canonical})'/>  
         <a expr:class='data:shareCss + "pinterest"' expr:href='params("//pinterest.com/pin/create/button/",{url: data:post.url.canonical, media: data:post.firstImageUrl})'/>
         <a expr:class='data:shareCss + "twitter"' expr:href='params("//twitter.com/intent/tweet",{text: data:post.title, url: data:post.url.canonical})'/>
         <a expr:class='data:shareCss + "tumblr"' expr:href='params("https://www.tumblr.com/widgets/share/tool/preview",{canonicalUrl: data:post.url.canonical, caption: data:post.snippet, posttype: "link", title: data:post.title})'/>
         <a expr:class='data:shareCss + "vk"' expr:href='params("//vk.com/share.php",{url: data:post.url.canonical, title: data:post.title, image: data:post.firstImageUrl})'/> 
         <a expr:class='data:shareCss + "linkedin"' expr:href='params("//www.linkedin.com/shareArticle",{mini: true, url: data:post.url.canonical, title: data:post.title})'/>
         <a expr:class='data:shareCss + "telegram"' expr:href='params("//telegram.me/share/url",{url: data:post.url.canonical, text: data:post.title})'/>
         <a expr:class='data:shareCss + "whatsapp"' expr:href='params("whatsapp://send",{text: data:post.url.canonical})'/>
         <b:tag expr:class='data:shareCss + "send"' expr:href='+(data:post.sharePostUrl,"&amp;target=email")' name='a' cond='data:top.showEmailButton'/>
      </b:with>
   </div>
   <script type='text/javascript'>//<![CDATA[
var h=document.querySelector(".share-btns").children;i=0;for(t=h.length;i<t;i++)h[i].onclick=function(a){a.preventDefault();window.open(this.href,"btn-"+i,"width=600,height=480,left="+(screen.width/2-300)+",top="+(screen.height/2-240))};
   //]]></script>
</b:includable>

Por último buscamos esto:

Insertar CODE, HTML o PHP:

<data:post.body/>

y debajo pegamos el siguiente código:

Insertar CODE, HTML o PHP:

<b:include cond='data:view.isPost and data:post.sharePostUrl' name='shareButtons-new'/><!-- Compartir -->

Guardan los cambios y listo.

Borrar botones viejos

Simplemente buscan el siguiente código:

Insertar CODE, HTML o PHP:

<b:include name='shareButtons'/>

y lo eliminan o lo comentan, como gusten. Esto ultimo depende mucho de la plantilla y lo organizado que tenga su código. Si no encuentra el código anterior, prueben buscando solo name='shareButtons'

Eso a sido todo de momento amigos, cualquier duda por favor haganmelo saber, si quieres leer más acerca de estos botones o quieren consultar algo, haganlo desde mi publicacion original. Que estén bien y buen dia.

Johan Sibulo · 15 Ene 2018

Buen tutorial Daniel, sigue así. :encouragement:

joremanhd · 15 Ene 2018

excelente, gracias.

Walter Hugo · 15 Ene 2018

interesantes botones... nunca me deja de sorprender lo que se puede hacer con Blogger.. saludos.

Conessitting · 26 Ene 2018

Buen tutorial, sabes donde puedo hacer pop up personalizadas para blogger ?

ZKreations · 26 Ene 2018

Por alguna razon, cuando intento guardar el código correcto con CDATA al momento de actualizar el tema se reemplaza por "/*<=!=[=C=D=A=T=A=[*/" y "/*]=]=>*/" lo cual es incorrecto. Lo correcto es "//<![CDATA[" y "//]]>". Lo pongo aqui porque no puedo corregirlo en el tema. Tambien pueden ver mi articulo original sobre estos botones donde se encuentra el código bien escrito. Lamento las molestias causadas.

- - - Actualizado - - -

Conessitting dijo:
Buen tutorial, sabes donde puedo hacer pop up personalizadas para blogger ?

Que tal amigo ¿Pop up?, si se refiere a los lightbox puede usar cualquiera de los que encuentre por internet, Blogger no deja de ser xml.

Andreslvl · 13 Abr 2018

se ven muy bien

Norlan30 · 19 Abr 2018

Gracias por el aporte Muy chulos

CAFTA · 20 Abr 2018

excelente aporte. muchas gracias amigo.

William Proaño · 26 Abr 2018

gracias por el aporte, me ha encantado! :encouragement:

Zulimar Ramos · 21 May 2018

Gracias por el tutorial

Sindulfo Santacruz · 21 May 2018

es un capo Daniel !
Lo sigo en todas su redes sociales y le compro todos sus productos.

recomendado.

Fernando SEO · 21 Jun 2018

Muchas gracias por el aporte, tengo unos blogger abandonados que los voy a modernizar un poco.

clientesoft · 7 Jul 2018

gracias por el aporte :encouragement:

Tutorial: Botones para compartir personalizados en Blogger

ZKreations

Johan Sibulo

joremanhd

Walter Hugo

Conessitting

ZKreations

Andreslvl

Norlan30

CAFTA

William Proaño

Zulimar Ramos

Sindulfo Santacruz

Fernando SEO

clientesoft

Temas similares

Privacidad y transparencia

Privacidad y transparencia