Thư viện

Trải nghiệm

Thứ Ba, tháng 11 18, 2014

[Tips] - Popular Posts / Bài viết phổ biến ngang hiệu ứng xoay vòng cho Blogspot Blogger

Hướng dẫn thực hiện thủ thuật blog Popular Posts / Bài viết phổ biến ngang hiệu ứng xoay vòng cho Blogspot Blogger tại Terocket!

Chia sẻ:
[Tips] - Popular Posts / Bài viết phổ biến ngang hiệu ứng xoay vòng cho Blogspot Blogger
[Tips] - Popular Posts / Bài viết phổ biến ngang hiệu ứng xoay vòng cho Blogspot Blogger với hiệu ứng cực kỳ đẹp mắt, xoay rất ấn tượng và hấp dẫn đó nhé!
Ở một số bài viết trước, Terocket đã mang đến cho bạn đọc nhiều thủ thuật blog liên quan đến Popular Posts / Bài viết phổ biến rồi, hôm nay Terocket sẽ tiếp tục mang đến cho các bạn các thủ thuật blog cùng chủ đề này, và thủ thuật blog lần này có tên là [Tips] - Popular Posts / Bài viết phổ biến ngang hiệu ứng xoay vòng cho Blogspot Blogger. Một trong những thủ thuật nâng cao, rất thú vị.

Live Demo

Ở thủ thuật [Tips] - Popular Posts / Bài viết phổ biến ngang hiệu ứng xoay vòng cho Blogspot Blogger này, cấu trúc sẽ được tái hiện theo chiều ngang 3 cột 1 hàng, có thể gọi nó giống dạng lưới. Khi rê chuột vào thì trông nó sẽ xoay tròn, tạo hiệu ứng đẹp mắt, mới lạ đến người xem. Kích thích họ click và tăng traffic cho website bạn. Giờ hãy cùng Terocket thực hiện thủ thuật blog [Tips] - Popular Posts / Bài viết phổ biến ngang hiệu ứng xoay vòng cho Blogspot Blogger này nha!

Việc thực hiện thủ thuật này rất đơn giản, chỉ cần qua 2 bước là có thể hoàn thành được tiện ích này cho blog của bạn.

Bước 1 - Tạo 1 widget Popular Posts / Bài viết phổ biến cho blogspot

Cách làm đơn giản, đầu tiên hãy vào Blog Title → Layout → Add Widget → Tạo 1 Popular Posts. Và nhớ click vào hiển thị hình ảnh cho bài viết nha.

Bước 2 - Chèn CSS vào mã HTML của blog bạn

Vào Blog Title → Template → Edit HTML.Nhấn tổ hợp Ctrl + F tìm kiếm cho ]]></b:skin>. Sau đó copy đoạn mã code sau vào trên thẻ ]]></b:skin>.

.PopularPosts .item-title {
display:none;
}
.PopularPosts .widget-content ul li {
background: none repeat scroll 0 0 transparent;
float: right;
list-style: none outside none;
margin: 10px 0 0 !important;
padding: 0 !important;
}
.PopularPosts .item-thumbnail {
margin: 0 8px !important;
}
#PopularPosts1 img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 0px rgba(255,0,0,.4), inset 0 0 0px rgba(255,255,255,1);-moz-box-shadow: 0 0 0px rgba(255,0,0,.4), inset 0 0 0px rgba(255,255,255,1);box-shadow: 0 0 0px rgba(255,0,0,.4), inset 0 0 0px rgba(255,255,255,1);}
.item-thumbnail img {
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
border: 3px solid #ccc;
height: 60px;
padding: 3px;
width: 60px;
}

Vậy là đã xong thủ thuật blog [Tips] - Popular Posts / Bài viết phổ biến ngang hiệu ứng xoay vòng cho Blogspot Blogger này rồi nhé. Rất đơn giản đúng không nào. 

Nếu bạn nào đã làm được, hãy chia sẻ kinh nghiệm đến bạn bè mình nha, còn bạn nào chưa thực hiện được thủ thuật blog trên, hãy gửi bình luận ở dưới đây, Terocket sẽ giải đáp mọi thắc mắc của các bạn.

Terocket có một số thủ thuật liên quan đến Popular Posts / Bài viết phổ biến dành cho bạn dưới đây:

  1. [Tips] - Tạo số đếm cho Popular Posts / Bài viết phổ biến trong Blogspot Blogger
  2. [Tips] - Popular Posts / Bài đăng phổ biến hiện đại & hiệu ứng đẹp tùy chỉnh cho Blogger V1
  3. Tổng hợp một số style tiện ích Popular Posts cho blog
  4. Hiển thị ảnh thumbnail của bài viết bất kỳ trên tiện ích Popularposts của blogger
  5. Bo tròn bài viết trong Popular Post cho Blogger
  6. Rainbow PopularPosts với thumbnail và số cho blogger(V4)
  7. Multi Color Popular Posts có số đếm cho blogspot (v3)
  8. Popular Posts dạng Slides trượt dọc cho Blogger
  9. Tùy chỉnh Popular Posts đơn giản của blogger/blogspot
  10. Popular posts dạng ảnh có số đếm từ jquery v2 cho blogger
  11. Popular Post dạng ảnh Gallery cho blogspot
  12. Tiện ích Bài đăng phổ biến bố trí chiều ngang - vers 2
  13. Cool Popular Posts style đẹp cho bài đăng phổ biến
  14. Màu nền riêng cho bài viết xem nhiều nhất
  15. Thêm hiệu ứng tooltips cho rencent post và popuplar post cho blogger
  16. Làm đẹp tiện ích Popular Posts (hiệu ứng tooltip)
  17. Popular Posts dạng ảnh xoay tròn từ CSS3 cho blogger
  18. Ẩn một bài viết bất kỳ trong tiện ích Popular Posts
  19. Hiển thị đoạn trích dẫn dạng title cho bài đăng phổ biến
  20. Hiển thị bài đăng phổ biến dạng ảnh chuyển động
  21. Popular pots có có số đếm và title trích dẫn

Trứng Vịt - Terocket

1 nhận xét: