Thủ thuật blogspot - Dautoblog

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
Comments blogger

5 nhận xét :

  1. Làm thế nào tùy chỉnh để tiện ích cháy ở vị trí theo ý muốn chứ ko phải ở đầu blog bạn ơi mong bạn chỉ giúp

    Trả lờiXóa
    Trả lời
    1. Trong code tại phần css(trong thẻ style đang để:
      top:0px bạn chỉnh trị số đó theo nguyên tắc trị số càng lớn càng xa đầu blog.

      Xóa
    2. cảm ơn bạn , nhưng khi kéo chuột thì thanh tiện ích tiêu đề cũng chạy theo . như vậy không đẹp có thể cố định được không cho thanh tiêu đề này chạy không bạn?

      Xóa
    3. Cái tiện ích này cổ lắm rồi ít người dùng vì nó thiết kế để cố định ở đầu blog như 1 menu cố định ko thích thì tắt đi nhưng do blog của bạn có menu top nên nó bị đè lên nhau.

      Xóa
    4. Mình góp ý thế này nhé:

      - Tiện ích này nhằm giới thiệu các bài mới gần đây(Recent posts)
      - Bạn đã có slider trượt ngang có chức năng tương tự.
      - Bản thân trang chủ cũng liệt kê bài mới rồi
      Do vậy ko nên dùng nhiều tiện ích cùng chức năng vì nó có javascript nên làm giảm tốc độ load của blog.
      Nói chung nhiều tiện ích và flash cùng hiệu ứng thì blog sẽ đẹp nhưng đổi lại blog sẽ load chậm.

      Xóa