ZKreations Siguiendo
Beta
Verificación en dos pasos desactivada
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
- Desde
- 8 Jul 2014
- Mensajes
- 35
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,"&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.
Última edición: