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

8 nhận xét

Đâ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

DEMO

Vào Thiết Kế => Chỉnh sửa HTML => Mở rộng tiện ích mẫu.

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 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/AVvXsEhyR5YzFmhbFl84NENhG4_eV1gj3inu6GuKjmlQWAXcDDgD98Jd3fWse8FSvR4NZbLhaeTEapXCt7lL9UzG2guMmGvMX5mpR2YoGrLnRLRhUfM21ETgk_LKTtW5fjyfA9axphmwzyP6GIg/)}
#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 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];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!

Theo: Duypham.