Cara Membuat Widget Social Profile

How to Make Social Profile Widget : Sudah tak dipungkiri lagi bahwa social profil juga adalah salah satu hal penting dalam meningkatkan trafic blog secara cepat begitu pula dengan RSS feed. Widget social profil ini terdiri dari facebook, Twitter, Google+, FeedsBurner, Youtube Pinterest dan Linkedin yang digabungkang menjadi satu widget sidebar. Widget ini lumayan ringan karena tidak menggunakan Javascript dan jQuery murni menggunakan CSS. Jika Anda tertarik untuk memasangnya pada silahkan ikuti tutorial berikut :

Baca Juga : WIDGET SIDEBAR SOCIAL SLIDE VERTICAL

Tutorial :

1. Simpan CSS ini di atas ]]></b:skin> atau </style>

.fiant-social{width:285px}
.fiant-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.fiant-social .fb,.tw,.gp,.pi,.in,.yt,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}
.fiant-social .fb{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdZRGiN7bML79piBo0Awb58rXilRBqdhEt9sUGV7CZ9q6KgQR4g8kqSSjQYm0uEosa-T3UrXNWc8bp0atTu8yk7kW7xck7qTCW_tp-1KNmABBr6PnGzFo7MsqIV5CjjCpnqQSuMsInyURD/s75/facebook.png) no-repeat center center #1f69b3;width:140px;height:141px}
.fiant-social .tw{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbUS9lX4aglSgiMmlUert-NWgAQ-HrT8GpPItE88MPAMSAqGPE1W63zj_3__ZVcj4jJ2x62ozLkm3P_xqQjIgQjiilukFZgb3CvTYi1e8MC_F2qz04hYyolYsol6C-7odozf8ljV5lbUo_/s60/twitter-bird-dark-bgs.png) no-repeat center center #43b3e5;width:68px;height:70px}
.fiant-social .gp{width:69px;height:70px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnL7FpNZKA-EDQusP94Gp2YzARDFBVGAyoBsXVw3FDlbztVOyvxSVBPlas_dPAXsoK7gQSEgf9tcqx1JiiX-n4mhpoxnN2MwsPYAeg6tJnCzQGIQaDX6JRYwR2ffZsNmukctGGN_KrIsmE/s50/google%252Bplus.png) no-repeat center center #da4a38}
.fiant-social .pi{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_eMKPAlhu0cZi0MoEdpWhndOHxQwxO7TU25F7OgO1-OJGEeUlfMotC9YU_1P_pedMb8asSKZsvP8D-ktJcDFUrhISA92-rKFXXMa-tO9FmLccthvmFJNQHz7lXxdqLVjP-zAI5QhM_a8/s40/pinterest.png) no-repeat center center #d73532;width:68px;height:69px}
.fiant-social .in{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAcejPshiyVkfJnYkW1fXsRiyDKjEE1DsM1Lg-pDDLDyZix6mO8JQFDCf-2qyCk41_YaVAmL0QHyq3C37ZrcQd6Nbj3CFtWKK8MRsn9mJPxuH-t-rIBhjSJZgV5B9oOtmlb57HowDgMPY/s40/linkedin.png) no-repeat center center #0097bd;width:69px;height:69px}
.fiant-social .yt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfc-PM4A44ZC_rZdbxy0tLzntnT9ZQyTPvPaf6f9Oj5pGsBnYgFIS8NdmXjkuSTCnMUMsUvoOoVZLYi_kJfND6hJkTsZXtJ_mHw4PWpzjhb6HXU6_wevkXjYObu6P5ozkvPIjYNgH_ndY/s40/youtube.png) no-repeat center center #e64a41;width:140px;height:69px}
.fiant-social .fd{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNITHWTqNtwtZzMxjS4mkFZ21AQBcJ7K0hpRLO2cBfTunYXKDIGQ6m4B5XXUWzHEPzXSOSHQE9ewR-vw8_N_Uff-x0NYZmKewZ__lM9zlDtnwFNjRdpnMqYAlcNyzI1nQISlB8QmkbRz_K/s40/feed.png) no-repeat center center #e9a01c;width:140px;height:69px}
.fiant-social li:hover .fb{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdZRGiN7bML79piBo0Awb58rXilRBqdhEt9sUGV7CZ9q6KgQR4g8kqSSjQYm0uEosa-T3UrXNWc8bp0atTu8yk7kW7xck7qTCW_tp-1KNmABBr6PnGzFo7MsqIV5CjjCpnqQSuMsInyURD/s200/facebook.png) no-repeat center center #1f69b3}
.fiant-social li:hover .tw{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbUS9lX4aglSgiMmlUert-NWgAQ-HrT8GpPItE88MPAMSAqGPE1W63zj_3__ZVcj4jJ2x62ozLkm3P_xqQjIgQjiilukFZgb3CvTYi1e8MC_F2qz04hYyolYsol6C-7odozf8ljV5lbUo_/s74/twitter-bird-dark-bgs.png) no-repeat center center #43b3e5}
.fiant-social li:hover .gp{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnL7FpNZKA-EDQusP94Gp2YzARDFBVGAyoBsXVw3FDlbztVOyvxSVBPlas_dPAXsoK7gQSEgf9tcqx1JiiX-n4mhpoxnN2MwsPYAeg6tJnCzQGIQaDX6JRYwR2ffZsNmukctGGN_KrIsmE/s200/google%252Bplus.png) no-repeat center center #da4a38}
.fiant-social li:hover .pi{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_eMKPAlhu0cZi0MoEdpWhndOHxQwxO7TU25F7OgO1-OJGEeUlfMotC9YU_1P_pedMb8asSKZsvP8D-ktJcDFUrhISA92-rKFXXMa-tO9FmLccthvmFJNQHz7lXxdqLVjP-zAI5QhM_a8/s45/pinterest.png) no-repeat center center #d73532}
.fiant-social li:hover .in{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAcejPshiyVkfJnYkW1fXsRiyDKjEE1DsM1Lg-pDDLDyZix6mO8JQFDCf-2qyCk41_YaVAmL0QHyq3C37ZrcQd6Nbj3CFtWKK8MRsn9mJPxuH-t-rIBhjSJZgV5B9oOtmlb57HowDgMPY/s45/linkedin.png) no-repeat center center #0097bd}
.fiant-social li:hover .yt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfc-PM4A44ZC_rZdbxy0tLzntnT9ZQyTPvPaf6f9Oj5pGsBnYgFIS8NdmXjkuSTCnMUMsUvoOoVZLYi_kJfND6hJkTsZXtJ_mHw4PWpzjhb6HXU6_wevkXjYObu6P5ozkvPIjYNgH_ndY/s45/youtube.png) no-repeat center center #e64a41}
.fiant-social li:hover .fd{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNITHWTqNtwtZzMxjS4mkFZ21AQBcJ7K0hpRLO2cBfTunYXKDIGQ6m4B5XXUWzHEPzXSOSHQE9ewR-vw8_N_Uff-x0NYZmKewZ__lM9zlDtnwFNjRdpnMqYAlcNyzI1nQISlB8QmkbRz_K/s45/feed.png) no-repeat center center #e9a01c}

2. Kemudian Simpan kode HTML di bawah ini pada gadget HTML/JavaScript di sidebar.

<div class='fiant-social'>
<li><a class="fb" href=http://www.facebook.com/Tutorialnes rel="nofollow"></a></li>
<li><a class="tw" href=http://twitter.com/Tutorialnes></a></li>
<li><a class="gp" href="https://plus.google.com/ID"></a></li>
<li><a class="pi" href=http://pinterest.com/Tutorialnes rel="nofollow"></a></li>
<li><a class="in" href=https://www.linkedin.com/in/Tutorialnes rel="nofollow"></a></li>
<li><a class="yt" href=http://www.youtube.com/Tutorialnes></a></li>
<li><a class="fd" href=http://feeds.feedburner.com/Tutorialnes rel="nofollow"></a></li>
</div>

Keterangan :
1. Ganti Tutorialnes dengan nama Profil pada masing-masing social profil Anda
2. Ganti ID Google+ dengan ID anda

Demo