Plugin Metro Style widget para Blogger

En esta oportunidad les vamos a compartir el plugin Metro Style widget 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.

DEMO DE LA VERSION 1      DEMO DE LA VERSION 2

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"></a></li>
<li><a class="tw" href="URL DE TU TWITTER"></a></li>
<li><a class="gp" href="URL DE TU GOOGLEPLUS"></a></li>
<li><a class="pi" href="URL DE TU PINTEREST" rel="nofollow"></a></li>
<li><a class="fd" href="URL DE TU FEEDBURNER" rel="nofollow"></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/AVvXsEibvOK3ENhOkhLnLJLuL5Jxu1iEFqxLzXumodODkVDcK-AxgDQX3wc79qVEoWDnD2KEVVMpf7xrmEkba0LV2FBBCFKUsswBtYNU1hK4220xKpy22Dea6RbeFTeKCXuDfaIBN0IWtPY2mFY/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/AVvXsEinlTbyz-3zhTBVykABgQmExJJ3SS9j1c09c51luKqhJ-TrtKmmmz5t_TBHLkTRGligCLeuz7zjsiwAX3ipitx5MlYDGrxAJ04jHw-XVRYhvavR5ggjctPpcJDrHS78OxwPR5POZwuqA4Y/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/AVvXsEiQytNDccNQeU-bfV_qKEjkPC6rCwPkX-EFKhO4QKqHPtDp9NEHUeEo5cE8JM4WkH9sMpmM7JQXpw9Ekt8elfRKoRsFKDiEOuTk2eeXfnbDgQi2z4ZB55-kfLQLs9Eu67I-CGjxCGtbJkc/s1600/g+1.png) no-repeat center center #da4a38}
.metro-social .pi{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqSlNDAk3JB9lkyRSI3ImeTjxbBr4mrUWHXdoEs6dFiPGW0k7tPfDMrTriwYPUI_zBYP2MYIQLmeOSb02RfPZn5HpLRdrrP1kLQmexBe5eMoKdK01e-4IO3XKird8on6EcBQOTOjwg93Y/s1600/pin1.png) no-repeat center center #d73532;width:68px;height:70px}
.metro-social .fd{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZgSZn0a_V9orxIoz3p4K6W4O6ZbUjTf-gDeR5yPVzZMkbIUYW94KqXwULnPObu_-3SlSPXYuVHhhzgUe57dWRurhalwmNPJCXoeCjrBLqtupf8PKqqRLKm-_Ci2zi9erc4qqRRnwlj4c/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/AVvXsEhU_aW_4ELzERn7GovMJ33WOtJOGLN0GYvciHXQjyx14hxeZaS0KSafEaIMaNW5B2I6R_YZANoNl7GgmvN1fS7IT2eS3DFSMkgDoOONJaEj7y-hImZ3DPrJkSmLyq3GngQFMyVkBPpxtKA/s1600/fb2.png) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7_F9b6nNJEy5xz1DsIqCLR-I3ma3SypgwGKbP8Hvc7AES72lv9kIkY6jmqBdnGSswg8MKzNpMJvzGPBtO9_Tk8dcK7-Rz6MNwSvMR_Rym6YnP8TxX074hXgn_K5RDb8OpeFqE_R3pbR4/s1600/tw2.png) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoSZSjsT2AEi6fZSsqWGi8IpwfQyNHY47oci_ENGlqGGriAJFiZGXW143MpeUhvffEPdet_9IPXnmWBbAhmOR1oaxk9W1ZIpXdI5Z8rFCzxbPIuDWbFYnLEnH43stkT4tXwIgLGwOMkwI/s1600/g+2.png) no-repeat center center #da4a38}
.metro-social li:hover .pi{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-dFEQhtjd2TGQLTxXc5ZSugfggmHASjGziOckdNBYk1cCh58Txl5PYZ-12LB0dnGGIonCNdANP1AbwoPZA1Y-3P4ZeYPKY-8dcXmLvdP02wA880vefxu2_CK69f-1LuM-GwrvNHY20cI/s1600/pi2.png) no-repeat center center #d73532}
.metro-social li:hover .fd{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwV6GFmlPUd942LCtwaS5-zvIK_1RVUR1jQnZBQP7ZWkOz4GQYYWKj6w3LmmnsrY48PJWPJ0IsPN55uu1ITAJpGR2-najLqloeEgaewhAjoFoep2fhAW5VQmY5_aSGPtD2_NXr5nWhGEg/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"></a></li>
<li><a class="tw" href="URL DE TU TWITTER"></a></li>
<li><a class="gp" href="URL DE TU GOOGLEPLUS"></a></li>
<li><a class="pi" href="URL DE TU PINTEREST" rel="nofollow"></a></li>
<li><a class="in" href="URL DE TU LINKEDIN" rel="nofollow"></a></li>
<li><a class="yt" href="URL DE TU YOUTUBE"></a></li>
<li><a class="fd" href="URL DE  TU FEEDBURNER" rel="nofollow"></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/AVvXsEibvOK3ENhOkhLnLJLuL5Jxu1iEFqxLzXumodODkVDcK-AxgDQX3wc79qVEoWDnD2KEVVMpf7xrmEkba0LV2FBBCFKUsswBtYNU1hK4220xKpy22Dea6RbeFTeKCXuDfaIBN0IWtPY2mFY/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/AVvXsEinlTbyz-3zhTBVykABgQmExJJ3SS9j1c09c51luKqhJ-TrtKmmmz5t_TBHLkTRGligCLeuz7zjsiwAX3ipitx5MlYDGrxAJ04jHw-XVRYhvavR5ggjctPpcJDrHS78OxwPR5POZwuqA4Y/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/AVvXsEiQytNDccNQeU-bfV_qKEjkPC6rCwPkX-EFKhO4QKqHPtDp9NEHUeEo5cE8JM4WkH9sMpmM7JQXpw9Ekt8elfRKoRsFKDiEOuTk2eeXfnbDgQi2z4ZB55-kfLQLs9Eu67I-CGjxCGtbJkc/s1600/g+1.png) no-repeat center center #da4a38}
.metro-social .pi{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqSlNDAk3JB9lkyRSI3ImeTjxbBr4mrUWHXdoEs6dFiPGW0k7tPfDMrTriwYPUI_zBYP2MYIQLmeOSb02RfPZn5HpLRdrrP1kLQmexBe5eMoKdK01e-4IO3XKird8on6EcBQOTOjwg93Y/s1600/pin1.png) no-repeat center center #d73532;width:68px;height:69px}
.metro-social .in{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqZyDctxVmIbNk7czKQZENkxBCMsd3D8Q7F2femycPWMBLbvIdGTeVUr1jJgab_peXM8wPmQZ9HP3KNqG9sJ6EKYpbnNz-YYnahBj-8Zq2lLRT6khQpi4DOWJzx7KRpvAY_Oetn8FY-5M/s1600/Lin1.png) no-repeat center center #0097bd;width:69px;height:69px}
.metro-social .yt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJAayTpwJDjDX06ebtoBhuqaMDXHGBdENqjoIY8-7PXlXOmc21r8pOVapizHlGbBoyHOVovFs8eYT3SXfaIJ0eiaLnOcl4K1U1fSShoUqazNvI6dM1yW4MN8gfjNvo-tT9oOLWW5gJKPE/s1600/YT1.png) no-repeat center center #e64a41;width:140px;height:69px}
.metro-social .fd{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZgSZn0a_V9orxIoz3p4K6W4O6ZbUjTf-gDeR5yPVzZMkbIUYW94KqXwULnPObu_-3SlSPXYuVHhhzgUe57dWRurhalwmNPJCXoeCjrBLqtupf8PKqqRLKm-_Ci2zi9erc4qqRRnwlj4c/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/AVvXsEhU_aW_4ELzERn7GovMJ33WOtJOGLN0GYvciHXQjyx14hxeZaS0KSafEaIMaNW5B2I6R_YZANoNl7GgmvN1fS7IT2eS3DFSMkgDoOONJaEj7y-hImZ3DPrJkSmLyq3GngQFMyVkBPpxtKA/s1600/fb2.png) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7_F9b6nNJEy5xz1DsIqCLR-I3ma3SypgwGKbP8Hvc7AES72lv9kIkY6jmqBdnGSswg8MKzNpMJvzGPBtO9_Tk8dcK7-Rz6MNwSvMR_Rym6YnP8TxX074hXgn_K5RDb8OpeFqE_R3pbR4/s1600/tw2.png) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoSZSjsT2AEi6fZSsqWGi8IpwfQyNHY47oci_ENGlqGGriAJFiZGXW143MpeUhvffEPdet_9IPXnmWBbAhmOR1oaxk9W1ZIpXdI5Z8rFCzxbPIuDWbFYnLEnH43stkT4tXwIgLGwOMkwI/s1600/g+2.png) no-repeat center center #da4a38}
.metro-social li:hover .pi{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-dFEQhtjd2TGQLTxXc5ZSugfggmHASjGziOckdNBYk1cCh58Txl5PYZ-12LB0dnGGIonCNdANP1AbwoPZA1Y-3P4ZeYPKY-8dcXmLvdP02wA880vefxu2_CK69f-1LuM-GwrvNHY20cI/s1600/pi2.png) no-repeat center center #d73532}
.metro-social li:hover .in{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWvIBRX_oK7XKJKjMbPVhL-7dLFQGMTugZp-INB78Gonu5H-jvLYHkRnCPfyaCEGmEaHsShupVCHpVLZzcn65uctIidNTIwCkh6L2u3TfNGX-eERPTcMPklvwpdwfeig1IGOZpsKGo5eU/s1600/Lin2.png) no-repeat center center #0097bd}
.metro-social li:hover .yt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizi9Ka30N4yA2xCZVRBa0GG0KJhIALbLrwvlHq-ptOI_zXXUkyBfoqEuyI8ghpgDrj9iyXiTNoadMJbb3QLBX42BySBJHZlKCJRtzsdah0ddgfzisE_0_kPV1YBLdeqTZiErsUR4Dq0F4/s1600/yt2.png) no-repeat center center #e64a41}
.metro-social li:hover .fd{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwV6GFmlPUd942LCtwaS5-zvIK_1RVUR1jQnZBQP7ZWkOz4GQYYWKj6w3LmmnsrY48PJWPJ0IsPN55uu1ITAJpGR2-najLqloeEgaewhAjoFoep2fhAW5VQmY5_aSGPtD2_NXr5nWhGEg/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.

Espero que les haya gustado este genial plugin y que comenten como les ha parecido.

Sigan visitando Mil Trucos Blogger, hasta la próxima ocasión.

Vía: Spiceupyourblog