Tiện ích Bài viết mới nhất dành cho đối tác VIP

Trong quá trình phát triển chương trình cộng tác viên, mình đã nghĩ ra cách tạo tiện ích Bài viết mới nhất dành cho đối tác VIP với mục đích vinh danh công sức của cộng tác viên và cuối cùng mình đã thử nghiệm thành công. Hôm nay xin giới thiệu với bạn đọc, một là chia sẻ một thủ thuật mới, hai là dành tặng cho cộng tác viên đầu tiên của Thủ thuật Blogger, đó là blogger có biệt danh peace19812006 vì sự nhiệt tình của anh ấy cùng sự tin cậy của anh ấy đối với Thủ thuật Blogger.

Đặc điểm của tiện ích này là bố trí bài viết đầu tiên dưới dạng: ảnh đại diện, tiêu đề bài viết và phần trích dẫn; các bài viết tiếp theo chỉ hiển thị tiêu đề. Ngoài ra có thể đặt ảnh đại diện chỉ định riêng cho một số nhãn phổ biến trong blogspot (dùng cho trường hợp bài viết không có ảnh). Trong tiện ích này có phần logo cho trang. Bạn có thể xem Demo bên dưới.

Để cài đặt tiện ích này bạn hãy thực hiện như sau:

Đăng nhập Blogger, vào Page Elements. Đặt toàn bộ đoạn code sau đây vào một tiện ích HTML/Javascript.

<style type="text/css">
#rcp-VIP {width: 300px;}
#rcp-VIP a:hover {color: #AC0101}
#rcp-VIP h4 {font-family:Arial,serif;font-size: 14px;font-weight: normal;line-height: 1;}
#logo {margin-bottom:15px;text-align:center;font-size: 18px;}
#rcp-VIP table {border-spacing: 0;height: 80px;margin-bottom: 10px;width: 290px;}
#rcp-VIP table td {vertical-align: middle;}
#rcp-VIP table a {color: #069;text-decoration:none}
#rcp-VIP table.first td.title {padding-top: 3px;border-bottom: 1px solid #202931;border-top: 1px solid #202931;height: 20px;}
#rcp-VIP table td.thumb {padding-top: 3px;text-align: center;width: 50px;}
#rcp-VIP table.first h4 {text-align: center;}
#rcp-VIP table.any h4 {border-bottom: 1px solid #202931;border-top: 1px solid #202931;margin-left: 10px;padding: 5px;}
#rcp-VIP table img {border: 1px solid #202931;height: 50px;width: 50px;}
#rcp-VIP table.first td.text {color: #000000;font-family: Tahoma;font-size: 14px;height: 60px;line-height: 1;padding-left: 10px;width: 240px;}
#rcp-VIP div.single li {background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1QqiUiFPCFkdJyMf-lr4ltm97f8qEjNS9lS2gKaoanFdYDZYMDU8wOJrJjlASlgG_LvgQPOlKv8yfSVPWN1S3GQiuTK-qb06UFCeT-YrphKxUno6o3ynb3upZ40DLHPYtOFIi3y32qM4/s1600/arrow_right.png) no-repeat scroll left 50%;height: 20px;line-height: 20px;padding-left: 20px;list-style:none}
#rcp-VIP div.single li a {height:50px;color: #069;font-family:Arial,serif;font-size: 14px;text-decoration:none}
#rcp-VIP div.single li a:hover{color: #AC0101}
#rcp-VIP div.single {height:45px}
</style>
<script type='text/javascript'>
//<![CDATA[
// Recent Posts from VIP Blogspot Widget by www.thuthuatblogger.info

function getTitle(entry,res) {
var t = entry.title.$t;
if(res) {
t = t.substring(0,res);
}
return t;
}

function getUrl(entry) {
var url;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
url = entry.link[k].href;
break;
}
}
return url;
}

function getContent(entry,res) {
var c = "";
if ("content" in entry) {
c = entry.content.$t;
} else if ("summary" in entry) {
c = entry.summary.$t;
}
if(res) {
c = removeHtmlTag(c,res);
}
return c;
}

function getThumbnail(entry) {
var t = "";
var s, a, b, c, d;
s = entry.content.$t;
a = s.indexOf("<img");
b = s.indexOf("src=\"",a);
c = s.indexOf("\"",b+5);
d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) { t = d; }
return t;
}

function removeHtmlTag(strx,chop){
var r = strx.split("<");
for(var i=0;i<r.length;i++){
if(r[i].indexOf(">")!=-1){
r[i] = r[i].substring(r[i].indexOf(">")+1,r[i].length);
}
}
r = r.join("");
var sss = "", p;
var r2 = r.split(" ");
for(var i=0;i<r2.length;i++){
p = sss + r2[i] + " "
if(p.length>=chop) {break;}
sss = p;
}
if(sss!=" ") {
sss += "&hellip;"
} else {
sss = "";
}
return sss;
}

function showrecentpostVIP(json) {
var entry, posttitle, posturl, postcontent, cat, strx_out;
var numposts = 6;
strx_out = "<div id='logo'><a title='' target='_blank' href='http://www.kienthucblogspot.info/'>KIENTHUCBLOGSPOT</a></div>"; // Bạn cần tùy biến chỗ này - có thể đặt URL_logo
for (var i = 0; i < numposts; i++) {
if (i == json.feed.entry.length) { break; }
posturl = "";
postcontent = "";
entry = json.feed.entry[i];
cat = entry.category[0].term;
posttitle = getTitle(entry);
posturl = getUrl(entry);
if(i==0) {
postcontent = getContent(entry,150); // Thay 150 chỉ số ký tự cho đoạn trích dẫn
postthumb = getThumbnail(entry); // Dưới đây đặt URL ảnh đại diện cho một số nhãn
if(postthumb=="") {
if(cat=="Tên nhãn 1"){postthumb = "URL_ảnh đại diện nhãn 1"}
if(cat=="Tên nhãn 2"){postthumb = "URL_ảnh đại diện nhãn 2"}
if(cat=="Tên nhãn 3"){postthumb = "URL_ảnh đại diện nhãn 3"}
if(cat=="Tên nhãn 4"){postthumb = "URL_ảnh đại diện nhãn 4"}
}
if(postcontent!="") {
strx_out += "<table class='first'>";
strx_out += "<tr><td class='title' colspan='2'><h4><a href='" + posturl + "' target='_blank'>" + posttitle + "</a></h4></td></tr>";
strx_out += "<tr>";
strx_out += "<td class='thumb' ><img src='" + postthumb + "' /></td>";
strx_out += "<td class='text'>" + postcontent + "</td>";
strx_out += "</tr>";
strx_out += "</table>";
} else {
strx_out += "<table class='any'>";
strx_out += "<tr>";
strx_out += "<td class='thumb' ><img src='" + postthumb + "' /></td>";
strx_out += "<td class='title'><h4><a href='" + posturl + "' target='_blank'>" + posttitle + "</a></h4></td>";
strx_out += "</tr>";
strx_out += "</table>";
}
} else {
strx_out += "<div class='single'><li><a href='" + posturl + "' target='_blank'>" + posttitle + "</a></li></div>";
}
}
document.write(strx_out );
}
//]]>
</script>
<div id="rcp-VIP">
<script src="/feeds/posts/default?max-results=6&alt=json-in-script&callback=showrecentpostVIP"></script>
</div>

Trong đoạn code trên, bạn có thể tùy biến CSS khá dễ dàng sao cho phù hợp với blogspot của bạn. Đối với các bạn mới, nếu áp dụng gặp khó khăn gì, xin vui lòng nêu vấn đề bên dưới để cùng giải quyết.

More about →

Theo dõi bài viết mới nhất từ blog khác

Có một số cách để bạn theo dõi bài viết mới nhất từ các blog đó là đăng ký nhận tin cập nhật RSS qua email, đối với blogspot thì có thể theo dõi qua Google Connect. Từ phương diện này, mình sáng tạo tùy biến tiện ích Blog List (Danh sách Blog) để tạo ra tiện ích có chức năng cập nhật bài viết mới nhất của những blog bạn ưa thích. Tiện ích này hiển thị ảnh đại diện bài viết (có thuộc tính title là khoảng cách thời gian tính từ thời điểm bài viết được đăng cho đến thời điểm hiện tại), tiêu đề bài viết có thuộc tính title là đoạn trích dẫn bài viết (snippet), faviicon của blog kèm theo tiêu đề blog.

Xem Demo.

Để tạo tiện ích này, bạn hãy thực hiện như sau:

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates. Tìm đến thẻ đóng </b:widget> liên quan đến một tiện ích nào đó gần vị trí bạn muốn đặt tiện ích này. Sau đó đặt sau thẻ đóng </b:widget> bằng đoạn code bên dưới.

<b:widget id='BlogList100' locked='false' title='Cập nhật từ blog khác' type='BlogList'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>

<div class='widget-content'>
<!-- Updating the Recent Post from Other Blog widget styled by Bloggerism -->
<div class='blog-list-container' expr:id='data:widget.instanceId + &quot;_container&quot;'>
<ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'>
<b:loop values='data:items' var='item'>
<li expr:style='data:item.displayStyle'>
<span class='item-content' style='float:left;width:15%;padding:0;margin-left:5px'>
<div class='item-thumbnail' style='float:left;height:50px;padding:1px;margin:0;border:1px solid #DDD'>
<b:if cond='data:item.itemThumbnail'>
<a expr:href='data:item.itemUrl' expr:title='data:item.timePeriodSinceLastUpdate' target='_blank'><img alt='' border='0' expr:src='data:item.itemThumbnail.url' height='50' width='50'/>
</a>
</b:if></div>
</span>
<div class='blog-content' style='float:right;width:75%;padding-left:5px'>

<b:if cond='data:showItemTitle == &quot;true&quot;'>

<span class='item-title'>

<b:if cond='data:item.itemUrl != &quot;&quot;'>

<a expr:href='data:item.itemUrl' expr:title='data:item.itemSnippet' target='_blank'>

<data:item.itemTitle/></a>

<b:else/>

<data:item.itemTitle/>

</b:if>

</span>

</b:if>

<br/>

<span class='blog-icon'>

<b:if cond='data:showIcon == &quot;true&quot;'>

<input expr:value='data:item.blogIconUrl' type='hidden'/>

</b:if>

</span>

<span class='blog-title' style='padding-left:10px'>

<a expr:href='data:item.blogUrl' target='_blank'>

<data:item.blogTitle/></a>

</span>

</div>
<div style='clear: both;'/>
</li>
</b:loop>
</ul>

</div>
</div>
</b:includable>
</b:widget>

Lưu Template.

Bước 2. Vào Page Element. Tìm đến tiện ích có tên Cập nhật từ blog khác, chỉnh sửa rồi tick chọn vào tất cả các mục Icon, Title of most recent item, Snippet of most recent item, Thumbnail of most recent item, Date of last update. Sau đó nhấn ADD TO LIST rồi lần lượt đặt các URL của các trang blog mà bạn ưa thích (ví dụ http://www.abc.com/). Sau khi add URL xong, lưu tiện ích là được.

Nếu muốn phần Favicon + Blog Name nằm trên phần Post Title thì đảo vị trí cho nhau giữa 2 phần code được đánh dấu màu xanh và màu nâu. Ngoài ra ở Bước 1, bạn có thể tìm hiểu và đặt thêm CSS để tùy biến style theo ý thích của bạn một cách dễ dàng. Hy vọng tiện ích này sẽ giúp bạn tiện theo dõi bài viết mới nhất của những blog bạn ưa thích ngay trên blog của chính bạn.

More about →

Bài viết mới nhất cho nhãn không dùng Javascript

Dạo này do bận viết bài phân tích tiền tệ nên mình không còn nhiều thời gian dành cho Blogspot. Tuy nhiên niềm đam mê lĩnh vực này cứ mãi thôi thúc mình cố gắng đóng góp chút gì đó cho cộng đồng. Và mình quyết định trở lại để cùng chia sẻ những thủ thuật về Blogspot với những người bạn thân mến trong cộng đồng Blogger Việt. Để kỷ niệm ngày trở lại, mình xin chia sẻ một thủ thuật, tuy không mới song cũng không cũ, đó là tiện ích Bài viết mới nhất cho nhãn không dùng Javascript.

Thực ra, tiện ích này được áp dụng từ thủ thuật Tiện ích Bài viết mới nhất không dùng Javascript áp dụng cho toàn blogspot mà mình đã vận dụng trước đây từ ý tưởng sử dụng tiện ích BlogList để tạo tiện ích bài viết mới nhất có ảnh đại diện.

Bạn có thể xem Demo tại trang chủ của blog này. Để tạo tiện ích này bạn hãy thực hiện như sau.

Bước 1. Đăng nhập Blogger, vào Page Elements >> trên sidebar, nhấn Add a Gadget chọn Blog List (Danh sách Blog).

Tại mục Title, bạn hãy đặt theo tên nhãn cần áp dụng tiện ích.

Tick chọn vào các mục Title of most recent item, Snippet of most recent item, Thumbnail of most recent item.

Nhấn ADD TO LIST.

Sau đó dán vào mục Add by URL với địa chỉ sau đây:

http://huynh-nhat-ha.blogspot.com/feeds/posts/default/-/Tên nhãn1?start-index=1

Rồi tiếp tục Add by URL thứ 2

http://huynh-nhat-ha.blogspot.com/feeds/posts/default/-/Tên nhãn1?start-index=2

rồi thứ 3

http://huynh-nhat-ha.blogspot.com/feeds/posts/default/-/Tên nhãn1?start-index=1

cứ thế cho đến khi nào bạn cần dừng lại (1,2,3,4… là số bài viết mới nhất hiển thị cho nhãn).

Bạn cần thay huynh-nhat-ha bằng tên blogspot của bạn và Tên nhãn1 bằng tên của nhãn cần áp dụng, rồi nhấn SAVE để lưu tiện ích.

Bước 2. Vào Edit HTML, chọn Expand Widget Templates.

Dùng từ khóa BlogList1 (nhấn Ctrl +F) tìm đến đoạn code tương tự như sau.

<b:widget id='BlogList1' locked='false' title='Tên nhãn 1' type='BlogList'>
<b:includable id='main'>

…. Phần nằm giữa này là code trọng tâm của tiện ích …

</b:includable>
</b:widget>

Ở đây bạn cần chú ý thẻ <b:includable id='main'> và thẻ </b:includable> chứa code trọng tâm của tiện ích, nói chung đoạn code nằm giữa 2 thẻ này rất dài. Việc bạn cần làm tiếp theo là thay đoạn code nằm giữa 2 thẻ đó bằng đoạn code dưới đây.

<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>

<div class='widget-content'>
<!-- Recent Posts Widget without Javascript Styled by Huynh Nhat Ha -->
<div class='recentposts-ha-main' expr:id='data:widget.instanceId + &quot;_container&quot;'>
<ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'>
<b:loop values='data:items' var='item'>
<li>
<div class='RPcontent'>

<!-- ảnh đại diện float về bên trái -->

<div class='RPthumbnail'>
<b:if cond='data:item.itemThumbnail'>
<!-- nếu bài viết có hình ảnh thì dùng -->
<img class='RPifthumb' expr:src='data:item.itemThumbnail.url'/>
<b:else/>

<!-- nếu bài viết không có hình ảnh thì dùng ảnh riêng -->

<!-- ở đây ta đặt URL ảnh đại diện riêng -->

<img class='RPnothumb' src='http://bit.ly/hGWr7r'/>
</b:if>
</div>

<!-- tiêu đề bài viết -->

<div class='RPtitle'>
<a expr:href='data:item.itemUrl' expr:title='data:item.itemSnippet' target='_blank'><data:item.itemTitle/></a>
</div>
</div>
<div style='clear: both;'/>
</li>
</b:loop>
</ul>
</div>
<!-- End the widget styles -->
</div>

Bước 3. Đặt code CSS bên dưới vào trước dòng ]]></b:skin>.

.recentposts-ha ul{list-style-type:none;margin:0;padding:0}
.recentposts-ha ul li{background-color:transparent;clear:both;list-style:none}
.recentposts-ha ul li:hover{background-color:#e2fcef}
.recentposts-ha .RPcontent{padding:5px}
.recentposts-ha .RPtitle{height:30px}
.recentposts-ha .RPtitle a{color:#069;font-family:Arial;font-size:12px;font-weight:bold}
.recentposts-ha .RPtitle a:hover{color:#AC0101;text-decoration:none}
.recentposts-ha .RPthumbnail{float:left;margin:0 5px 0 0}
.recentposts-ha img{height:50px;width:50px}

Lưu Template là OK.

Cứ như vậy bạn có thể áp dụng cho nhiều nhãn và bạn sẽ sử dụng BlogList2, BlogList3, BlogList4, BlogList5…

Lưu ý nếu bạn áp dụng thủ thuật này tại những vùng có chiều rộng khá lớn (ví dụ phần Main) thì có thể bố trí các bài viết thành 2 cột, bạn chỉ cần thêm code CSS như thế này:

.recentposts-ha ul li {float: left;margin-right: 10px;width: 48%}

More about →

Bài viết mới nhất có ảnh đại diện cho từng nhãn

Trên blog này, bạn có thể tìm thấy nhiều kiểu tiện ích Bài viết mới nhất cho blogspot của mình bằng cách tìm đến nhãn Recent Posts. Và có lẽ đây là nơi mà bạn có thể tùy ý lựa chọn cho mình một kiểu tiện ích phù hợp cho blog của mình ở thể loại này.

Hôm nay xin giới thiệu với quý bạn đọc thêm một kiểu tiện ích cùng loại nhưng với tính năng khác biệt là tạo ảnh đại diện cho từng nhãn riêng biệt, theo đó nếu bài viết có ảnh thì script sẽ lấy ảnh đó làm ảnh đại diện, nếu bài viết không có ảnh thì script sẽ lấy ảnh mặc định (no-image) làm ảnh đại diện, nếu bài viết thuộc nhãn được gán ảnh đại diện riêng cho nhãn đó thì script sẽ lấy ảnh gán đó làm ảnh đại diện. Tôi gọi tiện ích này là Bài viết mới nhất có ảnh đại diện cho từng nhãn (Recent Posts with Thumbnails per Label Widget).

Ở đây bạn cần tạo ảnh riêng cho từng nhãn hoặc một số nhãn ưu tiên nào đó rồi upload lên host (hoặc lên chính Blogger) rồi lấy URL để cài đặt trong script của tiện ích.

Trước khi cài đặt bạn có thể xem Demo bên dưới.

Bài viết mới nhất

Để cài đặt tiện ích, bạn hãy thực hiện theo các bước sau đây.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML. Đặt đoạn code bên dưới vào trước dòng ]]</b:skin>.

#rcp {margin: 0 auto;width: 245px;}
.rcposts {background-color: transparent;border: 1px solid #101921;height: 90px;margin: 5px 0;outline: 1px solid #404951;padding: 0;position: relative;width: 241px;}
.rcposts:hover {-moz-box-shadow: 0px 0px 60px #505961 inset;}
.rcposts img {height: 55px;left: 5px;position: absolute;top: 30px;width: 55px;}
.rcposts h6 {background-color: #404951;height: 20px;left: 5px;margin: 0;position: absolute;text-align: center;top: 6px;width: 230px;overflow: hidden;word-wrap: break-word;}
.rcposts h6 a {color: #ffffff;font-family: Tahoma;font-size: 11px !important;font-weight: normal !important;line-height: 20px;}
.rcposts p {font-size: 11px;height: 48px;left: 70px;line-height: 1.1;margin: 0;overflow: hidden;position: absolute;top: 35px;width: 160px;}

Trong đoạn code CSS ở trên, cần chú ý điều chỉnh tham số width:245px sao cho tương thích với chiều rộng của vị trí đặt tiện ích (thường là sidebar hoặc lowerbar).

Bước 2. Đặt đoạn code sau đây vào trước thẻ </head>.

<script type='text/javascript'>
//<![CDATA[
// Recent Post with Thumbnails per Label Widget by www.huynh-nhat-ha.blogspot.com
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'';
}
// Establish specific image per label
function getimage(cat) {
theimg = "http://goo.gl/lB0mM";
if(cat=="Tên nhãn 1"){theimg = "URL_nhãn 1"}
if(cat=="Tên nhãn 2"){theimg = "URL_nhãn 2"}
if(cat=="Tên nhãn 3"){theimg = "URL_nhãn 3"}
if(cat=="Tên nhãn 4"){theimg = "URL_nhãn 4"}
if(cat=="Tên nhãn 5"){theimg = "URL_nhãn 5"}
if(cat=="Tên nhãn 6"){theimg = "URL_nhãn 6"}
if(cat=="Tên nhãn 7"){theimg = "URL_nhãn 7"}

return theimg;
}
function recentpoststhumbperlabel(json) {
var entry, posttitle,posturl,postimg,postcontent;
var output = "";
for (var i = 0; i < json.feed.link.length; i++) {
if (i == json.feed.entry.length) { break; }
entry = json.feed.entry[i];
posttitle = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
if ("content" in entry) {
postcontent = entry.content.$t;
} else if ("summary" in entry) {
postcontent = entry.summary.$t;
} else {
postcontent = "";
}
if ("media$thumbnail" in entry) {
postimg = entry.media$thumbnail.url;
} else {
var cat = entry.category[0].term;
postimg = getimage(cat);
}
output += "<div class='rcposts'>";
output += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
output += "<h6><a href='" + posturl + "' target='_blank'>" + posttitle + "</a></h6>";
output += "<p>" + removeHtmlTag(postcontent,100) + " ...</p>";
output += "</div>";
}
document.getElementById("rcp").innerHTML = output;
}

//]]>
</script>

Trong đoạn code trên bạn cần thay lần lượt các tên nhãn tương ứng với URL của từng nhãn, bạn có thể thêm bao nhiêu nhãn cũng được theo đúng cấu trúc như trên, không phân biệt nhãn tiếng Anh hay tiếng Việt gì cả, ví dụ: Thủ thuật Blogger, CSS, HTML, Thiết kế web, Tin nóng, …

Lưu Template.

Bước 3. Vào Page Elements. Thêm một tiện ích HTML/Javascrip và đặt đoạn code dưới đây vào phần Nội dung tiện ích.

<div id="rcp"></div>
<script src="http://huynh-nhat-ha.blogspot.com/feeds/posts/default?max-results=5&orderby=published&alt=json-in-script&callback=recentpoststhumbperlabel"></script>
<div style="clear:both;"></div>

Thay huynh-nhat-ha bằng tên blogspot của bạn. Điều chỉnh tham số max-results=5 để hiển thị số bài viết bạn muốn cho tiện ích.

Đơn giản hơn, bạn có thể gộp code ở các bước rồi đặt vào một tiện ích HTML/Javascript theo Bước 3, như sau:

<style type='text/css'>
Đặt code CSS ở Bước 1 tại đây
</style>

<script type='text/javascript'>
Đặt code Javascript ở Bước 2 tại đây
</script>

<div id="rcp"></div>
<script src="http://huynh-nhat-ha.blogspot.com/feeds/posts/default?max-results=5&orderby=published&alt=json-in-script&callback=recentpoststhumbperlabel"></script>
<div style="clear:both;"></div>

Chúc bạn thành công! :47)

More about →

Tiện ích Phim mới nhất cho blogspot về phim

Đối với các blogspot chuyên về phim, sau khi sử dụng thủ thuật tạo Readmore tự động riêng cho blog kiểu này thì thủ thuật cần thiết kế đến phải là tiện ích Phim mới nhất (Recent Videos/Recent Films).

Bạn có thể xem Demo cho tiện ích kiểu như vậy tại trang này.

Để cài đặt tiện ích này, bạn hãy thực hiện như sau.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML.

Đặt đoạn code sau đây vào trước thẻ </head>.

<style type='text/css'>
img.recent_thumb {
border:0 none;
float:left;
height:90px;
margin:0 10px 10px 0px;
width:120px;
}
img.recent_thumb:hover {
filter: alpha(opacity:0.7);
KHTMLOpacity: 0.7;
MozOpacity: 0.7;
-khtml-opacity:.70;
-ms-filter:&quot;alpha(opacity=70)&quot;;
-moz-opacity:.70;
filter:alpha(opacity=70);
opacity:.70;
}
.recent_video_title {
font-size:12px;
font-weight:bold;
margin-bottom:-15px;
padding-left:130px;
}

.recent_video_desc {
font-family:verdana;
font-size:10px;
line-height:15px;
margin-bottom:-10px;
padding-left:130px;
}
.recent_video_footer {
color:#999999;
font-family:verdana;
font-size:10px;
padding-left:130px;
}
.recent_posts_with_thumbs {
float: left;
width: 100%;
min-height: 70px;
margin: 5px 0px 5px 0px;
padding: 0;
font-size:12px;
}
ul.recent_posts_with_thumbs li {
background:transparent url(http://i1091.photobucket.com/albums/i393/Sc0ttyN/play2.png) no-repeat scroll 0 5px;
min-height:90px;
padding-bottom:10px;
padding-top:10px;
}
.recent_posts_with_thumbs a {
text-decoration:none;
}
.recent_posts_with_thumbs strong {
font-size:10px;
}
</style>

<script style="text/javascript">
//<![CDATA[
function showrecentpostswiththumbs(json) {
document.write('<ul class="recent_posts_with_thumbs">');
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length;k++){
if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){
var commenttext=entry.link[k].title;
var commenturl=entry.link[k].href;
}
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;break;
}
}
if("content"in entry){
var postcontent=entry.content.$t;
}
var vidid = postcontent.substring(postcontent.indexOf("http://www.youtube.com/watch?v=")+31,postcontent.indexOf("endofvid"));


try {thumburl='http://i2.ytimg.com/vi/'+vidid+'/default.jpg';}catch (error){
thumburl='http://goo.gl/aVYDz';
}
var postdate = entry.published.$t;
var cdyear = postdate.substring(0,4);
var cdmonth = postdate.substring(5,7);
var cdday = postdate.substring(8,10);
var monthnames = new Array();
monthnames[1] = "Jan";monthnames[2] = "Feb";monthnames[3] = "Mar";monthnames[4] = "Apr";monthnames[5] = "May";monthnames[6] = "Jun";monthnames[7] = "Jul";monthnames[8] = "Aug";monthnames[9] = "Sep";monthnames[10] = "Oct";monthnames[11] = "Nov";monthnames[12] = "Dec";
document.write('<li class="clearfix">');

if(showpostthumbnails==true)
document.write('<a href="'+ posturl + '"><img class="recent_thumb" src="'+thumburl+'"/></a>');
document.write('<div class="recent_video_title"><a href="'+posturl+'" target ="_top">'+posttitle+'</a></div><br>');
var textinside = postcontent.substring(postcontent.indexOf("[starttext]")+11,postcontent.indexOf("[endtext]"));
var re = /<\S[^>]*>/g;
postcontent = textinside.replace(re, "");


if (showpostsummary == true) {

if (postcontent.length < numchars) {
document.write('<div class="recent_video_desc">');
document.write(postcontent);
document.write('</div>');}
else {
document.write('<div class="recent_video_desc">');
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent + '...');
document.write('</div>');}
}

var towrite='';var flag=0;
document.write('<br><div class="recent_video_footer">');

if(showpostdate==true) {towrite=towrite+monthnames[parseInt(cdmonth,10)]+' '+cdday+' , '+cdyear;flag=1;}

if(showcommentnum==true)
{
if (flag==1) {towrite=towrite+' | ';}
if(commenttext=='1 Comments') commenttext='1 nhận xét';
if(commenttext=='0 Comments') commenttext='Chưa có nhận xét';
commenttext = '<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';
towrite=towrite+commenttext;
flag=1;
;
}

document.write(towrite);

document.write('</div></li>');
if(displayseparator==true)
if (i!=(numposts-1))
document.write('<hr size=0.5>');

}document.write('</ul>');

}
//]]>
</script>

Lưu Template.

Bước 2. Vào Page Elements. Trên sidebar thêm một tiện ích HTML/Javascript, đặt tiêu đề tiện ích là Phim mới nhất hoặc theo ý thích của bạn, ở phần nội dung tiện ích thì đặt vào bằng đoạn code bên dưới.

<script style="text/javascript">
var numposts = 5; // Thay số 5 bằng số bài viết muốn hiển thị
var showpostthumbnails = true; // Thay true bằng false nếu không muốn hiện thumbnail
var displaymore = true;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 50;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>
<div class="clear"/></div>

Nếu bạn muốn áp dụng tiện ích này cho một nhãn nào đó thì thay dòng được đánh dấu màu đỏ bằng dòng bên dưới.

<script src="/feeds/posts/default/-/Tên nhãn?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>

Thay Tên nhãn bằng nhãn mà bạn muốn áp dụng tiện ích.

Nguồn tham khảo: Xem >>

More about →

Tiện ích Recent Posts Today và Recent Posts Yesterday

Theo yêu cầu của bạn Blogphantich.com về tiện ích Posts Today và Posts Yesterday giống trang http://www.calculatedriskblog.com//. Tôi “ngâm cứu” và viết bài này để hướng dẫn tạo tiện ích gọi là Bài viết mới nhất hôm nay và hôm qua (Recent Posts Today - Recent Posts Yesterday). Script từ tiện ích này được tùy biến từ tiện ích Bài viết mới nhất dạng cơ bản mà chúng ta biết.

Bạn có thể xem Demo dưới đây.

Recent Posts Today

Recent Posts Yesterday

Để cài đặt tiện ích này, bạn hãy thực hiện như sau.

Đăng nhập Blogger, vào Design >> Page Elements. Trên phần sidebar thêm một tiện ích HTML/Javascript rồi đặt toàn bộ đoạn code dưới đây vào phần nội dung của tiện ích và bỏ trống tiêu đề tiện ích.

<script type="text/javascript">
//<![CDATA[
function show2dayrecentposts(json) {

var entry0 = json.feed.entry[0];
var postdate0 = entry0.published.$t;
var cdyear0 = postdate0.substring(0,4);
var cdmonth0 = postdate0.substring(5,7);
var cdday0 = postdate0.substring(8,10);
var cdhour0 = postdate0.substring(11,13);
var cdmin0 = postdate0.substring(14,16);

var poststoday = 1;
var postsyesterday = 0;
for (var j = 1; j < 24; j++) {
var entry1 = json.feed.entry[j];
var postdate1 = entry1.published.$t;
var cdday1 = postdate1.substring(8,10);
if (cdday0 == cdday1) {
poststoday++;
}
else {
if (postsyesterday == 0) var cdday2 = cdday1;
if (cdday1 == cdday2) {
postsyesterday++;
}
}
}
if (showposttoday == true) {
var numend = poststoday;
var numposts = poststoday;
}
else {
var numend = poststoday + postsyesterday;
var numposts = postsyesterday;
}

document.write('<ul>');
for (var l = 0; l < numposts; l++) {
var i = numend - l - 1;
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;

var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
posttitle = posttitle.link(posturl);
var readmorelink = "(more)";
readmorelink = readmorelink.link(posturl);
var postdate = entry.published.$t;
var cdyear = postdate.substring(0,4);
var cdmonth = postdate.substring(5,7);
var cdday = postdate.substring(8,10);
var cdhour = postdate.substring(11,13);
var cdmin = postdate.substring(14,16);
var cdampm = "AM";


var _mTime = parseInt(cdhour,10);

if (_mTime > 11) {
cdampm = "PM";
}
if (_mTime > 12) {
_mTime = _mTime - 12;
}

var _hr = _mTime.toString().substr(0, 2);

var postbold = 0;
var pll = '';
if ("category" in entry) {
for (var k = 0; k < entry.category.length; k++) {
pll = entry.category[k].term;
if (pll == 'mark') postbold = 1;
}
}

document.write('<li>');

if (postbold == 1) document.write('<font color="red" size="+2"><b>*</b></font>');
document.write(' at ' + _hr + ':' + cdmin + ' ' + cdampm + ' ');

document.write(posttitle);

document.write('</li>');
}
document.write('</ul>');

}
//]]>
</script>

<div class="today-rcposts">
<h2><span style="color:blue;font-size:14px;font-weight:bold">Recent Posts Today</span></h2>
<script type="text/javascript">
var showposttoday = true;
</script>
<script src="http://huynh-nhat-ha.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=show2dayrecentposts"></script>
<div class="clear"></div>
<h2><span style="color:brown;font-size:14px;font-weight:bold">Recent Posts Yesterday</span></h2>
<script type="text/javascript">
var showposttoday = false;
</script>
<script src="http://huynh-nhat-ha.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=show2dayrecentposts"></script>
</div>

Bạn cần thay huynh-nhat-ha bằng tên blogspot của bạn. Những phần được đánh dấu màu đỏ là phần bạn có thể tùy chỉnh được theo ý thích.

Nếu bạn muốn tiện ích chia thành hai cột, với phần bài viết mới nhất hôm nay nằm bên trái thì thay phần code nằm giữa 2 thẻ <div class="today-rcposts">, </div> bằng đoạn code dưới đây.

<table border=1 bgcolor=#f1f5f6 width=100%><th align="center" width=50%>Posts Today</th><th align="center">Posts Yesterday</th><tr><td>
<script type="text/javascript">
var showposttoday = true;
</script>
<script src="http://huynh-nhat-ha.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=show2dayrecentposts"></script></td><td>
<script type="text/javascript">
var showposttoday = false;
</script>
<script src="http://huynh-nhat-ha.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=show2dayrecentposts"></script></td></tr></table>

Chúc bạn thành công. :44)

More about →

Hiển thị bài viết mới nhất chạy marquee chiều ngang

Có nhiều kiểu tiện ích Bài viết mới nhất với những kiểu dáng và đặc điểm riêng biệt. Hôm nay tôi xin giới thiệu một kiểu tiện ích Bài viết mới nhất chạy marquee chiều ngang (Horizontal Marquee Recent Posts Widget) rất hữu ích cho blogspot. Tiện ích này hiển thị những bài viết mới nhất cho blogspot với kiểu trình chiếu chạy ngang, với đặc trưng tiết kiệm không gian web là một ưu điểm có thể nhìn thấy dễ dàng so với các kiểu tiện ích cùng loại.

Bạn có thể xem Demo dưới đây.

Để cài đặt tiện ích này, bạn chỉ cần Đăng nhập Blogger sau đó đặt toàn bộ đoạn code dưới đây vào phần nội dung của một tiện ích HTML/Javascript là OK.

<style type="text/css">
.feedmarquee a:link{
font-size: 11px;
text-decoration: none;
color:#fff;
}
.feedmarquee {
font-size: 12px;
color:#FEE405;
position:absolute;
background: #C0C0C0;
padding:2px;
width: 640px;
}
</style>

<script src="http://hacodeproject.googlecode.com/files/recentpostsscrollerha.js" type="text/javascript"></script>
<div class="feedmarquee">
<script type="text/javascript">
var nMaxPosts = 20;
var sBulletChar="-" ;
var nWidth;
var nScrollDelay = 155;
var sDirection="left";
var sOpenLinkLocation="p";
</script>
<script src="http://huynh-nhat-ha.blogspot.com/feeds/posts/default?alt=json-in-script&callback=RecentPostsScrollerha" type="text/javascript"> </script>
</div>

Trong đoạn code trên, bạn có thể điều chỉnh chiều rộng bố trí tiện ích tại tham số width: 640px, điều chỉnh số bài viết tối đa được trình chiếu tại tham số var nMaxPosts = 20 đồng thời cần thay huynh-nhat-ha bằng tên blogspot của bạn.

More about →

Tùy biến Bài viết mới nhất có ảnh đại diện không dùng Javascript

Sau khi đọc bài viết về tiện ích Bài viết mới nhất có ảnh đại diện sử dụng Blog List, bạn Itechplus có ý muốn bố cục tiện ích này theo kiểu: Bài viết đầu tiên có ảnh đại diện, tiêu đề và đoạn trích dẫn, còn những bài viết tiếp theo hiển thị dạng list (chỉ tiêu đề mà thôi). Tôi nhận thấy ý kiến này rất hay và bắt tay vào nghiên cứu ngay.

Theo cách tùy biến tiện ích Bài viết mới nhất theo bố cục ở trên thì phải dùng đến hai tiện ích Blog List. Tức là tiện ích Blog List 1 chỉ hiển thị duy nhất 1 bài viết (1 URL) gồm ảnh đại diện, tiêu đề bài viết và đoạn trích dẫn, còn tiện ích Blog List 2 hiển thị một số bài viết tiếp theo dưới dạng list tiêu đề bài viết. Tuy nhiên chúng ta cần biết rằng đối với tiện ích Blog List nếu áp dụng các URL cho chính blogspot của mình thì chỉ áp dụng được cho 1 tiện ích Blog List mà thôi. Nếu như vậy thì ý tưởng trên không thể hiện thực hóa được chăng?

Không. Rất may là tôi đã phát hiện ra một cách có thể khắc phục được trở ngại này. Đối với tiện ích Blog List 2, tôi sử dụng URL là dạng rút gọn bằng dịch vụ rút gọn URL của Google. Bằng cách này, mặc dù URL chính vẫn từ blogspot của mình nhưng qua dịch vụ rút gọn URL thì nó sẽ trở thành URL từ trang web khác cho nên sẽ áp dụng được cho tiện ích Blog List 2. Thế là khúc mắc đã được xử lý hoàn toàn và bây giờ chúng ta có thể bắt đầu cài đặt tiện ích này. Bạn có thể xem Demo dưới đây.

Bước 1. Tạo tiện ích Blog List 1.

Đăng nhập Blogger, vào Page Elements >> trên sidebar, nhấn Add a Gadget chọn Blog List (Danh sách Blog).

Tại mục Title, bạn hãy đề là Bài viết mới nhất.

Tick chọn vào các mục Title of most recent item, Snippet of most recent item, Thumbnail of most recent item.

Nhấn ADD TO LIST.

Sau đó dán vào mục Add by URL với địa chỉ sau đây:

http://huynh-nhat-ha.blogspot.com/feeds/posts/default/?start-index=1

Bạn cần thay huynh-nhat-ha bằng tên blogspot của bạn rồi nhấn SAVE để lưu tiện ích.

Bước 2. Tạo tiện ích Blog List 2.

Trước khi tạo tiện ích Blog List 2, bạn cần mở trang Goo.gl. Sau đó dán URL bên dưới (thay huynh-nhat-ha bằng tên blogspot của bạn) vào khung dán URL rồi nhấn Shorten để có URL rút gọn. Bạn copy URL rút gọn rồi lưu lại.

http://huynh-nhat-ha.blogspot.com/feeds/posts/default/?start-index=2

Tiếp tục rút gọn URL:

http://huynh-nhat-ha.blogspot.com/feeds/posts/default/?start-index=3

rồi đến

http://huynh-nhat-ha.blogspot.com/feeds/posts/default/?start-index=4

và

http://huynh-nhat-ha.blogspot.com/feeds/posts/default/?start-index=5

Cứ như thế cho đến khi nào bạn muốn đủ số lượng bài viết muốn hiển thị trên tiện ích thì dừng lại. Lúc này bạn có một list URL rút gọn đặt theo thứ tự ở trên.

Tiếp tục trên sidebar của Blogger, nhấn Add a Gadget chọn Blog List (Danh sách Blog).

Bạn không cần điều chỉnh gì ở mục Title, chỉ cần tick chọn Title of most recent item.

Nhấn ADD TO LIST. Bạn lần lượt Add tất cả các URL rút gọn theo thứ tự ở trên, xong rồi nhấn SAVE để lưu tiện ích.

Lúc này có thể thấy tiện ích BlogList1 có tiêu đề Bài viết mới nhất nằm ở dưới tiện ích BlogList2 có tiêu đề mặc định là My Blog List (Danh sách Blog của tôi). Việc cần làm là hoán đổi vị trí của 2 tiện ích này, bạn kéo tiện ích có tiêu đề My Blog List xuống dưới tiện ích có tiêu đề Bài viết mới nhất. Nhấn nút SAVE trên đầu thanh Navbar để lưu các bước thực hiện.

Bước 3. Vào Edit HTML, chọn Expand Widget Templates.

Dùng từ khóa BlogList1 (nhấn Ctrl +F) tìm đến đoạn code tương tự như sau.

<b:widget id='BlogList1' locked='false' title='Bài viết mới nhất' type='BlogList'>
<b:includable id='main'>

…. Phần nằm giữa này là code trọng tâm của tiện ích …

</b:includable>
</b:widget>

Ở đây bạn cần chú ý thẻ <b:includable id='main'> và thẻ </b:includable> chứa code trọng tâm của tiện ích, nói chung đoạn code nằm giữa 2 thẻ này rất dài. Việc bạn cần làm tiếp theo là thay đoạn code nằm giữa 2 thẻ đó bằng đoạn code dưới đây.

<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<!-- Recent Posts Widget without Javascript Styled by Huynh Nhat Ha -->
<div class='recentposts-ha' expr:id='data:widget.instanceId + &quot;_container&quot;'>
<ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'>
<b:loop values='data:items' var='item'>
<li>
<div class='RPcontent'>
<!-- ảnh đại diện float về bên trái -->
<div class='RPthumbnail'>
<b:if cond='data:item.itemThumbnail'>
<!-- nếu bài viết có hình ảnh thì dùng -->
<img class='RPifthumb' expr:src='data:item.itemThumbnail.url'/>
<b:else/>
<!-- nếu bài viết không có hình ảnh thì dùng ảnh riêng -->
<!-- ở đây ta đặt URL ảnh đại diện riêng -->
<img class='URL_ảnh đại diện_mặc định'/>
</b:if>
</div>
<!-- tiêu đề bài viết -->
<div class='RPtitle'>
<a expr:href='data:item.itemUrl' target='_blank'><data:item.itemTitle/></a>
</div>
<!-- đoạn trích dẫn bài viết -->
<div class='RPsummary'><data:item.itemSnippet/></div>
</div>
<div style='clear: both;'/>
</li>
</b:loop>
</ul>
</div>
<!-- End the widget styles -->
</div>

Bạn cần thay URL_ảnh đại diện_mặc định bằng URL đến ảnh đại diện mặc định cho trường hợp bài viết không có ảnh. Bạn có thể dùng ảnh riêng của bạn rồi upload lên chính Blogspot để lấy URL, hoặc bạn có thể dùng ảnh này.

Tiếp tục dùng từ khóa BlogList2 (nhấn Ctrl +F) tìm đến đoạn code tương tự như sau.

<b:widget id='BlogList2' locked='false' title='My Blog List' type='BlogList'>
<b:includable id='main'>

…. Phần nằm giữa này là code trọng tâm của tiện ích …

</b:includable>
</b:widget>

Ở đây bạn cần chú ý thẻ <b:includable id='main'> và thẻ </b:includable> chứa code trọng tâm của tiện ích. Việc bạn cần làm tiếp theo là thay đoạn code nằm giữa 2 thẻ đó bằng đoạn code dưới đây.

<!-- I just hide the title of the widget
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
yes it's hidden -->
<div class='widget-content'>
<div class='recentposts-ha2' expr:id='data:widget.instanceId + &quot;_container&quot;'>
<ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'>
<b:loop values='data:items' var='item'>
<li>
<div class='RPcontent2'>
<!-- tiêu đề bài viết có thuộc tính title là đoạn trích dẫn bài viết -->
<div class='RPtitle2'>
<a expr:href='data:item.itemUrl' expr:title='data:item.itemSnippet' target='_blank'><data:item.itemTitle/></a>
</div>
</div>
<div style='clear: both;'/>
</li>
</b:loop>
</ul>
</div>
</div>

Bước 4. Đặt đoạn code sau đây vào trước dòng ]]></b:skin>.

.recentposts-ha ul{list-style-type:none;margin:0;padding:0}
.recentposts-ha ul li{background-color:transparent;border-top:1px dotted #555;clear:both;list-style:none}
.recentposts-ha ul li:hover{background-color:#123}
.recentposts-ha .RPcontent{padding:5px}
.recentposts-ha .RPtitle{height:50px}
.recentposts-ha .RPtitle a{color:#5CB3FF;font-family:Arial;font-size:12px;font-weight:bold}
.recentposts-ha .RPtitle a:hover{color:#CDE;text-decoration:none}
.recentposts-ha .RPthumbnail{float:left;margin:0 5px 0 0}
.recentposts-ha img{height:50px;width:50px}
.recentposts-ha .RPsummary{clear:both;color:#999;font-family:Arial;font-size:12px;text-align:justify}
.recentposts-ha2 .RPcontent2{padding:5px}
.recentposts-ha2 ul{border-bottom:1px dotted #555;list-style-type:none;margin:0;padding:0}
.recentposts-ha2 ul li{background-color:transparent;border-top:1px dotted #555;clear:both;list-style:none}
.recentposts-ha2 ul li:hover{background-color:#123}
.recentposts-ha2 .RPtitle2 a{color:#5CB3FF;font-family:Arial;font-size:12px;font-weight:bold}
.recentposts-ha2 a:hover{color:#CDE;text-decoration:none}
#BlogList2 {margin-top:0px}
#BlogList2 h2 {display:none}

Lưu Template là OK. Chúc bạn thành công và hy vọng bạn hài lòng với tiện ích này. :44)

More about →

Tiện ích Bài viết mới nhất có ảnh đại diện không dùng Javascript

Lẽ ra lúc này tôi đã có thể nghỉ ngơi để chuẩn bị tất niên và đón tết Tân Mão, nhưng trước khi vui xuân, tôi cũng muốn tặng quý bạn đọc một món quà nhân dịp Tết cổ truyền của dân tộc Việt Nam. Món quà đó là tiện ích Bài viết mới nhất có ảnh đại diện không dùng Javascript (Recent Posts with Thumbnails Widget without Using Javascript).

Như các bạn biết thì để tạo một tiện ích Bài viết mới nhất có ảnh đại diện, chúng ta cần phải sử dụng đến Javascript để có thể tạo những tùy biến hoàn thiện cho tiện ích này. Tuy nhiên tôi có thể lợi dụng những tính năng sẵn có của Blogger để tạo ra tiện ích Bài viết mới nhất có ảnh đại diện không dùng Javascript, nhờ đó tiện ích được load nhanh hơn so với các tiện ích cùng dạng có sử dụng Javascript. Ở đây tôi sử dụng tiện ích BlogList (Danh sách Blog) của Blogger.

Bạn có thể xem Demo dưới đây.

Để tạo được tiện ích này, bạn cần đọc qua bài viết Tiện ích Bài viết mới nhất có ảnh đại diện sử dụng Blog List.

Bước 1. Trước tiên bạn hãy thực hiện theo bài viết nói trên. Sau đó vào Design >> Edit HTML chọn Expand Widget Templates.

Dùng từ khóa BlogList (nhấn Ctrl +F) tìm đến đoạn code tương tự như sau.

<b:widget id='BlogList1' locked='false' title='Bài viết mới nhất' type='BlogList'>
<b:includable id='main'>

…. Phần nằm giữa này là code trọng tâm của tiện ích …

</b:includable>
</b:widget>

Ở đây bạn cần chú ý thẻ <b:includable id='main'> và thẻ </b:includable> chứa code trọng tâm của tiện ích, nói chung đoạn code nằm giữa 2 thẻ này rất dài. Việc bạn cần làm tiếp theo là thay đoạn code nằm giữa 2 thẻ đó bằng đoạn code dưới đây.

<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<!-- Recent Posts Widget without Javascript Styled by Huynh Nhat Ha -->
<div class='recentposts-ha' expr:id='data:widget.instanceId + &quot;_container&quot;'>
<ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'>
<b:loop values='data:items' var='item'>
<li>
<div class='RPcontent'>
<!-- ảnh đại diện float về bên trái -->
<div class='RPthumbnail'>
<b:if cond='data:item.itemThumbnail'>
<!-- nếu bài viết có hình ảnh thì dùng -->
<img class='RPifthumb' expr:src='data:item.itemThumbnail.url'/>
<b:else/>
<!-- nếu bài viết không có hình ảnh thì dùng ảnh riêng -->
<!-- ở đây ta đặt URL ảnh đại diện riêng -->
<img class='RPnothumb' src='URL_ảnh đại diện_mặc định'/>
</b:if>
</div>
<!-- tiêu đề bài viết -->
<div class='RPtitle'>
<a expr:href='data:item.itemUrl' target='_blank'><data:item.itemTitle/></a>
</div>
<!-- đoạn trích dẫn bài viết -->
<div class='RPsummary'><data:item.itemSnippet/></div>
</div>
<div style='clear: both;'/>
</li>
</b:loop>
</ul>
</div>
<!-- End the widget styles -->
</div>

Bạn cần thay URL_ảnh đại diện_mặc định bằng URL đến ảnh đại diện mặc định cho trường hợp bài viết không có ảnh. Bạn có thể dùng ảnh riêng của bạn rồi upload lên chính Blogspot để lấy URL, hoặc bạn có thể dùng ảnh này.

Bước 2. Đặt đoạn code sau đây vào trước dòng ]]></b:skin>.

.recentposts-ha ul{border-bottom:1px dotted #555;list-style-type:none;margin:0;padding:0}
.recentposts-ha ul li{background-color:transparent;border-top:1px dotted #555;clear:both;list-style:none}
.recentposts-ha ul li:hover{background-color:#123}
.recentposts-ha .RPcontent{padding:5px}
.recentposts-ha .RPtitle{height:50px}
.recentposts-ha .RPtitle a{color:#5CB3FF;font-family:Arial;font-size:12px;font-weight:bold}
.recentposts-ha .RPtitle a:hover{color:#CDE;text-decoration:none}
.recentposts-ha .RPthumbnail{float:left;margin:0 5px 0 0}
.recentposts-ha img{height:50px;width:50px}
.recentposts-ha .RPsummary{clear:both;color:#999;font-family:Arial;font-size:12px;text-align:justify}

Lưu Template là OK.

Tùy biến: Nếu bạn muốn bố cục tiện ích này chỉ gồm tiêu đề bài viết, không có ảnh đại diện và đoạn trích dẫn, ngoài ra tiêu đề bài viết có thuộc tính title là đoạn trích dẫn bài viết (tức là khi rê con trỏ vào tiêu đề bài viết, bạn sẽ nhìn thấy nội dung đoạn trích dẫn bài viết), thì ở Bước 1, bạn dùng đoạn code dưới đây và ở Bước 2 bỏ đi đoạn code được đánh dấu màu đỏ.

<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<!-- Recent Posts Widget without Javascript Styled by Huynh Nhat Ha -->
<div class='recentposts-ha' expr:id='data:widget.instanceId + &quot;_container&quot;'>
<ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'>
<b:loop values='data:items' var='item'>
<li>
<div class='RPcontent'>
<!-- tiêu đề bài viết có thuộc tính title là đoạn trích dẫn bài viết -->
<div class='RPtitle'>
<a expr:href='data:item.itemUrl' expr:title='data:item.itemSnippet' target='_blank'><data:item.itemTitle/></a>
</div>
</div>
<div style='clear: both;'/>
</li>
</b:loop>
</ul>
</div>
<!-- End the widget styles -->
</div>

Hy vọng quý bạn đọc hài lòng với món quà tất niên này.

Happy New Year and Everything to Your Liking! :55)    :66)    :68)

More about →

Tiện ích Bài viết mới nhất có ảnh đại diện bản full

Tôi đã tạo một số kiểu tiện ích Bài viết mới nhất có ảnh đại diện. Bạn có thể dùng từ khóa Recent Posts tìm trên công cụ tìm kiếm của blog để lựa chọn tiện ích phù hợp cho blog của mình. Từ kiểu tiện ích Bài viết mới có ảnh đại diện bố trí cho các nhãn nằm ngang, tôi có điều chỉnh một vài điểm về code để cho ra lò tiện ích Bài viết mới nhất có ảnh đại diện phiên bản hoàn chỉnh (Recent Posts with Thumbnails Full Version by Huynh Nhat Ha). Phiên bản này hiển thị những bài viết mới nhất có ảnh đại diện, tiêu đề bài viết cùng với phần tóm tắt (snippet) bài viết.

Tiện ích này có thể áp dụng cho toàn bộ blog cũng như cho riêng bất kỳ một nhãn nào đó. Bạn có thể xem Demo dưới đây.

Bài viết mới nhất

Để cài đặt tiện ích, bạn hãy thực hiện như sau. Đăng nhập Blogger, vào Design >> Page Elements. Thêm một tiện ích HTML/JavaScript và đặt toàn bộ phần code dưới đây vào phần nội dung của tiện ích.

<style type="text/css">
#rcposts_full {}
.rcposts_hafull {float: left;font-size: 11px;height: 390px;margin: 0 10px;overflow: hidden;padding: 10px;width: 250px;}
.rcposts_hafull img {background-color: #555;float: left;height: 50px;margin: 0 8px 0 0;padding: 2px;width: 50px;}
.bottomline {border-bottom: 1px dotted #555;clear: both;margin-bottom: 5px;padding: 0 0 5px;}
.rcposts_hafull a.haclass {font-family: Arial !important; font-size: 11px !important; font-weight: normal !important;display: block;float: left;max-width: 205px;overflow: hidden;white-space: pre;}
</style>

<script type="text/javascript">
// Recent Posts with Thumbnails Full Version by Huynh Nhat Ha
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'';
}

function showrecentpostsfull(json) {
var output = "";
var outputinner= "";
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
if ("content" in entry) {
var postcontent = entry.content.$t;
} else
if ("summary" in entry) { var postcontent = entry.summary.$t; }
else var postcontent = "";
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent;
a = s.indexOf("<img");
b = s.indexOf("src=\"",a);
c = s.indexOf("\"",b+5);
d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
var trtd = "";
trtd += '<a href="' + posturl + '"><img src="' + img[i] + '"></a>';
trtd += '<a class="haclass" href="' + posturl + '">' + removeHtmlTag(posttitle,summaryTitle) + '…</a><br/>';
trtd += removeHtmlTag(postcontent,summaryPost);
trtd += ' ...<div class="bottomline"></div>';
outputinner += trtd;
j++;
}
output += '<div class="rcposts_hafull">';
output += outputinner;
output += '</div>';
document.write(output);
}
</script>

<script type="text/javascript">
imgr = new Array();
imgr[0] = "http://img524.imageshack.us/img524/6449/noimageb.png";
showRandomImg = true;
summaryPost = 50;
summaryTitle = 30;
numposts = 5; // Số bài viết hiển thị
</script>

<div id="rcposts_full">
</div>
<script src='http://huynh-nhat-ha.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostsfull'></script>
<div style="clear:both;"></div>

Trong đoạn code CSS chú ý tham số width: 250px;, điều chỉnh chiêu rộng phù hợp với chiều rộng phần sidebar là nơi thường đặt tiện ích này. Bạn có thể điều chỉnh số bài viết hiển thị (numposts = 5) và thay huynh-nhat-ha bằng tên blogspot của bạn. Lưu tiện ích là OK.

Nếu bạn muốn áp dụng tiện ích này cho một nhãn nào đó thì thay đoạn code được đánh dấu màu đỏ ở trên bằng đoạn code sau (và thay Tên nhãn bằng nhãn mà bạn muốn áp dụng tiện ích).

<script src="http://huynh-nhat-ha.blogspot.com/feeds/posts/default/-/Tên nhãn?
orderby=published&alt=json-in-script&callback=showrecentpostsfull">
</script>

More about →

Bài viết mới nhất có ảnh đại diện sử dụng Blog List

Các bạn đã biết một số kiểu tiện ích Bài viết mới nhất có ảnh đại diện mà tôi đã tạo ra và giới thiệu (bạn có thể tìm trên blog bằng cách tìm từ khóa Recent Posts trên công cụ tìm kiếm). Tuy nhiên có một kiểu tiện ích Bài viết mới nhất có ảnh đại diện mà bạn chưa bao giờ nghĩ đến, đó là sử dụng tiện ích Blog List sẵn có của Blogger. Tiện ích Blog List giúp liệt kê những blogspot mà bạn ưa thích và tiện ích này hiển thị bài viết mới nhất của những blogspot đó với phần Tiêu đề Blog, tiêu đề bài viết, phần tóm tắt bài viết và ảnh đại diện. Vậy tại sao chúng ta không sử dụng chức năng của tiện ích này để tạo ra tiện ích Bài viết mới nhất có ảnh đại diện. Trước khi viết bài giới thiệu này, mình đã test thành công và đặt tên tiếng Anh cho tiện ích là Recent Posts with Thumbnails Widget Using Blog List by Huynh Nhat Ha.

Tiện ích Bài viết mới nhất có ảnh đại diện sử dụng Blog List là kiểu tiện ích Bài viết mới nhất gọn nhẹ nhất, giúp trang cải thiện tốc độ load trang. Nếu bạn muốn cài đặt tiện ích này cho blogspot của mình thì hãy thực hiện theo các bước sau đây.

Đăng nhập Blogger, vào Page Elements >> Add a Gadget chọn Blog List.

Tại mục Title, bạn hãy đề là Bài viết mới nhất.

Tick chọn vào các mục Title of most recent item, Snippet of most recent item, Thumbnail of most recent item.



Nhấn ADD TO LIST.

Sau đó dán vào mục Add by URL với địa chỉ sau đây:

http://huynh-nhat-ha.blogspot.com/feeds/posts/default/?start-index=1

Bạn cần thay huynh-nhat-ha bằng tên blogspot của bạn. Nhấn Add rồi tiếp tục nhấn ADD TO LIST và dán vào URL sau đây.

http://huynh-nhat-ha.blogspot.com/feeds/posts/default/?start-index=2

Cứ như vậy lần lượt đến

http://huynh-nhat-ha.blogspot.com/feeds/posts/default/?start-index=3

rồi đến

http://huynh-nhat-ha.blogspot.com/feeds/posts/default/?start-index=4

và

http://huynh-nhat-ha.blogspot.com/feeds/posts/default/?start-index=5

cho đến khi nào bạn muốn đủ số lượng bài viết muốn hiển thị trên tiện ích Bài viết mới nhất thì dừng lại, rồi nhấn SAVE để lưu tiện ích.

Bước 2. Vào Edit HTML. Đặt trước dòng ]]></b:skin> với đoạn code bên dưới.

#BlogList1 .blog-title{
display:none;
}

Tác dụng của đoạn CSS này là ẩn đi tiêu đề Blog hiện trên Blog List để tạo dáng vẻ hoàn hảo như một tiện ích Bài viết mới nhất có ảnh đại diện chính hiệu.

Lưu Template là OK.

Hy vọng bạn hài lòng với kiểu tiện ích này.

More about →

Tiện ích Bài viết mới nhất với hiệu ứng accordion

Tiện ích Bài viết mới nhất rất cần thiết cho blogspot và tiện ích này cũng đã có nhiều biến thể với nhiều hiệu ứng. Ví dụ như tiện ích Bài viết mới nhất với hiệu ứng Spy.

Chúng ta đã biết hiệu ứng đàn xếp rất hữu ích trong thiết kế website qua bài viết này. Tôi có ý tưởng kết hợp tiện ích Bài viết mới nhất có ảnh đại diện với hiệu ứng đàn xếp để cho ra tiện ích gọi là Bài viết mới nhất có ảnh đại diện với hiệu ứng đàn xếp (Recent Posts with Thumbnails and Accordion Effect). :17)

Xem Demo.

Nếu bạn muốn cài đặt tiện ích này cho blogspot của mình thì hãy thực hiện theo các bước sau đây.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML.

Đặt đoạn code sau đây vào trước thẻ </head>.

<script src='http://hacodeproject.googlecode.com/files/jquery4accordion.js' type='text/javascript'/>
<style type='text/css'>
.accordion{width:300px;border-bottom:solid 1px #c4c4c4}
.accordion h3{background:#e9e7e7 url(http://bit.ly/fCBbB0) no-repeat right -51px;padding:7px 15px;margin:0;font:bold 13px Arial,Tahoma,sans-serif;border:solid 1px #c4c4c4;border-bottom:none;cursor:pointer;color:blue;text-align:justify}
.accordion h3:hover{background-color:#e3e2e2}
.accordion h3.active{background-position:right 5px}
.accordion p{background:#f7f7f7;margin:0;line-height:1.5em;padding:10px 15px 20px;border-left:solid 1px #c4c4c4;border-right:solid 1px #c4c4c4;text-align:justify}
</style>
<script type='text/javascript'>
$(document).ready(function(){

$(&quot;.accordion h3:first&quot;).addClass(&quot;active&quot;);
$(&quot;.accordion p:not(:first)&quot;).hide();

$(&quot;.accordion h3&quot;).click(function(){
$(this).next(&quot;p&quot;).slideToggle(&quot;slow&quot;)
.siblings(&quot;p:visible&quot;).slideUp(&quot;slow&quot;);
$(this).toggleClass(&quot;active&quot;);
$(this).siblings(&quot;h3&quot;).removeClass(&quot;active&quot;);
});

});
</script>

Lưu Template.

Trong phần CSS ở trên, chú ý tham số width:300px, bạn cần điều chỉnh chiều rộng tương đương với chiều rộng tại vị trí đặt tiện ích.

Bước 2. Vào Page Elements, thêm một tiện ích HTML/JavaScript và đặt toàn bộ đoạn code dưới đây vào phần Nội dung của tiện ích.

<script type='text/javascript'>
imgr = new Array();
imgr[0] = "http://bit.ly/hGWr7r";
showRandomImg = true;

jimgwidth = 50;
jimgheight = 50;
jfntsize = 11;
jacolor = "#000";
jasize = "2";
jaBold = true;

jtext = "";
jshowPostDate = false;

sumtitle = 28;
jsummaryPost = 90;
numposts = 7;
label = "Thủ thuật Blogger";
home_page = "http://huynh-nhat-ha.blogspot.com/";
</script>

<div class="accordion">
<script src="http://hacodeproject.googlecode.com/files/accordion-recentposts4allposts.js" type="text/javascript"></script>
</div>

Nếu bạn sử dụng tiện ích Bài viết mới nhất với hiệu ứng đàn xếp cho một nhãn nào đó thì thay file js được đánh dấu màu đỏ thành như sau:

http://hacodeproject.googlecode.com/files/accordion-recentposts4label.js

Và đặt tên nhãn ở dòng label = "Thủ thuật Blogger";

Bạn cần phải thay huynh-nhat-ha thành tên blogspot của bạn nữa nhé. :37)

More about →

Bài viết mới nhất có ảnh đại diện cho nhiều nhãn nằm ngang

Bất kỳ blogger nào làm quen với blogspot một thời gian hẳn biết qua tiện ích Bài viết mới nhất có ảnh đại diện khá phổ biến và cần thiết cho bất kỳ một blogspot nào. Tôi cũng đã tạo một số code tùy biến cho tiện ích này với những đặc trưng khác biệt. Thông thường tiện ích Bài viết mới nhất có ảnh đại diện chỉ dành cho toàn bộ bài viết trên blog hoặc chỉ dành cho 1 nhãn nào đó mà thôi. Tôi từng có ý tưởng bố trí tiện ích này gồm nhiều cột theo chiều ngang ở bài viết này.

Tôi tiếp tục nảy ra ý tưởng bố trí tiện ích này cho nhiều nhãn khác nhau xếp theo chiều nằm ngang (Recent posts with Thumbnails for Horizontal Labels), ý tưởng mà bạn chưa từng thấy trong cộng đồng Blogger. :44)

Bạn có thể xem Demo dưới đây.

Tiện ích này thích hợp khi đặt ở cuối bài viết hoặc ở trên phần Footer của Template.
Để làm được điều này, bạn hãy thực hiện theo các bước sau.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML.

Đặt đoạn code dưới đây vào trước thẻ </head>.

<script type="text/javascript">
// Recent Posts with Thumbnails for Horizontal Labels Widget by Huynh Nhat Ha
imgr = new Array();
imgr[0] = "http://bit.ly/hGWr7r";
showRandomImg = true;
summaryPost = 60;
summaryTitle = 34;
numposts = 5;
var getlabels = 0;
labelname = new Array("Nhãn 1","Nhãn 2");
labeltitle = new Array("Nhãn 1","Nhãn 2");
function removeHtmlTagLabels(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'';
}

function showrecentpostslabels(json) {
var output = "";
var outputinner= "";
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
if ("content" in entry) {
var postcontent = entry.content.$t;
} else
if ("summary" in entry) { var postcontent = entry.summary.$t; }
else var postcontent = "";
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent;
a = s.indexOf("<img");
b = s.indexOf("src=\"",a);
c = s.indexOf("\"",b+5);
d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
var trtd = "";
trtd += '<a href="' + posturl + '"><img src="' + img[i] + '"></a>';
trtd += '<a class="tlabel" href="' + posturl + '">' + removeHtmlTagLabels(posttitle,summaryTitle) + '…</a><br/>';
trtd += removeHtmlTagLabels(postcontent,summaryPost);
trtd += ' ...<div class="bottomline"></div>';
outputinner += trtd;
j++;
}
output += '<div class="rcposts_horizontal">';
output += '<h3>' + labeltitle[getlabels] + '</h3>';
output += outputinner;
output += '</div>';
document.write(output);
getlabels ++;
}
</script>

<style>
#rcposts_label {}
.rcposts_horizontal {float: left;font-size: 11px;height: 390px;margin: 0 10px;overflow: hidden;padding: 10px;width: 250px;}
.rcposts_horizontal h3 {background-color: #555;border-bottom: 1px solid #888;color: #BBB;font-family: Arial;font-size: 13px;font-weight: bold;margin: 0 0 10px;padding: 5px 0;text-align: center;text-case: sentence;}
.rcposts_horizontal img {background-color: #555;float: left;height: 50px;margin: 0 8px 0 0;padding: 2px;width: 50px;}
.bottomline {border-bottom: 1px dotted #555;clear: both;margin-bottom: 5px;padding: 0 0 5px;}
.rcposts_horizontal a.tlabel { font-family: Arial !important; font-size: 11px !important; font-weight: normal !important;display: block;float: left;max-width: 205px;overflow: hidden;white-space: pre;}
</style>

Lưu Template.

Trong đoạn code trên bạn cần thay đổi tên nhãn (ví dụ: Thủ thuật Blog, Thủ thuật Blogger, …) tại các dòng

labelname = new Array("Nhãn 1","Nhãn 2");
labeltitle = new Array("Nhãn 1","Nhãn 2");

Bạn có thể thay đổi số bài viết hiển thị ở dòng numposts = 5.

Tiện ích này mặc định hiển thị cho 2 nhãn với bề rộng không gian hiển thị tiện ích tốt nhất là 600px, bạn cần điều chỉnh tham số width: 250px cho phù hợp với vùng không gian mà bạn muốn hiển thị tiện ích. Nếu muốn thêm nhãn thì điều chỉnh ở 2 dòng js ở trên.

Bước 2. Đặt đoạn code dưới đây vào một tiện ích HTML/JavaScript tại nơi muốn hiển thị tiện ích Bài viết mới nhất có ảnh đại diện.

<div id="rcposts_label">
</div>
<script src='http://huynh-nhat-ha.blogspot.com/feeds/posts/default/-/Nhãn 1?max-results=5&orderby=published&alt=json-in-script&callback=showrecentpostslabels'></script>
<script src='http://huynh-nhat-ha.blogspot.com/feeds/posts/default/-/Nhãn 2?max-results=5&orderby=published&alt=json-in-script&callback=showrecentpostslabels'></script>
<div style="clear:both;"></div>

Nếu bạn muốn đặt tiện ích ở cuối bài viết thì khi chỉnh sửa Template, chọn Mở rộng mẫu tiện ích (Expand Widget Templates) và đặt đoạn code dưới đây vào sau dòng <div class='post-footer'> hoặc vào trước dòng <div class='post-footer-line post-footer-line-1'> hoặc dòng <div class='post-footer-line post-footer-line-3'> hoặc dòng <div class='post-footer-line post-footer-line-3'>.

<div id="rcposts_label">
</div>
<script src='http://huynh-nhat-ha.blogspot.com/feeds/posts/default/-/Nhãn 1?max-results=5&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentpostslabels'></script>
<script src='http://huynh-nhat-ha.blogspot.com/feeds/posts/default/-/Nhãn 2?max-results=5&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentpostslabels'></script>
<div style="clear:both;"></div>

Bạn cần thay huynh-nhat-ha thành tên blogspot của bạn và thay tên nhãn tương ứng với phần javascript ở Bước 1.

Chú ý: Nếu bạn đặt tiện ích này vào một tiện ích HTML/JavaScript thì bạn có thể đặt chung code ở Bước 1 vào trước code ở Bước 2 để dễ quản lý. Nếu bạn đặt code ở Bước 1 vào trước thẻ </head> mà gặp lỗi trong Template thì bạn đặt toàn bộ phần code giữa 2 thẻ <script type="text/javascript">, </script> (ở Bước 1) vào Notepad rồi lưu file với tên rcplabel.js, sau đó upload lên host rồi đặt code theo kiểu như sau vào trước thẻ </head> trong Template.

<script src="http://diachiwebhost.com/rcplabel.js" type="text/javascript"></script>

More about →

Tiện ích Bài viết mới nhất có ảnh đại diện

Lấy cảm hứng từ tiện ích Bài viết mới nhất có ảnh đại diện (Recent Posts with Thumbnail widget) đặt ở cuối bài viết, tôi điều chỉnh một chút về code để tạo ra tiện ích Bài viết mới nhất có ảnh đại diện đặt trên sibebar hoặc lowerbar. Tiện ích này hiển thị những bài viết mới nhất cho toàn blog hoặc cho một nhãn nào đó gồm ảnh đại diện và tiêu đề bài viết với hiệu ứng đổi màu khi rê chuột vào liên kết bài viết.

Xem Demo.

Để cài đặt tiện ích này, bạn chỉ cần đặt toàn bộ đoạn code dưới đây vào một tiện ích HTML/JavaScript là OK.

<script type="text/javascript">
// Recent Posts with Thumbnails widget by Huynh Nhat Ha
function eliminatetags(cual,longitud){
var summary = cual.split("<");
for(var i=0;i<summary.length;i++){
if(summary[i].indexOf(">")!=-1){
summary[i] = summary[i].substring(summary[i].indexOf(">")+1,summary[i].length);
}
}
summary = summary.join("");
summary = summary.substring(0,longitud-1);
return summary;
}

function showrecentposts(json) {
var numposts = 12;
var entry, posttitle,posturl,postimg,postcontent,postcategory,postdate;
var output;
for (var i = 0; i < numposts; i++) {
entry = json.feed.entry[i];
posttitle = entry.title.$t;
if (i == json.feed.entry.length) { break; }
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
if ("media$thumbnail" in entry) {
postimg = entry.media$thumbnail.url;
} else {
postimg = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX2pTVOOMebPYEbhtb4KG3Jmn5XHN7hGAbe5GypPkryMcD4cLpHxf6MEPAc0Fkb_A_LqORlxIK5Mzp0qWK5feC1_Xiuure3fKQePYZy4MWJp4PBY5GocawygbcS78S53G6SSWgpbR3BK3v/s1600/sumpostsnoimage.png";
}
output = "<div class='recent_summary3'>";
output += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
output += "<h6><a href='" + posturl + "' target='_blank'>" + posttitle + "</a></h6>";
output += "</div>";
document.write(output);
}
document.write('');
}
</script>
<style type="text/css">
.recent_summary3 {border:1px solid #555;float:left;height:55px;margin:1px;padding:5px;width:250px;}
.recent_summary3 a {color:#a52a2a !important;display:block;font-size:11px !important;font-weight:normal !important;}
.recent_summary3 img {height:46px;width:46px;float:left;}
.recent_summary3 h6 {float:right;height:45px;margin:0;width:180px;}
.recent_summary3 a:hover {color:#ffffff !important;display:block;font-size:11px !important;font-weight:normal !important;}
.recent_summary3:hover {background-image:-moz-linear-gradient(100% 100% 90deg, #338, #33F);background-image: -webkit-gradient(linear, left bottom, left top, from(#338), to(#33F));filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF3333FF', EndColorStr='#FF333388');border:1px solid #33F;}
</style>
<script src="http://huynh-nhat-ha.blogspot.com/feeds/posts/default?max-results=7&orderby=published&alt=json-in-script&callback=showrecentposts"></script>
<div style="clear:both;"></div>

Chú ý đoạn CSS ở trên sử dụng cho sidebar có bề rộng lớn hơn 250px, bạn cần chỉnh các tham số width:250px và width:180px cho phù hợp với bề rộng sidebar trong blogspot của bạn. Điều chỉnh số trong dòng max-results=7 để hiển thị số bài viết được hiển thị trong tiện ích. Nếu muốn sử dụng tiện ích cho một nhãn nào đó thì sử dụng code:

<script src="http://huynh-nhat-ha.blogspot.com/feeds/posts/default/-/Label Name?max-results=7&orderby=published&alt=json-in-script&callback=showrecentposts"></script>

Thay Label Name bằng tên nhãn và đừng quên thay huynh-nhat-ha thành tên blogspot của bạn nữa nhé.

More about →