MASIGNASUKAv101
5014812706744541007

Hướng dẫn tạo tiện ích Breaking New cực đẹp cho Blogger

Hướng dẫn tạo tiện ích Breaking New cực đẹp cho Blogger
Add Comments
Thứ Tư, 15 tháng 5, 2019
Tiện ích Breaking New là tiện ích khá phổ biến ở các trang báo chí, tin tức... được dùng để hiển thị các bài viết mới trên Blog. Có thể thấy, tiện ích này có tính năng khá giống với tiện ích Recent Post mình đã giới thiệu nhưng có ít tính năng, giao diện đơn giản hơn.

Cách tạo tiện ích Breaking New cực đẹp cho Blogger
Bước 1 : Trước tiên hãy mở Blogger > Chủ Đề > Chỉnh sửa HTML sau đó thêm mã css này trước </head>
<style type='text/css'>
/* Breaking News */
#breakingwrapper{position:relative;background-color:#fff;color:#ccc;display:block;margin:20px auto 0 auto;overflow:hidden;border-radius:5px;box-shadow:0 2px 3px -2px rgba(0,0,0,0.1)}#breakingnews{width:100%;max-width:990px;display:block;margin:0 auto;line-height:42px;height:42px;overflow:hidden;font-size:13px;padding:0}#breakingnews .tulisbreaking{background:#e74c3c;color:#fff;display:block;padding:0 15px;font-size:13px;font-weight:600;height:28px;line-height:28px;float:left;margin:7px 14px 0 7px;text-align:center;border-radius:3px}#recentbreaking{float:left;margin:0;font-size:13px;color:#222;font-weight:600}#recentbreaking ul,#recentbreaking li{list-style:none;margin:0;padding:0}#recentbreaking li a{color:#222}#recentbreaking li a:hover{color:#222;text-decoration:underline}.blog-date{display:inline-block;float:right;margin:0 20px 0 0;font-size:13px;border-radius:2px;cursor:pointer}#recentbreaking li i{margin:0 10px 0 0}
@media screen and (max-width:768px) {
#breakingwrapper{background-color:#e74c3c;color:#fff;margin:10px auto 20px auto;border-radius:0}#breakingnews{padding:0 20px;color:#fff;overflow:hidden;text-overflow:ellipsis}#recentbreaking{color:#fbc531;text-align:center;float:none;margin:0 auto}#breakingnews .tulisbreaking .breakhidden,#breakingnews .tulisbreaking{display:none}#recentbreaking li a,#recentbreaking li a:hover{color:#fff}}
</style>

Bước 2 : Thêm đoạn mã dưới đây vào trước </body>
<script type='text/javascript'>
//<![CDATA[
// Breaking News
$(document).ready(function(){var e="linkcuaban",t=10;$.ajax({url:""+e+"/feeds/posts/default?alt=json-in-script&amp;max-results="+t,type:"get",dataType:"jsonp",success:function(e){function t(){$("#recentbreaking li:first").slideUp(function(){$(this).appendTo($("#recentbreaking ul")).slideDown()})}var n,r,a="",i=e.feed.entry;if(void 0!==i){a="<ul>";for(var l=0;l<i.length;l++){for(var s=0;s<i[l].link.length;s++)if("alternate"==i[l].link[s].rel){n=i[l].link[s].href;break}r=i[l].title.$t,a+='<li><i class="fa fa-check-square"></i><a href="'+n+'" target="_blank">'+r+"</a></li>"}a+="</ul>",$("#recentbreaking").html(a),setInterval(function(){t()},5e3)}else $("#recentbreaking").html("<span>There nothing here?</span>")},error:function(){$("#recentbreaking").html("<strong>Error Loading Feed!</strong>")}})});
//]]>
</script>
Thay đổi đoạn đánh dấu bằng địa chỉ blog của bạn, và thay số 10 thành số lượng bài viết bạn muốn hiển thị
Bước 3 : Thêm đoạn code này vào vị trí muốn hiển thị Breaking New
<div class="container">
<div id='breakingwrapper'>
<div id='breakingnews'>
<span class='tulisbreaking'>Tin Mới</span>
<div id='recentbreaking'>Loading...</div>
<div class='blog-date'>
<script language='Javascript'>
var dayName = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
var monName = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
var now = new Date();
document.write("" + " " + dayName[now.getDay()] + "," + " " + now.getDate() + " " + monName[now.getMonth()] + "");
</script>
</div>
</div>
</div>
</div>

Bước 4 : Save Template. Xem kết quả bên dưới
Hi vọng bài này sẻ giúp ích cho các bạn. nếu có thắc mắc gì có thể cmt vào bên dưới!