Cách tạo Breaking new trượt ngang đơn giản nhất cho Blogger

reaking new là một tiện ích thường được sử dụng ở các trang tin tức. Tiện ích này lấy tiêu đề các bài đăng mới nhất và trượt ngang giúp người lướt web có thể nhanh chóng theo dõi các tin tức vừa mới cập nhật. Khi người xem thấy tin muốn xem, họ di chuyển chuột đến tin đó, lập tức dòng chuyển động sẽ dừng lại. Và khi người dùng click vào sẽ nhanh chóng mở ra liên kết tương ứng.

Để thêm tiện ích này, bạn chỉ cần thao tác vài bước đơn giản là xong.

Hướng dẫn cách thêm Breaking new cho Blogger

Bước 1: Bạn vào Trang tổng quan -> Bố cục -> Thêm tiện ích -> Cơ bản -> Thêm tiên ích HTML/Javascript -> Thêm đoạn code dưới đây vào nội dung widget:

<style>
.topnews,.topnews a:link {text-decoration: none; color:#FFF !important}
.topnews a:visited {text-decoration: none; color:#FDFDFD !important;}
.topnews a:hover {text-decoration:none; color: red !important;}
</style>
<div class="topnews">
<table border="0" cellspacing="0" cellpadding="0" style="width:100%; padding:3px 3px 3px 3px; border: 1px solid #000;  background-color:#272727;"><tbody><tr><td><div style="position:relative;overflow:hidden;width:100%; height:20px;" onmouseover="copyspeed=pausespeed"
onmouseout="copyspeed=memoryspeed"><div id="memoryscroller" style="position: absolute; left: -101px; top: 0px;"><nobr><script type="text/javascript" async="" src="https://apis.google.com/js/plusone.js" gapi_processed="true"></script><script type="text/javascript">
var nMaxPosts =10;
         var nWidth = 100;
         var nScrollDelay = 0;
         var sDirection = "left";
         var sOpenLinkLocation = "N";
         var sBulletChar = ">>"
</script>
<script type="text/javascript">
function RecentPostsScrollerv2(json) {
var sHeadLines;
var sPostURL;
var objPost;
var sMoqueeHTMLStart;
var sMoqueeHTMLEnd;
var sPoweredBy;
var sHeadlineTerminator;
var sPostLinkLocation;
   try {
    sMoqueeHTMLStart = "\<MARQUEE behavior=\"scroll\" onmouseover=\"this.stop();\" onmouseout=\"this.start();\" ";
    if (nWidth) {
    sMoqueeHTMLStart = sMoqueeHTMLStart + " width = \"" + nWidth + "%\"";
   } else {
    sMoqueeHTMLStart = sMoqueeHTMLStart + " width = \"100%\"";
   }
   if (nScrollDelay) {
    sMoqueeHTMLStart = sMoqueeHTMLStart + " scrolldelay = \"" + nScrollDelay + "\"";
   }
   if (sDirection) {
    sMoqueeHTMLStart = sMoqueeHTMLStart + " direction = \"" + sDirection + "\"\>";
     if (sDirection == "left" || sDirection == "right") {
     sHeadlineTerminator = "&nbsp;&nbsp;";
    } else {
     sHeadlineTerminator = "\<br/\>";
    }
   }
   if (sOpenLinkLocation == "N") {
    sPostLinkLocation = " target= \"_blank\" ";
   } else {
    sPostLinkLocation = " ";
   }
   sMoqueeHTMLEnd = "\</MARQUEE\>"
    sHeadLines = "";
    for (var nFeedCounter = 0; nFeedCounter < nMaxPosts; nFeedCounter++) {
    var objPost = json.feed.entry[nFeedCounter];
     if (nFeedCounter == json.feed.entry.length) break;
     for (var nCounter = 0; nCounter < objPost.link.length; nCounter++) {
     if (objPost.link[nCounter].rel == 'alternate') {
      sPostURL = objPost.link[nCounter].href;
      break;
     }
    }
    sHeadLines = sHeadLines + "\<b\>" + sBulletChar + "\</b\> \<a " + sPostLinkLocation + " href=\"" + sPostURL + "\">" + objPost.title.$t + "\</a\>" +
sHeadlineTerminator;
   }
    if (sDirection == "left") {
    sHeadLines = sHeadLines + "&nbsp;&nbsp;" + sPoweredBy;
   } else if (sDirection == "right") {
    sHeadLines = sPoweredBy + "&nbsp;&nbsp;" + sHeadLines;
   } else if (sDirection == "up") {
    sHeadLines = sHeadLines + "\<br/\>" + sHeadLines;
   }
   document.write(sMoqueeHTMLStart + sHeadLines + sMoqueeHTMLEnd)
} catch (exception) {
   alert(exception);
}
}</script>
<script src="https://m21love.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=RecentPostsScrollerv2&amp;max-results=10"
type="text/javascript"></script></nobr></div></div></td></tr></tbody></table>
</div>

Bước 2: Bấm Lưu lại.
Bước 3: Kéo và thả tiện ích đến nơi bạn muốn hiển thị.
Bước 4: Tùy chỉnh dòng trượt. Bạn lưu ý các tham số sau đây:

Chiều rộng của tiện ích được đặt là 100% của bố cục nhưng cũng có thể được thay đổi hoặc thay thế bằng số lượng pixel . Thay vào đó, chiều cao đã được đặt thành 20 pixel.
Màu tiêu đề của bài đăng là #FFF , màu của tiêu đề đã được truy cập là #FDFDFD trong khi nếu bạn trỏ tiêu đề bằng chuột , tiêu đề đó sẽ ngừng cuộn và màu của nó trở thành màu đỏ .
Màu nền: # 272727 ; thay vào đó nó là màu nền của thanh ngang.
Cuối cùng là đường viền: 1px solid # 000 ; xác định màu sắc, kiểu dáng và độ dày của đường viền tiện ích . Thay đổi thành màu khác cho phù hợp với Blog/Trang của bạn.
Số lượng tiêu đề được hiển thị được đặt thành 10. Bạn có thể thay đổi tùy ý.
var nScrollDelay = 0; nó được sử dụng để tăng hoặc giảm tốc độ cuộn . Các giá trị càng cao, tốc độ càng thấp. Với 200 thay vì 0 , tốc độ cuộn sẽ chỉ còn một nửa.
var sBulletChar = ">> " để đặt hai ký hiệu đứng trước tiêu đề
Địa chỉ nguồn cấp dữ liệu của nguồn tiêu đề phải được đặt và thay thế bằng địa chỉ của blog này.
Cuối cùng là var sOpenLinkLocation = " N "; nó được sử dụng để mở liên kết trong một tab khác.