[Blogspot] Làm Breaking News đẹp cho blog


Đến tận mãi hôm nay mình mới làm đc thành công cái Breaking News (tạm hiểu là thanh đưa tin tức mới nhất của blog). Trước đây không làm được vì nó bị xung đột file js mới khổ chứ.
Nên là làm được rồi thì share cho các bạn luôn không thì nó héo mòn mất.
Demo thì ngay ở dưới nav-menu của mình có rồi nhé (Breaking News đỏ có chữ chạy chạy ý)

Cách làm:
1. Chủ đề - Chỉnh sửa HTML - Copy và dán code dưới vào sau thẻ <head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script> <link href='//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
Nếu blog bạn có js font-awesome rồi thì bỏ đi nhé, còn nếu k làm được thì thay js cũ bằng js font-awesome mới.
2. Tìm  ]]></b:skin> và dán đoạn code dưới đây trước thẻ đó.
/* Jquery News Ticker by http://www.bloggingfortrick.blogspot.com */
#spicenewsticker.loading{display:none}
.left .news-ticker-controls,.left .ticker-content,.left .BloggerSpice-ticker-title,.left .ticker{float:left}
.right .news-ticker-controls,.right .ticker-content,.right .BloggerSpice-ticker-title,.right .ticker{float:right}
.ticker-wrapper.has-js{font-family:'Helvetica',Arial,sans-serif;width:80%;height:28px;overflow:hidden;border:1px solid #f1f1f1;margin:10px 50px 0;line-height:28px;background-color:#FFFFFF;float:none;color:#252525;position:relative}
.ticker{position:relative;overflow:hidden;width:100%}
.ticker a{color:#333}
.BloggerSpice-ticker-title{font-size:12px;text-transform:uppercase;background-color:#252525;padding:0 10px;color:#FFFFFF;font-weight:bold}
.BloggerSpice-ticker-title:before{font-family:FontAwesome;content:"\f0e7";color:#FFF;margin-right:5px}
.ticker-content{text-transform:uppercase;margin:0;position:absolute;font-weight:bold;overflow:hidden;white-space:nowrap;line-height:26px;padding:0 10px;font-size:12px}
.ticker-content .date{padding:0 5px 0 0;border-right:1px dotted #252525}
.rabbi-ticker-swipe{position:absolute;top:0;background-color:#FFFFFF;color:#252525;display:block;width:100%;height:28px}
.rabbi-ticker-swipe span{margin-left:1px;background-color:#FFFFFF;color:#252525;height:28px;width:7px;display:block}
.news-ticker-controls{padding:0;margin:0;list-style-type:none;position:absolute;right:5px;top:0}
.news-ticker-controls li{padding:0;margin-left:5px;float:left;cursor:pointer;height:16px;width:16px;display:block}
.news-ticker-controls li{font-family:FontAwesome;color:#666666;position:relative}
.news-ticker-controls li.over{color:#252525}
.news-ticker-controls li.down{color:#252525}
.news-ticker-controls li:before{top:0;left:0;line-height:20px}
.news-ticker-controls li.bs-play-pause:before{content:"\f04b"}
.news-ticker-controls li.bs-play-pause.paused:before{content:"\f04c"}
.news-ticker-controls li.bs-prev:before{content:"\f04a"}
.news-ticker-controls li.bs-next:before{content:"\f04e"}
.js-hidden{display:none}
3. Tiếp đến là dán đoạn code sau trước thẻ </head>
<script type='text/javascript'>
//<![CDATA[
// News Ticker with Controller by http://www.bloggingfortrick.blogspot.com 
(function(a){a.fn.ticker=function(c){var e=a.extend({},a.fn.ticker.defaults,c);if(a(this).length==0){if(window.console&&window.console.log){window.console.log("Element does not exist in DOM!")}else{alert("Element does not exist in DOM!")}return false}var b="#"+a(this).attr("id");var d=a(this).get(0).tagName;return this.each(function(){var g=o();var i={position:0,time:0,distance:0,newsArr:{},play:true,paused:false,contentLoaded:false,dom:{contentID:"#ticker-content-"+g,titleID:"#BloggerSpice-ticker-title-"+g,titleElem:"#BloggerSpice-ticker-title-"+g+" SPAN",tickerID:"#ticker-"+g,wrapperID:"#ticker-wrapper-"+g,revealID:"#rabbi-ticker-swipe-"+g,revealElem:"#rabbi-ticker-swipe-"+g+" SPAN",controlsID:"#news-ticker-controls-"+g,prevID:"#prev-"+g,nextID:"#next-"+g,playPauseID:"#play-pause-"+g}};if(d!="UL"&&d!="OL"&&e.htmlFeed===true){q("Cannot use <"+d.toLowerCase()+"> type of element for this plugin - must of type <ul> or <ol>");return false}e.direction=="rtl"?e.direction="right":e.direction="left";f();function l(u){var t=0,s;for(s in u){if(u.hasOwnProperty(s)){t++}}return t}function o(){var s=new Date;return s.getTime()}function q(s){if(e.debugMode){if(window.console&&window.console.log){window.console.log(s)}else{alert(s)}}}function f(){m();a(b).wrap('<div id="'+i.dom.wrapperID.replace("#","")+'"></div>');a(i.dom.wrapperID).children().remove();a(i.dom.wrapperID).append('<div id="'+i.dom.tickerID.replace("#","")+'" class="ticker"><div id="'+i.dom.titleID.replace("#","")+'" class="BloggerSpice-ticker-title"><span><!-- --></span></div><p id="'+i.dom.contentID.replace("#","")+'" class="ticker-content"></p><div id="'+i.dom.revealID.replace("#","")+'" class="rabbi-ticker-swipe"><span><!-- --></span></div></div>');a(i.dom.wrapperID).removeClass("no-js").addClass("ticker-wrapper has-js "+e.direction);a(i.dom.tickerElem+","+i.dom.contentID).hide();if(e.controls){a(i.dom.controlsID).live("click mouseover mousedown mouseout mouseup",function(t){var s=t.target.id;if(t.type=="click"){switch(s){case i.dom.prevID.replace("#",""):i.paused=true;a(i.dom.playPauseID).addClass("paused");n("prev");break;case i.dom.nextID.replace("#",""):i.paused=true;a(i.dom.playPauseID).addClass("paused");n("next");break;case i.dom.playPauseID.replace("#",""):if(i.play==true){i.paused=true;a(i.dom.playPauseID).addClass("paused");j()}else{i.paused=false;a(i.dom.playPauseID).removeClass("paused");p()}break}}else{if(t.type=="mouseover"&&a("#"+s).hasClass("controls")){a("#"+s).addClass("over")}else{if(t.type=="mousedown"&&a("#"+s).hasClass("controls")){a("#"+s).addClass("down")}else{if(t.type=="mouseup"&&a("#"+s).hasClass("controls")){a("#"+s).removeClass("down")}else{if(t.type=="mouseout"&&a("#"+s).hasClass("controls")){a("#"+s).removeClass("over")}}}}}});a(i.dom.wrapperID).append('<ul id="'+i.dom.controlsID.replace("#","")+'" class="news-ticker-controls"><li id="'+i.dom.playPauseID.replace("#","")+'" class="bs-play-pause controls"><a href=""><!-- --></a></li><li id="'+i.dom.prevID.replace("#","")+'" class="bs-prev controls"><a href=""><!-- --></a></li><li id="'+i.dom.nextID.replace("#","")+'" class="bs-next controls"><a href=""><!-- --></a></li></ul>')}if(e.displayType!="fade"){a(i.dom.contentID).mouseover(function(){if(i.paused==false){j()}}).mouseout(function(){if(i.paused==false){p()}})}if(!e.ajaxFeed){r()}}function m(){if(i.contentLoaded==false){if(e.ajaxFeed){if(e.feedType=="xml"){a.ajax({url:e.feedUrl,cache:false,dataType:e.feedType,async:true,success:function(w){count=0;for(var t=0;t<w.childNodes.length;t++){if(w.childNodes[t].nodeName=="rss"){xmlContent=w.childNodes[t]}}for(var u=0;u<xmlContent.childNodes.length;u++){if(xmlContent.childNodes[u].nodeName=="channel"){xmlChannel=xmlContent.childNodes[u]}}for(var s=0;s<xmlChannel.childNodes.length;s++){if(xmlChannel.childNodes[s].nodeName=="item"){xmlItems=xmlChannel.childNodes[s];var z,v=false;for(var A=0;A<xmlItems.childNodes.length;A++){if(xmlItems.childNodes[A].nodeName=="title"){z=xmlItems.childNodes[A].lastChild.nodeValue}else{if(xmlItems.childNodes[A].nodeName=="link"){v=xmlItems.childNodes[A].lastChild.nodeValue}}if((z!==false&&z!="")&&v!==false){i.newsArr["item-"+count]={type:e.titleText,content:'<a href="'+v+'">'+z+"</a>"};count++;z=false;v=false}}}}if(l(i.newsArr<1)){q("Couldn't find any content from the XML feed for the ticker to use!");return false}i.contentLoaded=true;r()}})}else{q("Code Me!")}}else{if(e.htmlFeed){if(a(b+" LI").length>0){a(b+" LI").each(function(s){i.newsArr["item-"+s]={type:e.titleText,content:a(this).html()}})}else{q("Couldn't find HTML any content for the ticker to use!");return false}}else{q("The ticker is set to not use any types of content! Check the settings for the ticker.");return false}}}}function r(){i.contentLoaded=true;a(i.dom.titleElem).html(i.newsArr["item-"+i.position].type);a(i.dom.contentID).html(i.newsArr["item-"+i.position].content);if(i.position==(l(i.newsArr)-1)){i.position=0}else{i.position++}distance=a(i.dom.contentID).width();time=distance/e.speed;h()}function h(){a(i.dom.contentID).css("opacity","1");if(i.play){var s=a(i.dom.titleID).width()+20;a(i.dom.revealID).css(e.direction,s+"px");if(e.displayType=="fade"){a(i.dom.revealID).hide(0,function(){a(i.dom.contentID).css(e.direction,s+"px").fadeIn(e.fadeInSpeed,k)})}else{if(e.displayType=="scroll"){}else{a(i.dom.revealElem).show(0,function(){a(i.dom.contentID).css(e.direction,s+"px").show();animationAction=e.direction=="right"?{marginRight:distance+"px"}:{marginLeft:distance+"px"};a(i.dom.revealID).css("margin-"+e.direction,"0px").delay(20).animate(animationAction,time,"linear",k)})}}}else{return false}}function k(){if(i.play){a(i.dom.contentID).delay(e.pauseOnItems).fadeOut(e.fadeOutSpeed);if(e.displayType=="fade"){a(i.dom.contentID).fadeOut(e.fadeOutSpeed,function(){a(i.dom.wrapperID).find(i.dom.revealElem+","+i.dom.contentID).hide().end().find(i.dom.tickerID+","+i.dom.revealID).show().end().find(i.dom.tickerID+","+i.dom.revealID).removeAttr("style");r()})}else{a(i.dom.revealID).hide(0,function(){a(i.dom.contentID).fadeOut(e.fadeOutSpeed,function(){a(i.dom.wrapperID).find(i.dom.revealElem+","+i.dom.contentID).hide().end().find(i.dom.tickerID+","+i.dom.revealID).show().end().find(i.dom.tickerID+","+i.dom.revealID).removeAttr("style");r()})})}}else{a(i.dom.revealElem).hide()}}function j(){i.play=false;a(i.dom.tickerID+","+i.dom.revealID+","+i.dom.titleID+","+i.dom.titleElem+","+i.dom.revealElem+","+i.dom.contentID).stop(true,true);a(i.dom.revealID+","+i.dom.revealElem).hide();a(i.dom.wrapperID).find(i.dom.titleID+","+i.dom.titleElem).show().end().find(i.dom.contentID).show()}function p(){i.play=true;i.paused=false;k()}function n(s){j();switch(s){case"prev":if(i.position==0){i.position=l(i.newsArr)-2}else{if(i.position==1){i.position=l(i.newsArr)-1}else{i.position=i.position-2}}a(i.dom.titleElem).html(i.newsArr["item-"+i.position].type);a(i.dom.contentID).html(i.newsArr["item-"+i.position].content);break;case"next":a(i.dom.titleElem).html(i.newsArr["item-"+i.position].type);a(i.dom.contentID).html(i.newsArr["item-"+i.position].content);break}if(i.position==(l(i.newsArr)-1)){i.position=0}else{i.position++}}})};a.fn.ticker.defaults={speed:0.1,ajaxFeed:false,feedUrl:"",feedType:"xml",displayType:"reveal",htmlFeed:true,debugMode:true,controls:true,titleText:"Breaking News",direction:"ltr",pauseOnItems:3000,fadeInSpeed:600,fadeOutSpeed:300}})(jQuery);
function spicenewsticker(a){(function(b){var c={blogURL:"",MaxPost:10,Speed:0.1,Summarylength:150,titleText:"Breaking News",displayType:"reveal",Container:"#spicenewsticker",pBlank:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiESe33zuhURKeXEfMuskbLdRHTJqTCK6WpHfeCRjrbSz_yniYL84ynRpLlddAOuy35Gks3aFAP0IsV7rAA_pz9iDlrixiApmaOpoKq8p-_r9-i3IJplX5BkNCQPR9UIUz4x0gag-QMJlmC/s1600/BloggerSpice%252Bblank.png",tagName:false,MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]};c=b.extend({},c,a);b(c.Container).addClass("loading");b.get((c.blogURL===""?window.location.protocol+"//"+window.location.host:c.blogURL)+"/feeds/posts/summary"+(c.tagName===false?"":"/-/"+c.tagName)+"?max-results="+c.MaxPost+"&orderby=published&alt=json-in-script",function(t){var v,f,l,o,w,q,h,e,s,u,m,g="",d=t.feed.entry;if(d!==undefined){var k=d.length;for(var r=0;r<k;r++){var n=d[r].link.length;for(var p=0;p<n;p++){if(d[r].link[p].rel==="alternate"){v=d[r].link[p].href}}postcontent=("content" in d[r])?d[r].content.$t:("summary" in d[r])?d[r].summary.$t:"";f=d[r].title.$t;postcontent=postcontent.replace(/<\S[^>]*>/g,"").replace(/"/g,"&quot;");if(postcontent.length>c.Summarylength){postcontent=postcontent.substring(0,c.Summarylength)+"..."}u=d[r].published.$t.substring(0,10);l=u.substring(0,4);o=u.substring(5,7);w=u.substring(8,10);q=c.MonthNames[parseInt(o,10)-1];h=d[r].published.$t.substring(11,16);e=h.substring(0,2);s=h.substring(2,5);m=(e<12?"AM":"PM");if(e===0){e=12}if(e>12){e=e-12}g+='<li class="news-item"><span title="'+q+" "+w+", "+l+'" class="date">'+e+""+s+" "+m+'</span> <a class="title" href="'+v+'">'+f+"</a></li>"}b(c.Container).html('<ul class="js-hidden" id="newstick">'+g+"</ul>").removeClass("loading");b("#newstick").ticker({speed:c.Speed,direction:b("#outer-wrapper").attr("class"),titleText:c.titleText,displayType:c.displayType})}else{b(c.Container).html("<span>No result!</span>").removeClass("loading")}},"jsonp")})(jQuery)};  
//]]>
</script> 
4. Cuối cùng là dán đoạn sau vào chỗ bạn muốn hiển thị Breaking News nhé, nếu cảm thấy khó chọn chỗ quá thì dán vô luôn 1 widget cũng được (mình đang dán ở widget trên main đây ^^)
<div id='spicenewsticker'/>
<script type='text/javascript'>
//<![CDATA[
spicenewsticker({MaxPost:10});
//]]>
</script>
Nguồn: bloggingfortric
Chúc các bạn thành công và luôn ủng hộ blog mình nha!

TSM Blogger

Chào mừng các bạn đến với TSM. Blog chia sẻ thủ thuật blogspot, tin tức công nghệ, thể thao, kho template blogspot và nhiều thứ khác. Mong các bạn luôn ủng hộ để blog luôn vững mạnh!

3 bình luận Tổng hợp bình luận

ĐĂNG KÍ NHẬN BÀI VIẾT MỚI

Please Enable Javascript!Enable JavaScript