Caja Compartir Web

Caja Para Compartir Web (Con Meme)

Para motivar a nuestro usuarios a compartir el contenido, aveces hay que ingeniárselas un poco, por ello, esta simple caja con botones para compartir y un peculiar diseño atraerá a los usuarios.

EL HTML
Este es el código de el contenedor, aquí podremos añadir o quitar redes sociales según nuestras necesidades.
<div class='sharing_box'>
<div class="tweet-share">
<a href="https://twitter.com/share" class="twitter-share-button" data-via="iAxtrix" data-lang="es" data-count="vertical">Twittear</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<div class="facebook-share">
<iframe src="//www.facebook.com/plugins/like.php?href&send=false&layout=box_count&width=70&show_faces=false&action=like&colorscheme=light&font=arial&height=90" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:70px; height:90px;" allowTransparency="true"></iframe>
</div>
 
<div class="sharing-text">
<h4>¿ Te Ha Gustado ?</h4>
<p>Si has disfrutado visualizando esta página, compártela para que todos tus amigos también puedan disfrutar de esta página. Un like nos anima a continuar con la web.</p>
</div>
 
<div style="clear: both"></div>
</div>

EL CSS
El estilo para la caja. Modificad a vuestro gusto.
/* Caja Compartir Por Bitt Net
------------------------------------- */
.sharing_box {
background: #F9F9F9 url(http://i.imgur.com/foWSgSg.png) no-repeat -70px -151px;
border-color: #D1D9DF;
border-style: solid;
border-width: 1px 1px 2px;
display: block;
height: 70px;
margin: 20px 0 0;
padding: 20px;
width: 584px;
}
.facebook-share {
float: left;
}
.tweet-share {
float: left;
margin: 0 15px 0 0;
}
.sharing-text {
display: inline-block;
float: right;
margin-right: 27px;
width: 300px;
text-align: justify;
}
.sharing-text p{
font-family:Helvetica,Arial,sans-serif;
font-size: 11px;
}
.sharing-text h4 {
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
}

P U B L I

Navegación

Bitt Net En Las Redes

Bitt Net

Caja Compartir Web

Caja Para Compartir Web (Con Meme)

EL HTML

EL CSS