Tạo Thanh Điều Hướng Dọc Cho Blogspot Tuyệt Đẹp

Xin chào các bạn! lại là mình, Star Cường IT đây, hôm nay mình xin hướng dẩn các bạn cách tạo thanh điều hướng dọc cho blogspot mà không cần đến các ứng dụng bên ngoài như mình đang dùng là Zotabox,.. , rất tiện lợi đúng không nào? bắt đầu ngay vào bài thôi!

Thanh Điều Hướng Có Những Gì ?

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

- Đi lên đầu blog

hình minh họa

Hướng Dẩn Tạo Thanh Điều Hướng

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/AVvXsEjjVLBE5vkT-N_0GeFWWm2Sw9q1EI3o1C2-DzZY9rc3v75ZehXwWagtKB6iKGjoVfvW2Bc7LHvQrahl9DwlKXnUlQQ7k2riU1Yl2KsLwYiCG6GlrxPynSPtZMsmYGtWwumqTsDF77zpvMs/)}
#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];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>

 Bước 3: Lưu Template của bạn lại và tận hưởng

Lời Kết

Như vậy, Star Cường IT vừa giới thiệu đến các bạn Tạo Thanh Điều Hướng Dọc Cho Blogspot Tuyệt Đẹp, hi vọng các bạn sẽ cảm thấy thú vị với nó! Chúc các bạn thành công!