Tiện ích "Bài viết liên quan" theo nhãn có hiệu ứng mô tả khi rê chuột cho blogger

Nhân dịp thay đổi themes cho Thủ thuật blog, xin giới thiệu với các bạn một số thủ thuật mà mình đã chọn lọc để áp dụng cho blog này.
Trước tiên là thủ thuật tạo tiện ích bài viết liên quan cho blogspot, liệt kê theo từng nhãn và có hiệu ứng mô tả chi tiết khi rê chuột đến link bài viết, được hướng dẫn bởi Thủ thuật blog.

Bạn có thể xem trước hiệu ứng như hình dưới hoặc ngay trên blog này.

Trình tự công việc như sau:
1 - Đăng nhập Blogger, vào Template → Edit HTML → Proceed → Expand Widget Templates.

2 - Tìm đến đoạn mã </head> và chèn đoạn code dưới đây vào ngay trước nó:

<style type='text/css'>    
.mota-desc{     
position: relative;     
z-index: 0;     
text-decoration:none;     
}     
.mota-desc:hover{     
background-color: transparent;     
z-index: 50;     
}     
.mota-desc span{     
position: absolute;     
background-color: #ffffff;     
padding: 5px;     
left: -1000px;     
border: 1px solid #666;     
visibility: hidden;     
color: black;     
text-decoration: none;     
}     
.mota-desc span img{     
border-width: 0;     
padding: 2px;     
}     
.mota-desc:hover span{     
padding:5px;     
visibility: visible;     
top: 20px;     
left:70px;     
width:250px;     
background:#ddd;     
text-align: justify;     
}     
#related-posts {     
padding-top:40px;     
}     
#related-posts a {     
text-decoration : none;     
}     
#related-posts a:hover {     
text-decoration : none;     
}     
</style>     
<script language='JavaScript'>     
imgr = new Array();     
imgr[0] = &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe8IvuxrXJoEWrmal5C4rt0es7QclWx62LVg8ODhcLD7IEvp2EvNhwAL2hOc4xC9OIHpQvFlnfcdyJtDk4i3R41LwSSgIQSsh1havMM7kNW8qHaSnHzi9-KN-YcMGqJspZibYquc6ZdPI/s218/cuAnhcuEm_Logo_3D_218px.png&quot;;    
showRandomImg = true;     
imgwidth = 60;     
imgheight = 60;     
fntsize = 12;     
acolor = &quot;#555&quot;;     
aBold = true;     
motacolor = &quot;#f00&quot;;     
text = &quot;Nhận xét&quot;;     
showPostDate = true;     
summaryPost = 150;     
summaryFontsize = 12;     
summaryColor = &quot;#000&quot;;     
icon2 = &quot; &#187; &quot;;     
numposts = 5;     
home_page = &quot;http://thu-thuatblog.blogspot.com&quot;;    
</script>     
<script type='text/javascript'>     
//<![CDATA[     
function removeHtmlTag(strx,chop){     
    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);     
        }     
    }     
    s =  s.join("");     
    s = s.substring(0,chop-1);     
    return s;     
}     
function showrelatedposts(json) {     
    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 pcm;     
        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;     
              }     
        }     
        for (var k = 0; k < entry.link.length; k++) {     
              if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {     
                pcm = entry.link[k].title.split(" ")[0];     
                break;     
              }     
        }     
        if ("content" in entry) {     
              var postcontent = entry.content.$t;}     
        else     
        if ("summary" in entry) {     
              var postcontent = entry.summary.$t;}     
        else var postcontent = "";     
        postdate = entry.published.$t;     
    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;     
    cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';     
    var month = [1,2,3,4,5,6,7,8,9,10,11,12];     
    var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];     
    var day = postdate.split("-")[2].substring(0,2);     
    var m = postdate.split("-")[1];     
    var y = postdate.split("-")[0];     
    for(var u2=0;u2<month.length;u2++){     
        if(parseInt(m)==month[u2]) {     
            m = month2[u2] ; break;     
        }     
    }     
   
 var daystr = (showPostDate) ? '<i><font color="'+acolor+'">
 - ('+day+ ' ' + m + ' ' + y + ')</font></i>' : "";     
posttitle = (aBold) ? "<b>"+posttitle+"</b>" : posttitle;     
   
 var trtd = '<img 
src="http://farm3.static.flickr.com/2426/3638176588_31366a6822_o.gif"/>
 <a class="mota-desc" href="'+posturl+'" style="color:'+acolor+'; 
font-size:'+fntsize+'px;">'+posttitle+'<span><div 
style="color:'+motacolor+';">'+posttitle+' </div>'+cmtext+ ' ' +
 daystr + ' <br/><img src="'+img[i]+'" style="float:left; 
border: #ccc 1px solid; padding:2px; margin-right:4px;" 
width="'+imgwidth+'" 
height="'+imgheight+'"/>'+icon2+removeHtmlTag(postcontent,summaryPost)+'...</span></a>
 <br/>';     
    document.write(trtd);     
    j++;     
}     
}     
//]]>     
</script>

Trong đoạn code này, lưu ý:
imgwidth = 60; , imgheight = 60; : kích thước ảnh thumbnail sẽ hiển thị trong phần mô tả
fntsize = 12; : size chữ của tiêu đề bài viết
acolor = "#555"; : màu của tiêu đề bài viết
motacolor = "#f00"; : màu của tiêu đề bài viết trong phần mô tả
summaryPost = 150; : số kí tự hiển thị trong phần mô tả bài viết
summaryFontsize = 12; : size chữ của phần mô tả
summaryColor = "#000"; : màu chữ của phần mô tả
numposts = 5; : số bài viết sẽ hiển thị trong list các bài liên quan của mỗi nhãn. Chú ý: giá trị này phải chỉnh bằng với giá trị max-results=5 ở bước 3.
home_page = "http://thu-thuatblog.blogspot.com"; : thay bằng địa chỉ URL của blog bạn

3 - Tiếp tục tìm đoạn code: <data:post.body/>. Nếu có nhiều hơn 1 code như thế thì chọn cái thứ nhất để chèn đoạn code dưới đây ngay sau nó:

<b:if cond='data:blog.pageType == &quot;item&quot;'>    
<div id='related-posts'>     
<font face='Arial' size='3'><b>Bài viết liên quan : </b></font><br/>     
<b:loop values='data:post.labels' var='label'><b>Thư mục : </b><font color='#FF0000'><data:label.name/></font><br/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>     
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?max-results=5&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrelatedposts&quot;'
 type='text/javascript'/>     
</b:if>     
</b:loop>     
</div>     
</b:if>