IKLAN BULAN INI

Monday 22 April 2013

Sliding Sharing Widget Sosial Untuk Blogger

Sliding Sharing Widget Sosial Untuk Blogger - Dalam posting ini, im akan menjelaskan cara menambahkan widget bagus berbagi sosial untuk blog.It Anda sebagai efek hover bagus. Untuk posting ini im menggunakan murni CSS dan HTML languages.You dapat menghubungkan Anda Rss​​, Facebook, Twitter nad Google plus.You dapat menambahkannya dengan langkah mudah.

1. Masuk ke akun blogger dan klik drop down.








2. Sekarang pilih "Layout" Seperti bawah.



<style>
/*--------Social Sharing Widget ------*/
.socialsharing a {
display:block;
height:50px;width:50px;padding:0 4px;float:left;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXqHS9f4XEH8xibjQwmAkOVCB6cV0vK16nbrf0483xaoYu5quQrG9ZORkmkeaUV2jNMI4lcl5hDcGLwD_AzcIUQPj-fDYxYZAvAY1Y5x2UxFD_T3MVLYlGbbam6nokuSnZGfREOlcT-Po/s1600/Sharing+buttons.png) no-repeat;
-webkit-transition: ease-in 0.2s all;
-moz-transition: ease-in 0.2s all;
-o-transition: ease-in 0.2s all;
-ms-transition: ease-in 0.2s all;
transition: ease-in 0.2s all;
cursor:pointer;
}
.socialsharing a.googleplus {
background-position: 0px -58px;
}
.socialsharing a.googleplus:hover {
background-position: 0px 0px;
}
.socialsharing a.twitter {
background-position: 0px -290px;
}
.socialsharing a.twitter:hover {
background-position: 0px -232px;
}
.socialsharing a.facebook {
background-position: 0px -406px;
}
.socialsharing a.facebook:hover {
background-position: 0px -348px;
}
.socialsharing a.rss {
background-position: 0px -174px;
}
.socialsharing a.rss:hover {
background-position: 0px -116px;
}
</style>
<br />
<div class="socialsharing">
<a class="rss" href="RSS Link" rel="external nofollow" target="_blank"></a>
<a class="googleplus" href="Google profile link" rel="external nofollow" target="_blank"></a>
<a class="facebook" href="Facebook page Link" rel="external nofollow" target="_blank"></a>
<a class="twitter" href="Twitter Link" rel="external nofollow" target="_blank"></a>
</div>

Ganti dengan URL Anda di mana saya highligh dengan teks warna merah.

7. Sekarang menyimpan HTML / Javascript '.

     Anda telah selesai .. 





Share This Post →


No comments:

Post a Comment