Tạo số đếm cho Popular Posts / Bài viết phổ biến trong Blogspot Blogger

tháng 11 15, 2014

Thứ Bảy, tháng 11 15, 2014

Tạo số đếm cho Popular Posts / Bài viết phổ biến trong Blogspot Blogger cực kỳ hay. Thủ thuật tạo số đếm cho bài viết phổ biến trong blogspot cùng Terocket!

c
ó nhiều bạn vừa hỏi Terocket làm sao để Tạo số đếm cho Popular Posts / Bài viết phổ biến trong Blogspot Blogger? Việc tạo số đếm này thực ra rất đơn giản, nên hôm nay Terocket sẽ hướng dẫn cho các bạn thắc mắc và các bạn khác nếu có yêu cầu thì cũng sử dụng được.

Một mẫu tạo số đếm cực kỳ đẹp mắt dành cho tất cả mọi người!

Cách thực hiện thủ thuật blog Tạo số đếm cho Popular Posts / Bài viết phổ biến trong Blogspot Blogger này rất đơn giản, hoàn toàn sử dụng CSS, không sử dụng Javascript nên các bạn hoàn toàn yên tâm về tốc độ tải, cũng như độ thân thiện với SEO nhé. Giờ thì cùng Terocket thực hiện thủ thuật Tạo số đếm cho Popular Posts / Bài viết phổ biến trong Blogspot Blogger này nào.

Đầu tiên bạn cần tạo một widget Popular Posts / Bài viết phổ biến cho blog của mình

Cách đơn giản, đầu tiên các bạn vào Blog Title → Layout → Add Widget → Popular Posts và thêm tiện ích này.

Chèn CSS sau vào HTML của blog website bạn

Đầu tiên các bạn vào Blog Title → Template → Edit HTML. Nhấn tổ hợp phím Ctrl + F và tìm kiếm ]]></b:skin>. Sau đó dán đoạn mã code sau lên trên ]]></b:skin> và Lưu mẫu lại.

.popular-posts ul li a {
background: none repeat scroll 0 0 #222222;
color: #FFFFFF;
display: block;
margin: 10px 0;
padding: 25px 15px 30px;
position: relative;
text-decoration: none;
transition: all 0.3s ease-out 0s;
width: 85%;
}
.popular-posts ul li a:before {
background: none repeat scroll 0 0 #2DB3E9;
color: #FFFFFF;
font-weight: 700;
height: 2em;
line-height: 2em;
margin-left: 88%;
padding: 4px;
position: absolute;
text-align: center;
width: 2em;
transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
}
.popular-posts ul li a:hover {
opacity: 0.8;
}
.popular-posts ul li a:hover:before {
border-left-color: #CCCCCC;
left: -1px;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li + li a:before {
content: "10";
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li a:before {
content: "9";
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li a:before {
content: "8";
}
.popular-posts ul li:first-child + li + li + li + li + li + li a:before {
content: "7";
}
.popular-posts ul li:first-child + li + li + li + li + li a:before {
content: "6";
}
.popular-posts ul li:first-child + li + li + li + li a:before {
content: "5";
}
.popular-posts ul li:first-child + li + li + li a:before {
content: "4";
}
.popular-posts ul li:first-child + li + li a:before {
content: "3";
}
.popular-posts ul li:first-child + li a:before {
content: "2";
}
.popular-posts ul li:first-child a:before {
content: "1";
}
.item-snippet {
display: none;
}
.PopularPosts .item-thumbnail {
display: none;
}

Vậy là đã xong thủ thuật blog Tạo số đếm cho Popular Posts / Bài viết phổ biến trong Blogspot Blogger mà Terocket vừa chia sẻ. Đây là thủ thuật đơn giản nhưng tạo được nét thiện cảm đến người dùng blog, tạo sự chuyên nghiệp trong sự thể hiện với người dùng. Chúc các bạn luôn thành công với thủ thuật blog này của Terocket nhé.

Nếu bạn nào đã làm được rồi thì share và khoe thành quả đến bạn bè ở dưới đây nha, còn bạn nào chưa thực hiện được thủ thuật Tạo số đếm cho Popular Posts / Bài viết phổ biến trong Blogspot Blogger này thì gửi câu hỏi ở dưới đây, Terocket sẽ giải đáp mọi thắc mắc nhé.

Landgonow.com

.