Thư viện

Trải nghiệm

Thứ Sáu, tháng 1 06, 2012

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.

Chia sẻ:
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 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="http://4.bp.blogspot.com/-qVUBbmCx-Ig/Twa1B9-s-9I/AAAAAAAAASc/XG49kOk0CTA/s1600/rss-namkna-ngoctra.png" /></a>
<a href="http://namkna.blogspot.com/search/label/Blogspot-tips">
<img border="0" src="http://2.bp.blogspot.com/-Ua4DcaNG2lw/Twa1DeGE3AI/AAAAAAAAAS0/3-lUD6LlesY/s1600/delicious-namkna-ngoctra.png" /></a>
<a href="http://facebook.com/USERNAME">
<img border="0" src="http://3.bp.blogspot.com/-gboABl8-TCM/Twa1BWF5OqI/AAAAAAAAASY/OClDlhtVKcE/s1600/facebook-namkna-ngoctra.png" /></a>
<a href="http://twitter.com/USERNAME">
<img border="0" src="http://2.bp.blogspot.com/-moPYfBhKgwU/Twa1CZHTwdI/AAAAAAAAASk/dNMBASYVZOY/s1600/twitter-namkna-ngoctra.png" /></a>
<a href="http://namkna.blogspot.com/search/label/BlogYahoo-Tips">
<img border="0" src="http://4.bp.blogspot.com/-49Dnq2gJrno/Twa1C5rAzSI/AAAAAAAAASs/bAbKDRbIZ1g/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="http://4.bp.blogspot.com/-qVUBbmCx-Ig/Twa1B9-s-9I/AAAAAAAAASc/XG49kOk0CTA/s1600/rss-namkna-ngoctra.png" /></a>
<a href="http://namkna.blogspot.com/">
<img border="0" src="http://2.bp.blogspot.com/-Ua4DcaNG2lw/Twa1DeGE3AI/AAAAAAAAAS0/3-lUD6LlesY/s1600/delicious-namkna-ngoctra.png" /></a>
<a href="http://namkna.blogspot.com/">
<img border="0" src="http://3.bp.blogspot.com/-gboABl8-TCM/Twa1BWF5OqI/AAAAAAAAASY/OClDlhtVKcE/s1600/facebook-namkna-ngoctra.png" /></a>
<a href="http://namkna.blogspot.com/">
<img border="0" src="http://2.bp.blogspot.com/-moPYfBhKgwU/Twa1CZHTwdI/AAAAAAAAASk/dNMBASYVZOY/s1600/twitter-namkna-ngoctra.png" /></a>
<a href="http://namkna.blogspot.com/">
<img border="0" src="http://4.bp.blogspot.com/-49Dnq2gJrno/Twa1C5rAzSI/AAAAAAAAASs/bAbKDRbIZ1g/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="http://4.bp.blogspot.com/-qVUBbmCx-Ig/Twa1B9-s-9I/AAAAAAAAASc/XG49kOk0CTA/s1600/rss-namkna-ngoctra.png" /></a>
<a href="http://namkna.blogspot.com/">
<img border="0" src="http://2.bp.blogspot.com/-Ua4DcaNG2lw/Twa1DeGE3AI/AAAAAAAAAS0/3-lUD6LlesY/s1600/delicious-namkna-ngoctra.png" /></a>
<a href="http://namkna.blogspot.com/">
<img border="0" src="http://3.bp.blogspot.com/-gboABl8-TCM/Twa1BWF5OqI/AAAAAAAAASY/OClDlhtVKcE/s1600/facebook-namkna-ngoctra.png" /></a>
<a href="http://namkna.blogspot.com/">
<img border="0" src="http://2.bp.blogspot.com/-moPYfBhKgwU/Twa1CZHTwdI/AAAAAAAAASk/dNMBASYVZOY/s1600/twitter-namkna-ngoctra.png" /></a>
<a href="http://namkna.blogspot.com/">
<img border="0" src="http://4.bp.blogspot.com/-49Dnq2gJrno/Twa1C5rAzSI/AAAAAAAAASs/bAbKDRbIZ1g/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.

5 nhận xét:

  1. mình khá thik cái nút share của blogger mẫu sẵn có í, nso gọn gàng ,..nhưng làm thế nào để lấy được nó vô trong template hiện tại của mình được bạn nhỉ
    GREEN VIETNAM

    Trả lờiXóa
  2. thank bạn rất nhiều. Chúc năm mới vui vẻ nhé

    Trả lờiXóa
  3. @Nguyễn Thanh Hiếu Không có gì chúc mằng năm mới :3) :3) :3) :3)

    Trả lờiXóa
  4. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
  5. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa