Tips Membuat Widget Social Media Unik Metro

Tips Membuat Widget Social Media Unik Metro - Untuk tips blog yang akan saya berikan kali ini masih melanjutkan artikel sebelumnya tentang widget social media unik untuk blog, yang mana masih saya khususkan buat para pengguna Metro Template Ala Windows 8. Social media memanglah mempunyai peranan penting bagi kelangsungan blog itu sendiri, karena trafic pengunjung selain dari search engine kebanyakkan dari social media ini. Selain itu kita juga mendapatkan manfaat back link berkualitas dan relevan tentunya. Langsung saja berikut widget - widget social media yang bisa anda coba untuk memperindah tampilan blog anda.

1. Widget Social Media Metro UI

• DEMO

<style>
.metro-social{width:300px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:150px;height:141px}
.metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:68px;height:70px}
.metro-social .gp{width:69px;height:70px;background:url(//goo.gl/oT0kF) no-repeat center center #da4a38}
.metro-social .pi{background:url(//goo.gl/7olxx) no-repeat center center #d73532;width:68px;height:69px}
.metro-social .in{background:url(//goo.gl/PhFhj) no-repeat center center #0097bd;width:69px;height:69px}
.metro-social .fd{background:url(//goo.gl/lhBP1) no-repeat center center #e9a01c;width:150px;height:69px}
.metro-social .yt{background:url(//goo.gl/zcwjB) no-repeat center center #e64a41;width:140px;height:69px}
.metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38}
.metro-social li:hover .pi{background:url(//goo.gl/IORvy) no-repeat center center #d73532}
.metro-social li:hover .in{background:url(//goo.gl/2zHrm) no-repeat center center #0097bd}
.metro-social li:hover .yt{background:url(//goo.gl/I1c4a) no-repeat center center #e64a41}
.metro-social li:hover .fd{background:url(//goo.gl/CjzDP) no-repeat center center #e9a01c}
</style>

<div class="metro-social">
<br />
<li><a class="fb" href="http://www.facebook.com/" rel="nofollow"></a></li>
<li><a class="tw" href="http://twitter.com/"></a></li>
<li><a class="gp" href="https://plus.google.com/"></a></li>
<li><a class="pi" href="http://pinterest.com/" rel="nofollow"></a></li>
<li><a class="in" href="https://www.linkedin.com/" rel="nofollow"></a></li>
<li><a class="fd" href="http://feeds.feedburner.com/" rel="nofollow"></a></li>
<li><a class="yt" href="http://www.youtube.com/"></a></li>
</div>

2. Widget Social Media Efek Floating

• DEMO

<style>
.samsury-facebook{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFs_WW5bOvOcCHSZ7q443SktXLJfvYgv9g_L2quVrUNBURJTK-Zaiuy0PJOKr2S4AGijYsoTGgcD7WyvPAPB9kj9osvb4aVcGtXoBceaD_rZR5Fb2xjYTBogsxGQ03UWEburdzaWhRjvE/s1600/samfb.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:160px; z-index:1000;}
.samsury-facebook1{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm9IOuY2NPH-wDxk3V28hFy-iXtG2AnIkWPB9ah3LGKE9qduBYDisecksYdZbrwDlEEjeIXrVCpC3sd-S031AfseRs31fNNp8ii-gsouDWN4B2qt1zlFBjM-OfOcpDna8E-9DxBh7IvQo/s1600/samfb1.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:160px; z-index:1100;}
.samsury-facebook2{margin:0px 0 0 43px}
.samsury-twitter{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvbFSR4PDcTQgxJsztNYw895Ex58CZKBLuAPgMFcJXY5HcL-27njssX4PLprAmeQ8SPj1A6lkOnSGhlp-2oLR77GACjR00HW1gRp8REkytgHXYdOAnoGvQqnBN8sjhN58QCKbvT7TCD-k/s1600/samtwet.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:205px;z-index:1000;}
.samsury-twitter1{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDxYO28S_DR1aXoeYYP1bZEcFxz_R0HaC4xcHusseobUNYRTTGmuCp8zqMtxjNW5AAzhnOWzyHqZtbwJgHbL6QVABRzqZ6I9CKYD9gjVtjx0ExP63qK5IZUDT3v5JLmpj6SXg_G5jd08A/s1600/samtwet1.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:205px; z-index:1100;}
.samsury-twitter2{margin:0px 0 0 43px}
.samsury-google{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjF2-vbL70jIQqXkNIMtvb61i5cD6bOEtECVFSIX-BydTNZF2Ysc_RMa1VNZ-fTr2mP9REol__p3mLPhbK_1_vQgLA98EF6ZxM_NhBTgMY_eyZm_GJNJyAPVFJhsLBok1ILQpWQaWbWOo/s1600/samgp.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:250px; z-index:1000;}
.samsury-google1{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA25ZjFTA6w03FMm52bYHcZceR5aIYRBykMEXWRvEPp-Vcp-ioB7qHdBoGx2ofUcmvxWAfjDyFBMdhJyw9XbbFkJszY72JJUYtIijwE-h6ogCeTb17Fo5pQwybB3vVtIC2HeQNA-1ckZA/s1600/samgp1.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:250px; z-index:1100;}
.samsury-google2{margin:0px 0 0 43px}
.samsury-rss{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWY2YwtiDbVyWPt3NmaaGxw3DiLdCC3FLM8YfqSO0tz5lnp5fG60LZgwzxdO0jdMq61Dacg_x2VroAG4PsCB8C8CBkujVgBh_94mo8H3xNgrnZ-2rYR_bYHiuvaf6HN8Lce8c6PyE7_m8/s1600/samrss.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:295px; z-index:1000;}
.samsury-rss1{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFe6uUe3tugbMf6jdxaOJ6GwukrwIEf1eyVJsZqkHGxoEFU1sfvkWmWwzCWlQ5JIa-8Ls6CaDuhyblYZ_Q2t-JO6SPqGRmSEidUFVoaW7kBg57sXF8pAIXIE_pfxqcHt1x3gMbS787G5g/s1600/samrss1.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:295px; z-index:1100;}
.samsury-rss2{margin:0px 0 0 43px}
</style>
<div class='samsury-facebook' onmouseout='this.className=&apos;samsury-facebook&apos;' onmouseover='this.className=&apos;samsury-facebook1&apos;'><div class='samsury-facebook2'>
<a href='https://www.facebook.com' target='_blank'><img alt='Like us on Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGKjgTVB5KXvA5f8kaOCyuSpEUfbAh1N9AhLULNkdAMOvdfo3LJwrmVi6_JRz31ssRPhgt-cWFpMUCb_rC8-qVBQX59lU6GIalgcIIppi5uu0baBNnaVrWHBuJphdrz3IuI88S0yP4Z3o/s1600/samfb2.png' title='Like us on Facebook'/></a><br/>

</div></div><div class='samsury-twitter' onmouseout='this.className=&apos;samsury-twitter&apos;' onmouseover='this.className=&apos;samsury-twitter1&apos;'><div class='samsury-twitter2'>
<a href='https://twitter.com' target='_blank'><img alt='Follow us on Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrTItqE0ZLdAPZOLXdGeW61sT0edmsIRs6ne-ASQPIGelw0uP84cRv-GxY9Z5VT9Hj918_jwuj22WDIy4hw7bMNx9e8dK0WSTWj2CnOIYysfWuq7Ii9xHyrZpcSoEm4Lre7ccPZp3W5Q8/s1600/samtwet2.png' title='Follow us on Twitter'/></a><br/>

</div></div><div class='samsury-google' onmouseout='this.className=&apos;samsury-google&apos;' onmouseover='this.className=&apos;samsury-google1&apos;'><div class='samsury-google2'>
<a href='https://plus.google.com/' target='_blank'><img alt='Recommend us on Google Plus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVVYg7difxsRH9cm6aTAbE16L1NlKLdQMnBMoeufwe3dWw-D91cULmg3-xqIWPIff6c_j-dcUiSifpRFzl2jMLeYykyy4dYKyvAKRcXsqr5UVG43B9H7PUavpxe7BeYKFm680hf0P-cIo/s1600/samgp2.png' title='Recommend us on Google Plus'/></a><br/>

</div></div><div class='samsury-rss' onmouseout='this.className=&apos;samsury-rss&apos;' onmouseover='this.className=&apos;samsury-rss1&apos;'><div class='samsury-rss2'>
<a href='http://feeds.feedburner.com/' target='_blank'><img alt='Subscribe me on RSS' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKY3CYwBh6uJVJiEa5EVckg2o3zVHE09Ao4YJDuxEGJq4cbM5aQ6FP1Lr-VTmGvgrXT0MRsz4LEGGDXpoZXSoEDUGYzBfGtrQb1aWACoiF7t2J6yIzJrWwBG2wMZO1gy49gvVT3Nnhats/s1600/samrss2.png' title='Subscribe me'/></a><br/>
</div></div>

Untuk cara pemasangannya Add Gadget >> HTML/Javascript >> Copas Kode sesuai selera anda.
Ganti tulisan cetak tebal dengan URL Anda

Demikianlah sedikit tips sederhana membuat widget social media unik metro kali ini, semoga bermanfaat dan Happy Blogging

Like THIS :

Share this article to: Facebook Twitter Google+ Linkedin Technorati Digg

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di BDariku