Cara Membuat Widget Social Profile Keren

Contoh

YHS Blogger | Cara Membuat Widget Social Profile Keren-Setelah sebelumnya saya membahas tentang Cara Membuat Icon Social Profile Dengan Efek Spinning. Kali ini yang saya bahas tidak jauh berbeda dengan Cara Membuat Icon Social Profile Dengan Efek Spinning. Yang saya bahas masih sama. Yaitu tentang widget social profile. Tetapi widget social profile yang ini dengan yang sebelumnya berbeda. Perbedaannya terletak di efek widget-nya. Jika widget yang sebelumnya mempunyai efek spinning, sedangkan widget yang ini memiliki efek hover. Widget ini didesain oleh Vinay Prajapati.

Live Demo

Sebelum saya menjelaskan langkah-langkah memasang widget ini, saya akan menjelaskan fitur-fitur yang ada di widget ini.

Fitur :  

• 7 Social media masuk ke dalam widget ini.
• Memiliki efek hover.
• Memiliki desain yang elegan.
• Tidak menggunakan Javascript
• Tidak Menggunakan JQuery

Cara Memasang Widget Ini.
1. Masuk ke akun blogger anda.
2. Klik Tata Letak.
3. Klik Tambahkan Gadget.
4. Pilih HTML/JavaScript.
5. Lalu Masukkan kode di bawah ini :

<div class='metro-social'>

<li><a class="fb" href=http://www.facebook.com/ID Anda rel="nofollow"></a></li>

<li><a class="tw" href=http://twitter.com/ ID Anda ></a></li>

<li><a class="gp" href="https://plus.google.com/ ID Anda "></a></li>

<li><a class="pi" href=http://pinterest.com/ ID Anda rel="nofollow"></a></li>

<li><a class="in" href=https://www.linkedin.com/in/ ID Anda rel="nofollow"></a></li>

<li><a class="yt" href=http://www.youtube.com/ ID Anda ></a></li>

<li><a class="fd" href=http://feeds.feedburner.com/ ID Anda 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>

  6. Simpan

Demikianlah artikel dari YHS Blogger