Tiện ích bài mới dạng thanh cuộn ngang và trượt lên cho blogspot

5/10/2021
Hướng dẫn cài đặt tiện ích bài mới với 2 dạng cuộn ngang và trượt lên cho blogspot. có thể áp dụng cho nhãn và toàn blog.

Tiện ích bài mới dạng thanh cuộn ngang cho blogspot-Recent posts scroll bar


Tiện ích bài mới dạng thanh cuộn ngang-Recent posts scroll bar không có gì mới vì các template chia sẻ trên mạng hầu như template nào cũng sử dụng tiện ích này. Nó là một thanh cuộn ngang trong đó các bài mới gồm có tiêu đề,ảnh thumbnail... nối đuôi nhau chạy từ phải qua trái hoặc ngược lại.

Tiện ích này bao gồm có:

- CSS
- Jquery
- Javascript
- HTML
Tiện ích bài mới dạng thanh cuộn cho blogspot-Recent posts scroll bar
Với nhiều style cài đặt vào mẫu,Nhưng vấn đề cơ bản là phần javascript thường được gộp chung vào javascript của giao diện trang chủ rồi mã hóa.
Nếu không gộp vào thì cũng bị cài link trang chủ người chia sẻ và mã hóa.

Nhiều người muốn cài đặt riêng tiện ích này cho blog của mình thường là gặp nhiều khó khăn trong việc không biết nó nằm chỗ nào trong đám js đã bị mã hóa hoặc có js riêng thì lại dính tý cái gọi là bản quyền thành ra không được khoái lắm.

Nội dung bài này là giúp bạn (nếu muốn) cài đặt tiện ích bài mới dạng thanh cuộn cho blogspot chỉ với mỗi tiêu đề bài viết vì không nên tham lam thêm chút ảnh thumbnail làm gì cho nặng blog.

DEMO

Tiện ích bài mới dạng thanh cuộn cho blogspot-Recent posts scroll bar

Cài đặt Tiện ích bài mới dạng thanh cuộn cho blogspot

Bước 1

Dán đoạn css sau vào trước thẻ ]]></b:skin>

/* Newsticker */
.tickeerHeaderBar{height:30px;background:#fff;width:100%;margin:0;padding:0;border-bottom:1px solid #15a1b1;overflow:hidden}
.tickeer{width:100%;margin:0;padding:0;line-height:25px;text-align:left;font-size:14px;color:#f00;overflow:hidden;z-index:3;clear:both}
.tickeertitle{background:#15a1b1;position:absolute;float:left;padding:0 10px;height:30px;line-height:30px;color:#FFF;font-family:Georgia,serif;text-transform:uppercase;font-size:12px;margin-right:10px;z-index:4}
@media screen and (max-width:800px){.tickeerHeaderBar{max-width:100% !important;width:100% !important;float:left !important}
}

Bước 2

Thêm vào trước thẻ </head> nếu blog có rồi thì bỏ qua.

<script async='' src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' type='text/javascript'/>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

Tiếp tục thêm đoạn javascript sau

<script type='text/javascript'>
//<![CDATA[
function RecentPostsScrollerv2(json) {
 var sHeadLines;
 var sPostURL;
 var objPost;
 var sMoqueeHTMLStart;
 var sMoqueeHTMLEnd;
 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;
  }
  document.write(sMoqueeHTMLStart + sHeadLines + sMoqueeHTMLEnd)
 } catch (exception) {
  alert(exception);
 }
}
//]]>
</script>

Bước 3
Bạn thêm đoạn code sau vào trước thẻ đóng </div> của phần header (<div id='header-wrapper'>) hay là thêm vào cuối phần menu chính trên header.
Chỗ đó có dạng:
<div style='clear: both'/>
      </div>
      <!-- End header-wrapper -->
      <div id='main-outer'>
        <div id='main-wrapper'>
Thêm vào ngay trên nó.
Code cần thêm:
<div class='tickeerHeaderBar'>
<div class='tickeer'><div class='tickeertitle'><i class='fa fa-refresh fa-spin'/>&amp;nbsp;&amp;nbsp;Posts News</div>
<script type='text/javascript'>
var nMaxPosts = 10;//số bài viết
var nWidth = 100;//khoảng cách giữa 2 lần
var nScrollDelay = 175;//tốc độ cuộn,càng nhỏ càng nhanh
var sDirection = &quot;left&quot;;
var sOpenLinkLocation ;
var sBulletChar = &quot;&#9830;&quot;;//hình ngăn cách giữa 2 tiêu đề
</script>
<script src='/feeds/posts/default?alt=json-in-script&amp;callback=RecentPostsScrollerv2&amp;max-results=30 ' type='text/javascript'/>
</div>
</div>

Trong đó:

/feeds/posts/default là lấy dữ liệu toàn blog còn theo nhãn thì đổi thành

/feeds/posts/default/-/TÊN NHÃN

Tiện ích bài mới dang trượt lên cho blogspot-Ajax Breaking New


Bài viết này mình Hướng dẫn code Ajax Breaking New cho blogger phù hợp làm mục bài viết mới toàn blog hoặc bài viết mới theo nhãn.

Demo

Breaking News
Loading...


Bước 1: Các bạn thêm CSS trước thẻ đóng </b:skin>

#breakingnews{clear:both;width:100%;margin:20px 0 0;height:42px;line-height:29px;overflow:hidden;border-bottom:2px solid #15a1b1}
#breakingnews .breakhead{position:absolute;background:none repeat scroll 0 0 #15a1b1;color:#fff;display:block;float:left;font-family:'Arial';font-size:14px;text-transform:uppercase;padding:6.5px 22px}
#adbreakingnews li a{color:#444;margin-top:10px;transition:all 0.5s ease-in-out}
#adbreakingnews li a:hover{color:#444;text-decoration:underline}
#adbreakingnews{float:left;margin-left:175px;margin-top:6px}
#adbreakingnews ul,#adbreakingnews li{list-style:none;margin:0 0 0 10px;;padding:0}

Bước 2: Thêm đoạn HTML vào vị trí cần hiển thị

<div id='breakingnews'>
  <span class='breakhead'>Breaking News</span>
  <div id='adbreakingnews'>Loading...</div>
</div>

Bước 3: Đặt đoạn code Ajax này trước thẻ đóng </body>

<script>
  //<![CDATA[
  $(document).ready(function() {
    $.ajax({
      url: "/feeds/posts/default",
      type: "get",
      data: {
        alt: "json",
        "max-results": 5
      },
      dataType: "jsonp",
      success: function(e) {
        function t() {
          $("#adbreakingnews li:first").slideUp(function() {
            $(this).appendTo($("#adbreakingnews ul")).slideDown()
          })
        }
        var a = e.feed.entry;
        if (void 0 !== a) {
          var 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) {
                var n = a[l].link[o].href;
                break
              } r = a[l].title.$t, s += '<li><a href="' + n + '">' + r + "</a></li>"
          }
          s += "</ul>", $("#adbreakingnews").html(s), setInterval(function() {
            t()
          }, 5e3)
        } else $("#adbreakingnews").html("<span>Không có bài viết nào!</span>")
      },
      error: function() {
        $("#adbreakingnews").html("<strong>Lỗi load Feed!</strong>")
      }
    })
  });
  //]]>
</script>

Trong đó:

"max-results": 5 nghĩa là chỉ hiển thị 5 bài viết mới nhất url: "/feeds/posts/default" lấy bài viết gần đây, để lấy theo nhãn các bạn sửa như sau

url: "/feeds/posts/default/-/TÊN NHÃN"

5e3 = 5000 = 5 giây chuyển bài, các bạn có thể tùy chỉnh.

Chúc bạn cài thành công!

Ads in post custom1