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}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.
#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}
<div id='float-menu'>Bước 3: Lưu Template của bạn lại và tận hưởng
<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>
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:
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é