Metro Style Social Media Widget untuk Blogger

Rahina Blog, Oke sobat blogger berjumpa lagi dimari oke kali ini mau berbagi Widget social media Metro Style Yang di redesain
Sama saya dan di support oleh mbah google untuk mencari mentahan nya .saya buat widget ini semirip mungkin dengan Icon handphone Lumia hehe
Jadi mohon maaf kalau brantakan karna saya bukan mastah yang jago codding .

Oke sobat langsung saja tanpa panjang lebar inilah penampakan nya



Berikut tutor Masang Metro Style Social Media pada blogger

1. Masuk akun Blogger anda
2. Masuk Ke menuTemplate >> Edit HTML
3. Cari kode <style type='text/css> Dengan mengetikan CTRL+F
4. Tambahkan CSS berikut ini di bawah <style type='text/css>

/* Metro Widget social */
.metro-social {
width:100%
}

.metro-social li {
position:relative;
cursor:pointer;
padding:0;
list-style:none
}

.metro-social .facebookbt,.twitterbt,.googleplusbt,.pinterestbt,.linkedinbt,.youtubebt,.rssbt {
z-index:7;
float:left;
margin:1px;
position:relative;
display:block
}

.metro-social .facebookbt {
background:url(http://technoratan.net/wp-content/uploads/2014/04/bt-facebook.png) no-repeat center center #1f69b3;
width:140px;
height:141px
}

.metro-social .twitterbt {
background:url(http://technoratan.net/wp-content/uploads/2014/04/bt-twitter.png) no-repeat center center #43b3e5;
width:68px;
height:70px
}

.metro-social .googleplusbt {
background:url(http://technoratan.net/wp-content/uploads/2014/04/bt-google+plus.png) no-repeat center center #da4a38;
width:69px;
height:70px
}

.metro-social .pinterestbt {
background:url(http://technoratan.net/wp-content/uploads/2014/04/bt-pinterest.png) no-repeat center center #d73532;
width:68px;
height:69px
}

.metro-social .linkedinbt {
background:url(http://technoratan.net/wp-content/uploads/2014/04/bt-linkedin.png) no-repeat center center #0097bd;
width:69px;
height:69px
}

.metro-social .youtubebt {
background:url(http://technoratan.net/wp-content/uploads/2014/04/bt-youtube.png) no-repeat center center #e64a41;
width:140px;
height:69px
}

.metro-social .rssbt {
background:url(http://technoratan.net/wp-content/uploads/2014/04/bt-feed.png) no-repeat center center #e9a01c;
width:140px;
height:69px
}

.metro-social li:hover .facebookbt {
background:url(http://technoratan.net/wp-content/uploads/2014/04/bt-facebook1.png) no-repeat center center #1f69b3
}

.metro-social li:hover .twitterbt {
background:url(http://technoratan.net/wp-content/uploads/2014/04/bt-twitter1.png) no-repeat center center #43b3e5
}

.metro-social li:hover .googleplusbt {
background:url(http://technoratan.net/wp-content/uploads/2014/04/bt-google+plus1.png) no-repeat center center #da4a38
}

.metro-social li:hover .pinterestbt {
background:url(http://technoratan.net/wp-content/uploads/2014/04/bt-pinterest1.png) no-repeat center center #d73532
}

.metro-social li:hover .linkedinbt {
background:url(http://technoratan.net/wp-content/uploads/2014/04/bt-linkedin1.png) no-repeat center center #0097bd
}

.metro-social li:hover .youtubebt {
background:url(http://technoratan.net/wp-content/uploads/2014/04/bt-youtube1.png) no-repeat center center #e64a41
}

.metro-social li:hover .rssbt {
background:url(http://technoratan.net/wp-content/uploads/2014/04/bt-feed1.png) no-repeat center center #e9a01c
}

5. Klik Simpan Template Sobat
6. Sekarang masuk ke TataLetak/Layout >> Add Gadget >> HTML/JavaScript
7. Tambahkan Kode Berikut ini (bisa juga sobat sisipkan dimana sobat ingin widget ini tampil)

<div class="metro-social">
<li><a class="facebookbt" href="http://www.facebook.com/RahinaBlog"></a></li>
<li><a class="twitterbt" href="http://twitter.com/RahinaBlog"></a></li>
<li><a class="googleplusbt" href="https://plus.google.com/RahinaBlog"></a></li>
<li><a class="pinterestbt" href="http://www.pinterest.com/RahinaBlog"></a></li>
<li><a class="linkedinbt" href="http://www.linkedin.com/company/RahinaBlog/"></a></li>
<li><a class="youtubebt" href="http://www.youtube.com/user/RahinaBlog"></a></li>
<li><a class="rssbt" href="http://feeds.feedburner.com/RahinaBlog"></a></li>
</div>&lt;center&gt; &lt;span id=&quot;linkit&quot;&gt;&lt;a href=&quot;http://sangseoid.blogspot.com&quot; rel=&quot;nofollow&quot;&gt;Rahina Blog&lt;/a&gt;&lt;/span&gt;&lt;/center&gt;

8. Klik Simpan dan lihat hasil nya

beg to not Eliminate Link makers under appreciated his work anyone else if you want respected

Hampir lupa hadewh sob
#Ganti Yang saya Tebalin .di langkah terkahir tadi ya

1. https://www.Facebook.com/Rahina.Blog  .Ganti sama ID Facebook anda
2. http://twitter.com/RahinaBlog  .Ganti Sama Twitter User ID Anda
3. https://plus.google.com/Rahina.Blog  .Ganti sama Google Plus ID anda
4. http://feeds.feedburner.com/Rahina.Blog  .Ganti sama RSS Feed Anda
5. http://www.youtube.com/user/Rahina.Blog  .Ganti sama Youtube Channel ID anda
6. http://www.linkedin.com/company/Rahina.Blog/  .Ganti sama Linkedin User ID anda
7. http://www.pinterest.com/Rahina.Blog  .Ganti sama Pinterest ID anda

SILAHKAN ANDA KEMBANGKAN  LAGI SESUKA ANDA TETAPI SAYA MOHON AGAR TIDAK MENGHAPUS LINK CREDIT NYA HARGAI LAH KARYA ORANG LAIN KALAU ANDA INGIN DIHARGAI ORANG LAIN

Bila ksulitan silahkan Berkomentar di bawah
Demikian lah Artikel tentang Metro Style Social Media Widget untuk Blogger Semoga bermafaat.