Widget Social Network Metro Style ~ All About All

Kali ini saya akan membagikan sebuah social share network atau tombol share ke beberapa social Network terkenal seperti facebook,twitter,pinterest, google+, linkedin ,Youtube dan bahkan feeds burner. Jika biasanya kita hanya menjumpai tombol social media yang hanya memiliki 4 tombol maka widget ini bisa memberikan kita 7 situs social media sekaligus.

Social network button ini sangat tepat jika anda gunakan pada template yang juga menggunakan style/tema Metro seperti Metro UI yang ada di btemplates.com . Sebenarnya sudah banyak sekali social media metro style ini namun sebagian besar hanya berisikan dengan facebook,twitter,dan google+ saja ,sehingga widget ini saya sarankan pada anda yang Anti main stream

Step 1 Buka blogger.com lalu pilih blog anda
Step 2 Pilih tata letak
Step 3 Pilih tambahkan widget lalu HTML/Javascript
Step 4 Copy kode berikut lalu pastekan di dalam kolom HTML/Javascript tadi

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="BloggerSpiceMS">
<br />
<li><a class="BSfb" href="http://anti-fool.blogspot.com//" rel="nofollow"></a></li>
<li><a class="BStw" href="http://anti-fool.blogspot.com/"></a></li>
<li><a class="BSgp" href="http://anti-fool.blogspot.com/"></a></li>
<li><a class="BSpi" href="http://anti-fool.blogspot.com/" rel="nofollow"></a></li>
<li><a class="BSin" href="http://anti-fool.blogspot.com/" rel="nofollow"></a></li>
<li><a class="BSyt" href="http://anti-fool.blogspot.com/"></a></li>
<li><a class="BSfd" href="http://anti-fool.blogspot.com/" rel="nofollow"></a></li>
</div>
<style>
.BloggerSpiceMS{width:285px}
.BloggerSpiceMS li{position:relative;cursor:pointer;padding:0;list-style:none}
.BloggerSpiceMS .BSfb,.BStw,.BSgp,.BSpi,.BSin,.BSyt,.BSfd{z-index:7;float:left;margin:1px;position:relative;display:block}
.BloggerSpiceMS .BSfb{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvnCJe32iog-yJBvus_YHhsiSLQ1AURHj6-5rQ_h5o77XV3PoJ3s9035wO6Wp1H3kv318EdD_TjYu-y0q3hO7escttY3B3lu-aX5xaWC_PPrIKSlqyfARH8ss1Ln5nNYgnTkr0I-EJBuI/s1600/BS+MetroSocial+facebook.png) no-repeat center center #1f69b3;width:140px;height:141px}
.BloggerSpiceMS .BStw{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimDiRMTidATTQEPa9hGU5NBW7Wxzrpp5KvPlkq6KXcDf2lFA-RLligx2pgb-eRF5uUo9LtlWmZcrX5PGIX_gJI34aO8217OZMidDRrSmk3kTZp62JNdX09KLG8_wcGM5uoAN7G1RSarz8/s1600/BS+MetroSocial+twitter.png) no-repeat center center #43b3e5;width:68px;height:70px}
.BloggerSpiceMS .BSgp{width:69px;height:70px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-wROrsIEZT_kj8X3zlBdOXql0J6uZ7lzsa2bJ_LB-O9kZIPTf8fymPbeoYMD0P97NTHaM0I8wap7M2zS1elwxFN_6a3m45INj1dOad0JsUpsRq_xbTr2netzoGqzXJRuht4crQQCMUcQ/s1600/BS+MetroSocial+google+plus.png) no-repeat center center #da4a38}
.BloggerSpiceMS .BSpi{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiELuGF2Ig9l41KQ-IgZOEORvrADyad4NrmvdboT5zByOwvoiN4649slPbukSSdf55D12A955uu2BFuYclroNVEQBr3mFUEr8ImNskSwjksE2uoSEEqEP9oN968o_eAK_6K-20K8NmqDhc/s1600/BS+MetroSocial+pinterest.png) no-repeat center center #d73532;width:68px;height:69px}
.BloggerSpiceMS .BSin{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy13R8M6mesWW-0ag86_MPtCtPvxb5my6A42RWfHHMhYmHJS1qXC0QLodMjt9Nbvv5PTxdyIPeytVIGw3Ik-xAwgF0DAsdUcLL-rgH9v-i_PXinZI7YSB4nEjXxs-qtDt7njXG7kg2y9s/s1600/BS+MetroSocial+linkedin.png) no-repeat center center #0097bd;width:69px;height:69px}
.BloggerSpiceMS .BSyt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSxRfRTcYcIYjZP7qQHATEUQspT4uxmZohjSU1UGvOeOju92si8Tn8agE8Z7iBEDlgOL0SiHVHmOjTXPzAqwktGt7Q-NxA8DbwQM4r9eY0V0J4S8Shx0gwQXlbhVCvAQ-vqPgYnCZeFys/s1600/BS+MetroSocial+youtube.png) no-repeat center center #e64a41;width:140px;height:69px}
.BloggerSpiceMS .BSfd{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzEJh65D6xlU1EN3ZY6dK_u9DN5KV2uGbBS5e5vqBoAfvM6AIE7PZsd3uCHhl8n8ZcNl-II5ltCWD1nfeEq5hVFr9AoIRc4SXBMYQ8e8a4R4HzV5hM6622je2lUOhIRuXnu2BvjhM48NY/s1600/BS+MetroSocial+feed.png) no-repeat center center #e9a01c;width:140px;height:69px}
.BloggerSpiceMS li:hover .BSfb{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlIqiVd5l6gPDSObN-b6PU-LgXeOsRV5ARENW1GewS_V4OBGICF8xZyGmbcNyiiuVfpiwCQ1ec3vfHtQvGyPX_VbaQJB7RXPwi3f_3dZr7OdcaL0YxRWpFVEuWcXuyzbxYpCrAyva-Kp4/s1600/BS+MetroSocial+facebookbs.png) no-repeat center center #1f69b3}
.BloggerSpiceMS li:hover .BStw{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtfPVAp0Oz5TsCaD7ePFvRpg_i4nJlRtikIqWhma4vjaiJZ-BrwWl4uWGkSWeB6qXmzkoVp_2cx7M-lxACjLUwjE2wiBidsZagQmew2wM7EsAZ61C7yy3O-GSBbzjd_1oNAasqT0gRnzQ/s1600/BS+MetroSocial+twitterbs.png) no-repeat center center #43b3e5}
.BloggerSpiceMS li:hover .BSgp{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxfSvwHAsBpFJ8XdsHdAOR8r9sntNSzYKBD7aYB6LUDTkf5fN5AbFFRxKK3tOJ7FGgrTPXzJ1RhV1E_ZNnS5aIJ6wZj4h3bJ4PejPCp-uxh9El83wwyq7a6xduoPipyKxaxWUub7162tU/s1600/BS+MetroSocial+google+plusbs.png) no-repeat center center #da4a38}
.BloggerSpiceMS li:hover .BSpi{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAxMAsmfPMUwPahkcj_TZdi2vX08ZHsE0P7Pk_MQ19Hni81byFP-1OHTHZVmp5PwtnMpURtJTXF9Vkp0DSz1xGHrFbuK43i9auynEvHLTK8aLi3X9F3ICZxsVaJvCtPkKk2AfebsOWiaA/s1600/BS+MetroSocial+pinterestbs.png) no-repeat center center #d73532}
.BloggerSpiceMS li:hover .BSin{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmHe9uq7pMmAhWUrXDB9WNNSI7Wr6YjH_yROQkcVG6v7VoAJ-45LJXYCg8_jKobbuEy0AfnyHxBGjYAYRbGbdls1gY9SpjHXfSYX283AA5yLkuzsAQGHWq20zf8y7SKNrBrkoQMRVujCA/s1600/BS+MetroSocial+linkedinbs.png) no-repeat center center #0097bd}
.BloggerSpiceMS li:hover .BSyt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHWcT3Y1Nd85wdsHgKyxwAmEOKb_sASQYO7A_rHbIS7E6mpzwzMLQEEtinUPHUSSIzXsE1fqecXrbUztIBTuTtxZkVSbsXao4h_XAzY4dEENCrX5vCZjrAzcVCMGzVozvbay-9hEH5_Gc/s1600/BS+MetroSocial+youtubebs.png) no-repeat center center #e64a41}
.BloggerSpiceMS li:hover .BSfd{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM_pggPPrn0lwvF9fYiV-bACRkQwhzsXIcEwp8WwsgR9h7XpsQOYQHn3qcVoPHAkCVG0J3_vG5aPx6YNYGuRA9Ilp43-rC2l2Wp_dDHGMQdrJjIr7mHLrz-2uY_7xA8NErQ8hIgBQmJDI/s1600/BS+MetroSocial+feedbs.png) no-repeat center center #e9a01c}
</style>
</div>