Tạo nút button menu bên phải blogspot

Hôm nay mình giới thiệu các bạn một tiên ích khá đẹp mắt cho Blogspot! Tiện ích giúp người đọc dễ dàng di chuyển đến các mục mà không cần phải sử dụng quá nhiều thao tác


Chọn Mở Rộng Tiệng ích trong Blogspot
Tìm :  ]]></b:skin>
Thêm Bên Trên nó đoạn code css sau:


#float-menu{position:fixed;bottom:20%;right:0;border-top:1px solid #CCC;border-left: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/AVvXsEikAZLnpU9j98zWzuogga5t7pFhJ1QSEOi1OIhmPJ4rMI3kRBHc06cdaPMzr32jOh0JbqF-RmGup1hkbA7RoFyGg7GSoaKL9sifMQf7QT8knAkrhhgUU-1y_dVMaBxquiRy6EjqGxyrtQ0/)}
#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}
Tìm <b:includable id='main' var='top'>

Thêm Vào Bên Dưới Đoạn Code sau đây

<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' expr:title='data:olderPageTitle' rel='prev'/>
    </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' expr:title='data:newerPageTitle' rel='next'/>
    </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='#' rel='nofollow' title='Lên trên'/>
  </li>
 </ul>
</div>
Lưu lại và xem kết quả
Chúc các bạn vui vẻ

,

0 nhận xét

Write Down Your Responses

Quảng Cáo/ Thông Báo của lớp báo k32

Tổng số Khách

Thứ Bảy, 13 tháng 4, 2013

Tạo nút button menu bên phải blogspot

Hôm nay mình giới thiệu các bạn một tiên ích khá đẹp mắt cho Blogspot! Tiện ích giúp người đọc dễ dàng di chuyển đến các mục mà không cần phải sử dụng quá nhiều thao tác

Chọn Mở Rộng Tiệng ích trong Blogspot
Tìm :  ]]></b:skin>
Thêm Bên Trên nó đoạn code css sau:


#float-menu{position:fixed;bottom:20%;right:0;border-top:1px solid #CCC;border-left: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/AVvXsEikAZLnpU9j98zWzuogga5t7pFhJ1QSEOi1OIhmPJ4rMI3kRBHc06cdaPMzr32jOh0JbqF-RmGup1hkbA7RoFyGg7GSoaKL9sifMQf7QT8knAkrhhgUU-1y_dVMaBxquiRy6EjqGxyrtQ0/)}
#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}
Tìm <b:includable id='main' var='top'>

Thêm Vào Bên Dưới Đoạn Code sau đây

<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' expr:title='data:olderPageTitle' rel='prev'/>
    </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' expr:title='data:newerPageTitle' rel='next'/>
    </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='#' rel='nofollow' title='Lên trên'/>
  </li>
 </ul>
</div>
Lưu lại và xem kết quả
Chúc các bạn vui vẻ

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

Đăng nhận xét

Widget#2

Widget#5

Widget#4

primaryBottomSidebar

Footerpages

Trang

Bottom Navi

Được tạo bởi Blogger.

Người theo dõi

TIÊU ĐIỂM