Thứ Bảy, 2 tháng 8, 2014

Bài Viết Liên Quan Trên Sidebar (Related post Sidebar) cho Blogspot

Unknown  , ,  No comments

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

Bài Viết Liên Quan (Related post) là một phần rất quan trọng trong việc điều hướng cũng như cung cấp nội dung cần thiết tới người đọc khi họ đang quan tâm một bài biết của bạn. Các bài viết thủ thuật blogspot về Bài Viết Liên Quan đã được chia sẻ khá nhiều nhưng bài viết liên quan nằm trên Sidebar left (hoặc right) thì lại khá hiếm hoi. Hôm nay, tôi có góp nhặt được thủ thuật này, xin chia sẻ cùng bạn đọc.

Demo

Cách thực hiện

Chú ý: Trước khi thực hiện bất cứ thủ thuật gì bạn nên sao lưu lại 1 bản template phòng khi bị hỏng thì có thể dễ dàng phục hồi

Bước 1. Đăng nhập Blogger, vào Bố cục>> Thêm tiện ích >> Thêm 1 HTML/Javascript

Đặt tên cho tiện ích (Bài viết liên quan), 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). (Thay các thông số cho phù hợp với blog của bạn)
<script type="text/javascript">
// Recent and Related Posts for Label on Sidebar
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://chiase-thuthuat.blogspot.com"; // đặt địa chỉ trang chủ của bạn
var img_default = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIUt3_AUcnaNuJkzSFqrAo-AZou_yTZFf8x7ggGmWImne7PECsBIu2gGtyFG2av2V2HC90XAI_kkB7FKcakWim9fzRJr2bUD6AaZEdPBJMPoZ74mF3Wl3ktrkESWydVbIZgqfjVEE8254/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/AVvXsEhw1Xl3i57xlf4nVJPdxChE36xkStIyLjF3JSBOSH6AA_cdYmxYnbgaHPC_5-XpV5FMNRdncixKWxQ-_gmWgNbgLHdFq9biwKJksk1hTLq_Av8SBy_wSzPoXiSVuO-8klT4wt8H1DYTR3Q/) 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 Mẫu >> Chỉnh sửa HTML. Dùng (Ctrl + F) tìm từ khóa "Bài cùng chủ đề" (tên tiện ích bạn vừa đặ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):

<b:widget id='HTML1' locked='false' title='Bài cùng chủ đề' 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:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>


Bước 3. Dùng các từ khóa như: <b:loop values='data:post.labels' var='label'> Và thay thế bằng:
<b:loop values='data:post.labels' var='label'>
<script>var label_Related=&quot;<data:label.name/>&quot;;</script>

Socializer Widget By Blogger Yard
SOCIALIZE IT →
FOLLOW US →
SHARE IT →

0 nhận xét:

Đăng nhận xét

Đăng ký: Đăng Nhận xét (Atom)

Labels

Adult English Ảnh Ảnh Bìa Facebook Ảnh đẹp Ảnh vui Animation Art + Design ẨM THỰC bag Bài viết Bảng Giá Bé tô màu Blogger Blogspot books Búp bê CAPTCHA Cắm hoa Cắt may Chơi mà học Clip Hài - Video Hot Clip Shock Có Thể Bạn Chưa Biết Coloring - Tô màu Cuộc sống Dịch Vụ Hot Doll Download Download Game Download Phần Mềm - Crack Download Phim Đ Đan len Đất nặn cho bé Địa Điểm Hot English Topics facebook Funny funny pictures Gấp giấy Gấp hộp Gấp khăn - Trang trí món ăn Giải Trí GIẢI TRÍ - VUI CƯỜI GIÁO DỤC - Y TẾ Giầy - Dép Gifts Giới Tính Góc Kỹ Năng Góc Làm Đẹp Góc Phụ Nữ Góc Sinh Viên Gói quà - gấp nơ Google Adsense hat Học Nấu Ăn Hỏi Đáp home and garden Hợp Tác Kinh Doanh Hướng dẫn MMO Kết hạt Kiếm tiền Kiếm Tiền Qua Mạng Kiến thức SEO KINH TẾ-KẾ HOẠCH Kỹ Năng Bán Hàng Kỹ Năng Nơi Công Sở Kỹ Năng Xin Việc LÀM ĐẸP Làm Đẹp Da Làm Đẹp Tóc Làm đồ chơi làm đồ chơi từ gỗ Làm hoa giấy Làm hoa vải Làm thiệp Lập trình Blogspot Liên Minh Huyền Thoại M Magazine Make Money Online making flowers Mặc Đẹp Mẫu móc Mẹ Và Bé Menu Mẹo Vặt MMO guide N Nail art Nến trang trí Nghệ thuật NGHIỆP VỤ BÁO CHÍ Nhà đẹp Nhạc Không Lời Nhạc Việt Origrami Painting - Vẽ Patchwork Phần mềm Phong Cách Play and learn for baby Proofs recycling Sách tiếng anh cho bé Shop Bít Tuốt Slider Sức Khỏe - Đời Sống Sức Khỏe Giới Tính Tết dây Thêu Thơ Vui Thủ thuật Thủ Thuật Blog Thủ Thuật Blogspot - Wordpress - Joomla Thủ Thuật Game Thủ Thuật Hay Thủ Thuật Máy Tính Thủ Thuật Net Thủ Thuật Tin Học Thư giãn Tình Yêu Giới Tính Tóc đẹp TRANG ĐIỂM Trang trí Truyện cười Truyện Hay Túi xinh Tuyển Dụng Từ điển Blogspot Tư Vấn Tiêu Dùng weaving Widget Blogspot Youtube

 

Copyright © 2013 blog chia sẻ kiến thức kiếm tiền.