Nếu các bạn sử dụng template mặc định của Blogger, hoặc template không hỗ trợ tốt phần tạo Recent Post trên Sidebar. Xin tham khảo phần hướng dẫn chi tiết bên dưới.
Vị trí của Sidebar bên Website
Tùy vào bố cục mỗi trang mà vị trí của sidebar cũng khác nhau. Sidebar là các khu vực bao quanh Content. Thông thường bố cụ trang dạng 2 cột thì sidebar sẽ được bố trí nằm bên phải hoặc phải của Content. Nếu bố cục chia làm 3 cột thì sidebar nằm 2 bên, chính giữa là là Content. Một số bố cục được thiết kế thêm một sidebar nằm ngày dưới Content.
Cách tạo Rencent Post trên Sidebar
Recent post là các bài đăng gần đây, cũng có thế nói là các bài viết mới nhất. Việc tạo thêm danh sách các bài đăng mới nhất trên sidebar sẽ giúp người đọc quan sát dễ, truy cập nhanh, và trãi nghiệm tốt hơn.
Nhưng nếu bạn đang sử dụng giao diện cũ, giao diện không hỗ trợ tốt phần tạo các recent post. Thì các bạn có thể làm theo cách sau nhé.
Trước tiên các bạn vào phần quản lý Blogger và chọn Theme \ Edit HTML. Nhấn tổ hợp phím Ctrl + F, và tìm chuỗi ]]></b:skin>:
Dán đoạn CSS sau đây vào phía trên thẻ ]]></b:skin> vừa tìm thấy, rồi lưu lại thao tác trên template.
img.recent-post-thumb{
padding:2px;
width:80px;
height:60px;
float:left;
margin:0px 10px 10px 0px;
border: 1px solid #69B7E2;
border-radius: 7px;
}
.recent-posts-container {
font-family:'Oswald', sans-serif;
font-size:12px;
}
ul.recent-posts-container li{
list-style-type: none;
margin-bottom: 10px;
font-size:12px;
float:left;
width:100%
}
ul.recent-posts-container {
counter-reset: countposts;
list-style-type:none;
padding:0;
}
ul.recent-posts-container li:before {
display: none;
}
.recent-posts-container a{
text-decoration:none;
}
.recent-post-title {
margin-bottom:5px;
margin-top: -5px;
}
.recent-post-title a {
font-size: 13px;
color: #4a3efd;
font-weight: 600;
}
.recent-posts-details {
margin: 5px 0px 0px 92px;
font-size:11px;
}
.recent-posts-details a{
color: #777;
}
Tiếp theo các bạn truy cập vào mục Layout. Trên khung layout, bạn chọn vị trí đặt recent post, rồi chọn Add a gadget (thêm tiện ích). Khung thêm tiện ích xuất hiện, bạn chọn tiếp loại HTM/Javascript nhé.
Các bạn chép đoạn code bên dưới, dán tất cả vào mục Content. Phần Title các bạn có thể đặt tên tùy thích.
<script type="text/javascript">function getlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');for(var e=0;e<posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC9xlsrw1rpE_WrraCjUk-DS2EL9UsBLziMUPZ50APOZwYvEzJyTV21ZSGZegHCK-HZFgeKGEBgjwgufIz4ocuDY_oCDvm8aJF-STJ6eq_azt7ztePrkAJoeHFjdpDBEGv_H4uiMKdrETF/s1600/no-thumb.png"}var p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new Array;if(w[1]="Jan",w[2]="Feb",w[3]="Mar",w[4]="Apr",w[5]="May",w[6]="Jun",w[7]="Jul",w[8]="Aug",w[9]="Sep",w[10]="Oct",w[11]="Nov",w[12]="Dec",document.write('<li class="recent-posts-list">'),1==showpoststhumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumb" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>"),"content"in n)var A=n.content.$t;else if("summary"in n)var A=n.summary.$t;else var A="";var k=/<\S[^>]*>/g;if(A=A.replace(k,""),1==post_summary)if(A.length<summary_chars)document.write( A);else{A=A.substring(0,summary_chars);var y=A.lastIndexOf(" ");A=A.substring(0,y),document.write("")}var _="",$=0;document.write('<div class="recent-posts-details">'),1==posts_date&&(_=_+w[parseInt(g,10)]+" "+v+" "+f,$=1),1==readmorelink&&(1==$&&(_+=" | "),_=_+'<a href="'+r+'" class="url" target ="_top">Read more</a>',$=1),1==showcommentslink&&(1==$&&(_+=" | "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",_+=l,$=1),document.write(_),document.write("</div>"),document.write("</li>")}document.write("</ul>")}</script><script type="text/javascript">var posts_no = 5;var showpoststhumbs = true;var readmorelink = false;var showcommentslink = true;var posts_date = true;var post_summary = true;var summary_chars = 0;</script><script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=getlatestpostswiththumbs"></script><noscript>Your browser does not support JavaScript!</noscript>
Tùy vào cấu trúc mỗi trang mà kích thước theo chiều ngang của sidebar cũng khác nhau. Các bạn có thể điều chỉnh lại kích thước sidebar hoặc kích thước của ảnh hiển thị trên Recent Post để đạt được như mong muốn.
Tags:
Blogger