Hầu hết các trang web tin tức đều có một Breaking News. Breaking News luôn điểm qua các bảng tin mới nhất, hot nhất của trang web trong thời gian nhất định. Ngoài nhiệm vụ điểm tin, thanh Breaking News còn giúp cho trang web trở nên bắt mắt, và giúp người dùng có thể truy cập nhanh các bản tin hot nhất.
Các bạn xem lại trên trang blog của mình đã có thanh Breaking News chưa. Nếu chưa các bạn có thể chèn thêm bằng cách trong bài viết này nhé.
1. Xác định vị trí đặt Breaking News
Trên mỗi trang web có một Block hiển thị các Hot News ở đầu trang chủ. Bây giờ chúng ta sẽ chèn Breaking News vào vị trí dưới Menu và trên Hot News như hình bên dưới.
Sau khi đã định được vị trí hiển thị của Breaking News trên trang chủ. Bước tiếp theo chúng ta sẽ xác định vị trí trong HTML của Template bằng cách nhấn phím F12 trên trang chủ. Khung hiển thị HTML xuất hiện bên phải trình duyệt. Chúng ta sẽ chèn đoạn code Breaking News giữa thẻ <div id="header-wrap"> và <div id="hot-wraper"> như hình sau:
Đầu tiên các bạn vào phần quản lý của Blogger, tiếp theo chọn Theme \ Edit HTML. Sau đó nhấn tổ hợp phím Ctrl + F, tìm đến vị trí đã được định vị ở trên, và chèn đoạn code bên dưới vào.
<div class='row nticker'>
<div class='ticker section' id='ticker'>
<div class='widget HTML news-ticker' data-version='1' id='HTML1'>
<h2 class='title' style='display:block;'><i class='fa fa-bolt'/>Breaking</h2>
<div class='layout-content'>
<div class='liScroll-container liScroll-playing'>
<div class='liScroll-mask'>
<ul class='liScroll-ticker' id='newsticker'></ul>
</div>
</div>
</div>
<div class='clear'/>
</div>
</div>
</div>
<div class='clear'/>
Tiếp theo các bạn tìm xem trên HTML của template đã có nhúng plugin FontAwesome chưa. Nếu chưa thì chèn thêm đoạn code sau vào sau thẻ <head> nhé.
<link href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
2. Thiết kế CSS cho Breaking News
Tìm thẻ ]]></b:skin> trên HTML của template. Sau đó dán đoạn code CSS bên dưới vào trên vị trí vừa tìm gặp.
.nticker{
padding: 0 20px;
margin-left: auto;
margin-right: auto;
}
.ticker {
display:block;
background-color: #f7f7f7;
border: 0 solid #eee!important;
height: 40px;
margin: 25px 0;
overflow: hidden;
}
.ticker .title {
float: left;
background-color: #333333;
border: 0 solid #eee!important;
color: #ffffff;
font: normal normal 15px Roboto;
font-weight: 600;
height: 40px;
line-height: 40px;
overflow: hidden;
padding: 0 10px;
margin-top: 0px;
text-transform: uppercase;
}
.ticker .title .fa {
margin-right: 10px;
}
.fa-bolt {
animation: scaling .8s infinite linear;
font-size: 16px;
moz-animation: scaling .8s infinite linear;
moz-osx-font-smoothing: grayscale;
ms-animation: scaling .8s infinite linear;
o-animation: scaling .8s infinite linear;
webkit-animation: scaling .8s infinite linear;
}
.fa-flash:before, .fa-bolt:before {
content: "\f0e7";
}
.ticker .layout-content {
overflow: hidden;
}
.liScroll-container {
padding: 0 5px 0 0;
overflow: hidden;
position: relative;
}
.liScroll-container .liScroll-mask {
overflow: hidden;
position: relative;
}
.liScroll-ticker {
list-style: none;
list-style-image: none;
margin: 0;
padding: 0;
position: relative;
}
.news-ticker ul {
overflow: hidden;
}
.liScroll-ticker li {
float: left;
}
.news-ticker li {
display: inline-block;
float: left;
margin: 5px 0 0!important;
overflow: hidden;
padding: 0 0 0 15px;
position: relative;
}
.liScroll-ticker li {
list-style: none;
list-style-image: none;
margin: 0;
padding: 0;
}
.ticker .layout-content li {
float: left;
margin-left: 30px !important;
}
.news-ticker li .tag-thumbnail {
display: block;
float: left;
height: 30px;
margin: 0 10px 0 0;
overflow: hidden;
position: relative;
width: 35px;
z-index: 1;
}
.ticker a.category {
background-color: #3388cc;
border-radius: 1px;
color: #ffffff;
float: left;
font-family: 'Roboto',Sans-Serif;
font-size: 11px;
font-weight: 400;
line-height: 11px!important;
padding: 3px 6px;
margin-top: 5px;
text-transform: uppercase;
z-index: 100;
}
.news-ticker li .recent-title {
display: inline-block;
margin: 0px 0 0 3px !important;
overflow: hidden;
position: relative;
}
.news-ticker li .recent-title a {
color: #000;
font: normal normal 15px roboto;
font-weight: 400;
}
.liScroll-container .liScroll-prev, .liScroll-container .liScroll-play, .liScroll-container .liScroll-next {
right: 6px;
cursor: pointer;
line-height: 38px;
position: absolute;
top: 0;
}
.liScroll-prev:before, .liScroll-play:before, .liScroll-playing:before, .liScroll-next:before {
background: #eee;
border-radius: 2px;
color: #222;
font-family: FontAwesome;
font-size: 11px;
font-style: normal;
font-weight: 400;
moz-border-radius: 2px;
padding: 4px;
position: relative;
webkit-border-radius: 2px;
}
.liScroll-prev:before {
content: '\f04a';
right: 48px;
}
.liScroll-play:before {
content: '\f04b';
font-size: 10px;
right: 24px;
}
.liScroll-next:before {
content: '\f04e';
right: 0;
}3. Tạo hàm truy vấn bản tin cho Breaking News
Công đoạn tiếp theo là chúng ta tạo một function để lấy các bản tin mới nhất. Số lượng bài viết có thể thay đổi được. Function lấy được thumbnail của bản tin, tiêu đề bản tin, đường dẫn của bản tin, mục lục chứa bản tin.
Các bạn vào phần Edit HTML của template, tìm thẻ </body>, và dán đoạn code bên dưới vào phía trên thẻ </body>.
<script type='text/javascript'>
//<![CDATA[
var ListBlogLink = window.location.hostname;
var ListCount = 10;
var ChrCount = 150;
var TitleCount = 66;
var ImageSize = 200;
function showlatestpostswiththumbs(json) {
for (var i = 0; i < ListCount; i++){
var listing= ListImage = ListUrl = ListTitle = ListImage = ListContent = ListConten = ListAuthor = ListTag = ListDate = "";
var ListUpdate = ListComments = thumbUrl = TotalPosts = sk = ListMonth = Y = D = M = m = YY = DD = MM = mm = TT = "";
if (json.feed.entry[i].category != null){
for (var k = 0; k < json.feed.entry[i].category.length; k++) {
ListTag += json.feed.entry[i].category[k].term;if(k < json.feed.entry[i].category.length-1){ ListTag += ", ";}
}
}
for (var j = 0; j < json.feed.entry[i].link.length; j++) {if (json.feed.entry[i].link[j].rel == 'alternate') {break;}}
ListUrl= "'" + json.feed.entry[i].link[j].href + "'";TotalPosts = json.feed.openSearch$totalResults.$t;
if (json.feed.entry[i].title!= null){ListTitle= json.feed.entry[i].title.$t.substr(0, TitleCount);}
if (json.feed.entry[i].thr$total){ListComments= json.feed.entry[i].thr$total.$t;}
ListAuthor= json.feed.entry[i].author[0].name.$t.split(" ");ListAuthor=ListAuthor.slice(0, 1).join(" ");
ListConten = json.feed.entry[i].content.$t;ListContent= ListConten.replace(/(<([^>]+)>)/ig,"").substring(0, ChrCount);
ListMonth= ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
ListDate= json.feed.entry[i].published.$t.substring(0,10);
Y = ListDate.substring(0, 4);m = ListDate.substring(5, 7);D = ListDate.substring(8, 10);M = ListMonth[parseInt(m - 1)];
ListUpdate= json.feed.entry[i].updated.$t.substring(0, 16);
YY = ListUpdate.substring(0, 4);mm = ListUpdate.substring(5, 7);DD = ListUpdate.substring(8, 10);TT = ListUpdate.substring(11, 16);MM = ListMonth[parseInt(mm - 1)];
if (json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/) != null){
var youtube_id = json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/).pop();
if (youtube_id.length == 11) {var ListImage = "'//img.youtube.com/vi/"+youtube_id+"/0.jpg'";}
}else if (json.feed.entry[i].media$thumbnail){
thumbUrl = json.feed.entry[i].media$thumbnail.url;sk= thumbUrl.replace("/s72-c/","/s"+ImageSize+"/");ListImage= "'" + sk.replace("?imgmax=800","") + "'";
}else if (json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/) != null){
ListImage = json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/)[1];
}else{ListImage= "'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfIoGqgLPcDXgtjIPg2GPYm7qs6Ei6FuHIFGlaxVXSFl3R9hEbSF4gXpzzs1MkklZ2PN40D1kM7J8ZLps4ZCMYEd830ylnanG1RPzA_5PRqA4S3YgDhjpreiz4bjhYdpApZX_F4Ixj3sk/s200/Icon.png'";}
var listing = "<li><div class='tag-thumbnail'><img class='tag-thumbnail anim' src="+ ListImage +"/></div><a class='category' href='/search/label/"+ ListTag +"'>"+ ListTag +"</a><h3 class='recent-title'><a href="+ ListUrl +">"+ ListTitle +"</a></h3></li>";
$("#newsticker").append(listing);
}
}
//]]>
</script>
<script src='/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs'/>
Nhớ lưu lại các thay đổi trên template nhé.
4. Tạo hiệu ứng cuộn bản tin cho Breaking News
Để tạo hiệu ứng cuộn cho bản tin trên Breaking News, chúng ta sử dụng đoạn code như sau:
<script type='text/javascript'>
//<![CDATA[
$(function(){$("ul#newsticker").liScroll();});
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
var summary_chars = 40;
function showlatestpostswiththumbs(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(A+"...")}var _="",$=0;document.write('<br><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==$&&(_+=" <br> "),"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>
Lưu lại thay đổi trên template, tải lại trang để tận hưởng kết quả nhé các bạn.
Tags:
Blogger