martes, 11 de marzo de 2014
Elegante Widget Estilo Metro para Blogger
Bueno queridos fans en esta ocasion les traigo este Elegante Widget Estilo Metro para Blogger
el cual es un plugin para Wordpress pero este ha sido adoptado para Blogger,
este plugin contiene un pack de iconos de suscripción y vienen en dos versiones.
Para agregar la versión 1 del plugin a tu blog solo debes pegar en un Elemento HTML/JavaScript
<div class='metro-social'>
<li><a class="fb" href="URL DE TU FACEBOOK" rel="nofollow" target="_blank"></a></li>
<li><a class="tw" href="URL DE TU TWITTER" rel="nofollow" target="_blank"></a></li>
<li><a class="gp" href="URL DE TU GOOGLEPLUS" rel="nofollow" target="_blank"></a></li>
<li><a class="pi" href="URL DE TU PINTEREST" rel="nofollow" target="_blank"></a></li>
<li><a class="fd" href=URL DE TU FEEDBURNER" rel="nofollow" target="_blank"></a></li>
</div>
<style>
.metro-social{width:285px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd{z-index:7;float:left;margin:0.1px;position:relative;display:block}
.metro-social .fb{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaMeunYfXP6DwrVtFvMRoIFxBEmumbElhx2DfaetybZEOPHs3pkjUOi3IDWeLOHc2Yzbf3Ob2qw6TaahQsscp4wLflFjZ7VJeplKWPpOQLD11IeUCc0S1p3MUncydRdaKMwZwCGXq1fM4/s1600/fb%601.png) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .tw{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfqKFUlykEVJckhHtNOSTIzU3zEFU0I2HG1zn-Y9dN2FPAHnNaGR0GQ2c3D7rMBpRg2FVTRrPMRn4ggdq51p-d_FEKaS8zyAzz8sbfNGE-MF5XVRkrMDrCxN-NcY4kAzltbYPEVwhPEEc/s1600/tw1.png) no-repeat center center #43b3e5;width:68px;height:70px}
.metro-social .gp{width:69px;height:70px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL6Gmk4L8dJ4_u8lrlU6oxGHsYGbfNnqlqQ5OhauDROwSKB2GllJxuYYsXcEAT84nwgJWXnH6ct-MkF4ErPDBYP1EHj48PF3eGGp435x9FKDe4eHLEMPcO8m1o5cEuQvfIDAs5P6OdXx8/s1600/g+1.png) no-repeat center center #da4a38}
.metro-social .pi{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPQCQgt9c1Ax5SES9mrnXVmGAXTYpZQCfL3jNtegVGcVldQBUlDArObesx0hFFk-oj4MdOqSJmdsvNAg2gb53-kB_f4y5xRfT_EPJ1AbHL3a0F_itKjTi75NgsmyHRoyOV78l_Ft6BS-Q/s1600/pin1.png) no-repeat center center #d73532;width:68px;height:70px}
.metro-social .fd{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrHOzrbK5e6ybNIQId8HXMoAI_D5QFCudfOYJ0lp-G2fKNSPLYgcWLFou6NlYKHNGkJWy2soPrpNVVprKVa5Qo-8XQmo5Ak8lnrLeTiztJqF9HC4JnqiBu0jl7EtBG34_etwtsQxTnD0A/s1600/feed1.png) no-repeat center center #e9a01c;width:68px;height:70px}
.metro-social li:hover .fb{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNThw9vY1i4YVwrVUtOXw_oSSlylbhf4Ha4zdhhX7CjUGEIdQxt9Em_vxl6xvavPEabh40BvoWjYaxlAS6RKIQSXZWbcpa1ZM0h4I2FvCd-85QMogF0nhGqPfzfirzIDDmDBjaSVxrOV0/s1600/fb2.png) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY5kEwJXph6egxdnsq-h7V7Xy8nuMajU2YfWOk6kWBZn_2iq8WIqqevxf46Z3qg2reF-nZOP0CDfW1cJX9pK6QWThyphenhyphenfOb72fWajxtxwJI2JprSOOFDx_XCUe-mLLt2AKCav83rrNrXPzc/s1600/tw2.png) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia2fWCSz2VHr8WGj6-rgqIl6xeWoKDC3sVrOdk7qWIql775Yqv9dJEKxBA5sABLuZ52OpuuftPKpZ_bqpJPcDljj58i_JUgw_bKcibYizO3AJUGn5QJxwNN3XnEOQEhYRdNNl1MxGRgcU/s1600/g+2.png) no-repeat center center #da4a38}
.metro-social li:hover .pi{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjikJRqwYhtUqjlxG8gifFLJXsICBn2i4_e3ClsdBog865JZdJKfDdwRoW-KGAtpBFjTZ6uzdAI-BfCMpflOpKOODkvEpjvOr675jlJqL8lXtRSc7ZzgMD8x6KhEYiAmZJgYCd8sAp0ODA/s1600/pi2.png) no-repeat center center #d73532}
.metro-social li:hover .fd{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwnkZaiWrxLimFPS1CTSemWkQVT7pcoBqmpq4fJkTPta1aICl8xZPCb6miIpbgi_Bh4iuUSZfJ9Z4HkYdKOeTkYyRrYdSEwwSiitxFBFm825m9py6Zk77Yyhkvii9aG02rVY2C9RX0n-4/s1600/feed2.png) no-repeat center center #e9a01c}
</style>
Ahora solo debes reemplazar lo que esta en color azul por lo que se indica en cada caso.
Para agregar la versión 2 de este plugin en Blogger solo tienes que pegar en cualquier de parte de tu blog el siguiente Código:
<div class='metro-social'>
<li><a class="fb" href="URL DE TU FACEBOOK" rel="nofollow" target="_blank"></a></li>
<li><a class="tw" href="URL DE TU TWITTER" rel="nofollow" target="_blank"></a></li>
<li><a class="gp" href="URL DE TU GOOGLEPLUS" rel="nofollow" target="_blank"></a></li>
<li><a class="pi" href="URL DE TU PINTEREST" rel="nofollow" target="_blank"></a></li>
<li><a class="in" href="URL DE TU LINKEDIN" rel="nofollow" target="_blank"></a></li>
<li><a class="yt" href="URL DE TU YOUTUBE" rel="nofollow" target="_blank"></a></li>
<li><a class="fd" href="URL DE TU FEEDBURNER" rel="nofollow" target="_blank"></a></li>
</div>
<style>
.metro-social{width:285px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-social .fb{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaMeunYfXP6DwrVtFvMRoIFxBEmumbElhx2DfaetybZEOPHs3pkjUOi3IDWeLOHc2Yzbf3Ob2qw6TaahQsscp4wLflFjZ7VJeplKWPpOQLD11IeUCc0S1p3MUncydRdaKMwZwCGXq1fM4/s1600/fb%601.png) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .tw{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfqKFUlykEVJckhHtNOSTIzU3zEFU0I2HG1zn-Y9dN2FPAHnNaGR0GQ2c3D7rMBpRg2FVTRrPMRn4ggdq51p-d_FEKaS8zyAzz8sbfNGE-MF5XVRkrMDrCxN-NcY4kAzltbYPEVwhPEEc/s1600/tw1.png) no-repeat center center #43b3e5;width:68px;height:70px}
.metro-social .gp{width:69px;height:70px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL6Gmk4L8dJ4_u8lrlU6oxGHsYGbfNnqlqQ5OhauDROwSKB2GllJxuYYsXcEAT84nwgJWXnH6ct-MkF4ErPDBYP1EHj48PF3eGGp435x9FKDe4eHLEMPcO8m1o5cEuQvfIDAs5P6OdXx8/s1600/g+1.png) no-repeat center center #da4a38}
.metro-social .pi{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPQCQgt9c1Ax5SES9mrnXVmGAXTYpZQCfL3jNtegVGcVldQBUlDArObesx0hFFk-oj4MdOqSJmdsvNAg2gb53-kB_f4y5xRfT_EPJ1AbHL3a0F_itKjTi75NgsmyHRoyOV78l_Ft6BS-Q/s1600/pin1.png) no-repeat center center #d73532;width:68px;height:69px}
.metro-social .in{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwDbCp6RRJbLnO5a_NGZaRk4wj4Z17w4lOSz-z2KhfxxKUsx3DqpZkRWN9fqEApWtxn5H9x3d6odmuqAah2CtvkJ5bQoDjxnfrLCluCo-30aZWXgfGSCihgVvkPJynBN9_Pe_1X5FqgMo/s1600/Lin1.png) no-repeat center center #0097bd;width:69px;height:69px}
.metro-social .yt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip2lb9oYekT08zmCGjd0RJqzHbyik2uSO7uEEyVd0xNmX2yx1OVMyozELUb3sA4QviUsi8M4gdICKEEjgTdAJqpKH24jXjvwStaG5ZRaZqClDUu3w5AhH11KrxcXQQbrRQwGK5PwiqKLo/s1600/YT1.png) no-repeat center center #e64a41;width:140px;height:69px}
.metro-social .fd{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrHOzrbK5e6ybNIQId8HXMoAI_D5QFCudfOYJ0lp-G2fKNSPLYgcWLFou6NlYKHNGkJWy2soPrpNVVprKVa5Qo-8XQmo5Ak8lnrLeTiztJqF9HC4JnqiBu0jl7EtBG34_etwtsQxTnD0A/s1600/feed1.png) no-repeat center center #e9a01c;width:140px;height:69px}
.metro-social li:hover .fb{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNThw9vY1i4YVwrVUtOXw_oSSlylbhf4Ha4zdhhX7CjUGEIdQxt9Em_vxl6xvavPEabh40BvoWjYaxlAS6RKIQSXZWbcpa1ZM0h4I2FvCd-85QMogF0nhGqPfzfirzIDDmDBjaSVxrOV0/s1600/fb2.png) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY5kEwJXph6egxdnsq-h7V7Xy8nuMajU2YfWOk6kWBZn_2iq8WIqqevxf46Z3qg2reF-nZOP0CDfW1cJX9pK6QWThyphenhyphenfOb72fWajxtxwJI2JprSOOFDx_XCUe-mLLt2AKCav83rrNrXPzc/s1600/tw2.png) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia2fWCSz2VHr8WGj6-rgqIl6xeWoKDC3sVrOdk7qWIql775Yqv9dJEKxBA5sABLuZ52OpuuftPKpZ_bqpJPcDljj58i_JUgw_bKcibYizO3AJUGn5QJxwNN3XnEOQEhYRdNNl1MxGRgcU/s1600/g+2.png) no-repeat center center #da4a38}
.metro-social li:hover .pi{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjikJRqwYhtUqjlxG8gifFLJXsICBn2i4_e3ClsdBog865JZdJKfDdwRoW-KGAtpBFjTZ6uzdAI-BfCMpflOpKOODkvEpjvOr675jlJqL8lXtRSc7ZzgMD8x6KhEYiAmZJgYCd8sAp0ODA/s1600/pi2.png) no-repeat center center #d73532}
.metro-social li:hover .in{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXbnCo_LnJ399Ae9mtJGgo8sRrfluhO2lYePYWY5N5jyN_wdjBK4wkEFl4uRygyfpjsZP6Wttas7ntK3aLMDKejwiMdBUDzUaPCqxUpXjczgcsSRWqk_l_JeQFIPcaB9qDmeZVaDXb9-o/s1600/Lin2.png) no-repeat center center #0097bd}
.metro-social li:hover .yt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz9MhaK2ITa2fhVuMzB3KJHjnewtYSSk-2MAGRkdNP8DyPlG0YYFlBOZZs8LXaF5veMSXfg6-foI2S41a7Mpe6q1MZgkGzZeaEnSralJJUI_z1KsqAtiSOzF4gx_eTnLs4zLKf9o3p1JE/s1600/yt2.png) no-repeat center center #e64a41}
.metro-social li:hover .fd{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwnkZaiWrxLimFPS1CTSemWkQVT7pcoBqmpq4fJkTPta1aICl8xZPCb6miIpbgi_Bh4iuUSZfJ9Z4HkYdKOeTkYyRrYdSEwwSiitxFBFm825m9py6Zk77Yyhkvii9aG02rVY2C9RX0n-4/s1600/feed2.png) no-repeat center center #e9a01c}
</style>
Bueno me despido no sin antes dejarles una demo para que vean como quedan
DEMO DE LA VERSION 1 DEMO DE LA VERSION 2
Suscribirse a:
Enviar comentarios
(Atom)
0 comentarios:
Publicar un comentario