netoops blog
Trang này chỉ copy lại để làm tài liệu cho mình thôi: Nếu có bài của bạn, thì xin bỏ qua. Cảm ơn.
Showing posts with label Related post. Show all posts
Showing posts with label Related post. Show all posts

Tuesday, 22 January 2019

Tiện Ích Bài Viết Liên Quan Mới Nhất Cho Nhãn Trên Sidebar


Ý tưởng khi xem một bài viết trong nhãn bất kỳ thì tiện ích Bài viết mới nhất xuất hiện gồm những bài mới đăng trong nhãn đó, là một ý tưởng khá thú vị. Thực ra ý tưởng này mình đã nghĩ đến khá lâu và đã từng bước tạo code và thử nghiệm. Gần đây quá trình thử nghiệm đã tới giai đoạn cuối cùng với những dấu hiệu thành công như ý muốn, cũng đúng vào lúc tác giả Lee Peace đã nhắc đến ý tưởng này và yêu cầu mình hiện thực hóa xem có được không. Tiện ích này mình gọi tên là tiện ích Bài viết liên quan mới nhất cho nhãn trên Sidebar (Recent and Related Posts for Label on Sidebar). Trên tiện ích này, mình tạo thêm phân trang có bản (Prev, Next) để có thể xem tất cả các bài viết trong nhãn một cách dễ dàng. 


Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Page Elements. Thêm một tiện ích HTML/Javascript, đặt tên tiện ích là Bài viết liên quan mới nhất rồi dán vào phần nội dung tiện ích bằng đoạn code sau đây (Lưu ý mình đã chú ý script để các bạn có thể hiểu tường tận hơn, có thể tùy biến CSS theo ý thích của bạn). 

<script type="text/javascript">
// Recent and Related Posts for Label on Sidebar widget by www.thuthuatblogger.info
var post_per_page = 5; // thiết lập số bài viết hiển thị mỗi trang
var post_snippet = 70; // thiết lập số ký tự tóm tắt bài viết
var homepage = "http://huynh-nhat-ha.blogspot.com"; // đặt địa chỉ trang chủ của bạn
var img_default = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkS2sp8HtKT-dfJWozqiNv5sjHBBIaXf6aLxhhBPW3rhKm43G-HAOXBP1aIP0EyEd9Ru43sCVh7guYLMv6t7GIRpN-6H7CKectd_LLcg8lPJkyJprk6qfiXVaYfk2AxzP6ZuInc89bfUQ/s1600/recentpostnothumb.png"; // thiết lập URL hình mặc định

var pr_flagfirst = 0;
var url_prev, url_next;

// chức năng tạo tóm tắt bài viết
function removeHtmlTag(strx,chop){
var summary = strx.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,chop-1);
return summary;
}

// chức năng tạo biến
function showpagelabel(json) {
var entry, posttitle, posturl, postimg, postcontent;
var str_out = "";

// tìm URL phân trang
for (var k = 0; k < json.feed.link.length; k++) {
if (json.feed.link[k].rel == 'previous') {

// đây là trang trước
url_prev = json.feed.link[k].href;
}
if (json.feed.link[k].rel == 'next') {
// đây là trang sau
url_next = json.feed.link[k].href;
}
}

// đọc và xác định bài viết
for (var i = 0; i < post_per_page; i++) {
// nếu không có thì kết thúc lệnh
if (i == json.feed.entry.length) { break; }

entry = json.feed.entry[i];

// đây là tiêu đề bài viết
posttitle = entry.title.$t;
// tìm URL bài viết
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {

// lưu trữ nó
posturl = entry.link[k].href;
break;
}
}

// tìm nội dung bài viết và lưu trữ nó
if ("content" in entry) {
postcontent = entry.content.$t;
} else if ("summary" in entry) {
postcontent = entry.summary.$t;
} else {
postcontent = "";
}

// tìm ảnh đại diện hoặc sử dụng ảnh mặc định
if ("media$thumbnail" in entry) {
postimg = entry.media$thumbnail.url;
} else {
postimg = img_default;
}

// kết thúc đọc, tạo code HTML
str_out += "<div class='pagi_label'>";
str_out += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
str_out += "<h6><a href='" + posturl + "' target='_blank'>" + posttitle + "</a></h6>";
str_out += "<p>" + removeHtmlTag(postcontent,post_snippet) + " ...</p>";
str_out += "</div>";
}

// kết thúc lệnh và viết kết quả
document.getElementById("Sidebar_Label").innerHTML = str_out;
// tạo phần phân trang
str_out = "";
// nếu có trang trước, tạo link nhưng chỉ có text
if(url_prev) {
str_out += "<a href='javascript:navi_pagi_label(-1);' class='previous'>Prev</a>";
} else {
str_out += "<span class='disabled previous'>Prev</span>";
}

// nếu có trang sau, tạo link nhưng chỉ có text
if(url_next) {
str_out += "<a href='javascript:navi_pagi_label(1);' class='next'>Next</a>";
} else {
str_out += "<span class='disabled next'>Next</span>";
}

// tạo link cho trang đầu
str_out += "<a href='javascript:navi_pagi_label(0);' class='first'>First</a>";
// viết code
document.getElementById("PR_Label_Sidebar").innerHTML = str_out;
}

// chức năng tạo địa chỉ feed sẽ đọc
function navi_pagi_label(direction){
var p, parameters;
if(direction==-1) {

// trang trước
p = url_prev.indexOf("?");
parameters = url_prev.substring(p);
} else if (direction==1) {

// trang sau
p = url_next.indexOf("?");
parameters = url_next.substring(p);
} else {

// trang đầu
parameters = "?start-index=1&max-results=" + post_per_page + "&orderby=published&alt=json-in-script"
}
parameters += "&callback=showpagelabel";

include_script(parameters);
}

// đây là chức năng load script động
function include_script(parameters) {
// nếu không phải lần đầu tiên thì loại script trên
if(pr_flagfirst==1) {remover_script();}
// xóa mọi thứ và đặt một dòng text hoặc ảnh load
document.getElementById("Sidebar_Label").innerHTML = "<div id='loading_script'></div>";
document.getElementById("PR_Label_Sidebar").innerHTML = "";

// đây là lưu trữ feed
var archive_feeds = homepage + "/feeds/posts/default/-/" + label_Related + parameters;
// load và cho chạy
var nouvo = document.createElement('script');
nouvo.setAttribute('type', 'text/javascript');
nouvo.setAttribute('src', archive_feeds);
nouvo.setAttribute('id', 'LABELTEMPORAL');
document.getElementsByTagName('head')[0].appendChild(nouvo);
pr_flagfirst = 1;
}

// đây là chức năng loại bỏ script đã được load trước
function remover_script() {
var that = document.getElementById("LABELTEMPORAL");
var father = that.parentNode;
father.removeChild(that);
}

// khi load trang thì bắt đầu chức năng
onload=function() { navi_pagi_label(0); }
</script>
<style type="text/css">
#Sidebar_Label {margin: 0 auto;width:100%}
.pagi_label {background-color: #ffffff;border-bottom: 1px dashed #101921;height: 72px;margin: 5px 0;padding: 5px;width: 300px;}
.pagi_label img {float: left;height: 70px;padding:1px;margin: 0 5px 3px;width: 70px;}
.pagi_label h6, .pagi_label h6 a {margin:0;font-size:12px !important;font-weight:normal !important;color:#069}
.pagi_label:hover {-moz-box-shadow: 0px 0px 60px #505961 inset;}
.pagi_label p {font-size:12px;padding:0 3px 3px}
#loading_script {color:#888;font-family:Century Gothic;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444; background: #ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgREGYfAdhZnSZPaSA5HhKJqogahNlnKaf9IUqPJrahc4IBhQcOPvMh1WXsyaMZNudauWGdb_BLVxbCnQ_0BBhIfTqoQDOvOQn6xg6_IipLXNLNSniZsHOBGWHLpzPzK3JU0AGkJMkp7q0/) no-repeat 50% 50%; height:489px; width:100%}
#PR_Label_Sidebar {background-color: #ffffff;color: #BBB;font-family: Tahoma;font-size: 18px;text-align: center;margin:0 auto;width:100%}
#PR_Label_Sidebar a {color: #BBB !important;font-family: Tahoma !important;font-size: 18px !important;font-weight: normal !important;padding: 5px 10px;display:block;}
#PR_Label_Sidebar a:hover {color: #069 !important;}
#PR_Label_Sidebar span {padding: 5px 10px;}
#PR_Label_Sidebar span.disabled {color: #666 !important;}
#PR_Label_Sidebar .next {float:right;}
#PR_Label_Sidebar .previous {float:left;}
#PR_Label_Sidebar .first {text-align:center;}
</style>
<div id="Sidebar_Label"></div>
<div id="PR_Label_Sidebar"></div>
 


Bước 2. Vào Edit HTML--> chọn Expand Wiget Templates.
Dùng (F3) tìm từ khóa Bài viết liên quan mới nhất mà bạn mới đặt tên cho Widget của tiện ích rồi thay nó thành như sau (phần đánh dấu màu đỏ là phần thêm vào): 
Chú ý : HTML1 : Giả định ID Widget bạn là HTML1

<b:widget id='HTML1' locked='false' title='Bài viết liên quan mới nhất' type='HTML'>
<b:includable id='main'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- 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'>
<data:content/>
</div>

<b:else/>
<style>#HTML1 {display: none;}</style>
</b:if>
</b:includable>
</b:widget>
 


Bước 3. Dùng các từ khóa như: <div class='post-footer'>, <div class='post-footer-line post-footer-line-1'> hoặc <div class='post-footer-line post-footer-line-2'> tìm đến đoạn code XML liên quan đến nhãn rồi thay nó bằng đoạn code bên dưới (phần đánh dấu màu đỏ là phần được thêm vào): 

<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<script>var label_Related=&quot;<data:label.name/>&quot;;</script>

<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>
</span>



Lưu Template là hoàn thành bạn nhé.

Tuesday, 22 January 2013

Bài Đăng Ngẫu Nhiên Theo Chiều Ngang,Dọc




Bây giờ ta bắt đầu:
1. Đăng nhập blog
2. Vào bố cục
3. Vào phần tử trang
4. Tạo widget HTML/Javascript và dán code bên dưới vào :



<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://YOURIMAGEURL.jpg";
imgr[1] = "http://YOURIMAGEURL1.jpg";
imgr[2] = "http://YOURIMAGEURL2.jpg";
imgr[3] = "http://YOURIMAGEURL3.jpg";
imgr[4] = "http://YOURIMAGEURL4.jpg";

showRandomImg = true;

tablewidth = 278;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#ffffff";

imgwidth = 100;
imgheight = 80;

fntsize = 11;
acolor = "#666";
aBold = true;
icon = " ";

text = "comments";

showPostDate = false;

summaryPost = 75;
summaryFontsize = 11;
summaryColor = "#666";
icon2 = " ";

numposts = 5;

home_page = "YOUR-BLOG-URL";

< /script>
< script src="http://fractalblognetwork.com/blogumus/vertical_title_desc_no_comments.js" type="text/javascript"></script>



Phần code Javascript: mình sẽ chỉ nói các đọan cơ bản, còn những code khác các bạn có thể tự tìm hiểu.
- numposts = 6; : số bài hiển thị
- home_page = "YOUR-BLOG-URL"; : địa chỉ URL blog của bạn

- summaryPost = 150; : số kí tự sẽ hiển thị trong popup mô tả.
- Code trên là dùng cho các bài viết theo nhãn, nếu các bạn muốn hiển thị các bài viết mới cho cả blog thì đổi link của file javascript lại thành :

Thêm label dưới dòng home_page:


home_page = "YOUR-BLOG-URL";'
label = "tagname";



- Recent posts in horizontal position showing thumbnails with title, description from any particular label  : File js cho chiều ngang
- Recent posts in vertical position showing thumbnails with title, description from any particular label : File Js cho chiều dọc 



- Bạn down về và up lên host nhé.
- Chúc Bạn Thành Công.

Bài Viết Liên Quan Gồm Danh Sách Ảnh Và Bài Viết






- Cách thực hiện như sau:
Bước 1: Đăng nhập vào blog -> Tùy chọn khác (Hình mũi tên xuống) -> Mẫu -> Chỉnh sửa HTML -> Mở rộng mẫu  sau đó tìm </head> và dán đoạn Code bên dưới lên trên thẻ </head>

<style type='text/css'>
/* CSS THÊM: Bài viết liên Quan gồm danh sách ảnh và bài viết
----------------------------------------------- */
.baivietlienquan {
margin : 5px 5px 5px 5px;
padding : 1px;
clear : both;
list-style-type : none;
background : #adc7de url(http://www.vn520.org/@forum/gif/ok/201112182141001.gif) no-repeat right bottom;
border-top : 1px solid #eeeeee;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #eeeeee;
color:#000;
font-weight: bold;
}
#related-posts {float:center;text-transform:none;height:100%;min-height:100%;padding:0;margin:10px 0 5px 0;}
#related-posts h2{margin:0;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9hiMC1SQfyGXbZs7tge-OVRibnRoc0cRYHahPZemH2_tI8fMgWt5LMBRdLMu7hp-Cca25BuB6lw-_QcTldaHsSOU8cwS2jGb8F0PQzewnDUupE7o5Bjw45eJi78a2IGcRGUOxoPaeZzA/s1600/newslienquan.jpg) no-repeat scroll left 0 transparent;height: 16px;}
#related-posts a:hover {background-color:#d4eaf2}
.lienquan {background: #ddd;height:57px;float: left;padding-left: 1px;width: 173px;margin:1px;overflow:hidden;line-height:1.4em}
.related-posts {margin: 0;padding: 0}
.related-posts ul {margin: 0;padding-top: 5px}
.related-posts ul li {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaVXUb3Y-UQD22Iwcmpt-Didm_jeCAd8CAtLVhb-_nzkrQgWEHGqfsgv7OVuxxIcOqhoOJPGF07oBahzwjPVdLipK5MxLG2d6wzdLyESY9PAqsiHGNM0S-7FECMhicu2RZw3i7GCNoCeyh/s1600/list.png) no-repeat top left;list-style-type: none;margin: 0 0 2px 5px;padding: 2px 0 0 18px;word-wrap: break-word}
</style>

<script src='http://thanhxd1607.googlecode.com/svn/myfile/recent-post.js' type='text/javascript'/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script type='text/javascript'> //<![CDATA[ var titles=new Array();var titlesNum=0;var urls=new Array();var time=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;time[titlesNum]=d.published.$t;titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);var c=new Array(0);e=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=time[a]}}titles=c;urls=b;time=e}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);time.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;document.write("<ul>");if(titles.length==0){document.write("<li>Không có bài vi?t liên quan</li>")}else{while(b<titles.length&&b<20&&b<maxresults){document.write('<li><a href="'+urls[c]+'" title="'+time[c].substring(8,10)+"/"+time[c].substring(5,7)+"/"+time[c].substring(0,4)+'">'+titles[c]+"</a></li>");if(c<titles.length-1){c++}else{c=0}b++}}document.write("</ul>");urls.splice(0,urls.length);titles.splice(0,titles.length)}; //]]> </script> </b:if> 

Bước 2 : Lưu Template lại.

Bước 3: Chọn mở rộng mẫu  sau đó tìm đoạn code sau 

<div class='post-footer-line post-footer-line-2'/>
hoặc code sau:
<div class='post-footer-line post-footer-line-1'/>

Và dán đoạn Code bên dưới sau bên dưới code vừa tìm được :

<div id='related-posts'> <b:loop values='data:post.labels' var='label'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=9&quot;' type='text/javascript'/> </b:loop> <script type='text/javascript'> var currentposturl=&quot;<data:post.url/>&quot;; var maxresults=9; var relatedpoststitle=&quot;&quot;; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script> </div> <div style='margin-bottom:5px;clear:both'/> <img border='0' src='http://lh5.ggpht.com/-nDUCAES2r0w/UIKnwvRYZ6I/AAAAAAAAEGg/MubebWh7qX0/s0/img828723e7b2465eec5ba670a90f0fad6b.jpg'/> <div class='related-posts'> <b:loop values='data:post.labels' var='label'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/> </b:loop> <script type='text/javascript'>var maxresults=12;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script> </div> <div class='clear'/>

Trong đó các bạn chú ý:
- max-results=9&quot là số bài ở dạng thumbnail
- var maxresults=12 là số bài ở dạng list.
Các bạn có thể xem hình ngay dưới sẽ thấy rõ hơn.

Tiện Ích Bài Mới Cũ Cùng Chủ Đề Cho Blogspot




1. Vào Thiết kế > Chỉnh sửa HTML > Tick chọn Mở rộng mẫu tiện ích

2. Tìm code sau nhấn (F3) tìm ]]></b:skin>. và chèn đoạn code bên dưới vào phía sau thẻ đóng ]]></b:skin>.

<!-- Begin vietcons.info -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:center;text-transform:none;height:100%;min-height:100%;padding-top:5px}
#related-posts a{color:blue}
#related-posts a:hover{color:#000;text-shadow:-1px -1px #ccc, 1px 1px #4c4c4c;text-decoration:none}
#related-posts ul{list-style-type:none;text-decoration:none;font-size:12px;text-color:#000;margin:0;padding:0}
#related-posts ul li{display:block;background:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvQSAVd2qivethoAJEijiBSw82MLw-5yjk5lpk34QhhNINCKz00u-T_ul1g9_UBKmpvuUFzc-mBGilYsdOgO1HlQ7qvu-2hdjvU12Nwu3fwtEYbPZHSQ3IX_qp8SrbzhXPvStiLSpAuiM/s1600/pointnews.png&quot;) no-repeat 0 0;list-style-type:none;padding-left:19px;line-height:1.6em;margin:0}
</style>
</b:if>
<!-- End  vietcons.info  -->


3. Tìm một trong các dòng dưới đây (Nhấn F3):

<div class='post-footer-line post-footer-line-1'/>

<div class='post-footer-line post-footer-line-2'/>

<div class='post-footer-line post-footer-line-3'/>

<div class='post-footer'>

Và chèn đoạn code sau vào dưới các dòng vừa tìm được:


<!-- Begin  vietcons.info  -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script language='javascript'>
// <![CDATA[
var maxnext = 5; // Chỉnh số 5 chỉ số bài viết mới hơn tối đa
var nexttitle = '<img height="7" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqAx1EpLorvFqHmuvzF1wr7wzemP-49o_AeXBqjxbpD5wDMUoOlNzZcmI_Us_px7Nrn7EB_8542t3Wk6jKvt6tXM0aumbdRmNYtE9eYM8MCmwKGEvDwP2ijV99UayuGD0RThx6WTgwDjkN/s1600/dotyellow.gif" width="7" /><font color="#008000" size="3"> <u>Bài viết mới hơn:</u></font>';
var maxprev = 7; // Chỉnh số 7 chỉ số bài viết cũ hơn tối đa
var prevtitle = '<img height="7" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqAx1EpLorvFqHmuvzF1wr7wzemP-49o_AeXBqjxbpD5wDMUoOlNzZcmI_Us_px7Nrn7EB_8542t3Wk6jKvt6tXM0aumbdRmNYtE9eYM8MCmwKGEvDwP2ijV99UayuGD0RThx6WTgwDjkN/s1600/dotyellow.gif" width="7" /><font color="#000080" size="3"> <u>Bài viết cũ hơn:</u></font>';
// ]]>
</script>
<script src='http://thanhxd1607.googlecode.com/svn/myfile/Newold-post.js' type='text/javascript'/>
<div id='related-posts'>
<div id='next-posts'/>
<b:loop values='data:post.labels' var='label'>
<script language='javascript'>
var vlabel = &quot;<data:label.name/>&quot;;
if (relateposturl.indexOf(&#39;?relatedlabel=&#39;)!=-1)
{nextlabel = (relatedlabel == vlabel) ? 0 : 1;}
if (nextlabel == 0)
{
var vtime = &quot;<data:post.timestampISO8601/>&quot;;
vtime = vtime.substring(0,19);
var srcurl = &quot;<data:blog.homepageUrl/>&quot;+ &quot;feeds/posts/default/-/&quot; + vlabel + &quot;?alt=json-in-script&amp;callback=next_results_labels&amp;max-results=999&quot;;
var script = document.createElement(&#39;script&#39;); 
script.setAttribute(&#39;src&#39;, srcurl); 
script.setAttribute(&#39;id&#39;, &#39;jsonScript&#39;); 
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;); document.documentElement.firstChild.appendChild(script);
nextlabel +=1;
}
</script>
</b:loop> 
<div id='prev-posts'/>
<b:loop values='data:post.labels' var='label'>
<script language='javascript'>
var vlabel = &quot;<data:label.name/>&quot;;
if (relateposturl.indexOf(&#39;?relatedlabel=&#39;)!=-1)
{prevlabel = (relatedlabel == vlabel) ? 0 : 1;}
if (prevlabel == 0)
{
var vtime = &quot;<data:post.timestampISO8601/>&quot;;
vtime = vtime.substr(0,19);
var srcurl = &quot;<data:blog.homepageUrl/>&quot;+ &quot;feeds/posts/default/-/&quot; + vlabel + &quot;?alt=json-in-script&amp;callback=prev_results_labels&amp;max-results=999&quot;;
var script = document.createElement(&#39;script&#39;); 
script.setAttribute(&#39;src&#39;, srcurl); 
script.setAttribute(&#39;id&#39;, &#39;jsonScript&#39;); 
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;); document.documentElement.firstChild.appendChild(script);
prevlabel ++;
}
</script>
</b:loop>
</div>
</b:if>
<!-- End  vietcons.info  -->

Bạn sửa lại dòng code màu xanh cho phù hợp nhé.
4.Lưu Template là OK.

Bài Viết Liên Quan Hiệu Ứng Cho Blog




1.Đăng nhập vào Blog
2.Tùy chọn (Mũi tên xuống)
3.Chọn mẫu
4. Chọn Phần tử trang --> Thêm tiện ích -->HLTM/Java
5. Dán toàn bộ code sau đây vào :

<style type='text/css'>
#related_posts h4{font-size:220%;font-family:'georgia',"Arial Narrow",Arial,sans-serif;text-transform:capitalize;margin-top:20px;text-shadow: 0.5px 0.5px 1px #666}
.isirelated h5{text-transform:capitalize;font-size:120%;margin-bottom:3px}
#relpost_img_sum img{width:120px;height:120px;border:1px solid #D8D8D8}
.isirelated{width:300px;z-index:2;padding:5px 8px;background-color:#F3F3F3;border-bottom:2px solid black;position:absolute;top:-70%;left:200px;visibility:hidden;opacity:0;transition:all 0.6s cubic-bezier(1,2,0,0) 0s;-moz-transition:all 0.6s cubic-bezier(1,2,0,0) 0s;-webkit-transition:all 0.6s cubic-bezier(1,2,0,0) 0s;-o-transition:all 0.6s cubic-bezier(1,2,0,0) 0s}
#relpost_img_sum li:hover .isirelated{visibility:visible;opacity:1;left:10px}
.isirelated::after{content:"";width:0;height:0;border-width:10px 5px;border-style:solid;border-color:black transparent transparent transparent;position:absolute;top:100%;left:11px}
#relpost_img_sum li{list-style:none;width:120px;height:120px;position:relative;float:left;margin-right:5px}
.news-text{font-size:90%}
#related_posts{height:180px}
.post-body a{color:#31B004}
.post-body a:hover{color:#0018FF;}
.post-footer a{color:black}
.post-footer a:hover{text-decoration:none}</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>
<script type='text/javascript'>
//<![CDATA[
var relnojudul=0;var relmaxtampil=5;var numchars=150;var reljudul=new Array();var relurls=new Array();var relcuplikan=new Array();var relgambar=new Array();function saringtags(d,c){var b=d.split("<");for(var a=0;a<b.length;a++){if(b[a].indexOf(">")!=-1){b[a]=b[a].substring(b[a].indexOf(">")+1,b[a].length)}}b=b.join("");b=b.substring(0,c-1);return b}function relpostimgcuplik(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];reljudul[relnojudul]=d.title.$t;postcontent="";if("content" in d){postcontent=d.content.$t}else{if("summary" in d){postcontent=d.summary.$t}}relcuplikan[relnojudul]=saringtags(postcontent,numchars);if("media$thumbnail" in d){postimg=d.media$thumbnail.url}else{postimg="https://huyco-troll.googlecode.com/svn/trunk/no_image.png"}relgambar[relnojudul]=postimg;for(var a=0;a<d.link.length;a++){if(d.link[a].rel=="alternate"){relurls[relnojudul]=d.link[a].href;break}}relnojudul++}}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function artikelterkait(){var j=new Array(0);var h=new Array(0);var g=new Array(0);var d=new Array(0);for(var k=0;k<relurls.length;k++){if(!contains(j,relurls[k])){j.length+=1;j[j.length-1]=relurls[k];h.length+=1;h[h.length-1]=reljudul[k];g.length+=1;g[g.length-1]=relcuplikan[k];d.length+=1;d[d.length-1]=relgambar[k]}}reljudul=h;relurls=j;relcuplikan=g;relgambar=d;for(var k=0;k<reljudul.length;k++){var c=Math.floor((reljudul.length-1)*Math.random());var p=reljudul[k];var m=relurls[k];var f=relcuplikan[k];var b=relgambar[k];reljudul[k]=reljudul[c];relurls[k]=relurls[c];relcuplikan[k]=relcuplikan[c];relgambar[k]=relgambar[c];reljudul[c]=p;relurls[c]=m;relcuplikan[c]=f;relgambar[c]=b}var n=0;var a=Math.floor((reljudul.length-1)*Math.random());var e=a;var o;var l=document.URL;while(n<relmaxtampil){if(relurls[a]!=l){o="<li class='news-title clearfix'>";o+="<a href='"+relurls[a]+"' rel='nofollow'  target='_top' title='"+reljudul[a]+"'><img src='"+relgambar[a]+"' /></a>";o+="<div class='isirelated'><h5>"+reljudul[a]+"</h5>";o+="<span class='news-text'>"+relcuplikan[a]+" ... </span></div>";o+="</li>";document.write(o);n++;if(n==relmaxtampil){break}}if(a<reljudul.length-1){a++}else{a=0}if(a==e){break}}};
//]]></script>

<div id='related_posts'>
<h4>Bài Liên Quan</h4>
<div id='bpslidein_place_holder'></div>
<script src='http://www.vietcons.info/feeds/posts/default/-/Thủ.Thuật.Blogspot?alt=json-in-script&callback=relpostimgcuplik&max-results=50' type='text/javascript'></script>
<script src='http://www.vietcons.info/feeds/posts/default/-/Thủ.Thuật.PC?alt=json-in-script&callback=relpostimgcuplik&max-results=50' type='text/javascript'></script>
<script src='http://www.vietcons.info/feeds/posts/default/-/Thủ.Thuật.Window?alt=json-in-script&callback=relpostimgcuplik&max-results=50' type='text/javascript'></script>
<span class='glap'><ul id='relpost_img_sum'>
<script type='text/javascript'>artikelterkait();</script>
</ul></span>
</div>
<script type='text/javascript'>
//<![CDATA[
function resizeThumb(e,b){var c=document.getElementById(e),d=c.getElementsByTagName("img");for(var a=0;a<d.length;a++){d[a].src=d[a].src.replace(/\/s72\-c/,"/s"+b+"-c");d[a].width=b;d[a].height=b}}resizeThumb("related_posts",120);
//]]>
</script>

6.Cuối cùng là lưu lại.
-Chú Ý:
Sửa dòng : 
http://www.vietcons.info : Thành tên miềm blog của bạn
Thủ.Thuật.Blogspot : Thành tên nhãn bài đăng blog của bạn

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>
Copyright 2010 Chú ý; trang này chỉ để chủ xem.

Home | Layout | Template | Allposts | Viết |