Cara Membuat Widget Media Sosial Versi Metro UI

Jika anda pernah melihat Metro UI windows 8, maka anda akan familiar dengan tampilan widget ini. hal yang menonjol dari windows 8 yaitu munculnya Metro UI (User Interface). Metro adalah nama internal untuk bahasa desain yang di pergunakan oleh Microsoft.

Dalam posting kali ini, saya akan membagikan cara membuat widget media sosial seperti tampilan metro ui. widget ini di gunakan untuk membuat link media sosial anda, sebagai penunjang seo off page. untuk model tampilannya mirip dengan gambar di bawah ini.

kalautau.com - Widget Media Sosial Versi Metro UI

Cara Membuat Widget Media Sosial Versi Metro UI

Cara memasangnya cukup mudah, yaitu dengan cara menambahkan widget di blogger anda, dan kemudian pilih "HTML/Javascript" setelah itu copy paste kode di bawah ini. oh iya, jangan lupa mengganti url yang saya warnai merah dengan url media sosial anda. lalu untuk mensetting lebar widged editlah warna tulisan yang bewarna hijau.

<div class='metro-social'>
<li><a class="fb" href=ganti dengan url FB anda rel="nofollow"></a></li>
<li><a class="tw" href=ganti dengan url Tweter anda rel="nofollow"></a></li>
<li><a class="gp" href=ganti dengan url google plus anda rel="nofollow"></a></li>
<li><a class="pi" href=ganti dengan url pinterest anda rel="nofollow"></a></li>
<li><a class="in" href=ganti dengan url linkedin anda rel="nofollow"></a></li>
<li><a class="yt" href=ganti dengan url youtube anda rel="nofollow"></a></li>
<li><a class="fd" href=ganti dengan url feedburner anda rel="nofollow"></a></li>
</div>
<div><small>Ingin widget seperti ini, lihat <a href="http://www.kalautau.com/2016/07/cara-membuat-widget-media-sosial-versi-metro-ui.html">
di sini
</a></small></div>
<style>
.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{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 .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>

$type=three$author=hide$comment=hide$rm=hide

Nama

adsense,12,android,12,asal usul,24,cara mudah,28,dokumen-online,2,fenomena,20,hardware,3,Inspiratif,13,internet,3,kesehatan,1,optimasi-seo,9,paket-internet,4,pengetahuan umum,14,sebab-akibat,18,serba-serbi,66,smartphone,13,Template,1,tutorial blogger,12,video,1,windows,8,Zenfone,4,
ltr
item
Cari Tau Sesuatu: Cara Membuat Widget Media Sosial Versi Metro UI
Cara Membuat Widget Media Sosial Versi Metro UI
Berikut adalah cara membuat widget media sosial seperti tampilan metro ui windows 8, sebagai penunjang seo off page
https://3.bp.blogspot.com/-p9Zulz62PL0/V3lQm1DeLgI/AAAAAAAACVg/PbvSSFv_Pwg32x-YaxBQNRnGlE5P9ELuQCLcB/s640/Widget%2BMedia%2BSosial%2BVersi%2BMetro%2BUI.png
https://3.bp.blogspot.com/-p9Zulz62PL0/V3lQm1DeLgI/AAAAAAAACVg/PbvSSFv_Pwg32x-YaxBQNRnGlE5P9ELuQCLcB/s72-c/Widget%2BMedia%2BSosial%2BVersi%2BMetro%2BUI.png
Cari Tau Sesuatu
https://www.kalautau.com/2016/07/cara-membuat-widget-media-sosial-versi-metro-ui.html
https://www.kalautau.com/
https://www.kalautau.com/
https://www.kalautau.com/2016/07/cara-membuat-widget-media-sosial-versi-metro-ui.html
true
4562393370500858218
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy