Tiện ích Tiêu đề bài mới chạy(scroll) cho blogspot

Bài viết này muốn chia sẻ một Stickybar đẹp với tiện ích tự động di chuyển bài viết gần đây, tiện ích xuất hiện trên đầu trang blog của bạn và cũng đã tích hợp một nút tắt.

Có thể không phải ai truy cập cũng thích xem thanh cuộn tại đầu Blog, do đó họ được cung cấp một tùy chọn để xem hoặc ẩn thanh cuộn..,chỉ cần làm theo các bước dưới đây đơn giản để thêm tiện ích này vào blog của bạn .....


DEMO

Thêm Recent posts với tiêu đề Scroll trên đầu blogspot

Bước 1:

Như mọi khi, nó là widget dựa trên jQuery, và blog của bạn phải có plugin jQuery.nếu blog của bạn đã có một plugin jQuery mới nhất, thì bỏ qua bước này và trực tiếp thực hiện theo các bước thứ hai.

Nếu không có thì thêm đoạn mã dưới đây trước thẻ </ head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"> </ script>

Bước 2

- Vào Bố cục chọn thêm tiện ích
- Dán code sau vào khung thêm tiện ích rồi save lại

<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>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function() {
function justnaira_stickybar()  {
var jnwh = jQuery(window).height();
var jnpph = jQuery("#jn-stickybar").height();
var jnfromTop = jQuery(window).scrollTop()+0;
 jQuery("#jn-stickybar").css({"top":jnfromTop});
}jQuery(window)
.scroll(justnaira_stickybar)
.resize(justnaira_stickybar)
//alert(jQuery.cookie('sreqshown'));
//var jnww = jQuery(window).width();
//var jnppw = jQuery("#jn-stickybar").width();
//var jnleftm = (jnww-jnppw)/2;
var jnleftm = 0;
//var jnwh = jQuery(window).height();
//var jnpph = jQuery("#jn-stickybar").height();
//var jnfromTop = (jQuery(window).scrollTop()+jnwh-jnpph) / 2; 
jQuery("#jn-stickybar").animate({opacity: "1", left: "0" , left: jnleftm}, 0).show();        
jQuery("#jnclose").click(function() {
jQuery("#jn-stickybar").animate({opacity: "0", left: "-1500"}, 1500).show(); });});
//]]>
</script>
<style>
#jn-stickybar{background:#000000 url('https://1.bp.blogspot.com/-DZhUKT0U5RM/V-ftEt2b4vI/AAAAAAAADi4/cp1fqBOMdxM2gvaRBMTn8vkj2waxGCPagCLcB/s1600/stickybarimg.png') repeat-x;width:100%;margin:0 auto;text-align:center;padding:0;top:0;color:#F40045;border-bottom:2px solid #000;
-webkit-box-shadow:#666666 0px 1px 3px;-moz-box-shadow:#666666 0px 1px 3px;box-shadow:#666666 0px 1px 3px;z-index:999;display:none;height:28px;position:absolute;line-height:1.85em;vertical-align:baseline;letter-spacing:1px;}
#jn-stickybar a{text-decoration:none;color:
#FFFFFF;font-size:13px;font-weight:bold;font-family:arial,"Helvetica",sans-serif;line-height:24px;}
#jn-stickybar a:hover{text-decoration:underline;}
#jn-stickybar p{margin:0;list-style:none;}
#jn-stickybar img{vertical-align:middle;margin-right:6px;}
#jnclose{padding:0px;float:right;cursor:hand;cursor:pointer;color:#ddd!important;}
</style>
<div id='jn-stickybar'>
<script>
var nMaxPosts = 10;var nWidth = 95;var nScrollDelay = 175;var sDirection = "left";var sOpenLinkLocation = "N";var sBulletChar = ">>";
</script>
<script  src="http://kartriderdautocrazy01.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=RecentPostsScrollerv2&amp;max-results=10 " ></script>
<a href="#" id="jnclose"  onclick="return false;"><img src="https://2.bp.blogspot.com/-q2TqQ2_fPkc/V-fo4jBTbfI/AAAAAAAADis/yhCBu19khUgb3KjXlFYTgMyNAubZQcJGQCLcB/s1600/cancel-icon.png"/></a>
</div id='jn-stickybar'>

Các Bạn thay http://kartriderdautocrazy01.blogspot.com thành URL Blog của mình
Thay đổi màu nền,màu link,Chiều di chuyển của tiêu đề,tốc độ di chuyển sao cho phù hợp với ý mình

Hướng dẫn là thêm tiện ích nhưng để thuận tiện bạn nên chia nhỏ làm các phần như CSS để vào phần CSS của blog. Javascript để trước thẻ đóng </head> và phần HTML để ngay sau thẻ <body>

Nguồn:Just Naira
Publis: 

Post a Comment

🙂😬😀😂🤣😍💖
Windows + . hoặc Windows + ; để chèn emoji