Widget Social Media Sharing dengan Metro Style

Metro Style merupakan model interface sistem operasi komputer yang pertama kali diperkenalkan Microsoft sejak Windows 8. Ciri khasnya berbentuk kotak dengan ukuran besar dan warna-warni yang mencolok. Widget social media memang perlu diberi warna yang mencolok agar para pengunjung blog lebih mudah menemukannya. Jika lebih mudah ditemukan maka kemungkinan untuk berbagi posting ke social media kan semakin besar.

Berikut adalah cara Memasang Widget Social Media Sharing dengan Metro Style di bawah posting blog.
Pastikan Anda sudah login ke Blogger. Pada halaman Dashboard blogspot, pilih menu Template kemudian Edit HTML. Letakkan kode berikut di atas ]]></b:skin>

.promote_post_bg {
height: 70px;
background: #469ebe 0 -7px no-repeat;
width: 620px;
margin-left: 0;
}

.authorimg img {
float: left;
height: 70px;
width: 70px;
margin-left: 0;
}

.authorname {
text-shadow: none;
background: #CF910B;
float: left;
text-align: center;
font-weight: bold;
font-size: 16px;
font-family: 'cambria',serif;
margin-left: 0;
padding-top: 25px;
width: 120px;
height: 45px;
}

.authorname a {
color: #fff;
}

.authorname a:hover {
color: #5774b6;
}

.promote_twitter {
width: 110px;
height: 40px;
float: left;
margin-left: 0;
padding: 30px 0 0 30px;
text-align: center;
background: #3BAAE1;
}

.promote_facebook {
width: 150px;
height: 40px;
float: left;
margin-left: 0;
padding: 30px 0 0 0;
text-align: center;
background: #4861A3;
}

.promote_google {
width: 120px;
height: 40px;
float: left;
margin-left: 0;
padding: 30px 0 0 20px;
text-align: center;
background: #D71D1E;
}

Kemudian cari kode <data:post.body/> dan letakan kode html berikut ini di bawah <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='promote_post_bg'>
<div class='authorimg'>
<img src='http://lh3.googleusercontent.com/-BqI1IUIP-QY/AAAAAAAAAAI/AAAAAAAACek/uGO8NjYIjaU/s512-c/photo.jpg'/>
</div>

<div class='authorname'>
<a href='https://plus.google.com/108130050352582058759'>Rasito Rastam </a>
</div>

<div class='promote_twitter'>
<a class='twitter-share-button' data-via='MHT_MMT' href='https://twitter.com/share'>Tweet</a>
<script>
!
function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (!d.getElementById(id)) {
js = d.createElement(s);
js.id = id;
js.src = &quot;//platform.twitter.com/widgets.js&quot;;
fjs.parentNode.insertBefore(js, fjs);
}
}(document, &quot;script&quot;, &quot;twitter-wjs&quot;);
</script>
 </div>

<div class='promote_facebook'>
<fb:like action='like' colorscheme='light' expr:href='data:post.canonicalUrl' font='verdana' layout='button_count' send='false' show_faces='false'/>
<div>

<b:if cond='data:post.isFirstPost'>
<script>
(function (d) {
var js, id = &#39;facebook-jssdk&#39;;
if (d.getElementById(id)) {
return;
}
js = d.createElement(&#39;script&#39;);
js.id = id;
js.async = true;
js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
d.getElementsByTagName(&#39;head&#39;)[0].appendChild(js);
}(document));
</script>
</b:if>
</div>
</div>

<div class='promote_google'>
<g:plusone annotation='bubble' size='medium'/>
<script type='text/javascript'>
(function () {
var po = document.createElement(&#39;script&#39;);
po.type = &#39;text/javascript&#39;;
po.async = true;
po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
var s = document.getElementsByTagName(&#39;script&#39;)[0];
s.parentNode.insertBefore(po, s);
})();
</script>
</div>
</div>
</b:if>

Keterangan:
Ukuran margin, padding, height, dan weight bisa diatur agar sesuai dengan ukuran dan tampilan blog Anda. Kode warna background juga bisa diubah sesuai selera Anda.

Kode yang berwarna merah sebaiknya diganti dengan alamat url gambar/foto yang lain. Yang berwarna biru adalah url Google+ Anda dan yang hijau adalah nama profil Anda.

Itulah cara memasang widget social media sharing dengan metro style di bawah posting blog. Untuk memasangnya memang perlu ketelitian dan eksperimen agar hasilnya sesuai dengan yang diharapkan. Selamat mencoba!