Đây là thanh điều hướng hiển thị trượt dọc bên trái của blog và có 5 lựa chọn điều hướng cho người dùng.
  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

» Thêm Thanh điều hướng trượt dọc cho Blogger

Sau đây mình sẽ chia sẻ đoạn code được viết bởi duy phạm này đến cho các bạn. Tất nhiên bạn có thể xem bài viết gốc tại đây.
1- Vào Mẫu (template) => Chỉnh sửa HTML
2- 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 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/AVvXsEijp2D6pERd6DeOXc9wC0N2JwClepM1Hei2oLe6H7iE-TGUBSfqLV9v-F1dFQx4ZeiMblCqsK0-wLlnHmciWPVSrgWip9_sc8X7rwJrY72NYZ9PAeYYlj9rMHEdprDXNYp4S7Uj_K1-uwM/)}
#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}

3- 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];rdp_posturl=entry.link[4].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!
Tác giả: Duypham.