Nút Share hặc Menu quay vòng bằng CSS3 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

360 degree spin onMouseover and onMouseout

60 degree spin onMouseover and onMouseout

-360 degree spin onMouseover ONLY

Đầu tiên các bạn tìm một bức ảnh mà các bạn muốn tao hiệu ứng quay vòng:
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/AVvXsEi1tlNzPqgZ0pqjc12UX-WXKzohihd1SIo4SgKmuUQ_PK17FFC2iMxwM3z2mEaA5taillG3bvzgx2u7HPt4gFKcukTJh6KGKrRrZSi1TW7oYKNqJ9cZ2w8k7EoDmUqePDcyh4Cfao9uEB-S/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/AVvXsEi-VqrM2Sd8M8tbkpr2ii6Avv6FvRfJv1mLnPVDOzPg44d79hlnUBg5O16VwbLwFI4s7jzf5iqZ8h_08lrhyphenhyphenPh1RuNmfsm1mOAMCWMsWZxfqWeGCyLCCWkxZm194wO931VYhnxfwdFl4L_h/s1600/delicious-namkna-ngoctra.png" /></a>
<a href="http://facebook.com/USERNAME">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnkF34gg_7pgmVRcKIG5QKtoQNyvf3um4rsNkVO93vyr3YaW8iBy4KtOn8g2R6T3SWsw5T4DhWTEa-K80HoZgK0m51sFdsMkC2JWlsF5PxuSx0rL-c8dNAd69lJIaklZ2ziiwzkGQZX1zs/s1600/facebook-namkna-ngoctra.png" /></a>
<a href="http://twitter.com/USERNAME">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYTaHMzypz8yGDL3NLLNX-FiT1oWONtzKNDgf_wTgZf7MeIhMiQ-h6qqDOGX54hYw5ubsDtybVHGvp0HU3-9P905wiLIaiZsktHmY_iDjZDXI8vZp_pqm9lB_4A0jHPlTseqBwavS4Kd9_/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/AVvXsEgmlLEjYj7DUrhNhKh_dutcmch90HRAEutrNf1iUwDQWVGMzwy9M2C5x7CdHoNlZMcjsv32H_5QISJMzo5GCh0kJgVYCRbZ_vrphYsCpEUBknKcWb04BgPdlBXPSr6J_qrnTOz5aVSCsF3m/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/AVvXsEi1tlNzPqgZ0pqjc12UX-WXKzohihd1SIo4SgKmuUQ_PK17FFC2iMxwM3z2mEaA5taillG3bvzgx2u7HPt4gFKcukTJh6KGKrRrZSi1TW7oYKNqJ9cZ2w8k7EoDmUqePDcyh4Cfao9uEB-S/s1600/rss-namkna-ngoctra.png" /></a>
<a href="http://namkna.blogspot.com/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-VqrM2Sd8M8tbkpr2ii6Avv6FvRfJv1mLnPVDOzPg44d79hlnUBg5O16VwbLwFI4s7jzf5iqZ8h_08lrhyphenhyphenPh1RuNmfsm1mOAMCWMsWZxfqWeGCyLCCWkxZm194wO931VYhnxfwdFl4L_h/s1600/delicious-namkna-ngoctra.png" /></a>
<a href="http://namkna.blogspot.com/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnkF34gg_7pgmVRcKIG5QKtoQNyvf3um4rsNkVO93vyr3YaW8iBy4KtOn8g2R6T3SWsw5T4DhWTEa-K80HoZgK0m51sFdsMkC2JWlsF5PxuSx0rL-c8dNAd69lJIaklZ2ziiwzkGQZX1zs/s1600/facebook-namkna-ngoctra.png" /></a>
<a href="http://namkna.blogspot.com/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYTaHMzypz8yGDL3NLLNX-FiT1oWONtzKNDgf_wTgZf7MeIhMiQ-h6qqDOGX54hYw5ubsDtybVHGvp0HU3-9P905wiLIaiZsktHmY_iDjZDXI8vZp_pqm9lB_4A0jHPlTseqBwavS4Kd9_/s1600/twitter-namkna-ngoctra.png" /></a>
<a href="http://namkna.blogspot.com/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmlLEjYj7DUrhNhKh_dutcmch90HRAEutrNf1iUwDQWVGMzwy9M2C5x7CdHoNlZMcjsv32H_5QISJMzo5GCh0kJgVYCRbZ_vrphYsCpEUBknKcWb04BgPdlBXPSr6J_qrnTOz5aVSCsF3m/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/AVvXsEi1tlNzPqgZ0pqjc12UX-WXKzohihd1SIo4SgKmuUQ_PK17FFC2iMxwM3z2mEaA5taillG3bvzgx2u7HPt4gFKcukTJh6KGKrRrZSi1TW7oYKNqJ9cZ2w8k7EoDmUqePDcyh4Cfao9uEB-S/s1600/rss-namkna-ngoctra.png" /></a>
<a href="http://namkna.blogspot.com/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-VqrM2Sd8M8tbkpr2ii6Avv6FvRfJv1mLnPVDOzPg44d79hlnUBg5O16VwbLwFI4s7jzf5iqZ8h_08lrhyphenhyphenPh1RuNmfsm1mOAMCWMsWZxfqWeGCyLCCWkxZm194wO931VYhnxfwdFl4L_h/s1600/delicious-namkna-ngoctra.png" /></a>
<a href="http://namkna.blogspot.com/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnkF34gg_7pgmVRcKIG5QKtoQNyvf3um4rsNkVO93vyr3YaW8iBy4KtOn8g2R6T3SWsw5T4DhWTEa-K80HoZgK0m51sFdsMkC2JWlsF5PxuSx0rL-c8dNAd69lJIaklZ2ziiwzkGQZX1zs/s1600/facebook-namkna-ngoctra.png" /></a>
<a href="http://namkna.blogspot.com/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYTaHMzypz8yGDL3NLLNX-FiT1oWONtzKNDgf_wTgZf7MeIhMiQ-h6qqDOGX54hYw5ubsDtybVHGvp0HU3-9P905wiLIaiZsktHmY_iDjZDXI8vZp_pqm9lB_4A0jHPlTseqBwavS4Kd9_/s1600/twitter-namkna-ngoctra.png" /></a>
<a href="http://namkna.blogspot.com/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmlLEjYj7DUrhNhKh_dutcmch90HRAEutrNf1iUwDQWVGMzwy9M2C5x7CdHoNlZMcjsv32H_5QISJMzo5GCh0kJgVYCRbZ_vrphYsCpEUBknKcWb04BgPdlBXPSr6J_qrnTOz5aVSCsF3m/s1600/yahoo-namkna-ngoctra.png" /></a>
</p>

Lưu ý: Ở trên mình phân làm 3 mầu khá nhau ứng với một loại menu khác nhau, nếu chỉ sử dụng 1 loại thì bạn xóa các màu còn lại đi nha.

Chúc thành công!

theo: dynamicdrive.

Chủ đề: