Thanh điều hướng trượt dọc cho blogger

Đây là thanh điều hướng hiển thị trượt dọc bên trái/phải của blog và có 5 lựa chọn điều hướng cho người dùng. 

Các bạn có thể xem demo ở ngay blog này

1. Đi tới Bài đăng Cũ hơn
2. Đi tới Bài đăng Mới hơn
3. Đi tới Bài đăng Ngẫu nhiên
4. Trở về Trang chủ
5. Đi lên đầu blog

Làm cách nào để thêm thanh điều hướng vào blog?

Bước 1: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.

#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/AVvXsEhs-c8eiXkDyj8GxswbzwQgkPckh7HBR6A7dfduV5zyeVI2H7sZkXAlU99RDtej61nakbjWN4wnL7ShSsSqsTVlHk3sGW30SjieMD3aHj2j5QuF8x48T8Ca2IT4hJggBF5CgpJA_VZdt1j1/h120/float-menu.png)}
#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ạn có thể thay skin cho các nút trong thanh điều hướng bằng cách thay link được tô màu vàng bằng các hình ảnh dưới đây

Bước 2: Thêm đoạn mã dưới đây vào sau thẻ <b:includable id='main' var='top'> trong template của bạn.

<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 được bôi màu xanh ở code phía trên
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 được bôi màu vàng phía trên là

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

Và thêm </b:if> vào sau nó
Tóm lại bạn vừa không muốn sử dụng nút Lên Đầu của tiện ích và nút Home không xuất hiện ở trang chủ thì thêm đoạn code sau vào bước 2

<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>
  <b:if cond='data:blog.pageType == "item"'><li id='menu-home'>   <a expr:href='data:blog.homepageUrl' title='Trang chủ'/>  </li></b:if> </ul>
</div>

Chúc các bạn vui vẻ!