Widget Breaking News 2019 Style For Blogspot

Ở bài viết này tôi sẽ hướng dẫn các bạn các tạo Widget Breaking News cho Blogspot nhé :) Code Breakings New này do Trần Thanh Bình viết và chia sẻ cho mình, code này lấy ý tưởng từ widget NewsFlash của theme Newspaper trên Wordpress.

Add Widget To Blogspot

- Bạn cho đoạn javascript sau vào trước thẻ đóng </body> :

<script type='text/javascript'>
//<![CDATA[
// Breaking new
$(document).ready(function() {
$(".breaking-sec .widget-content").each(function() {
var tickerTag = $(this).text();
var z = tickerTag.match(/[^[\]]+(?=])/g);
$(this).html("<span>" + z[0] + "</span>");
var tipo = "<span>recent</span>";
var ticker_number = $(this).find("span").eq(0).text();
if(tipo.match('recent')){
$.ajax({
url: "/feeds/posts/default?alt=json-in-script&max-results=" + ticker_number,
type: 'get',
dataType: "jsonp",
success: function(data) {
var posturl = "";
var htmlcode = '<div id="breaking-news"><div id="breaking-nav"></div><ul class="slides">';
for (var i = 0; i < data.feed.entry.length; i++) {
for (var j = 0; j < data.feed.entry[i].link.length; j++) {
if (data.feed.entry[i].link[j].rel == "alternate") {
posturl = data.feed.entry[i].link[j].href;
break;
}
}
var posttitle = data.feed.entry[i].title.$t;
var postTag = data.feed.entry[i].category[0].term;
htmlcode += '<li><a class="post-tag">' + postTag + '</a><h3><a class="breaking-post" href="' + posturl + '">' + posttitle + '</a></h3></li>';
}
htmlcode += '</ul></div>';
$(".breaking-sec .widget-content").each(function() {
$(this).html(htmlcode);
$(this).removeClass('widget-content').addClass('breaking-content');
$('#breaking-news').flexslider({
controlsContainer: '#breaking-nav',
pauseOnAction: false,
pauseOnHover: true,
animation: 'slide',
direction: 'vertical',
animationSpeed: 800,
slideshowSpeed: 5500,
controlNav: false,
prevText: '',
nextText: ''
});
$("p.trans").each(function() {
var e = $(this).text();
var t = $(this).attr("data-tran");
$("#pages-wrapper *").replaceText(e, t)
});
});
}
});
}
});
});
//]]>
</script>

- Tiếp đến bạn chèn CSS này vào trước ]]></b:skin> :

/* Breaking News */
#top-wrap{position:relative;z-index:5;width:100%;float:left;height:38px;margin-bottom:15px}
.top-wrap-head{position:relative;height:38px;overflow:hidden}
.breaking-sec .widget-content{display:none}
#breaking-sec h2.title{background-color:#189dfe;display:block;height:38px;padding:0 10px;font-size:11px;font-weight:700;line-height:38px;float:left;color:#fff;text-transform:uppercase}
#breaking-news .slides li{display:none;padding:0;margin-left:10px}
a.post-tag{float:right;font-size:10px;font-weight:700;background-color:#189dfe;color:#fff;padding:1px 3px 2px;border-radius:2px;margin:10.5px 6px 0 0}
#breaking-news h3{font-size:13px;font-weight:400;line-height:37px}
a.breaking-post{color:#212121}
.breaking-post:hover{color:#189dfe}
#breaking-nav{float:right;width:82px;height:38px;border:1px solid #eee}
#breaking-nav ul li{padding:0}
#breaking-nav a{position:static;width:40px;height:35.9px;line-height:39px;text-align:center;float:left;background:#fff}
#breaking-nav a.flex-prev{border-right:1px solid rgb(238, 238, 238)}
#breaking-nav a:before{font-family:"Font Awesome 5 Free";font-weight:900}
#breaking-nav a.flex-prev:before{content:"\f053"}
#breaking-nav a.flex-next:before{content:"\f054"}
#breaking-nav a:hover{background-color:#f7f7f7}
.flex-viewport{height:38px!important;border:1px solid rgb(238, 238, 238);border-width:1px 0 1px 0!important}

- Cuối cùng bạn chèn đoạn HTML này vào nơi cần hiển thị Breaking News ( đặt nó dưới menu ở t rang chủ).

<div id='top-wrap'>
<div class='top-wrap-head row'>

<b:section class='breaking-sec' id='breaking-sec' maxwidgets='1' name='Breaking News' showaddelement='yes'>
<b:widget id='HTML5' locked='false' title='BREAKING NEWS' type='HTML' version='1'>
<b:widget-settings>
<b:widget-setting name='content'>[5]</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'><i class='fas fa-bolt'/> <data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
</div>
</div>

Vậy là xong, chúc các bạn thành công với thủ thuật tạo Widget Breaking News này, nếu thấy hay hãy để lại một bình luận và click quảng cáo giúp JsBlogger phát triển nhé !!!