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
<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
<style>
.samsury-facebook{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnB2L4eQyXipknPJYqGqfgHKquLqdxsaYbz9-Yz3-cN35HblIjejqdN75KWk9Gp4zqbdN4UFlZ8RTzhjGT02u0kURtpIxxALDWfW3ay3P94xxvSXzO2_Ab3mJsDoHiNNd_0L2Z2I9jVII/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/AVvXsEhZ6S8tIeN0uELf0olJEJz26r9nKJXVmHdPGaycgvcpAeZpkNw1nGWudNj35TC3ymTXi4KqcdekaDu5oQDnTPojZwYiYUMkVP9Pkuav_WPIXlAxnP27zQ4CanqaiWeJXFb1YrmjaszRK4c/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/AVvXsEhs2bJlNuHvREH55IBMddrqBqNKPZvq7rFgWnfsL9sM0vqd2WzrNvtE8vOuG7jwqaroPFyDhBmArGIN5xpsEmAAFszsZnTgZNo5heey387qiPv7CRAJNnWi9rA-ii0vrpoRx5tYzgeq_GU/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/AVvXsEi34GGCw8hDiMT1LQeGcB6AQ6iR7HdMbbityRxQFuY8dDo3R4S9hWAq8HlvrB0-YN389Q8vc7rSD7jgvDRubHbo7lUojEEoFiSq4DkWy4UGFxNVp5SgO6nEaunAnzj-Ie0HRecI0Cxc0OU/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/AVvXsEioTEf7vhGE2ACYyTncW6NvHjmc9by0SB5kUqZBbXm2aAuyy05mDxQocwh8-zUZK_eP_Xu-H3AWtVlntRwc-M_EWWZjxQzJim4UbzAEwbmWUrjQ6waToeOvfnyJyjlGra6-9yKBL8adnn8/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/AVvXsEhM8_rTndqDoK9eEoRbg9U1WB_vdAFp3H1i2sXrAQ5T62DID9ZZTI2K34m_j5rrYmzLHoxEc1LIT_Aasb3E2HlMWut6tUxCevxREEfHjqnygj6y3U6rw6tdLQNUpsAwUEWeE8btcudEg5o/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/AVvXsEgUuVjwBzJYimbp9sO8HJ6LWTMRjlmUHYQ4P3GVjaBgi6rhUMUgdECgjLRp9Dnx5v6XHrqah1awxIcOPzg2Um0oGxJGN9YcC1LYXh_k6_otDOFYm0OCiGPADoJ4ZwiEUxWq7BVFJBryozc/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/AVvXsEhh1zVQdNNG9azDUgcNYCxwKqiS8ZQNWeJxkdoBgN_3wXLJVSlnJ52grjrsBLqVns4M51M4ZNT9RiY7i_Rb18stfVgMdiG7c7jf_WJliXqmM6IaHrgD6IYsHHk2Um7-mLYMUMmm3VjSUvk/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='samsury-facebook''
onmouseover='this.className='samsury-facebook1''><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/AVvXsEhOaDwn3MXi51rGD2uflhz1Wiqbxvch5Tx9VoDWf_vqH2DX2qEyVjeAQjhUrFAyZQ8OBthb-4VEdnUOPgSvhBEqvmZslbvY9IYu_9NT5p4FuTNx3Bo4nQbShW9w1aKjQ1Ar5XrgydL-sUo/s1600/samfb2.png'
title='Like us on Facebook'/></a><br/>
</div></div><div
class='samsury-twitter'
onmouseout='this.className='samsury-twitter''
onmouseover='this.className='samsury-twitter1''><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/AVvXsEhLY9vPTgQAT9qggH2WS67uxBd4IFdd0B0Q8W3DtIDs9LXOCDK0zuoq5pZR18qK9xZ-zycFpSRsmnxAwgtEKdckuVtdHtloyEXa7ZR1CEY7f4LMYT-HjB_nJ-guPadTSw1NBS0JylR6iKI/s1600/samtwet2.png'
title='Follow us on Twitter'/></a><br/>
</div></div><div
class='samsury-google'
onmouseout='this.className='samsury-google''
onmouseover='this.className='samsury-google1''><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/AVvXsEjJzHW_3xrbE4UFxRTQzUu1J4RVMsMPiSsxSQeCOvf074c3Jm5mBfVhOf_AJjqAMhxVAAG9Q43BbE1u_uO5pTQT5ud6k8sd39Zga-4X5BJdtshqGO5JnH3NX1Ihzd32xuCFV65wBp5d8TU/s1600/samgp2.png'
title='Recommend us on Google Plus'/></a><br/>
</div></div><div
class='samsury-rss'
onmouseout='this.className='samsury-rss''
onmouseover='this.className='samsury-rss1''><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/AVvXsEgY3Avmyu5RLl2820kMMB60M3NIz9P7ZUd_3TbYzlHpurpI35BpDQOCtaO1-ncCl3jHOtPlLt8ZTkqqkyjl1-ok-kGOJKCDtdXiPdJD4EcYtL0Y4kXLjA1yop6T3wOmBKTl7ZmA0VXK6jI/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
