Memasang Widget Metro Style Social Media

Ayo sob hias blog kita dengan widget sosial media . Widget yang satu ini selain indah untuk tampilan blog juga berguna sebagai tombol share ke media sosial seperti facebook, twitter, dan google plus. Widget ini di beri nama oleh penciptanya Metro Style Social Media.

Bagi sobat yang suka widget silahkan dicoba, berikut ini adalah langkah sederhana untuk memasang widget Metro Style Social Share:

1. Login ke akun Blogger.

2. Pilih Template » Edit HTML » Lanjutkan » Expand Template Widget.

3. Cari kode ]]></b:skin> dengan menggunakan Ctrl+F, lalu letakkan kode dibawah tepat di atas kode ]]></b:skin>.

.widget-item-control a{display:none;}

.widget-item-control a{display:none;}

    #supportive{width: 300px;

    float: left;margin-top: 10px;}

    #supportive li{position:relative; cursor:pointer; padding: 0 !important;}

    #supportive .facebook, .googleplus, .rss, .twitter{

    position: relative;

    -moz-transition: all 0.4s ease-in-out;

    -webkit-transition: all 0.4s ease-in-out;

    -o-transition: all 0.4s ease-in-out;

    transition: all 0.4s ease-in-out;

    z-index: 5;

    display: block;

    float: left;

    margin: 1px;}

    #supportive .icon{overflow:hidden;}

    #supportive .facebook{width: 147px;

    height: 150px;

    background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiewG1fnFVSWzOfab3IdFnoRsHzdi0-U_C9nnuXt7s4mln_in5Q0b5S7odsuZwex06rpMeCblwbAzyis4Uz395ER5E_Cl-h_ZhOHUaHmGVgSDYQu9McZngO7afJLQl1MFKtwxzolsKFmlg/h120/facebook.png") no-repeat center center;}

    #supportive .twitter{width: 148px;

    height: 74px;

    background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHGOTH4qfCp_sGiCCIVPOFPZ4tyYPUpG1_kR4Y3cGLFTAYqgX8ISH9N6fju2THdRyZ7a_b7hLwRwmSVbUpJ64qn_BqHPG-Yf_XJqopL11euIfagcS3G3c_1CH5XdsH8G34ZG3l-EaBLKZO/s1600/Twitter.png") no-repeat center center;}

    #supportive .googleplus{width: 148px;

    height: 74px;

    background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUK3i5Rxqe5Ox8qxF6EM0TS0b8aHpdgbfFvFnJ18Thh2UokL2hYgxZPL6AAYI_VrIHP5oeTTZqTd_TtLH1toEcst5BrWtAvlMVC6LPgDCHPpsQCiuAOeRXuJOf9JfDAzvXbAS3uloya6Uu/s1600/google+plus.png") no-repeat center center;}

    #supportive .rss{ width: 299px;

    height: 74px;

    background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWzlLxkg1OIkFqJjacz1PrQbJQF7U6FTC470crMP9GSK05wM8SV5VdPMbfdwdeLc9RO8EzcTV_HWHRIDIzyDQAs3GdU9HlyIp83qKNF6hPST-U8xrq5x5LhgGx37HI4XJH9ZYSdCwjG-O0/s1600/rss.png") no-repeat center center;}

    #supportive li:hover .facebook{background-color:#3468B6;-moz-transition: all 0.1s ease-in-out;

    -webkit-transition: all 0.1s ease-in-out;}

    #supportive li:hover .twitter{background:rgba(64,153,255,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2x78LQ3m4wYwX8-xGliviEeVR6G20PwJq0h6jL4TtHfumBw-LhThanSbv-PSIJ3mxQZWDR33anq9gddM_GMT3gLY_Rp1leMZupW-P7GzJp1wWx4e70FvOSDaTEXFFNrWpP_IIDAmpc1U/h120/Twitter.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;

    -webkit-transition: all 0.1s ease-in-out;}

    #supportive li:hover .googleplus{background:rgba(228,69,36,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-XICMkB9jDqU41Uw5_6bD5I5zK2WmvKqvEcngcl-GHiwntf2wX1cg_o0jGnYkZtVzGUFzwkTA4ArW7RQEQEVoPVPF9ltCEescGAU2hnUuu4YDS-IX-Tebmd3e73fF5gFyjCf49fWPnwI/h120/google+plus.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;

    -webkit-transition: all 0.1s ease-in-out;}

    #supportive li:hover .rss{background:rgba(255,102,0,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLfKXaH9Sc0QR61cQonuuVhiRn3UNoXH6isV-z6vu37gBKeqcRvtKtmhfSUqNyj6oGpU5i-Tjx7T9GXtjv1wD8F7HktqgyYYSj0t-AV-Q78qJNDPbkmD24E1B6ZdtSMgxZ6joMIq9QQs0/h120/rss.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;

    -webkit-transition: all 0.1s ease-in-out;}

4. Setelah selesai simpan template.
5. Kembali ke dasboard > Tata Letak > Tambah Gadget > HTML/Java Script > Letakkan kode dibawah ini.

<ul id='supportive'>

<li><a class='icon facebook' href='http://www.facebook.com/FaceBookPage/'/></a></li>

<li><a class='icon twitter' href='http://twitter.com/TwitterUserName'/></a></li>

<li><a class='icon googleplus' href='https://plus.google.com/GooglePlusUser/PageID/'/></a></li>

<li><a class='icon rss' href='http://feeds.feedburner.com/FeedBurnerUserName'/></a></li>

</ul>