Hiệu ứng các nút Share hặc Menu quay vòng cho Blogger

Để Blog đẹp hơn ta có thể áp dụng hiệu ứng cuộn tròn cho các hình ảnh. Với hiệu ứng này các nút Share sẽ quay vòng theo chiều kim đồng hồ hoặc ngược chiều kim đồng hồ tùy vào sự điều chỉnh của các ban.

Các bạn có thể xem Demo Demo:

Xem Demo

Đầu tiên các bạn tìm một bức ảnh mà các bạn muốn taoh hiệu ứng bóng mờ:
Tiếp theo vào Thiết kế -> Chỉnh sửa HTML .

- Các bạn có 2 cách để làm
- Bước 1: Thêm đoạn Code sau trước thẻ: </head>

Code:

<style>

p#socialicons img{ /* 1st set of icons. Rotate them 360deg onmouseover and out */
-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#socialicons img:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

p#socialicons2 img{ /* 2nd set of icons. Rotate them 60deg onmouseover and out */
-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#socialicons2 img:hover{
-moz-transform: rotate(70deg);
-webkit-transform: rotate(70deg);
-o-transform: rotate(70deg);
-ms-transform: rotate(70deg);
transform: rotate(70deg);
}

p#socialicons3 img{ /* 3rd set of icons. Rotate them -360deg onmouseover ONLY. Note where the "transition prop is added */
}

p#socialicons3 img:hover{ 
-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;
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
}

</style>

Thêm một HTML/Javarscrip và thêm đoạn dưới vào:

<b>360 degree spin onMouseover and onMouseout</b></p>

<p id="socialicons">
<a href="http://namkna.blogspot.com/feeds/posts/default">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN-O0bPVRtOH7zSak1XkG6vgVwLBlRiufdgeK_k7A8DTZ3mHyslP4jNJjWeGf9Zt9w26pvu2EHWvsc8XnEd47sBYTCwXr_93GXJQ9ZiexZjx-GRoStM1YrEIfhvmcb8Cugb0hSTpd_xyUJ/s1600/rss-namkna-ngoctra.png" /></a>
<a href="http://namkna.blogspot.com/search/label/Blogspot-tips">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkZo4gtzQb7U7vSMT2CeBy3GchrgKbFUbriJV3Jrh407W9GwdBITvYVoxG8wDbWq36gj5bj-rnZi-xq5hlaPCmTbg75etBeeKQ_sLRx4SYcjSYBu8pyJUts5F9q42OfVkMcpLTD_MHz9Iv/s1600/delicious-namkna-ngoctra.png" /></a>
<a href="http://facebook.com/USERNAME">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDqvbElnr1L-kVpucIb0qnkXmhay08rfdW0B14gHgZ6hiCG8LtrcQDl1xSa8Hmy88IukPFaT7KUElwId7yYHTFq5eBxLoVu77rqWOCdBY7pju77z9Xu1ZDZY87QaxO8m80AI4UWHuPyU6V/s1600/facebook-namkna-ngoctra.png" /></a>
<a href="http://twitter.com/USERNAME">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNgbFfznnrcYoN3ebRdLtpyUu7MwfkcB4d0aYG9uFB0fPEFDYE-0wNXY2ulMplGM6Aqoyx_RfvG35isZBBI0UiZBiZKKTdpEjaxvu73tAHFkprzXQYxSAgJHpk9A3hILdOg20aAErZ-3Eu/s1600/twitter-namkna-ngoctra.png" /></a>
<a href="http://namkna.blogspot.com/search/label/BlogYahoo-Tips">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrbTdI2FULqo4A-MkOZp8CypMceTeTryq6uMznF7PRdJTz62bM5rRgbe4e30wS5idrGzgrFj2UZnsYDUnwvnqf8bwQs6Sq6tZW54OqAEwOg1Qs2x5GOc-ks5CrK9w-YXkp3q6BqO7tu1jU/s1600/yahoo-namkna-ngoctra.png" /></a>
</p>

<p>
<b>60 degree spin onMouseover and onMouseout</b></p>

<p id="socialicons2">
<a href="http://namkna.blogspot.com/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN-O0bPVRtOH7zSak1XkG6vgVwLBlRiufdgeK_k7A8DTZ3mHyslP4jNJjWeGf9Zt9w26pvu2EHWvsc8XnEd47sBYTCwXr_93GXJQ9ZiexZjx-GRoStM1YrEIfhvmcb8Cugb0hSTpd_xyUJ/s1600/rss-namkna-ngoctra.png" /></a>
<a href="http://namkna.blogspot.com/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkZo4gtzQb7U7vSMT2CeBy3GchrgKbFUbriJV3Jrh407W9GwdBITvYVoxG8wDbWq36gj5bj-rnZi-xq5hlaPCmTbg75etBeeKQ_sLRx4SYcjSYBu8pyJUts5F9q42OfVkMcpLTD_MHz9Iv/s1600/delicious-namkna-ngoctra.png" /></a>
<a href="http://namkna.blogspot.com/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDqvbElnr1L-kVpucIb0qnkXmhay08rfdW0B14gHgZ6hiCG8LtrcQDl1xSa8Hmy88IukPFaT7KUElwId7yYHTFq5eBxLoVu77rqWOCdBY7pju77z9Xu1ZDZY87QaxO8m80AI4UWHuPyU6V/s1600/facebook-namkna-ngoctra.png" /></a>
<a href="http://namkna.blogspot.com/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNgbFfznnrcYoN3ebRdLtpyUu7MwfkcB4d0aYG9uFB0fPEFDYE-0wNXY2ulMplGM6Aqoyx_RfvG35isZBBI0UiZBiZKKTdpEjaxvu73tAHFkprzXQYxSAgJHpk9A3hILdOg20aAErZ-3Eu/s1600/twitter-namkna-ngoctra.png" /></a>
<a href="http://namkna.blogspot.com/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrbTdI2FULqo4A-MkOZp8CypMceTeTryq6uMznF7PRdJTz62bM5rRgbe4e30wS5idrGzgrFj2UZnsYDUnwvnqf8bwQs6Sq6tZW54OqAEwOg1Qs2x5GOc-ks5CrK9w-YXkp3q6BqO7tu1jU/s1600/yahoo-namkna-ngoctra.png" /></a>
</p>

<p>
<b>-360 degree spin onMouseover ONLY</b></p>

<p id="socialicons3">
<a href="http://namkna.blogspot.com/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN-O0bPVRtOH7zSak1XkG6vgVwLBlRiufdgeK_k7A8DTZ3mHyslP4jNJjWeGf9Zt9w26pvu2EHWvsc8XnEd47sBYTCwXr_93GXJQ9ZiexZjx-GRoStM1YrEIfhvmcb8Cugb0hSTpd_xyUJ/s1600/rss-namkna-ngoctra.png" /></a>
<a href="http://namkna.blogspot.com/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkZo4gtzQb7U7vSMT2CeBy3GchrgKbFUbriJV3Jrh407W9GwdBITvYVoxG8wDbWq36gj5bj-rnZi-xq5hlaPCmTbg75etBeeKQ_sLRx4SYcjSYBu8pyJUts5F9q42OfVkMcpLTD_MHz9Iv/s1600/delicious-namkna-ngoctra.png" /></a>
<a href="http://namkna.blogspot.com/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDqvbElnr1L-kVpucIb0qnkXmhay08rfdW0B14gHgZ6hiCG8LtrcQDl1xSa8Hmy88IukPFaT7KUElwId7yYHTFq5eBxLoVu77rqWOCdBY7pju77z9Xu1ZDZY87QaxO8m80AI4UWHuPyU6V/s1600/facebook-namkna-ngoctra.png" /></a>
<a href="http://namkna.blogspot.com/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNgbFfznnrcYoN3ebRdLtpyUu7MwfkcB4d0aYG9uFB0fPEFDYE-0wNXY2ulMplGM6Aqoyx_RfvG35isZBBI0UiZBiZKKTdpEjaxvu73tAHFkprzXQYxSAgJHpk9A3hILdOg20aAErZ-3Eu/s1600/twitter-namkna-ngoctra.png" /></a>
<a href="http://namkna.blogspot.com/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrbTdI2FULqo4A-MkOZp8CypMceTeTryq6uMznF7PRdJTz62bM5rRgbe4e30wS5idrGzgrFj2UZnsYDUnwvnqf8bwQs6Sq6tZW54OqAEwOg1Qs2x5GOc-ks5CrK9w-YXkp3q6BqO7tu1jU/s1600/yahoo-namkna-ngoctra.png" /></a>
</p>