C

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!
Tạo Thanh Điều Hướng Dọc Cho Blogspot Tuyệt Đẹp

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/AVvXsEgWa-l1uMfr4cNz4rdzKEjwz0ApEjdD9KNlHNlAJQf-MEbURs6zaskHoaQUqDhQ-CQlD7DfDlsdrOUFWzxye0lBvdYq3mcGg53zTMHKWNV2S4JepINViL-svdwx7EBseM5wLrEZDcdpmGE/)}
#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!
Tạo Thanh Điều Hướng Dọc Cho Blogspot Tuyệt Đẹp Reviewed by Hoàng Minh Đức on tháng 7 28, 2017 Rating: 5

Không có nhận xét nào:

Một số lưu ý khi bình luận

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy)

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời

Để bình luận một đoạn code, hãy mã hóa code trước nhé

Biểu mẫu liên hệ

Tên

Email *

Thông báo *

Star Cường IT. Được tạo bởi Blogger.