4 iconos de redes sociales con efecto CSS para página web
En este nuevo tutorial de Blogger vamos
a ver como añadir un efecto fresco y renovado en 4 iconos de redes sociales. Los
usuarios que visiten nuestras páginas podrán compartir nuestro artículo con sus
amistades en las redes sociales, generando más tráfico web hacia nuestro sitio.
Utilizaremos Facebook, Twitter, Google+, y Pinterest. Un truco para Blogger muy
fácil de implementarlo. Este truco sirve para toda página web sin excepción
alguna.
A continuación mire su demostración en
este post
Recomienda
-esta página
-
Les gusto verdad!
Siga las siguientes instrucciones
1 Ir a Blogger
2 Abra un artículo (Post) antiguo o cree
uno nuevo
3 Habilite la posición “HTML” tal como
lo muestro en la siguiente imagen
4 Copie el siguiente código
<br />
<style>
.share_button {
width: 300px;
height: 50px;
margin: 10px auto;
}
.share_button ul {
width: 50%;
height: inherit;
float: left;
list-style: none;
margin: 0 !important;
padding: 0 !important;
}
.share_button ul h1 {
margin-top: 9%;
overflow: hidden;
width: 100%;
color: #4889F0;
font-size: 18px;
text-shadow:2px 2px 2px #fff;
}
.share_button ul li {
position: absolute;
height: inherit;
width: 150px;
margin: 0 !important;
padding: 0 !important;
background: #EEEEEE;
-webkit-transition: all 600ms;
-moz-transition: all 600ms;
-o-transition: all 600ms;
-ms-transition: all 600ms;
transition: all 600ms;
text-align: center;
}
.share_button ul li h2 {
display: inline-block;
width: 32%;
height: 40px;
overflow: hidden;
margin-top: 5%;
cursor: pointer;
border: 0 !important;
}
.share_button ul:first-child
li:first-child{
text-align: right;
}
.share_button ul:last-child
li:first-child{
text-align: left;
}
.share_button ul:first-child
li:last-child,
.share_button:hover ul:first-child
li:first-child {
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
transform: rotateY(90deg);
}
.share_button ul:last-child
li:last-child,
.share_button:hover ul:last-child
li:first-child {
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
-o-transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
transform: rotateY(-90deg);
}
.share_button:hover ul:first-child
li:last-child,
.share_button:hover ul:last-child
li:last-child {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}
</style>
<div class='share_button'>
<ul>
<li><h1>
Recomienda</h1></li>
<li><h2>
<a
expr:href='"http://www.facebook.com/sharer.php?u=" +
data:post.canonicalUrl + "&t=" + data:post.title '
title='Recomiendalo en Facebook'><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdsoRBgFOg7cZ74gcxOSB0PRxQms84UNA-DQ1wM75ayXQ7J_PDDD1I8UFnelUTz9L1KRj2Q6mymgyfwOgkEPrOl07n4ehce9OODTRd62utxlQOmlZ9I5F28F5fzAd_MCIhr84j-TqhRQ0T/s1600/Facebook.png"/></a></h2>
<h2><a
expr:href='"http://twitter.com/home?status=" +
data:post.title + " " + data:post.canonicalUrl '
title='Recomiendalo en Twitter'><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmNpYBxbsneQ550v_rE5nWHMpq9rZ5oVV2EIN0UBt3PsiHmo-owEW-7RvobrFC_7gKVsnCmuscBfJzFdAAJOBG2ydwkFYzKxGV15_a55-_raVHTHbninZAiuQS6KSu9vmlt7FOXP3jCUog/s1600/Twitter.png"/></a></h2>
</li>
</ul>
<ul>
<li><h1>-esta
página</h1></li>
<li>
<h2><a
expr:href='"https://plus.google.com/share?url=" +
data:post.canonicalUrl ' title='Recomiendalo en Google Plus'><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlspmBU-3_Q_hJpiNVvWk8FYB7FrsgtN2CN2KO41xlbMLpd0krkIDeOITQyz_OYp4Mtmu115NPLIfS4FVmiGX6K_v43bDZa8fozuAWUKFyxVWrbZp3lC0iXZbf0ggNQm8LUTSsYbZNKkIe/s1600/Google-plus.png"/></a></h2>
<h2>
<a
href='javascript:void((function(){var%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)})());'
title='Recomiendalo en Pinterest'><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiduMsjU7bhP2o50Hr82KB6iBPdPMiIH5UArR12NTYzFKq39cEIsPo4Bdu6kkYdDfs16m_oEnZSXKVw3wKuBATFEDysP-y-Xg6-J900rXucQ16bPTscMaUdrvdWqGSIH1gn3Vge94MGJ1J8/s1600/Pinterest.png"/></a>
</h2>
</li>
</ul>
</div>
<br />
|
Mire la siguiente imagen
5 Eso es todo. Ahora dale un clic en “Actualizar”
o en “Publicar” si es un artículo nuevo
6 Mire la publicación y comparta con sus
amistades sus artículos
Fácil verdad!
¿Necesitas ayuda?
Cualquier pregunta no duden en hacérmelo
saber y de inmediato les responderé
Saludos
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
1 comentario: