Tạo Responsive Breaking News có ảnh thumbnail bài viết cho Blogger

Responsive Breaking News with thumbnail for Blogger

Ở một bài viết trước Thêm Breaking News vào Blogger, Iris Tips đã chia sẻ cho các bạn 2 dạng Breaking News khá đẹp mắt phải không nào. Ở bài viết này Iris Tips sẽ giới thiệu cho các bạn một dạng Breaking News khác có kèm theo ảnh thumbnail bài viết, các bạn hãy theo dõi bài viết bên dưới nhé.

Cách thực hiện

1Vào Mẫu >> Chỉnh sửa HTML và thêm đoạn CSS bên dưới vào trước thẻ ]]></b:skin>

/* CSS Breaking News */
.ticker-wrap{margin:15px 0 0 0;margin-right:15px;height:45px;line-height:45px;overflow:hidden;background:#fff;border:1px solid #e6e6e6;}
.ticker-wrap .tickerhead {position:absolute;background:none repeat scroll 0 0 #fff;color:#fc4f3f;display:block;float:left;font-family:'Open Sans';font-size:16px;font-weight:400;text-transform:uppercase;padding:10px 24px;}
.ticker-wrap>span{display:inline-block;background:#fefefe;padding:0;font:700 13px 'Open Sans',sans-serif}
.ticker-wrap>span>a{color:#222;text-decoration:none}
#ticker{height:45px;overflow:hidden;background:#fefefe;text-align:left;margin-left:60px;border-left:1px solid #eee;}
#ticker ul{padding:0;margin:0;list-style:none}
#ticker ul li{height:45px;white-space:nowrap}
#ticker ul li a:hover {color:#00a1d6;}
#ticker ul li img{float:left;width:35px;height:35px;margin:5px 7px 5px 5px}
#ticker ul li h3{margin:0;font:400 16px 'Open Sans',sans-serif}
#ticker ul li h3 a{color:#333;text-decoration:none;line-height:25px!important}
#ticker ul li .tickermeta{font:400 13px 'Open Sans',sans-serif;line-height:20px!important;color:#999}
@media only screen and (max-width:640px){
.ticker-wrap {margin:20px 0 0 0;margin-right:0;}
.ticker-wrap .tickerhead {padding:10px 18px;}
#ticker {margin-left:50px;}}
@media only screen and (max-width:480px){
.ticker-wrap {display:none;}}

2 Tìm đến thẻ </body> và dán script bên dưới vào trước nó.

<script type='text/javascript'>
//<![CDATA[
//Breaking News
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 iristipsTicker(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="https://"+$(".ticker-wrap").data("domain")+"/feeds/posts/summary?alt=json&callback=iristipsTicker",t.type="text/javascript",document.getElementsByTagName("body")[0].appendChild(t)});
//]]>
</script>

3 Copy và dán đoạn code bên dưới vào vị trí mà bạn muốn đặt Breaking News

<div class='ticker-wrap' data-domain='iris-tips.blogspot.com'><span class='tickerhead'><i class='fa fa-bullhorn'/></span>
<div id='ticker'/></div>

Chỉnh sửa: iris-tips.blogspot.com thành tên miền blog của bạn.

• DEMO

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by arlinadzgn/Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm