TẠO THANH ĐIỀU HƯỚNG DỌC CHO BLOGGER

Xin chào các bạn, hôm nay StarThảo-IT sẽ share về cho ace quả thanh điều hướng khá ngầu.
Bài này code mình copy thôi, nhưng có một số thành phần hãm l** không thèm ghi nguồn để tôn trọng tác giả gì cả.
Thôi nói nhiều vỡi , bắt đầu quất nào :)
Thanh điều hướng này giúp chúng ta :

• Đi tới bài đăng cũ hơn.
• Đi tới bài đăng mới hơn.
• Đi tới bài đăng ngẫu nhiên.
• Trở về trang chủ.
• Di chuyển lên đầu blog (btt)

Demo về em nó:

Ở đây, chúng ta có tới 5 sự lựa chọn, thật tuyệt vời phải không nào?
Bắt đầu:
Bước 1: Blogger -> Chủ đề -> Chỉnh sửa HTML
Bước 2: Các bạn tìm thẻ  ]]></b:skin> và thêm vào trước nó đoạn code sau:

#float-menu{position:fixed;top:20%;left:0;border-top:1px solid #CCC;border-right:1px solid #CCC;border-bottom:1px solid #CCC;background:#EEE}
#float-menu ul{padding:0}
#float-menu li{margin:5px;list-style-type:none}
#float-menu li,#float-menu li a{width:24px;height:24px}
#float-menu li a{float:left}
#float-menu #menu-right,#float-menu #menu-left,#float-menu li a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAV1E6uCT3QXhyGrUCcXeZbt6-1b7cK-_ps41at9e2-SpmC6WNy1iAhkVm2vqiTeOrKbu0lGxSp2pgB5t6M0nhWSaAL0XPNqnlcafTzOKiRGjRpvOedIMluMfbJwWVUJ-bK6M00V_N8lA/)}
#float-menu #menu-right a{background-position:0 -120px}
#float-menu #menu-right a:hover,#float-menu #menu-right{background-position:-24px -120px}
#float-menu #menu-left a{background-position:0 -24px}
#float-menu #menu-left a:hover,#float-menu #menu-left{background-position:-24px -24px}
#float-menu #menu-random a{background-position:0 -48px}
#float-menu #menu-random a:hover{background-position:-24px -48px}
#float-menu #menu-home a{background-position:0 -72px}
#float-menu #menu-home a:hover{background-position:-24px -72px}
#float-menu #menu-top a{background-position:0 -96px}
#float-menu #menu-top a:hover{background-position:-24px -96px}

Bước 3: Các bạn tìm thẻ :  <b:includable id='main' var='top'> và chèn đoạn code sau vào sau thẻ đó:

<div id='float-menu'>
 <ul>
  <li id='menu-right'>
   <b:if cond='data:olderPageUrl'>
    <b:if cond='data:olderPageUrl != data:blog.url'>
     <a expr:href='data:olderPageUrl' rel='prev' expr:title='data:olderPageTitle'></a>
    </b:if>
   </b:if>
  </li>
  <li id='menu-left'>
   <b:if cond='data:newerPageUrl'>
    <b:if cond='data:newerPageUrl != data:blog.url'>
     <a expr:href='data:newerPageUrl' rel='next' expr:title='data:newerPageTitle'></a>
    </b:if>
   </b:if>
  </li>
  <li id='menu-random'>
   <script type='text/javaScript'>//<![CDATA[
   var rdp_current=0;total_posts=0;function totalposts(json){total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){rdp_current=1+Math.round(Math.random()*(total_posts-1))};
   //]]></script>
   <script type='text/javaScript'>//<![CDATA[
   function rdp(json){var dw='';entry=json.feed.entry[0];for(var i=0;i<entry.link.length;i++){if(entry.link[i].rel=='alternate'){rdp_posturl=entry.link[i].href}};dw+='<a href="'+rdp_posturl+'"  title="Bài đăng Ngẫu nhiên" rel="nofollow"></a>';document.getElementById('menu-random').innerHTML=dw;};getvalue();document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current+'&max-results=1&callback=rdp\"><\/script>');
   //]]></script>
  </li>
  <li id='menu-home'>
   <a expr:href='data:blog.homepageUrl' title='Trang chủ'/>
  </li>
  <li id='menu-top'>
   <a href='#' title='Lên trên' rel="nofollow"/>
  </li>
 </ul>
</div>

Những tính năng này mọi người đều không xa lạ nên chắc không cần chú thích kỹ nữa! Tiện ích trên phải nói rất tiện cho blog phải không? Tuy nhiên bạn có thể sửa chữa một số phần sao cho phù hợp với blog của mình hơn. Ví dụ như blog của bạn đã có nút Lên Đầu Trang thì bạn không cần thiết phải dùng chức năng này nữa, vậy bạn chỉ cần xóa dòng:

  <li id='menu-top'>
   <a href='#' title='Lên trên' rel="nofollow"/>
  </li>

  trong code ở bước 3 là xong.
Bạn không muốn hiện nút Home ở Trang Chủ mà chỉ muốn hiện tại các trang bài viết thì bạn thêm :
 <b:if cond='data:blog.pageType == "item"'> vào trước đoạn code:

  <li id='menu-home'>
   <a expr:href='data:blog.homepageUrl' title='Trang chủ'/>
  </li>

và thêm thẻ đóng  </b:if> vào sau nó là được.
Vậy là được rồi nhé, chúc các bạn thành công!
                                                                                                                     Code: TrollVL Blog