Tutorial Blogger #20
¡Que tal Lectores!!Como ya hemos notado en algunas plantillas y en especial las que vienen determinada por Blogger, los botones ara compartir no son muy atractivos que digamos. Es por esto que hoy les traigo una solución para personalizar nuestros botones predeterminados por Blogger.
Solo sigan los pasos que les estaré indicando a continuación y si quieren ver como se verían los botones en una plantilla simple de Blogger que yo he personalizado mira este DEMO.
◈ ━━━━━━━ •◦⚜◦• ━━━━━━ ◈
Paso 1:Ir a su blog, seleccionar la pestaña plantilla:Vamos a la opción <Editar HTML>
Paso 2:Una vez dentro de la edición HTML de nuestra pagina, entre las etiquetas <head> </head> pegar el siguiente código.
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' media='all' rel='stylesheet' type='text/css'/>Esa instrucción es para anexar un estilo de CSS, el cual contiene la definición y estilos de fuentes (tipografías) de las redes sociales, de facebook, twitter etc., es necesario, ya que sino se declara, dichos iconos no se visualizarán.Paso 3:Agregar el código CSS para los botones:El siguiente código se pega antes de la etiqueta ]]></b:skin>
.post-footer{ margin-top:30px;}Paso 4: Busquemos el siguiente código dentro de nuestra plantilla HTML
.share-post, .multiauthor-box { margin-bottom:50px;
}
margin:0;.share-post ul {
padding:0;
list-style:none; text-align:center;
}
.share-post li{
padding:0; display:inline-block;
margin-right:10px;
font-weight:700;
font-size:16px; text-transform:uppercase
}
.share-post li:first-child {
color:#22a1c4;
}
display:none;.share-post li a{
display:block;
text-align:center;
}
.share-post span{
}
line-height:40px;.share-post li a i{
display:block;
color:#fff;
width:40px;
height:40px;
font-size:18px;
margin: 0 auto; border-radius:40px;
font-weight:normal;
transition:all .3s;
}
.share-post{
width: 90%;
.share-post li a i.fa.fa-facebook{ border-top:1px solid #eff0f0;
border-bottom:1px solid #eff0f0;
line-height:52px;
min-height:52px;
}
border:1px solid transparent; background:#3b5998;
border:1px solid transparent;
}
.share-post li a i.fa.fa-twitter{
background:#19bfe5;
}
background:#006699;.share-post li a i.fa.fa-google-plus{
background:#d64136;
border:1px solid transparent;
}
.share-post li a i.fa.fa-linkedin{
.share-post li a i.fa.fa-facebook:hover{ border:1px solid transparent;
}
.share-post li a i.fa.fa-pinterest{
background:#cb2027;
border:1px solid transparent;
}
background:#fff;
color:#3b5998;
.share-post li a i.fa.fa-google-plus:hover{ border:1px solid #4666aa;
}
.share-post li a i.fa.fa-twitter:hover{
background:#fff;
color:#19bfe5;
border:1px solid #2acef4;
}
background:#fff;color:#d64136;
background:#fff; 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{
color:#cb2027;
} border:1px solid #e33239;
<!-- div class='post-share-buttons'> <b:include data='post' name='shareButtons'/></div -->Justo debajo de esto vamos a pegar el código que definirá los botones de compartir
<div class='share-post'><ul class='entry-share-list clearfix'> <li>Compartir en: </li> <li class='facebook_share'> <a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-facebook'/> </a> </li><li class='twitter_share'><a expr:href='"http://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a> </li><li class='linkedin_share'> <a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-linkedin'/></a> </li><li><a expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.thumbnailUrl + "&description=" + data:post.snippet' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow'><i class='fa fa-pinterest'/></a></li></ul></div>
Y Listo!! ya tenemos nuestros botones para compartirSolo queda guardar nuestra plantilla y disfrutar.
Quede también decirles que estu tutorial lo vi en Linuxitos pues entre muchas búsquedas este fue uno de los que mas me gusto y me funciono sin ningún problema.
◈ ━━━━━━━ •◦⚜◦• ━━━━━━ ◈
Puzzle Bobble
Karate Blazers
Puzzle De Bloques
Magical Cat Adventure