Tiện Ích "Bài Viết Liên Quan" Theo Nhãn Có Hiệu Ứng Mô Tả Khi Rê Chuột

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/AVvXsEgu5_omgYh8D9ZD18UL9qeQ4cY69iCfwY_DJJzRiHzdb7wD0EFe2Jl-zpJAO1XBAXgJPrfQIEMntNPyNEqltxMQ881pIOSNfYVQf9YijRPILM7TaBoSONKD-EOh00a7FjDoTwLaXEu7TVA/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://www.vietcons.info&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://www.vietcons.info"; : 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>