Hiển thị tiêu đề và ảnh thumnail, phần trích dẫn sẽ hiển thị khi rê chuột vào tiêu đề.
1. Đầu tiên để thực hiện được thủ thuật này, blog bạn phải có tiện ích popular posts.
Có nghĩa là bài đăng phổ biến trong phần thêm tiện ích.
Bạn vào thiết kế >> Phần Tử Trang >> Thêm tiện ích >> Chọn Bài đăng phổ biến.
2. Như vậy đã chuẩn bị xong. bây giờ sẽ là hướng dẫn thực hiện thủ thuật.
- Hiển thị ảnh thumnail và tiêu để.
- Vào bố cục, vào chỉnh sửa code HTML, nhấp chọn mở rộng mẫu tiện ích.
- Chèn đoạn code CSS của thủ thuật vào trước dòng ]]></b:skin>
/* CSS Most View with ToolTip */
.popular-posts {display:none;}
#fdmostview {
margin:0px;
padding: 0px 5px 5px 5px;
}
#fdmostview ul {margin:0!important;}
#fdmostview li.lipopu {min-height:54px;border-bottom:1px dashed #F7AA4F;padding:5px 0 5px 0;}
#fdmostview li.lipopu img {float:left;border:1px solid #ccc;padding:1px;margin-right:4px;width:50px;}
#fdmostview ul li {list-style:none;}
/* END Most View with ToolTip */
3.Tiếp tục tìm đến code của tiện ích Popular Posts. code của nó sẽ trông như bên dưới :
<b:widget id='PopularPosts1' locked='false' title='Most View' type='PopularPosts'>
- và các bạn thêm code của thủ thuật vào đoạn code vừa tìm được như đoạn code highlight bên dưới :
<b:widget id='PopularPosts1' locked='false' title='Most View' type='PopularPosts'>
< b:includable id='main'>
< b:if cond='data:title'><data:title/></b:if>
< div class='widget-content popular-posts'>
< script type='text/javascript'>
var p=0;
var sumpopu = new Array();
var titlepopu = new Array();
var urlpopu = new Array();
var thumbpopu = new Array();
< /script>
< ul>
< b:loop values='data:posts' var='post'>
< b:if cond='data:post.thumbnail'>
< script type='text/javascript'>
p++;
sumpopu[p]='<data:post.snippet/>';
titlepopu[p]='<data:post.title/>';
urlpopu[p]='<data:post.href/>';
thumbpopu[p]='<data:post.thumbnail/>';
< /script>
< b:else/>
< script type='text/javascript'>
p++;
sumpopu[p]='<data:post.snippet/>';
titlepopu[p]='<data:post.title/>';
urlpopu[p]='<data:post.href/>';
thumbpopu[p]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoL2Akv9_Ok_-NL0FHMiVB6zbYXD2ZEx_qAQBtjnjeutid_WgVjt9G3WzUrw7NC3GHuNB1g8pwRcOmpDBsm03Sph29XfNZa51dKM3UUGyyDALfJ1IlZD9pwsY7LvsrWbEWukO6fhVprHpe/';
< /script>
< /b:if>
< li>
...
...
...
< /li>
< /b:loop>
< /ul>
< b:include name='quickedit'/>
< /div>
< div id='fdmostview'>
< ul>
< script type='text/javascript'>
//<![CDATA[
for (k=1;k<p+1;k++) {
document.write("<li class='lipopu'><img src='"+thumbpopu[k]+"' /><a href='"+urlpopu[k]+"' onmouseout='hidetip();' onmouseover='showtip('"+sumpopu[k]+"')'>"+titlepopu[k]+"</a></li>");
}
//]]>
< /script>
< /ul>
< /div>
< /b:includable>
< /b:widget>
- Cuối cùng save template lại.
-Ghi chú : Phần màu xanh là phần thêm vào trong bài đăng phổ biến.
- Chúc bạn thành công.
