Popular posts là 1 tiện ích được cung cấp bởi Blogger, Tiện ích này hiển thị các bài viết được xem nhiều nhất trong blog với các khoảng thời gian như : 1 tuần, 1 tháng, hay mọi lúc. Và nó cũng có 3 chế độ hiển thị: chỉ hiển thị tiêu đề, hiện thị tiêu đề và ảnh thumbnail, và thứ 3 là kiểu hiện thị đầy đủ (gồm : tiêu đề, ảnh thumbnail và trích dẫn).
¤ Bài viết này mình sẽ hướng dẫn các bạn cách tạo tiện ích Rainbow popularpost với một số đặc điểm.
» Hiệu ứng xoay ảnh thumbnail bằng mã CSS.
» CÓ dố đếm tối đa 9 bài nhiều hơn so với mẫu cũ chỉ có 5 bài.
» Bài viết hiển thị dạng phân cấp thụt vào (tối đa 9 cấp)
¤ Bước 1 » Thêm Rainbow PopularPosts multiple lever and count cho blogger!
Lưu ý: - Nếu blog bạn đã có tiện ích Popular Posts rồi thì bắt đầu thực hiện từ bước 1.5.1.1- Đăng nhập vào Blog
1.2- Vào mẫu (Template)
1.3- Chọn Thêm Tiện ích (Add Widget)
1.4. Bấm chọn mục bài đăng phổ Biến (Popularposst):
1.5- Bấm chỉnh sửa tiện ích Popularposts để xác định Id và cài đặt như bên dưới:
(Trong ví dụ bài này Id là PopularPosts1)
- Chọn "hiển thị tối đa" 9 bài viết.
- Chọn hình ảnh thu nhỏ và bỏ chọn mục đoạn trích.
1.6- Lưu tiện ích lại.
¤ Bước 2 » Tùy biến widget Popular Posts của bạn!
2.1- Đăng nhập vào blog
2.2- Chọn Mẫu (Template)
2.3- Chọn Chỉnh sử HTML (Edit HTML)
2.2- Chọn Mẫu (Template)
2.3- Chọn Chỉnh sử HTML (Edit HTML)
2.4- Tìm thẻ ]]></b:skin>: (Mẹo: Bấm chuột vào một vị trí bất kỳ trong ô chỉnh sửa HTML vào để sử dụng khung tìm kiếm nội tuyến như bài này.). Và dán code bên dưới vào trước nó:
/* Rainbow Popular repost by http://jomkenalislam.my*/ #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:90%} #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;line-height:1em;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:12px;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; background: #F2F2F2;} #PopularPosts1 img:hover { -moz-transform: scale(1.2) rotate(-560deg) ; -webkit-transform: scale(1.2) rotate(-560deg) ; -o-transform: sbale(1.2) rotate(-560deg) ; -ms-transform: scale(1.2) rotatd(-560deg) ; transform: scale(1.2) rotate(-560deg) ; }2.5- Tìm trong template đoạn code như bên dưới:
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>...</b:widget>
- Thay thế nó bằng đoạn mã dưới đây. <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>
<a expr:href='data:post.href' rel='bookmark' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<a expr:href='data:post.href' rel='bookmark' expr:title='data:post.snippet'><data:post.title/></a>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == "false"'>
<b:if cond='data:post.thumbnail'>
<img expr:alt='data:post.title' class='item-thumbnail' expr:src='data:post.thumbnail'/>
<b:else/>
<img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDcQdc1qnWZo_4P4VyvmGbmTRQSsvq2fhO1ByISXjBit4ZqyKzs3HUmOtyhGvHDP6T20HVzWvJOp2OdiLut66PmyrqCxM3UYX99r6l4cIURcueBA2ZG6pMPjcsEzxJUqTZgBbedKBgssob/'/>
</b:if>
<a expr:href='data:post.href' rel='bookmark' expr:title='data:post.title'><data:post.title/></a>
<div class='clear'/>
<b:else/>
<b:if cond='data:post.thumbnail'>
<img expr:alt='data:post.title' class='item-thumbnail' expr:src='data:post.thumbnail'/>
<b:else/>
<img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDcQdc1qnWZo_4P4VyvmGbmTRQSsvq2fhO1ByISXjBit4ZqyKzs3HUmOtyhGvHDP6T20HVzWvJOp2OdiLut66PmyrqCxM3UYX99r6l4cIURcueBA2ZG6pMPjcsEzxJUqTZgBbedKBgssob/'/>
</b:if>
<a expr:href='data:post.href' rel='bookmark' expr:title='data:post.snippet'><data:post.title/></a>
<div class='clear'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>
Lưu ý: VỚi những Blog có Id là PopularPosts2 (hoặc PopularPosts3) thì các bạn đổi toàn bộ phần PopularPosts1 (màu xanh) thành PopularPosts2 (hoặc PopularPosts3) nha.
Nhận xét
Blog của bạn phong phú thật! Rất vui được kết thân và học hỏi cùng bạn! Chúc bạn luôn vui!
Trả lờiXóaThân ái!
Caocongkien
Cảm ơn bạn đã ghé thăm và ủng hộ blog mình :))
Xóablog của bác load nhanh thật đấy bái phục
Trả lờiXóasharevnblog.blogspot.com
Cảm ơn bạn. Blog bạn giao diện rất đẹp :)
Xóacái chức năng xoay này hay quá . hôm trước thấy bên blog nguyenhai có mà ko biết làm.
Trả lờiXóaAnh Nam ơi hôm nào anh tạo một bài hướng dẫn tạo autoblog cho blogspot đi mấy trang khác có viết mà sử dụng pipes.yahoo.com em áp dụng thử mà hình như bài đó cũ rồi ko áp dụng dc , thank bác trước nhé
Oke khi nào rảnh a sẽ viết :))
Xóamình đã test nhưng check vào hiện thị ảnh thu nhỏ nó mới hiện ảnh
Trả lờiXóacòn ko check thì ko hiện
Đúng rồi phải bấm chọn vào đó nha bạn. tyaij mình dùng hình ảnh trong style 1 nên quyên không sửa cho các bạn. :))
Xóakiểu này hay đó, bữa nào sẽ áp dụng ảnh bìa facebook
Trả lờiXóaOke hãy áp dụng và cho mình biết kết quả nha :))
XóaNhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóaanh ơi làm sao để resize ảnh thumbnail to hơn mà ko làm giảm chất lượng ảnh ko anh. Em cho to lên thì nó mờ đi nhìn xấu quá
Trả lờiXóaẢnh mục này là s72 khá to rồi mà em. Nếu cho lên S1200 sẽ làm chậm tố độ load đó.
Xóaanh Nam ơi, chỉ em cách chèn ảnh no-thumbnail khi bài viết không có ảnh ở trong widget bài viết phổ biến với anh, em chèn thử như trên mà không được
Trả lờiXóaEm tìm 2 đoạn có dạng như bên dưới:
Xóa<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
và chỉnh nó thành:
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<img expr:alt='data:post.title' class='item-thumbnail' expr:src='data:post.thumbnail'/>
<b:else/>
<img alt='no image' class='item-thumbnail' src='http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png'/>
</div>
</b:if>
Lưu lại là oke.
Ngoài ra em có thể xem bài viết này: Hiển thị đoạn trích dẫn dạng title cho bài đăng phổ biến
Chào bạn!Mình mới tìm hiểu về web mới đây thôi.Mình rất đam mê nó.Trang web của bạn thật phong phú và đa dạng lắm.Chúc blog của bạn ngày càng phát triển nhiều hơn nữa
Trả lờiXóaChào bạn!Mình mới tìm hiểu về web mới đây thôi.Mình rất đam mê nó.Trang web của bạn thật phong phú và đa dạng lắm.Chúc blog của bạn ngày càng phát triển nhiều hơn nữa
Trả lờiXóa