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

tháng 11 18, 2014

Thứ Ba, tháng 11 18, 2014

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!

[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.

Landgonow.com

.