En primer lugar, me gustaría hacer una pequeña descripción o introducción sobre qué es el Flat Design, (Diseño plano) y la nueva tendencia generativa que se está popularizando a pasos agigantados en el mundo del diseño gráfico y especialmente en el diseño web, cómo es en nuestro caso. El Flat Design, es una propensión en alza y creciente en el diseño web que se basa en buscar la máxima funcionalidad para el usuario, además de ofrecer un aspecto limpio e impoluto en cuanto a diseño se refiere, estético y agradable de ver por la vista.
Cabe destacar qué el Flat Design, es un estilo de diseño que se basa principalmente en el uso mínimo y reducido de elementos decorativos. Normalmente se utilizan colores sólidos o Flat Colors (colores planos), eludiendo así el uso excesivo de sombreados, degradados, biselados, entre otros efectos. A continuación puedes ver la demo en modo de imagen.
La tendencia se ha echo popular probablemente, debido a qué en los últimos tiempos del diseño gráfico, a nivel globalizado, se ha usado popularmente el programa de diseño Photoshop, u otros softwares de edición gráfica. En respuesta a estos programas, dado la excesiva utilización de filtrados y efectos de diseño mediocre (en según que casos), recargado y poco profesional, se busca con Flat Design un aspecto más limpio, más sencillo, y minimalista. En resumidas cuentas.
Bueno después de una pequeña introducción al mundo Flat Design, vamos ha insertar unos botones sociales para compartir en redes sociales, diseñados con está tendencia mencionada anteriormente, para tu blog de Blogger o en otras plataformas si lo prefieres. Lo que debemos de hacer es seguir los pasos, cómo podrás ver a continuación, para la plataforma Blogger:
Primeramente añadiremos los estilos CSS de los botones
- Ves a Blogger
- Ingresa en Plantilla
- Ahora en Editar Html
- Y busca con Ctrl+F la etiqueta ]]></b:skin>
- Y antes de dicha etiqueta, es decir; ]]></b:skin>
- Copia y pega el siguiente CSS.
.sharethisbutt {
width: 100%;
}
.Share-this-arti p{
color: #000 !important;
font-family: Arial, sans-serif;
font-size: 16px;
font-style: italic;
font-weight: bold;
}
ul#social-post-un li a:hover {
color: #fff;
}
ul#social-post-un li a {
color: #333;
}
ul#social-post-un li {
border-right: 1px solid #F5F5F5;
cursor: pointer;
float: left;
list-style: none outside none;
position: relative;
}
#social-post-un li p {
color: #FFFFFF;
font-size: 14px;
margin: 0;
text-align: center;
}
ul#social-post-un li {
border-right: 1px solid #F5F5F5;
cursor: pointer;
float: left;
list-style: none outside none;
margin-right: 15px;
position: relative;
}
#social-post-un a {
display: block;
margin-bottom: 0;
margin-left: auto;
margin-top: 0;
padding: 0 10px;
}
#social-post-un strong {
display: block;
width: auto;
padding: 4px 7px;
position: absolute;
background-color: #fd4326;
color: white;
left: 200%;
bottom: 40px;
-webkit-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-khtml-opacity: 0;
-moz-opacity: 0;
opacity: 0;
visibility: hidden;
}
#social-post-un li:hover strong {
left: 20%;
-khtml-opacity: 1;
-moz-opacity: 1;
opacity: 1;
visibility: visible;
}
.sharethisbutt .facebook {
background: #3C5B9B;
color: white;
}
.sharethisbutt .twitter {
background: #2DAAE1;
color: white;
}
.sharethisbutt .google {
background: #F63E28;
color: white;
}
.sharethisbutt .stumbleupon {
background: #eb4924;
color: white;
}
.sharethisbutt .digg {
background: #1b5891;
color: white;
}
.sharethisbutt .delicious {
background: #333;
color: white;
}
.sharethisbutt .linkedin {
background: #0173b2;
color: white;
}
.sharethisbutt .reddit {
background: #fe3432;
color: white;
}
.sharethisbutt .technorati {
background: #6DC125;
color: white;
}
ul#social-post-un {
float: right;
margin: 15px 0 15px;
padding: 0;
width: 100%;
}
Ahora añade el HTML dónde quieras que se vean los botones
- Busca la zona dónde te gustaría que estuvieran estos botones.
- Puedes implantarlos, estos botones en las siguientes zonas:
- El sitio ideal sería en la zona de generación de posts.
- La mejores ubicaciones serían quizás dentro de la cajas siguientes:
- Dentro de la caja post-header o de la post-footer.
- Copia y pega el siguiente código HTML.
<b:if cond='data:blog.pageType == "item"'> <div class='sharethisbutt'> <ul class='social-ikonz' id='social-post-un'> <li class='Share-this-arti'><p>Comparte éste artículo!</p> </li> <li class='facebook'> <a expr:href='"http://www.facebook.com/share.php?v=4&src=bm&u=" + data:post.url + "&t=" + data:post.title' onclick='window.open(this.href,"sharer","toolbar=0,status=0,width=626,height=436"); return false;' rel='nofollow' title='Comparte esto en Facebook!'><p>Facebook</p></a> </li> <li class='twitter'> <a expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url' rel='nofollow' target='_blank' title='Tweet This!'><p>Twitter</p></a> </li> <li class='google'> <a expr:href='"https://plus.google.com/share?url=" + data:post.url' onclick='javascript:window.open(this.href, "", "menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600");return false;' rel='nofollow' title='Comparte esto en Google+!'><p>Google+</p></a> </li> <li class='stumbleupon'> <a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Has tropezado con algo bueno? Compártelo en StumbleUpon!'><p>Stumble</p></a> </li> <li class='digg'> <a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Digg this!'><p>Digg</p></a> </li> <li class='linkedin'> <a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=&source="' rel='nofollow' target='_blank' title='Compartir en Linkedin!'><p>Linkedin</p></a> </li> </ul> </div> </b:if>
Por último, cómo puedes ver, más abajo hay unos botones sociales para compartir en está entrada, y en todas. Los botones se corresponden a los que acabo de presentar con el código correspondiente en está entrada, podéis verlos cómo demostración, si os gustan ya sabéis lo que debéis de hacer, integrarlos en vuestro blog, si os agrada el diseño. Comentar si tenéis dudas. Gracias y hasta otra. Enjoy this!