Tutorial Membuat Widget Social Media Dengan Metro Style

Selamat pagi,selamat siang,selamat malam bagi kalian yang sedang sekolah :D maupun yang sedang beraktivitas.Pagi yang cerah admin ingin membahas Tutorial Membuat Widget Social Media Dengan Metro Style.Metro style ini mempunyai 3 style.Ingin tahu apa saja style itu? Mari simak tutorial berikut ini :

Login AKUN/ID Blogger sobat
Baca basmallah
Dashboard >> Tata Letak >> Add Gadget >> Pilih HTML/Javasript.
Dan copy code dibawah ini tepat di gadget HTML/Javascript tadi.

STYLE 1

HTML DAN CSS :

<div class="metro-social"><li><a class="fb" href="#"></a></li><li><a class="tw" href="#"></a></li><li><a class="gp" href="#"></a></li><li><a class="pi" href="#"></a></li><li><a class="in" href="#"></a></li><li><a class="yt" href="#"></a></li><li><a class="fd" href="#"></a></li></div><style>/*Metro UI Social Profile Widget v3.0 by Tech Prevue LabsWeb link to gadget code: http://www.techprevue.com/2013/02/social-profile-widget-metro-style.htmlDistributed under license CC BY-NC-ND 3.0 INTPlease keep license information intact while using this widget*/.metro-social{width:285px}.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:140px;height:141px}.metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:68px;height:70px}.metro-social .gp{background:url(//goo.gl/oT0kF) no-repeat center center #da4a38;width:69px;height:70px}.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 .yt{background:url(//goo.gl/zcwjB) no-repeat center center #e64a41;width:140px;height:69px}.metro-social .fd{background:url(//goo.gl/lhBP1) no-repeat center center #e9a01c;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>

DEMO GAMBAR

STYLE 2

HTML DAN CSS :

<div class="MH" id="MH"><ul id="MH-social"><li><a class="fb" href="#"></a></li><li><a class="tw" href="#"></a></li><li><a class="gp" href="#"></a></li><li><a class="fd" href="#"></a></li></ul></div><style>#MH-social{width:305px;float:left;margin-top:10px}#MH-social li{position:relative;cursor:pointer;padding:0!important}#MH-social .fb,.tw,.gp,.fd{position:relative;-moz-transition:all .4s ease-in-out;-webkit-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out;z-index:5;display:block;float:left;margin:1px}#MH-social .fb{width:150px;height:152px;background:url(//goo.gl/6xmUk) no-repeat center center #3b5998}#MH-social .tw{width:150px;height:74px;background:url(//goo.gl/oyiFK) no-repeat center center #3b5998}#MH-social .gp{width:150px;height:74px;background:url(//goo.gl/oT0kF) no-repeat center center #3b5998}#MH-social .fd{width:302px;height:74px;background:url(//goo.gl/ncoLY) no-repeat center center #3b5998}#MH-social li:hover .fb{-moz-transition:all .1s ease-in-out;-webkit-transition:all .1s ease-in-out;background:url(//goo.gl/MH8AP) no-repeat center center #3468b6}#MH-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #4099ff;-moz-transition:all .1s ease-in-out;-webkit-transition:all .1s ease-in-out}#MH-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #e44524;-moz-transition:all .1s ease-in-out;-webkit-transition:all .1s ease-in-out}#MH-social li:hover .fd{background:url(//goo.gl/JFGqn) no-repeat center center #f60;-moz-transition:all .1s ease-in-out;-webkit-transition:all .1s ease-in-out}</style>

DEMO GAMBAR

STYLE 3

HTML DAN CSS :

<style>#socialicons_widget_sidebar-2{Width:300px;Height;auto;}.socialicons_widget_sidebar li { float: left; width: 147px; height: 147px; margin: 0 0 0 0; padding: 0 0 0 0; border-bottom: none;}.socialicons_widget_sidebar li a { line-height: 1px; display: block;}.socialicons_widget_sidebar li a:hover img { -webkit-opacity: 0.8; -moz-opacity: 0.8; opacity: 0.8;}.socialicons_widget_sidebar li a span { display: none;}.socialicons_widget_sidebar li.rss-icon { margin: 0 6px 6px 0;}.socialicons_widget_sidebar li.facebook-icon { margin: 0 6px 0 0;}</style><div id="socialicons_widget_sidebar-2" class="row widget socialicons_widget_sidebar"><ul style="margin: 0 0 0 0; padding: 0 0 0 0; list-style: none;"><li class="twitter-icon" style="margin-left: 155px;"><a target="_blank" href="#" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuJ8sJAURuG8fAMzoD0ORNQeNd8kli6OGISM9tAzbIH3uph98UthbybWqZwH48tgCnt3gHMncTKWQRjlL7sWYVwjxUSwS06Df5oXAFwzPMr-N5cjYYvfNRWnEYxGaW5lo9oiwrYuBpqISL/s1600/twitter.png" width="147" height="147" /><span>Twitter</span></a></li><li class="facebook-icon" style="margin-top: -146px;"><a target="_blank" href="#" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT_cjLSBXFxaiBjjSn8DeUtGUBvhwBZw3JzAJzU0LZyM33wfI7bzO3Kn2U_m6yaxPTmFaum3maZ9CSbsHVF1W572k7iAApej_3618CPrY_JNnJGaYmASXPmft_iwgyF63-wLrTW_jc8Nqd/s1600/facebook.png" width="147" height="147" /><span>Facebook</span></a></li><li class="rss-icon" style="margin-top: 7px;"><a target="_blank" href="#" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3LxFOGU2ioVBqft2Pd3pi3a4U2Y2oLBRkAoQ7-6j10Vly3fCAL4H-x4qPU2AlfINaNk60-eAJRKTXcro_OzOIFqEC3XZA0hyphenhyphenD14QiSBA2laXaJbiO3kHrIJiTkI8bLtVEHrYIlQX75o8E/s1600/rss.png" width="147" height="147" /><span>Rss Feed</span></a></li><li class="google-icon" style="margin-left: 155px;margin-top: -153px;"><a target="_blank" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDVk8I5DiULXV-C9AON-QUBZ3RwTWtmR2CLB1W5XJBzPNiyHDuwVAksqUkLqDAE6Uv7B9Jx-gPojo7SnrG2Bn1v7RIal_PM_NlIA64hUh4BLmz8nzkIf_oVxeTRiYIAu0S9mwBmHb7LU66/s1600/google.png" width="147" height="147" /><span>Google+</span></a></li></ul></div>

DEMO GAMBAR