Tạo thanh điều hướng cho blog

·
Đâ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. 
float menu
  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

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/AVvXsEigoQJRVdfKWx9p1gsEXSnxCffiVvZD00WUvORUXNuFDIXiKw5CUSu3HCqI_qhlMmMkpBk63-3WTXxXgei5bptq23PY7FlrGYNDPmkty0fPhEUf6K3ogoVL4lZKVijL1vipktdTv08N-Yw/)}
#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>

Tác giả: Duy Pham
Đây là thành quả
Mặt khác, chúng ta cũng có thể dùng cách trượt lên xuống, mình chép mã code tương tự nhưng cái style thì hơi khó, nhưng vẫn hiển thị.

1. Xây dựng giao diện

Đầu tiên chúng ta sẽ xây dựng các thành phần, các bạn tạo file index.html và dán đoạn mã sau vào trong thẻ body:
Code
1
2
3
4
5
6
7
<div class="container">
    <h2>Freetuts.net hướng dẫn tạo các dấu mũi tên</h2>
    <p>Right arrow: <i class="arrow right"></i></p>
    <p>Left arrow: <i class="arrow left"></i></p>
    <p>Up arrow: <i class="arrow up"></i></p>
    <p>Down arrow: <i class="arrow down"></i></p>
</div>
Các thành phần này đều rất đơn giản, chúng ta sẽ tạo các thẻ i để hiện thị các dấu mũi tên.
OK giờ chuyển qua bước tiếp theo.

2. Thêm CSS cho giao diện

Chúng ta đã có thành phần hiển thị rồi giờ sử dụng CSS để định dạng cho chúng, các bạn đặt đoạn CSS dưới đây vào bên trong thẻ style:
CodeRUN
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
.container {
    width: 80%;
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
    margin: auto;
}
h2 {
    text-align: center;
}
i {
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
}
p {
    width: 50%;
    margin: auto;
    text-align: center;
}
.right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}
.left {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}
.up {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}
.down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}
Các đoạn mã trên đều rất cơ bản, các bạn có thể tuỳ chỉnh theo ý thích sao cho phù hợp nhất với website của mình.
Thuật toán chúng ta sử dụng ở đây như sau:
  • Đầu tiên là tạo border cho thẻ i, tuy nhiên chỉ tạo 2 cạnh của border, sau khi tạo ta sẽ được một icon là 2 cạnh của hình vuông.
  • Tiếp đến, ta sẽ sử dụng thuộc tính transform để xoay icon trên thành các dấu phù hợpT
Thành quả đạt được
 
Có còn hơn không, nhìn bên phải có mũi tên kéo lên cao là được rồi

By at

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

Đăng nhận xét