Tin mới đăng:

Tạo hiệu ứng bài đăng phổ biến (Popular Posts) cho blogspot

Popular Post Widget là một Widget cung cấp bởi Blogger và chúng ta có thể thêm nó vào blog của chúng tôi. Widget này sẽ hiển thị các bài viết được xem nhiều nhất của blog của bạn, đó có thể là các tháng hoặc trong tuần hoặc tất cả các thời gian.
Bạn có thể chọn cách viết phổ biến là để được hiện thị. Bởi mặc nó cho thấy một hình ảnh (nếu có bài) và Tiêu đề của bài viết tiếp theo là nội dung của bài viết bao bọc bởi 20-25 Words. Bài viết này là một hướng dẫn để Phong cách mà bài viết được ưa thích Widget cho một tuyệt vời nhiều - màu được ưa thích bài Widget. Thủ thuật này được thực hiện bằng cách sử dụng CSS3 đơn giản hơn là sử dụng JavaScript phức tạp. Một tính năng tuyệt vời của thủ thuật này là mỗi bài viết được hiển thị trong mỗi màu UI Flat, do đó, những màu sắc bắt mắt Blog của khách truy cập của bạn và họ có xu hướng đi mà thậm chí nếu các bài viết không phải là quá tốt.
Hình ảnh minh họa
Bắt đầu thủ thuật:
» Bước 1: Bạn cần tạo một Widget Popular Posts/Bài viết phổ biến cho blog của mình (Nếu Blog bạn có rồi thì thôi)
» Bước 2: Bạn vào Blog => Bố cục => Thêm tiện ích => Bài đăng phổ biến
» Bước 3: Tiếp tục chèn CSS sau vào HTML của Blog/Website của bạn. Bạn vào Blog => Mẫu => Chỉnh sửa HTML. Nhấn tổ hợp phím Ctrl+F và tìm ]]></b:skin> sau đó dán đoạn code sau lên trên ]]></b:skin> Lưu mẫu lại.

#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:#ff4c54;width:97%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
#PopularPosts1 ul li a{font-size:13px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts1 img{
-moz-border-radius: 130px;
-webkit-border-radius: 130px;
border-radius: 130px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
padding:4px;
border:1px solid #fff !important;
}
#PopularPosts1 img:hover {
border-radius: 0 0 0 0;
-moz-transform: scale(1.2) rotate(-711deg) ;
-webkit-transform: scale(1.2) rotate(-711deg) ;
-o-transform: scale(1.2) rotate(-711deg) ;
-ms-transform: scale(1.2) rotate(-711deg) ;
transform: scale(1.2) rotate(-711deg) ;
}
Kết luận: Code trên hoàn toàn sử dụng CSS, không sử dụng Javascript nên các bạn cứ yên tâm về tốc độ tải, cũng như độ thân thiện với SEO nhé.
Tạo hiệu ứng bài đăng phổ biến (Popular Posts) cho blogspot Tạo hiệu ứng bài đăng phổ biến (Popular Posts) cho blogspot
9/10 356 bình chọn

Chia sẻ:

Xin chào! Mình là Bùi Xuân Doanh. Mình muốn được chia sẻ cùng các bạn những gì mình biết.

Theo dõi tôi trên Facebook Or Youtube


Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Quản trị

    Admin Bùi Xuân Doanh

    Click để Chat với Admin! Click để Chat với Admin!

    Email: buixuandoanh@gmail.com

    Hotline: 0983.379.818

Tư vấn Kỹ thuật