Gadgets para poner enlaces de las redes sociales.
de Facebook, Twitter, YouTube, Google+.
Vista Previa
Ver en blog
para agregar en un blog solo tienes que copiar este codigo en: Blogger> Eliges tu Blog> Plantillas> Editar Html> Haces Ctrl + F sobre el código para buscar ( ]]> )
<style type="text/css">
/*Diseñado por DanielSTh*/
.share-box{background:rgba(161, 161, 161, 0.3); padding:5px;padding-bottom:0px;}
.share-box:after {content:" ";position:absolute;top:-10px;left:30px;border-left: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 10px solid #FCFCFC;}
.share-icon:hover .hidden-box {bottom: -230px;right: -187px;display:block;}
.share-box .share-title {font-size:16px;color:#888;margin:0 0 10px;display:inline-block;}
.share-box a {font-size: 14px;height: 40px;margin-bottom: 5px;text-align: left;width: 100%;border:none;padding: 0;border-radius: 3px;color: #FFF;cursor: pointer;font-weight: 200;transition:all 0.3s;display:inline-block;text-decoration:none;font-family:Century Gothic,Calibri , Arial;}
.share-box a:hover {box-shadow:0 1px 3px rgba(0, 0, 0, 0.4);margin-left: 5px ; }
.share-box a:focus{outline: none;padding-left:5px;}
.share-box span {vertical-align: middle;margin-left: 10px;);letter-spacing: 7px;}
.share-box i{box-shadow:0 0 1px rgba(0, 0, 0, 0.4);border-radius: 3px 0 0 3px;}
.share-box i.fb {vertical-align: middle;background-color:#304981;background-image: url("http://s2.postimg.org/44szsxpqd/Fb_Ico_DSTh.gif");display: inline-block;height: 40px;width: 40px;}
.share-box i.yt {background-color: #DE332C;background-image: url("http://s2.postimg.org/p5j1dut8l/YT_Ico_DSTh.gif");
display: inline-block;height: 40px;width: 40px;vertical-align: middle;}
.share-box i.pint {background-color: #C61118;background-image: url("http://s2.postimg.org/zd1kq9fgl/Pine_Ico_DSTh.gif");
display: inline-block;height: 40px;width: 40px;vertical-align: middle;}
.share-box i.tw {background-color: #24A5D2;background-image: url("http://s2.postimg.org/x9r5ilfnp/Tw_Ico_DSTh.gif");
display: inline-block;height: 40px;width: 40px;vertical-align: middle;}
.share-box i.plus{background-color: #D74A38;background-image: url("http://s2.postimg.org/4t1ubvog5/G_Ico_DSTh.gif");
display: inline-block;height: 40px;width: 40px;vertical-align: middle;}
.share-box .facebook {background:#3B5999;}
.share-box .gplus {background: #D74A38;}
.share-box .twitter {background: #29C5F6;}
.share-box .youtube {background: #DE332C;}
.share-box .pinterest {background: #C61118;}
</style>
y luego este codigo en:: Blogger> Eliges tu Blog> Diseño> Añadir un gadget >HTML/Javascript.
<!-- Creado por DanielSTh -->
<div class="share-box">
<a class="facebook" href="#" target="_blank"><i class="fb"></i>Facebook</a>
<a class="twitter" href="#" target="_blank"><i class="tw"></i>Twitter</a>
<a class="youtube" href="#" target="_blank"><i class="yt"></i>YouTube</a>
<a class="pinterest" href="#" target="_blank"><i class="pint"></i>Pinterest</a>
<a class="gplus" href="#" target="_blank"><i class="plus"></i>Google+</a>
Elias Saez
miércoles, 11 de marzo de 2015
