Sabtu, 26 November 2016

Widget Profil Sosial Media Metro UI Keren Untuk Blog

Widget Profil Sosial Media Metro UI Keren  - widget ini berfungsi untuk menampilkan link profil pemilik blog dengan tampilan yang lebih stylish, link profil yang termasuk dalam widget ini diantaranya profil facebook , profil google+ , profil twitter dan feedburner. Desain widget ini sangat keren dan elegant seperti windows 8 atau metro UI .
Widget Profil Sosial Media Metro UI Keren Untuk Blog
Widget Sosial Profile Metro UI
Widget profil sosial media seperti ini memang tidak terlalu penting ada di blog sama halnya dengan widget jam dan kalender lucu atau keren ini kurang penting berada di halaman blog , toh jam dan tgl sudah ada di laptop , smartphone dan gadget lainya . Widget yang satu ini pun sama karna profil atau informasi seharunya sudah ada di halaman informasi / kontak di blog , jika seseorang ingin menghubungi kalian cukup dengan melihat informasi halaman kontak dengan profil yang sudah lengkap. Namun jika kalian tetap ingin memasang widget ini , silahkan ikuti tutorial nya dibawah ini.

Cara Pasang Widget Profil Sosial Media Metro UI di Blog

1. Masuk ke  Blogger 
2. Pilih menu  Tata Letak  →  Tambah / Add Gadget 
3. Masukan Script di bawah ini.

<div class="metro-social">
<li><a class="fb" href="http://www.facebook.com/xxxxxx"></a></li>
<li><a class="tw" href="http://www.twitter.com/xxxxxx"></a></li>
<li><a class="gp" href="https://plus.google.com/xxxxxx"></a></li>
<li><a class="fd" href="http://feeds.feedburner.com/xxxxxx"></a></li>
</div>
<style>
/* Metro UI Social Profile Widget v2.0  by Tech Prevue Labs 
Web link to gadget code:
Distributed under license CC BY-NC-ND 3.0 INT
Please 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,.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:140px;height:70px}
.metro-social .gp{background:url(//goo.gl/oT0kF) no-repeat center center #da4a38;width:140px;height:69px}
.metro-social .fd{background:url(//goo.gl/ncoLY) no-repeat center center #e9a01c;width:282px;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 .fd{background:url(//goo.gl/JFGqn) no-repeat center center #e9a01c}
</style>
<br />

4. Ganti  xxxxxx   dengan username / id kalian
5. Jika sudah , klik  Simpan 

Oke sekian dulu artikel widget profil sosial media metro ui ini , hari hari selanjutnya saya juga akan update widget widget kerne lainya, jadi kunjungi terus sipemalas.com supaya widget yang ada di blog kalian desainnya uptodate dan tampil keren.
Previous
Next Post »
 
Atas