Tạo nút chia sẻ xã hội dạng ​​xoay Hover US cho blogger

Đăng bởi Admin | 11/1/14 | 0 nhận xét

Có nhiều cách để tạo ra các hộp truyền thông xã hội cho blog của bạn. Với bài hướng dẫn này, mình sẽ giúp các bạn tạo được các nút chia sẻ này sẽ xoay sinh động hơn khi du khách trỏ chuột vào nó. Bạn có thể bấm vào Demo bên dưới để xem chi tiết.

Demo

1. Đăng nhập vào blogger  Thiết kế > Trang Element. 
2. Bấm vào Thêm tiện ích và chọn "HTML / Javascript 

3. Bây giờ dán mã dưới đây:

<style>
p#socialicons img {    -moz-transition: all 0.2s ease-in-out;    -webkit-transition: all 0.2s ease-in-out;    -o-transition: all 0.2s ease-in-out;    -ms-transition: all 0.2s ease-in-out;    transition: all 0.2s ease-in-out;} 
p#socialicons img:hover {    -moz-transform: rotate(70deg);    -webkit-transform: rotate(70deg);    -o-transform: rotate(70deg);    -ms-transform: rotate(70deg);    transform: rotate(70deg);}
p#socialicons1 img {    -moz-transition: all 0.8s ease-in-out;    -webkit-transition: all 0.8s ease-in-out;    -o-transition: all 0.8s ease-in-out;    -ms-transition: all 0.8s ease-in-out;    transition: all 0.8s ease-in-out;}
p#socialicons1 img:hover {    -moz-transform: rotate(360deg);    -webkit-transform: rotate(360deg);    -o-transform: rotate(360deg);    -ms-transform: rotate(360deg);    transform: rotate(360deg);} 
p#socialicons2 img {    -moz-transition: all 0.5s ease-in-out;    -webkit-transition: all 0.5s ease-in-out;    -o-transition: all 0.5s ease-in-out;    -ms-transition: all 0.5s ease-in-out;    transition: all 0.5s ease-in-out;} 
p#socialicons2 img:hover {    -moz-transform: rotate(-360deg);    -webkit-transform: rotate(-360deg);    -o-transform: rotate(-360deg);    -ms-transform: rotate(-360deg);    transform: rotate(-360deg);}</style>

<center><p id="socialicons">    
<a href="http://www.facebook.com/bloggertrix" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinIg5RPgzUVZBYNE1pio3-N1aecC62DRSJTJxO4AjsQXO5P3Ab9nrVElyV053SQMmsqUKeHv9C_lghT7woPlFrQFlq4xNY-OSML_mG-nS1sDLfgIqNKkQT8wQFPd0Dcri_kcNEBOTpEAM/s1600/bloggertrix.com-facebook-icon.png" /></a>    
<a href="http://www.twitter.com/bloggertrix/" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQnEH3lPhZguqLddkGq05nVK9dW96QFIHJwue8rhqnBWxSUi79dqCNPoBfTEsUuOvHW_PklcLYM0f3iAdojOPQGpteN32AUszBu6ZqNDmsl8g8W_XCB9L4zhuMtr-4aztvDOJ_b2wkKxk/s1600/bloggertrix.com-twitter-icon.png" /></a>    
<a href="https://plus.google.com/107955298793879607964" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRDcaeOn8A4uvMxAJXW_ctjQTDR5jdqAl457uCxcQXSkPvF0saQLrkVOnS1cdbV1ybvprw3CKKIE96dgLraK91pfnKD4F4k1Jt-1VXa0OHylMRSeQ8Cjaf7eEdiRdCXPmzfh8b-Gu25nk/s1600/bloggertrix.com-google-plus-icon.png" /></a>    
<a href="http://feeds.feedburner.com/bloggertrix/" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2q4hZarWRN0TsogGBK3UvtOa8DJdjjIMO9Jw0CdUPPM68d1HVjtPq5IbUXOdi8zhAjoyPGWs0t5Pg10z9MZaY7aXo12SQcNRgwO66hQ-5yZDsNlBZ_Zrj9bFuwFqaKjRlmq8_-jbYAuQ/s1600/bloggertrix.com-rss-icon.png" /></a></p></center>

Sau khi dán mã ở trên :
* Thay thế bloggertrix với Tên truy nhập facebook của bạn. 
* Thay thế bloggertrix   với Tên truy twitter của bạn. 
* Thay thế 107955298793879607964 với id Google cộng của bạn.
* Thay thế bloggertrix với Feedburner tên 
4. Bây giờ lưu của bạn HTML / Javascript.  
Thật là dễ phải không nào?
Bạn có thể xem thêm các mẫu khác bên dưới:

Tạo hộp đăng ký xã hội dạng trượt 4 trong 1 cho Blogger

Thêm nút Truyền thông xã hội cho Blogger một cách dễ dàng

Tạo phong cách thời trang cho hộp RSS Subscription trên blog

Tạo Widget truyền thông xã hội màu xanh cho Blogger

Tạo nút truyền thông xã hội nền gỗ cho Blogger

Tùy chỉnh hộp popup cho các nút xã hội trên Blogger...

Chúc bạn thành công !...
                                                                                       Theo : bloggertrix.com