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 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
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.

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

DEMO

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.6.3/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'/>&#160;&#160;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>
Chúc bạn cài thành công!
Nhận xét

3 nhận xét :

  1. Bài đăng thật hữu ích!
    DVD sang thăm, chúc HL vui khỏe, thành công, an lành!
    :)

    Trả lờiXóa
  2. Cảm ơn Dauto Blog rất nhiều.

    Trả lờiXóa