Κουμπια κοινωνικης δικτυωσης μετρο στυλ

Γεια σας φιλοι μου σημερα σας εχω δυο gadget για τα social media ειναι στο στυλ των windows 8 και θα ομορφυνουν πολυ το blog σας.

                                                                     Στυλ πρωτο

                                                                 
                                                                  Στυλ δευτερο

Κωδικος για το στυλ νουμερο 1

<div class='metro-social'> <li><a class="fb" href="https://www.facebook.com/YOURFACEBOOK/" rel="nofollow"></a></li> <li><a class="tw" href="http://twitter.com/YOURTWITTER/"></a></li> <li><a class="gp" href="https://plus.google.com/YOURGOOGLEPLUS/"></a></li> <li><a class="pi" href="http://www.pinterest.com/YOURPINTEREST/" rel="nofollow"></a></li> <li><a class="fd" href="http://feeds.feedburner.com/YOURFEEDBURNER" 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/AVvXsEg7XrQVMyiMw37wsyvcBEtQiYXS4PQopkRdq74NznNUU7L85nnw7tWZbS30rouV-t-JymskGZoRnvaAv6qLdCsfvWF3Jx4-K6M5wJJQaKoj-c9elhMb6DAp7NJmNfMtVhwuQdx8dzh_6Zo/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/AVvXsEgVptXaMJFz8oWIDhth6zU1KQ4bH6KcnAAZ-nFdp7PF9NettkmAui8zc5i-BYe97r6_PW8YGrNdFImcHlqqrCGvXn81kDZWB70DlTBMEdUTWbcOsNJFmcwolAAYi5b5HOGImzjC6bRuf80/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/AVvXsEgIBzRRNhu9YrPHwL5Lew4xHfJIvvHcg9Ev9KFAru3pvKCVABHLnmcAWXbsdjqlXnYsYXcYyESgQ6-dgq7gABJHWnPIxrMMAQaskgBc1V4PLqzAbazw2YtzsODwb7PXkpJyiUfct5deHww/s1600/g+1.png) no-repeat center center #da4a38} .metro-social .pi{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH5ytSe4XjYo1I_t6D0gJY5qD0Q91JdsIKrJVV15pbdc1o7vnB2poG2raCanbviIYb1TQpXyLP5ww2gyUpn8hO0hdGF-sbq6Iaa-b-6M5KWEZAgTnY3HU6zrDM14SJHrlPV5RNS8_R8ZY/s1600/pin1.png) no-repeat center center #d73532;width:68px;height:70px} .metro-social .fd{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCsbOwgNQdOgURM8KF66CogvEZVe3SibU_LOQmpU5MBBNS_Q2s9K_EzdfQX8lkEwqKaM94BtmGwUtwx7GOFYz8pLPmQQqgiSt_rhyphenhyphenYUWo8lPM-dlPQ1J0WsqzLZ0A7Is_V79bSI_Sa3k8/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/AVvXsEjEQU-fMlOYwigTa8MtEjdDgXXZYBddFmpy6ic6_18yPpXMCvmq8eLnE-a5zpyGQ5e_-WcrgTzL4joENE964I6yblFoZTe6_-wZk-Vtk_Rh1VQEKPqWWa4mja_oHHDgdlqtCt1QJbZVbgI/s1600/fb2.png) no-repeat center center #1f69b3} .metro-social li:hover .tw{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWumNFgZtZ6C8T7NMA4hRduCZdi4_Sr58TXGmaGinoV5fM2TkmYmk0RUZPvmSoedZYqOD9A6F9jwk93KqkvyIBR2sNo0FQh34Z66Nfb4eQ8L268gMZ5Gybc3Os64qm6IpK_4E6wQArVqQ/s1600/tw2.png) no-repeat center center #43b3e5} .metro-social li:hover .gp{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFiIHZWZc5u3DDPzCIhXIUT6aKEuwnkYcxStm8LWvQrSGxg442YzXGaLqTw8F1WVPFanwJS3GpoHcRuHOzowGKyc4kMxzsSKTXreaxNUVPtxW6baJgl6FpMRRCTjoehvSqeh5w7MSgnjo/s1600/g+2.png) no-repeat center center #da4a38} .metro-social li:hover .pi{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgESLhinAHM8vCfsHv5c9gBDD6zsde21Fk5l7vQ-sRvPpiDed35xsdqLyQX5lDFRre2gaumgJm65QAB5JK3ceN5EVQikzqK2zG6iLM2eFBXjDOmXxNoIy8ZDrftBrJlAfZbL8OVc6Z7sd0/s1600/pi2.png) no-repeat center center #d73532} .metro-social li:hover .fd{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieO15JjjZpmYGL8SlGn2jxZPyILd1NrW5wpS1PP3DJV-8tRpEeIAGgrEL_ZUiOF2VyKmm6PZB3dKRDj2ZNTouDYm9QactRa-eDf1WDX-6YtFpIklqZyAyT_gV2cquBxyaUykq37gk5Z80/s1600/feed2.png) no-repeat center center #e9a01c} </style>

Κωδικος για το στυλ νουμερο 2

 <div class='metro-social'> <li><a class="fb" href="http://www.facebook.com/YOURFACEBOOK/" rel="nofollow"></a></li> <li><a class="tw" href="http://twitter.com/YOURTWITTER/"></a></li> <li><a class="gp" href="https://plus.google.com/YOURGOOGLEPLUS/"></a></li> <li><a class="pi" href="http://www.pinterest.com/YOURPINTEREST/" rel="nofollow"></a></li> <li><a class="in" href="http://www.linkedin.com/YOURLINKEDIN/" rel="nofollow"></a></li> <li><a class="yt" href="http://www.youtube.com/YOURYOUTUBE/"></a></li> <li><a class="fd" href="http://feeds.feedburner.com/YOURFEEDBURNER/" 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/AVvXsEg7XrQVMyiMw37wsyvcBEtQiYXS4PQopkRdq74NznNUU7L85nnw7tWZbS30rouV-t-JymskGZoRnvaAv6qLdCsfvWF3Jx4-K6M5wJJQaKoj-c9elhMb6DAp7NJmNfMtVhwuQdx8dzh_6Zo/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/AVvXsEgVptXaMJFz8oWIDhth6zU1KQ4bH6KcnAAZ-nFdp7PF9NettkmAui8zc5i-BYe97r6_PW8YGrNdFImcHlqqrCGvXn81kDZWB70DlTBMEdUTWbcOsNJFmcwolAAYi5b5HOGImzjC6bRuf80/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/AVvXsEgIBzRRNhu9YrPHwL5Lew4xHfJIvvHcg9Ev9KFAru3pvKCVABHLnmcAWXbsdjqlXnYsYXcYyESgQ6-dgq7gABJHWnPIxrMMAQaskgBc1V4PLqzAbazw2YtzsODwb7PXkpJyiUfct5deHww/s1600/g+1.png) no-repeat center center #da4a38} .metro-social .pi{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH5ytSe4XjYo1I_t6D0gJY5qD0Q91JdsIKrJVV15pbdc1o7vnB2poG2raCanbviIYb1TQpXyLP5ww2gyUpn8hO0hdGF-sbq6Iaa-b-6M5KWEZAgTnY3HU6zrDM14SJHrlPV5RNS8_R8ZY/s1600/pin1.png) no-repeat center center #d73532;width:68px;height:69px} .metro-social .in{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm7NkRiCjIQ-hzoPVEE7Ab6dPz4Kc7xH0PaKaiFskif946PlEqoZq_-GxESzw-q04HMvOKyGyZrczYPUIzLb6oqYVJ71qoj33KmNcrByj3Z-GV469MceFRL0Hv3ia9EuAZcby4iaCK59I/s1600/Lin1.png) no-repeat center center #0097bd;width:69px;height:69px} .metro-social .yt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsX-Jzudcj8rg0f2_yvLdxCKFHlIAYEZErL0p_y9Zh72ZyvPfvo10R9ZtH5lUnELkIEe9knDuub3bq0Dzzy8NEDgTcovnzw12z666_H5_lL2yb6fdPfBYbTA7AHcCaptS25C9CQeEtTvs/s1600/YT1.png) no-repeat center center #e64a41;width:140px;height:69px} .metro-social .fd{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCsbOwgNQdOgURM8KF66CogvEZVe3SibU_LOQmpU5MBBNS_Q2s9K_EzdfQX8lkEwqKaM94BtmGwUtwx7GOFYz8pLPmQQqgiSt_rhyphenhyphenYUWo8lPM-dlPQ1J0WsqzLZ0A7Is_V79bSI_Sa3k8/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/AVvXsEjEQU-fMlOYwigTa8MtEjdDgXXZYBddFmpy6ic6_18yPpXMCvmq8eLnE-a5zpyGQ5e_-WcrgTzL4joENE964I6yblFoZTe6_-wZk-Vtk_Rh1VQEKPqWWa4mja_oHHDgdlqtCt1QJbZVbgI/s1600/fb2.png) no-repeat center center #1f69b3} .metro-social li:hover .tw{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWumNFgZtZ6C8T7NMA4hRduCZdi4_Sr58TXGmaGinoV5fM2TkmYmk0RUZPvmSoedZYqOD9A6F9jwk93KqkvyIBR2sNo0FQh34Z66Nfb4eQ8L268gMZ5Gybc3Os64qm6IpK_4E6wQArVqQ/s1600/tw2.png) no-repeat center center #43b3e5} .metro-social li:hover .gp{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFiIHZWZc5u3DDPzCIhXIUT6aKEuwnkYcxStm8LWvQrSGxg442YzXGaLqTw8F1WVPFanwJS3GpoHcRuHOzowGKyc4kMxzsSKTXreaxNUVPtxW6baJgl6FpMRRCTjoehvSqeh5w7MSgnjo/s1600/g+2.png) no-repeat center center #da4a38} .metro-social li:hover .pi{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgESLhinAHM8vCfsHv5c9gBDD6zsde21Fk5l7vQ-sRvPpiDed35xsdqLyQX5lDFRre2gaumgJm65QAB5JK3ceN5EVQikzqK2zG6iLM2eFBXjDOmXxNoIy8ZDrftBrJlAfZbL8OVc6Z7sd0/s1600/pi2.png) no-repeat center center #d73532} .metro-social li:hover .in{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicIAuT4W82mmYFwE_2m4QASUhsg9MOD88iKvfpzSaoqd6M11MtTtdATnnI8F8JZEIyR-LQwrX58effVQEgm8mcRzQfekuLkmhhNFv1AFghLDqno7Er4aa8qrqEwT6gjbLdGnaCw8fPM0o/s1600/Lin2.png) no-repeat center center #0097bd} .metro-social li:hover .yt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_k9F0rsVI-soF1i9MA78E18irvien6gKi3CwwUHmhCNsihN5wWaSCsYAxR8iHsxbM1eJilcu54CIqEMu_JmWg9DKC417GbhyXVVODUCDc05pLIOi456RHacphJBT_hh_nt4xJCkVpCtI/s1600/yt2.png) no-repeat center center #e64a41} .metro-social li:hover .fd{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieO15JjjZpmYGL8SlGn2jxZPyILd1NrW5wpS1PP3DJV-8tRpEeIAGgrEL_ZUiOF2VyKmm6PZB3dKRDj2ZNTouDYm9QactRa-eDf1WDX-6YtFpIklqZyAyT_gV2cquBxyaUykq37gk5Z80/s1600/feed2.png) no-repeat center center #e9a01c} </style>

Μπαινουν σαν gadget οποτε παμε διαταξη προσθηκη γκατζετ  HTML/JavaScript  και κανουμε επικολληση οποιον απο τους παραπανω κωδικους θελετε.
Επομενο βημα ειναι να αλλαξουμε ττις κοκκινες γραμουλες με τους δικους μας λογαριασμους
Κανουμε αποθηκευση και μετακινουμε το gadget στο σημειο που θελουμε να εμφανιζεται. Ελπιζω να σας αρεσει