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

Tiện ích Tiêu đề bài mới chạy trên đầu 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 .....

Tiện ích này với lệnh css thì nó luôn xuất hiện trên đầu blog vì top=0 nhưng tại thời điểm này do có sự nâng cấp của blogger nên nó chỉ nằm trên đầu các phần như header,main hay sidebar nếu ta thêm tiện ích tại những nơi đó.

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
Nguồn:Just Naira
Tdb Blogspot - Thủ thuật blogspot
Facebook Comments
Blogger Comments