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
1. Simpan CSS ini di atas
2. Kemudian Simpan kode HTML di bawah ini pada gadget HTML/JavaScript di sidebar.
Keterangan :
1. Ganti Tutorialnes dengan nama Profil pada masing-masing social profil Anda
2. Ganti ID Google+ dengan ID anda
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
Click here for comments 0 komentar:
Dilarang menambahkan link aktif ataupun meng-iklankan suatu produk dll.
Komentar yang tidak bertanggung jawab menggunakan anonim akan segera dihapus.