Widget hiển thị tiêu đề bài đăng đẹp

Chia sẻ với các bạn một thủ thuật hiện thị tiêu đề bài đăng đẹp.
Bài đăng mới sẽ hiển thị tiêu đề kèm theo mô tả bài đăng.

Các bạn tham khảo mẫu sau khi làm xong.

Loading...

Để thực hiện thủ thuật các bạn thực hiện theo lần lượt các bước sau:

Bước 1: Vào bố cục thêm một tiện ích HTML/Javascript

Bước 2: Copy code sau vào tiện ích vừa tạo

<style>
.gfg-root {
width: 100%;
height : auto;
position : relative;
overflow : hidden;
margin: 0 auto;
text-align : center;
font-size: 12px;
border: 2px solid #CAD4E7;
}
.gfg-title {
font-size: 16px;
font-weight : bold;
color : #3D5A99;
background-color: #ECEEF5;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
}
.gfg-entry {
background-color : white;
width : 100%;
height : 9.2em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 3px;
}
.gf-title a {
font-weight: bold;
color: #3F86C6;
}
.gfg-subtitle {
display: none;
}
.gfg-list {
position : relative;
overflow : hidden;
text-align : left;
}
.gfg-listentry {
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
padding-left : 15px;
padding-right : 5px;
}
.gfg-listentry-odd {
background-color : #eeeeee;
}
.gfg-listentry-even {
background-color : #fefefe;
}
.gfg-listentry-highlight {
background: #748BB7;
}
.gfg-listentry-highlight:before {
position: absolute;
left: 0;
content: '\25BA ';
font-size: 14px;
color: #eee;
}
.gfg-listentry-highlight a {
color: #eee;
}
.gfg-root .gfg-entry .gf-result {
position : relative;
background-color : white;
width : auto;
height : 100%;
padding-left : 20px;
padding-right : 5px;
}
.gfg-root .gfg-entry .gf-result .gf-title {
font-size: 14px;
line-height : 1.2em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
margin-bottom : 2px;
}
.gfg-root .gfg-entry .gf-result .gf-snippet {
height : 3.8em;
color: #000000;
margin-top : 3px;
}
.clearFloat {
clear : both;
}
</style>
<script src="http://www.google.com/jsapi" type="text/javascript"></script><script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>
<script type="text/javascript">
function showGadget() {var feeds = [{title:'List',url:'http://www.hieutomori.blogspot.com/feeds/posts/default?redirect=false&start-index=5&max-results=10'},];
new GFdynamicFeedControl(feeds, 'feedGadget',{title: 'Latest Posts', numResults : 10, displayTime : 5000,hoverTime : 500});} google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>
<div id="feedGadget">Loading...</div>

Chú ý:
- Thay http://www.hieutomori.blogspot.com/ thành tên blog của bạn
- start-index=5 thành thứ tự bài viết bạn muốn hiển thị
- max-results=10 thành số bài bạn muốn hiển thị

Lưu lại tiện ích, chúc các bạn thành công!