Cara Pasang Widget Social Network Metro UI Style

Widget Social Network Metro UI Style

Blog yang indah adalah blog yang juga memiliki contact person yang menarik / profil jejaring sosial dengan style yang fresh dan indah.

Dalam kesempatan ini kita akan membahas Tutorial Cara Pasang Widget Social Network Metro UI Style , langsung ke tutorialnya sobat, sebagai berikut:

1). Pergi ke Dashboard Blogger > Layout > Add Gadget > pilih Gadget HTML/Javascript.
2). Kemudian copy kode di bawah ini dan salin ke dalam box HTML/Javascript.

<div class='metro-social'>
<li><a class="fb" href=http://www.facebook.com/Namafacebookanda rel="nofollow"></a></li>
<li><a class="tw" href=http://twitter.com/NamaTwitterAnda></a></li>
<li><a class="gp" href="https://plus.google.com/KodeNomorGPlusAnda"></a></li>
<li><a class="pi" href=http://pinterest.com/NamaPinterestAnda rel="nofollow"></a></li>
<li><a class="in" href=https://www.linkedin.com/in/NamaLingkedinAnda rel="nofollow"></a></li>
<li><a class="yt" href=http://www.youtube.com/NamaAkunYoutubeAnda></a></li>
<li><a class="fd" href=http://feeds.feedburner.com/NamaFeedBlogAnda rel="nofollow"></a></li>
</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>

a). Ganti tulisan yang berwarna merah dengan URL Social Network kepunyaan sobat sendiri dan sesuaikan.

3). Kemudian save, dan drag ke bagian tempat dimana sobat ingin menaruhnya.

Terima kasih telah membaca artikel Cara Pasang Widget Social Network Metro UI Style . Jika Anda ingin copy-paste / menyalin sebagian ataupun keseluruhan dari artikel ini, harap anda mencantumkan link berikut Cara Pasang Widget Social Network Metro UI Style sebagai sumbernya atau anda bisa copy permalink dibawah ini.
<a href="https://kang-fandi.blogspot.com/2014/01/cara-pasang-widget-social-network-metro.html">Cara Pasang Widget Social Network Metro UI Style</a>

Bagikan Artikel Ini : Facebook Google+ Twitter