Thủ thuật blogspot - Dautoblog

Bài Mới Với Nhiều Nhãn Cho Blogspot

Bài Mới Với Nhiều Nhãn Cho Blogspot
Đây là tiện ích trình chiếu bài mới có thể với tất cả các nhãn trong blog trừ trường hợp blog của bạn quá nhiều nhãn(nhiều nhãn thì trang chủ quá dài làm load chậm chứ có bao nhiêu nhãn cũng lên hết :D)
Xem thử để nghiên cứu xem có áp dụng được không nhé ^^
DEMO

áp dụng vào blogspot
Để áp dụng tiện ích Bài Mới Với Nhiều Nhãn Cho Blogspot ta cần vào bố cục và tiến hành thêm một tiện ích HTML/Javascript và bố trí tiện ích này ngay trên khung chỉnh sửa bài viết.
Và đây là code

<style type="text/css" >
/* Basic Skin for Multi Feed Loader */
.list-entries{border:1px solid #999}.list-entries ul,.list-entries li{margin:0;padding:0;list-style:none}.list-entries li{padding:1em;border-bottom:1px solid #999}.list-entries .main-title{padding:2px}.list-entries .main-title h4{display:block;font:inherit;font-weight:bold;padding:.5em 1em;background-color:#333;color:#ccc;margin:0;line-height:normal}.list-entries .title a{font-weight:bold;font-size:110%;text-decoration:none}.list-entries .title a:hover{text-decoration:underline}.list-entries img,.list-entries .fake-img{border:none;background-color:#333;margin:0 1em 0 0;padding:0;float:left}.list-entries .summary{overflow:hidden}.list-entries .more-link{border-bottom:none;padding:.5em}.list-entries .more-link a{display:block;line-height:2em;height:2em;overflow:hidden;text-decoration:none;background-color:#900;padding:0 .6em;position:relative;font-weight:bold;color:white}.list-entries .more-link a:after{content:"";width:0;height:0;position:absolute;top:50%;right:.3em;border:4px solid transparent;border-left-color:white;margin-top:-4px}.list-entries .more-link a:hover{background-color:#600}
/* Custom CSS */
.list-entries {
margin:5px;
width:300px; /* Chiều rộng mỗi nhãn trong toàn tiện ích */
float:left;
font-size:14px;/*Cỡ chữ Tiêu đề*/
}
</style>

<div id="feed-list-container"></div>
<div style="clear:both;"></div>

<script type="text/javascript">
var multiFeed = {
feedsUri: [
{
name: "Tên nhãn",/* Không cần chính xác chỉ có tính chất giới thiệu */
url: "URL Blog",/* Thay URL Blog của bạn */
tag: "Tên nhãn"/* Tên nhãn này phải đúng với tên nhãn trong blog của bạn */
},
{
name: "Tên nhãn",
url: "URL Blog",
tag: "Tên nhãn"
},
{
name: "Tên nhãn",
url: "URL Blog",
tag: "Tên nhãn"
},
{
name: "Tên nhãn",
url: "URL Blog",
tag: "Tên nhãn"
}
],
numPost: 3,/* Số bài trong mỗi nhãn được hiển thị */
showThumbnail: true,
showSummary: true,
summaryLength: 80,
titleLength: "auto",
thumbSize: 72,/* Kích thước ảnh đại diện */
containerId: "feed-list-container",
readMore: {
text: "Tìm hiểu thêm",/* Thích ghi thế nào cũng được */
endParam: "?max-results=20"
}
};
</script>
<script type='text/javascript'>
//<![CDATA[
var mf_defaults={feedsUri:[{name:"Posting JQuery",url:"http://www.dte.web.id",tag:"JQuery"},{name:"Posting CSS",url:"http://www.dte.web.id",tag:"CSS"},{name:"Widget-Widget Blogger",url:"http://www.dte.web.id",tag:"Widget"}],numPost:4,showThumbnail:true,showSummary:true,summaryLength:80,titleLength:"auto",thumbSize:72,newTabLink:false,containerId:"feed-list-container",listClass:"list-entries",readMore:{text:"More",endParam:"?max-results=20"},autoHeight:false,current:0,onLoadFeed:function(a){},onLoadComplete:function(){},loadFeed:function(c){var d=document.getElementsByTagName("head")[0],a=document.getElementById(this.containerId),b=document.createElement("script");b.type="text/javascript";b.src=this.feedsUri[c].url+"/feeds/posts/summary"+(this.feedsUri[c].tag?"/-/"+this.feedsUri[c].tag:"")+"?alt=json-in-script&max-results="+this.numPost+"&callback=listEntries";d.appendChild(b)}};for(var i in mf_defaults){mf_defaults[i]=(typeof(multiFeed[i])!==undefined&&typeof(multiFeed[i])!=="undefined")?multiFeed[i]:mf_defaults[i]}function listEntries(q){var p=q.feed.entry,c=mf_defaults,h=document.getElementById(c.containerId),a=document.createElement("div"),d="<ul>",l=c.feedsUri.length,n,k,m,g;for(var f=0;f<c.numPost;f++){if(f==p.length){break}n=(c.titleLength!=="auto")?p[f].title.$t.substring(0,c.titleLength)+(c.titleLength<p[f].title.$t.length?"&hellip;":""):p[f].title.$t;m=("summary" in p[f])?p[f].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,""):"";m=(c.summaryLength<m.length)?m.substring(0,c.summaryLength)+"&hellip;":m;g=("media$thumbnail" in p[f])?'<img src="'+p[f].media$thumbnail.url.replace(/\/s72(\-c)?\//,"/s"+c.thumbSize+"-c/")+'" style="width:'+c.thumbSize+"px;height:"+c.thumbSize+'px;">':'<span class="fake-img" style="width:'+c.thumbSize+"px;height:"+c.thumbSize+'px;"></span>';for(var e=0,b=p[f].link.length;e<b;e++){k=(p[f].link[e].rel=="alternate")?p[f].link[e].href:"#"}d+='<li><div class="inner"'+(!c.autoHeight?' style="height:'+c.thumbSize+'px;overflow:hidden;"':"")+">";d+=(c.showThumbnail)?g:"";d+='<div class="title"><a href="'+k+'"'+(c.newTabLink?' target="_blank"':"")+">"+n+"</a></div>";d+='<div class="summary">';d+="<span"+(!c.showSummary?' style="display:none;"':"")+">";d+=(c.showSummary)?m:"";d+="</span></div>";d+='<span style="display:block;clear:both;"></span></div></li>'}d+="</ul>";d+='<div class="more-link"><a href="'+c.feedsUri[c.current].url.replace(/\/$/,"")+"/search/label/"+c.feedsUri[c.current].tag+c.readMore.endParam+'"'+(c.newTabLink?' target="_blank"':"")+">"+c.readMore.text+"</a></div>";a.className=c.listClass;a.innerHTML='<div class="main-title"><h4>'+c.feedsUri[c.current].name+"</h4></div>"+d;h.appendChild(a);c.onLoadFeed(c.current);if((c.current+1)<l){c.loadFeed(c.current+1)}if((c.current+1)==l){c.onLoadComplete()}c.current++}mf_defaults.loadFeed(0);
//]]>
</script>

Code trên là trình chiếu với 4 nhãn mỗi nhãn có độ rộng 300px nên chỉ có 2 nhãn 1 hàng nếu bố trí 3 nhãn 1 hàng thì cần giảm độ rộng của mỗi nhãn xuống,còn xuống bao nhiêu là tùy thuộc vào kich thước blog của bạn
Cứ chỉnh bao giờ được thì thôi :D(bắt đầu thử từ 180px xem)
Để thêm nhiều nhãn thì các bạn copy đoạn code
,
{
name: "Tên nhãn",
url: "URL Blog",
tag: "Tên nhãn"
}
Và dán nó trước dấu ],
Vì tiện ích này có thể chiếm phần lớn giao diện trang chủ cũng như các trang khác nhất là trang bài viết gây khó chịu cho người xem khi vào trang bài viết,vậy ta cần ẩn nó đi tại trang bài viết còn ở các trang khác có lẽ không cần thiết.Để ẩn nó tại trang bài viết bạn cần vào mẫu và tìm tới thẻ </head> và dán đoạn code sau vào trước nó
<style type='text/css'>
<b:if cond='data:blog.pageType == "item"'>
#HTML1 {display:none;}
</b:if>
</style>
Trong đó HTML1 mà cụ thể là số 1 là số thứ tự ID của tiện ích cần ẩn tại trang bài viết.Số 1 đây là ví dụ còn bạn phải xác định số thứ tự cụ thể của tiện ích vừa tạo ở trên tại blog của bạn để thay vào.
Chúc thành công.
Nguồn: DTE
Comments blogger

Không có nhận xét nào :