Iris Tips
Iris TipsHow to Add Breaking News Feed on Blog
Iris Tips sẽ hướng dẫn cho các bạn thêm breaking news vào blog của mình. Với 2 style cho bạn lựa chọn, các bạn theo dõi nhé
Thêm Breaking News vào Blogger/Blogspot
Style 1
Bước 1: Thêm đoạn CSS sau trước thẻ ]]></b:skin>
/* CSS Breaking News */
#breakingnews {margin:15px 0 0 0;margin-right:15px;height:42px;line-height:29px;overflow:hidden;background:#fff;border:1px solid #e6e6e6;}
#breakingnews .breakhead {position:absolute;background:none repeat scroll 0 0 #363b40;color:#fff;display:block;float:left;font-family:inherit;font-size:16px;font-weight:400;text-transform:uppercase;padding:6.5px 22px;}
#adbreakingnews li a {font-family:inherit;font-weight:400;color:#666;margin-top:10px;transition:all 0.5s ease-in-out;}
#adbreakingnews li a:hover {color:#359bed;}
#adbreakingnews {float:left;margin-left:75px;margin-top:6px;}
#adbreakingnews ul,#adbreakingnews li{list-style:none;margin:0;padding:0}
@media only screen and (max-width:640px){
#breakingnews {margin:20px 0 0 0;margin-right:0;}
#breakingnews .breakhead {padding:6.5px 14px;}
#adbreakingnews {margin-left:50px;}} Bước 2: Thêm đoạn script sau trước thẻ đóng </body>
<script type='text/javascript'>
//<![CDATA[
// Breaking News
$(document).ready(function(){var e="http://iris-tips.blogspot.com",t=20;$.ajax({url:""+e+"/feeds/posts/default?alt=json-in-script&max-results="+t,type:"get",dataType:"jsonp",success:function(e){function t(){$("#adbreakingnews li:first").slideUp(function(){$(this).appendTo($("#adbreakingnews ul")).slideDown()})}var n,r,s="",a=e.feed.entry;if(void 0!==a){s="<ul>";for(var l=0;l<a.length;l++){for(var o=0;o<a[l].link.length;o++)if("alternate"==a[l].link[o].rel){n=a[l].link[o].href;break}r=a[l].title.$t,s+='<li><a href="'+n+'" target="_blank">'+r+"</a></li>"}s+="</ul>",$("#adbreakingnews").html(s),setInterval(function(){t()},5e3)}else $("#adbreakingnews").html("<span>No result!</span>")},error:function(){$("#adbreakingnews").html("<strong>Error Loading Feed!</strong>")}})});
//]]>
</script> Đổi http://iris-tips.blogspot.com thành website của bạn, t=20 là số bài viết gần đây bạn muốn hiển thị trên breaking news
Bước 3: Thêm đoạn code sau tại nơi mà bạn muốn hiển thị breaking news (giữa thẻ <body> và </body>)
<div id='breakingnews'><span class='breakhead'><i class='fa fa-rss'/></span>
<div id='adbreakingnews'>Loading...</div></div> Nếu muốn breaking news chỉ hiển thị tại trang chủ thì thay đoạn code trên thành đoạn code sau
<b:if cond='data:blog.pageType == "index"'>
<div id='breakingnews'><span class='breakhead'><i class='fa fa-rss'/></span>
<div id='adbreakingnews'>Loading...</div></div>
</b:if> Bước 4: Thêm đoạn script sau trước thẻ đóng </body> nếu breaking news không hoạt động
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script> Style 2
Bước 1: Thêm đoạn CSS sau trước thẻ ]]></b:skin>
#newsjo {background: rgba(0,0,0,0.5);
display: block;
height: 20px;
line-height: 20px;
overflow: hidden;
padding: 5px 0px;
width: 835px;
margin-left: 5px;margin-bottom:30px;}
.titlenewsjo {background: rgba(0,0,0,0.5);
color: #fff;
display: block;
float: left;
padding: 5px;
margin-top: -5px;
position: absolute;
width: 90px;
text-align: center;}
#ltspostsjo { float: left; margin-left: 120px; }
#ltspostsjo ul,#ltspostsjo li{list-style:none;margin:0;padding:0;}
#ltspostsjo li a { background: none !important; color:#fff !important;font-weight: 300;
font-size: 11pt;letter-spacing: 0.02em;text-decoration: none; }
span.titlenewsjo::before {
display: inline-block;
width: 65px;
text-align: left;
text-transform: none;
font-weight: normal;
font-style: normal;
font-variant: normal;
line-height: 1;
speak: none;
content:"\f006";
font: normal normal normal 17px/1 FontAwesome;
color: #FF0066;
position: absolute;
left: 9px;
top: 7px;
}
@media screen and (max-width:920px){
#casing {
width: 750px;}
#newsjo{max-width:730px;}
#content{max-width:670px;}
.crop {width: 235px;
height: 111px;}
.header-slide {
background-size: 100%;
}
.header-wrapper{height:300px;}
} Bước 2: Thêm đoạn script sau trước thẻ đóng </body>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'http://iris-tips.blogspot.com', // Replace With your Blog Url
numpostx = 20; // Maximum Post
$.ajax({
url: ''+url_blog+'/feeds/posts/default?alt=json-in-script&max-results=' + numpostx + '',
type: 'get',
dataType: "jsonp",
success: function(data) {
var posturl, posttitle, skeleton = '',
entry = data.feed.entry;
if (entry !== undefined) {
skeleton = "<ul>";
for (var i = 0; i < entry.length; i++) {
for (var j=0; j < entry[i].link.length; j++)
{
if (entry[i].link[j].rel == "alternate")
{
posturl = entry[i].link[j].href;
break;
}
}
posttitle = entry[i].title.$t;
skeleton += '<li><a href="' + posturl + '" target="_blank">' + posttitle + '</a></li>';
}
skeleton += '</ul>';
$('#ltspostsjo').html(skeleton);
function tick(){
$('#ltspostsjo li:first').slideUp( function () { $(this).appendTo($('#ltspostsjo ul')).slideDown(); });
}
setInterval(function(){ tick () }, 5000);
} else {
$('#ltspostsjo').html('<span>No result!</span>');
}
},
error: function() {
$('#ltspostsjo').html('<strong>Error Loading Feed!</strong>');
}
});
});
//]]>
</script>
<div class='clear'></div> Đổi http://iris-tips.blogspot.com thành website của bạn, t=20 là số bài viết gần đây bạn muốn hiển thị trên breaking news
Bước 3: Thêm đoạn code sau tại nơi mà bạn muốn hiển thị breaking news (giữa thẻ <body> và </body>)
<div id='casing'>
<div id='newsjo'><span class='titlenewsjo'>NEWS</span>
<div id='ltspostsjo'>Loading...</div></div> Nếu muốn breaking news chỉ hiển thị tại trang chủ thì thay đoạn code trên thành đoạn code sau
<b:if cond='data:blog.pageType == "index"'>
<div id='casing'>
<div id='newsjo'><span class='titlenewsjo'>NEWS</span>
<div id='ltspostsjo'>Loading...</div></div>
</b:if> Bước 4: Thêm đoạn script sau trước thẻ đóng </body> nếu breaking news không hoạt động
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script> Created by Iris Tips
Chào anh Iris,
Trả lờiXóaEm đã thử áp dụng nhưng bị lỗi không được đẹp lắm _ _!
Do khoảng cách dòng gần quá nên hiện cả những ký tự thừa ở dưới của dòng sau.
ẢNH http://imageshack.com/a/img924/4223/bRtk2H.png
Anh có thể hướng dẫn em cách fix KHOẢNG CÁCH DÒNG được không ạ?
Em đã chỉnh thông số line-height của css mà vẫn không được :(
P/S: Em có làm theo bài viết Responsive Breaking News của anh, nhưng nó bị lỗi Error Loading Feed! mà không fix được _ _! Nên phải sử dụng BN của bài này đỡ _ _! Nếu được anh chỉ luôn cách fix với ạ!
Cảm ơn anh
oh sr bạn Blogger không có gửi email báo có bình luận này của bạn nên giờ mới thấy.
XóaChỉnh CSS thì bạn hãy chỉnh lại 2 chỗ
#newsjo {line-height: 22px;}
Với
.titlenewsjo {padding: 4px;}
Bạn thử chỉnh lại 2 dòng đó xem sao nhé.
Còn cái breaking news ý bạn nói là cái có ảnh thumbnail ở bài viết này ah?
http://iris-tips.blogspot.com/2016/09/tao-responsive-breaking-news-co-anh-thumbnail-blogger.html
Error Loading Feed! có thể do bạn gõ sai tên miền, chỗ "data-domain=" bạn chỉ gõ đúng tên miền thôi không có http:// nhe bạn ví dụ data-domain='iris-tips.blogspot.com' ngoài ra blog phải đặt ở chế độ công cộng breaking news mới hoạt động nhé
Đã edit nhưng vẫn không được anh ơi! Nó vẫn vậy _ _!
XóaCòn về phần Responsive Breaking News em đã edit đúng cái data-domain='kelvin-duong.blogspot.com' nhưng nó vẫn báo Error Loading Feed!?? (Blog này vẫn mở hoạt động công cộng)
Bạn qua bài kia cập nhật lại đoạn script ở bước 2 nhé, mình mới cập nhật rồi đấy. Đoạn script đấy dài quá không post vào comment được.
XóaDemo tại đây nhé.
https://goo.gl/HQizoq
Dạ em vừa fix được cái vấn đề của style 1 ở trên rồi ạ ^^
XóaÀ em cũng vừa test thử lại cái Responsive Breaking News và nó cũng hoạt động được luôn rồi ạ. Tuy nhiên phần Tiêu Đề nó cũng bị vượt khung.
Anh xem thử tại kelvin-duong.blogspot.com
Xóa bớt CSS đi bạn, mình xem thấy trên blog bạn có đến tận 4-5 đoạn CSS về Breaking News, dùng cái nào thì dùng 1 cái thôi bạn, có mấy cái nó đặt tên Class với ID giống là bị xung đột với nhau đó bạn.
XóaÀ lúc đó em chèn vào 2 cái để anh vào test giúp em ạ ^^! Mà em edit được rồi nhưng lại gặp phải vấn đề khác!
Trả lờiXóaMà không biết sao làm xong edit được rồi nhưng hôm nay vào check thì nó lỗi ko hiện nữa, ngoài ra Drop Menu không sổ xuống được nữa ạ?
https://3.bp.blogspot.com/-KKU_0Sy_MU4/WbuDHR6ThMI/AAAAAAAADjQ/i6gSuKM3dyU6FPXxzZKAoOArwNBNTfxuwCLcBGAs/s320/ScreenShot_20170915143341.png
Có phải lỗi xung đột script gì không anh?
Rồi khi click vào bài viết thì nút NEXT POST, không còn hiển thị tiêu đề của bài đăng nữa mà chỉ là dòng chữ Next Post »
Tuy nhiên lúc em xóa cái script của cái Breaking News thì cái nút TOP Button xuất hiện trở lại :|
Nhiều khi do lỗi mạng đó mấy hôm nay hình như đang đứt cáp, mạng chậm quá :(
XóaMình nghĩ nếu xung đột thì chắc do cái khác chứ không phải Breaking News đâu, cái đó mình vẫn đang sử dụng trên website mình bình thường mà.
Dạ mạng chậm thiệt _ _!
XóaCái đó hình như là lỗi code (chắc trong lúc edit xóa nhầm dấu đóng code hay gì đó)
Cũng may có lưu lại Template trước đó vài ngày nên fix lại cũng ổn rồi ạ ^^
Cảm ơn anh :D
Mà anh có hướng dẫn cách làm trang http://iris-tips.blogspot.com/p/tools.html giống anh được không ạ?
Breaking News trang bạn hình như lại lỗi nữa rồi kìa ;-P Mỗi lần chỉnh sửa gì thì chú ý coi chừng xung đột với các thủ thuật khác nhé.
XóaỦa lỗi gì vậy anh??? Vẫn chạy bình thường mà anh? Chắc tại nó load hơi lâu ^^!
XóaMà anh có hướng dẫn cách làm trang http://iris-tips.blogspot.com/p/tools.html giống anh không ạ? Phần CÔNG CỤ KHÁC đó ạ?
Hiên tại code đó không public bạn, sẽ chia sẻ vào dịp thích hợp nhé. Bạn vẫn có thể sử dụng các công cụ trên trang đó hoàn toàn miễn phí nhé.
XóaDạ cảm ơn anh ^^ Nhìn cái trang Tool đó thích thích ^^ Mong sẽ ra hướng dẫn sớm ^^ Đặt gạch hóng :D
Xóa