All About All
All About All

Me

Me
Rezki

Me

Me
Rezki

Me

Me
Rezki

Senin, 17 Maret 2014

Widget Social Network Metro Style


By on 09.54



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>

  • Step 5  Ganti yang tulisan berwarna MERAH dengan alamat situs anda.
  • Step 6 Simpan lalu cek bog anda untuk melihat hasilnya.



Click ! for Informations

>


About Rezki Yudi Triana

Lahir pada tanggal 02 Juni di Ciamis,bersekolah di SMKN 1 Banjar jurusan MULTIMEDIA tahun 2012 sampai dengan 2015.
Comments
0 Comments

0 komentar:

Posting Komentar