Cara Memasang Blogger Social Network Metro Style Di Sidebar Blog

Kali ini saya akan  membagikan sebuah social share network  ,alias 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,witter,dan google+ saja ,sehingga widget ini saya sarankan pada anda yang #antimainstream

Live Demo

 cara pemasangan

• 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://blogger-nesia.blogspot.com/" rel="nofollow"></a></li>
<li><a class="BStw" href="http://blogger-nesia.blogspot.com"></a></li>
<li><a class="BSgp" href="http://blogger-nesia.blogspot.com"></a></li>
<li><a class="BSpi" href="http://blogger-nesia.blogspot.com" rel="nofollow"></a></li>
<li><a class="BSin" href="http://blogger-nesia.blogspot.com" rel="nofollow"></a></li>
<li><a class="BSyt" href="http://blogger-nesia.blogspot.com"></a></li>
<li><a class="BSfd" href="http://blogger-nesia.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/AVvXsEiZUwXdejd7Fz4aGVim0l0oX6kjUI8BviYe4f_SZBufm2lF02yhZ7kIr84c0-D2blr_9RZkWLSZKrcTpJKIsJkzpcqlB43e2cRh09p_7pMp7mjFhJpmKh4u9Ixs-BzjI0ezHHUiILts91fV/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/AVvXsEijj-FKJccgnAlYjzHMuBjVSJnI23omaLx_giBlzjtQb6wxEvYUJUt1I71L062gdeylgwmPpcWnQm9BvZWBoStkJgLWmzymZLP42qH-WUbhdcjNpskbF-FEK8efBkIzH4NEus88sBuK9FVS/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/AVvXsEjXcNGB_xNHhzTBAT515rVgnafnAHaysf0aGb7oHOjkt5FL2bLotxbIdDRxgjyNoR80HeWzyxyy_PX0p_wFJfYgprvM9WbFYFwusqVJwaMmO_c4OgAm_YZnCgnJsZp_4L1QvVp2V2P-tKoE/s1600/BS+MetroSocial+google+plus.png) no-repeat center center #da4a38}
.BloggerSpiceMS .BSpi{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJbzjgbR485nBzjvEhPfolFNJ1nGKxXVQdTGiLyZIf_GvfC0N-3Exu-7s5OtwNfKp7Zh436zhE6V9H660Bol84yaqINIvRFqqaUKHQmbf9EgBj6ZcZb3hRDsXxSlUykcLiueK2qJynHKtn/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/AVvXsEg1O3zaQHil2gFTpUbzaiBmtw2w9cH-FWP_gTL4Sy8mD4wAGDK5xzKf8KGxBad4hJiwmuvU0DrHXLPOMCyfOgNy97cqMN8Q06hsGqkIWTY5IXJy3QP-PYLS2cx_tfd74lZb9ztu9B8oMuVs/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/AVvXsEgff-hre_17XhFfy5CHzbOa3MgBqtprahP5AMdlut7fecsEtOBYyTbI-rHTXXVrZ-ki8GAmJ5Z2c6_UFGIjNy-A7Rg6OOFliGs_87S84h1d4CvIw4ZWq-fr2zvNff1jXZd_jrg5b6Hnd_Ul/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/AVvXsEjdxl1yxrNqi9lMqaouIZYuI1eYmQ0gHf9k6X333KCZf1zqm7uqZ1gvnc5qdIdubodvUV8mZr0cZ9ojQ62_PMjHu-MIfuQ1pAsZtX8t4rRi_yd_4xzCti7g-9bBTF5zjeLDX3AHLZQBudDT/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/AVvXsEhFxF34riOMnghLeRBkNi1naqbcCWL4GlVe90pFbhL85oHeLyrmJCfpFx9YlAEjwKj5fzSgIS2HOM-TRNNjsMysmmhJojV763R_fGZGPvGr_NJfFaQwrorkoMKpcvxUwygZklSc2c8JED1E/s1600/BS+MetroSocial+facebookbs.png) no-repeat center center #1f69b3}
.BloggerSpiceMS li:hover .BStw{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTEoSA79d4XopeiSGJKlWQTE4fXrrEzOSo_oLORHRrCD5dZ2sHkIUyKkGsD0_4SPOCSs8AkHZPFOhM9NI7JDuSezDG_xwtSOyPrCjEm9YVbcs_dtjJDmUKK3xanWK__9TC6wpX7pohAayF/s1600/BS+MetroSocial+twitterbs.png) no-repeat center center #43b3e5}
.BloggerSpiceMS li:hover .BSgp{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD1H1BrKl-y-loM6hB-teT137wDazwrhyphenhyphenuo2wZWaoT10rEDyv-4FcOy_JUeoBmHgyjOx79DMO9CZrEvgnaYqE95hxgzOBgmwk6MzeXh9fIjwyjC3ZJ26vZCCDFEgeNvjC4R76ftkrKqQ_i/s1600/BS+MetroSocial+google+plusbs.png) no-repeat center center #da4a38}
.BloggerSpiceMS li:hover .BSpi{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmtvdp-w1MvCRnrs5ftRGEkcKoG38aH3Nh3Kz3InhLSVlkG78ijHM2VIGcnTVzdlEZ_-Cuy7p3vCs-h9PVulxHu8SE_L-89cVHke3kXLf90KXxzJlSJCFiWFjn9aUeWZteqxCLNXefDDpZ/s1600/BS+MetroSocial+pinterestbs.png) no-repeat center center #d73532}
.BloggerSpiceMS li:hover .BSin{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5x-7XJOtBGfg_OF1j34uxRRRFLxIEGefVThWhRvRP3pE8FIdMvn2P8GNjAGvgv_gdCQoIe3v1JEzPQ8EEJsWTJQM5kdVrGys1e0j_fJW86ZfPrsUh7nvdKvH6fSmmTOy_HI8NxdIRo3bt/s1600/BS+MetroSocial+linkedinbs.png) no-repeat center center #0097bd}
.BloggerSpiceMS li:hover .BSyt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHDhGlnR7eVlAaiGnnRzZR9PKL6AXqnpndQ0USDmIUEYhizEi07AcXcxq4Y7aaVPWM_2DRua1NXM_L7m3SzkuWRSvB45uTpbXrvRFzZ_wrJf9F2mvNdXXuOKN3Gt2wM4YrACgEbwWaOt2t/s1600/BS+MetroSocial+youtubebs.png) no-repeat center center #e64a41}
.BloggerSpiceMS li:hover .BSfd{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuhkISx-zxWGzWrbjlJUnpxdePGQnbzfK1-QA66XCEYL3W1d_g8pQLZIgiXc6R8eu2Ho726Kmjcqv7AVCmq4jX2cV-oP9mhvjpccOMih2inuB_SbiQBB26F0gbQiUJDe5x2lk_y7OIDm7N/s1600/BS+MetroSocial+feedbs.png) no-repeat center center #e9a01c}
</style>
</div>

• Step 5  Simpan lalu cek bog anda untuk melihat hasilnya

pengubahan

Ubah link  http://blogger-nesia.blogspot.com dengan link yang ingin anda tuju

jika ada yang ingin agan tanyakan  silahkan berkomentar .wassalamualaikum wr.wb.