Ads

200k/tháng

Thanh Breaking News đơn giản cho Blogspot/Blogger

Ở nhiều trang tin tức người ta thường có 1 hoặc nhiều widget chạy ngang điểm những tin tức mới những bài viết mới và tác dụng của nó sẽ kéo thành viên ở lại trang lâu hơn bởi những tin nóng những tin hay mà nếu như bình thường người xem sẽ không để ý.
Nếu dạo qua các trang tin tức các bạn có thể thấy một thanh ngang được đặt lên đầu trang với tiêu đề là “Tin mới”, “Tiêu điểm”,… hiển thị các bài viết mới với hiệu ứng load sinh động rất thu hút người đọc. Đó gọi là Breaking News Widget (hay Widget Tin tức mới).
Trước đây, mình thấy có rất nhiều bạn viết nhiều bài viết hướng dẫn về cách làm này nhưng đa số hiện tại bây giờ xài được vì bị cái gì mà gọi là xung đột css javascript mà mình chả hiểu cm gì hết :v, nói chung là không xài được và thường bị lỗi tùm lum.
Hôm nay, mình xin chỉa sẻ cho các bạn Cách tạo một thanh Breaking News đơn giản mà đẹp có hình ảnh luôn, load chuẩn và chả có xung đột cái gì hết :)

Các bước thực hiện:
Bước 1: Truy cập Chủ đề - Chỉnh sửa HTML.
Bước 2: Thêm đoạn CSS này trước thẻ ]]></b:skin>
 /* CSS News Ticker */
.ticker-wrap{display:block;text-align:center;margin:0 0px 0px 0px;padding:2px;background:#fefefe;border:1px solid rgba(0,0,0,0.1);border-left:5px solid #3cc091;border-right:5px solid #3cc091; border-top:1px solid #3cc091; border-bottom:1px solid #3cc091}
.ticker-wrap>span{display:inline-block;background:#fefefe;padding:0;font:700 13px 'roboto',sans-serif}
.ticker-wrap>span>a{color:#222;text-decoration:none}
#ticker{height:45px;overflow:hidden;background:#fefefe;text-align:left}
#ticker ul{padding:0;margin:0;list-style:none}
#ticker ul li{height:45px;white-space:nowrap}
#ticker ul li img{float:left;width:35px;height:35px;margin:5px 7px 5px 5px}
#ticker ul li h3{margin:0;font:700 16px 'roboto',sans-serif}
#ticker ul li h3 a{color:#333;text-decoration:none;line-height:25px!important}
#ticker ul li .tickermeta{font:400 13px 'roboto',sans-serif;line-height:20px!important;color:#999}
Bước 3: Thêm đoạn code này trên thẻ đóng </body>
<script type='text/javascript'>
//<![CDATA[
// Breaking News Ticker
function getauthor(t){for(var e=0;e<t.length;e++)var i=t[e].name.$t;return i}function getmeta(t){var e=[];e[1]="Jan",e[2]="Feb",e[3]="Mar",e[4]="Apr",e[5]="May",e[6]="Jun",e[7]="Jul",e[8]="Aug",e[9]="Sep",e[10]="Oct",e[11]="Nov",e[12]="Dec";var i=t.substring(0,4),a=t.substring(5,7),n=t.substring(8,10),r=e[parseInt(a,10)]+" "+n+" "+i;return r}function arlinadesignTicker(t){var e=document.querySelector("#ticker"),i=t.feed.entry,a="<ul id='ticket-wrapper-inner'>";if(i){for(var n=0;n<i.length;n++){for(var r=i[n],s=0;s<r.link.length;s++)if("alternate"==r.link[s].rel){var l=r.link[s].href;break}try{var o='<img src="'+r.media$thumbnail.url+'"/>'}catch(t){var o=""}var u=r.title.$t,c=getauthor(r.author),d=getmeta(r.published.$t);a+="<li>"+o+'<h3><a href="'+l+'">'+u+'</a></h3><div class="tickermeta"><span>'+c+"</span> - <span>"+d+"</span></div></li>"}a+="</ul>",e.innerHTML=a}$("#ticker").vTicker()}!function(t){var e={speed:700,pause:4e3,showItems:1,mousePause:!0,height:0,animate:!0,margin:0,padding:0,startPaused:!1},i={moveUp:function(t,e){i.animate(t,e,"up")},moveDown:function(t,e){i.animate(t,e,"down")},animate:function(e,i,a){var n=e.itemHeight,r=e.options,s=e.element,l=s.children("ul"),o="up"===a?"li:first":"li:last";s.trigger("vticker.beforeTick");var u=l.children(o).clone(!0);if(0<r.height&&(n=l.children("li:first").height()),n+=r.margin+2*r.padding,"down"===a&&l.css("top","-"+n+"px").prepend(u),i&&i.animate){if(e.animating)return;e.animating=!0,l.animate("up"===a?{top:"-="+n+"px"}:{top:0},r.speed,function(){t(l).children(o).remove(),t(l).css("top","0px"),e.animating=!1,s.trigger("vticker.afterTick")})}else l.children(o).remove(),l.css("top","0px"),s.trigger("vticker.afterTick");"up"===a&&u.appendTo(l)},nextUsePause:function(){var e=t(this).data("state"),i=e.options;e.isPaused||2>e.itemCount||a.next.call(this,{animate:i.animate})},startInterval:function(){var e=t(this).data("state"),a=this;e.intervalId=setInterval(function(){i.nextUsePause.call(a)},e.options.pause)},stopInterval:function(){var e=t(this).data("state");e&&(e.intervalId&&clearInterval(e.intervalId),e.intervalId=void 0)},restartInterval:function(){i.stopInterval.call(this),i.startInterval.call(this)}},a={init:function(n){a.stop.call(this);var r=jQuery.extend({},e);n=t.extend(r,n);var r=t(this),s={itemCount:r.children("ul").children("li").length,itemHeight:0,itemMargin:0,element:r,animating:!1,options:n,isPaused:n.startPaused?!0:!1,pausedByCode:!1};t(this).data("state",s),r.css({overflow:"hidden",position:"relative"}).children("ul").css({position:"absolute",margin:0,padding:0}).children("li").css({margin:n.margin,padding:n.padding}),isNaN(n.height)||0===n.height?(r.children("ul").children("li").each(function(){var e=t(this);e.height()>s.itemHeight&&(s.itemHeight=e.height())}),r.children("ul").children("li").each(function(){t(this).height(s.itemHeight)}),r.height((s.itemHeight+(n.margin+2*n.padding))*n.showItems+n.margin)):r.height(n.height);var l=this;n.startPaused||i.startInterval.call(l),n.mousePause&&r.bind("mouseenter",function(){!0!==s.isPaused&&(s.pausedByCode=!0,i.stopInterval.call(l),a.pause.call(l,!0))}).bind("mouseleave",function(){(!0!==s.isPaused||s.pausedByCode)&&(s.pausedByCode=!1,a.pause.call(l,!1),i.startInterval.call(l))})},pause:function(e){var i=t(this).data("state");if(i){if(2>i.itemCount)return!1;i.isPaused=e,i=i.element,e?(t(this).addClass("paused"),i.trigger("vticker.pause")):(t(this).removeClass("paused"),i.trigger("vticker.resume"))}},next:function(e){var a=t(this).data("state");if(a){if(a.animating||2>a.itemCount)return!1;i.restartInterval.call(this),i.moveUp(a,e)}},prev:function(e){var a=t(this).data("state");if(a){if(a.animating||2>a.itemCount)return!1;i.restartInterval.call(this),i.moveDown(a,e)}},stop:function(){t(this).data("state")&&i.stopInterval.call(this)},remove:function(){var e=t(this).data("state");e&&(i.stopInterval.call(this),e=e.element,e.unbind(),e.remove())}};t.fn.vTicker=function(e){return a[e]?a[e].apply(this,Array.prototype.slice.call(arguments,1)):"object"!=typeof e&&e?void t.error("Method "+e+" does not exist on jQuery.vTicker"):a.init.apply(this,arguments)}}(jQuery),$(function(){var t=document.createElement("script");t.src="http://"+$(".ticker-wrap").data("domain")+"/feeds/posts/summary?alt=json&callback=arlinadesignTicker",t.type="text/javascript",document.getElementsByTagName("body")[0].appendChild(t)});
//]]>
</script>
Bước 4: Các bạn đặt đoạn code sau ở nơi mình muốn hiện thị Breaking News. Thường thì mình thấy người ta hay đặt ở phía dưới thanh Menu trên cùng Blog hoặc là các bạn cũng có thể tạo một Widget HTML/Javascript và đặt vào nơi nào mình muốn.
<div class='ticker-wrap' data-domain='www.niemstyle.com'>
<div id='ticker'>
</div>
</div>
Thay Link màu đỏ thành Link Blog của bạn.
Bước 5: Lưu lại và thưởng thức thành quả :)
Khá đơn giản phải không các bạn! Chúc các bạn thành công! Nếu có vấn đề gì cứ bình luận phía dưới mình sẽ giải thích và giúp đỡ cho nhé!

Cùng bình luận bài viết

  1. Lên top cho ai chưa biết nào :v

    Trả lờiXóa
    Trả lời
    1. Cái này ko biết còn xài được ko nữa.

      Xóa
  2. Nhìn cũng đẹp đấy :)

    Trả lờiXóa
  3. Chưa test thử , nghe a nói cũng khá hay có thể tăng được thêm lưu lượng traffic cho web , khi nào rãnh test thử 😘😘

    Trả lờiXóa
    Trả lời
    1. kiểu như cái này áp dụng cho mấy site tin tức thì tốt hơn!

      Xóa

EVENT NIỆM STYLE
Bình luận - Nhận ngay quà khủng!
Coming soon...