Thanh điều hướng Xenplaza Toolbox dành cho Blogger

Xenplaza Toolbox for Blogger

Trong quá trình duyệt web chắc hẳn đôi lúc các bạn cần dùng chức năng cuộn trang, bạn có thể dùng chuột giữa, Touchpad hoặc nút Back To Top được trang bị trên khá nhiều website. Hoặc dùng thử thanh điều hướng Xenplaza Toolbox sẽ được Iris Tips giới thiệu dưới đây.

• DEMO

1. Giới thiệu thanh điều hướng

Thanh điều hướng trượt dọc bên trái (hoặc bên phải) blog, có 7 phím điều hướng gồm:

: Up to Top - Về đầu trang.

: Back - Trở về trang trước.

: Contact - Liên hệ.

: Refresh - Làm mới trang.

: Stop Scroll - Tạm dừng cuộn trang.

: Scroll Down - Cuộn trang từ từ xuống dưới.

: Go to Bottom - Về cuối trang.

2. Thêm thanh điều hướng vào Blogger

Vào Bố cục >> Thêm tiện ích HTML/Javascript và thêm đoạn code bên dưới vào

 <style>
/* Xenplaza Toolbox by iris-tips.blogspot.com */
/* --- iris.css --- */

#iris {
    z-index: 99;
    width:26px;
    position:fixed;
    right:1px;
    top:250px;
    background: transparent;
    -moz-border-radius: 5px;
}
#iris a:hover {
    opacity:1
}

</style>

<script language="javascript" type="text/javascript">
function confirmRefresh() {
var okToRefresh = confirm("Do you really want to refresh this page?");
if (okToRefresh)
    {
            setTimeout("location.reload(true);",1000);
    }
}
</script>
 
<script language="javascript">
suspendcode="<div id='iris' align='center'><a onclick='javascript:amutop();return false;' href='#' title='Up to TOP'><img border=0 src=\"http://1.bp.blogspot.com/-UDaOmEWCCl4/VWHgel2q_AI/AAAAAAAABL8/u0dyqsCQdaE/s1600/up.png\" width=\"24\"></a><br><a onclick='javascript:history.back();return false;' href='#' title='Back'><img border=0 src=\"http://1.bp.blogspot.com/-l5OdPcfPMrM/VWHgdMheMvI/AAAAAAAABLc/nw86YGDm1sA/s1600/back.png\" width=\"24\"></a><br><a href='http://iris-tips.blogspot.com/p/contact.html' class='OverlayTrigger' title='Contact'><img border=0 src=\"http://1.bp.blogspot.com/-iVHxLAjUrgY/VWHgdIs27PI/AAAAAAAABLU/1FQbgWk45QA/s1600/contact.png\" width=\"24\"></a><br><a href='javascript:confirmRefresh();' title='Refresh'><img border=0 src=\"http://2.bp.blogspot.com/-Gg2zDKhycsg/VWHgeY2ZhBI/AAAAAAAABMA/W-IkNFmBHpw/s1600/refresh.png\" width=\"24\"></a><br><a onclick='javascript:sc();return false;' href='#' title='Stop Scroll'><img border=0 src=\"http://3.bp.blogspot.com/-RN1sWIL0B1o/VWHgeK6GiVI/AAAAAAAABLo/tlLTgHvHJ4k/s1600/pause.png\" width=\"24\"></a><br><a onclick='javascript:clearInterval(timer);initialize();return false;' href='#' title='Scroll Down'><img border=0 src=\"http://3.bp.blogspot.com/-kopq4l-P484/VWHgdBFaPYI/AAAAAAAABLY/t1vFUFZSwJQ/s1600/autodown.png\" width=\"24\"></a><br><a onclick='javascript:amubutton();return false;' href='#' title='Go to Bottom'><img border=0 src=\"http://1.bp.blogspot.com/-yC_mOZQj33c/VWHgd32RPoI/AAAAAAAABLk/sKqln62H5Bk/s1600/down.png\" width=\"24\"></a></div>"
    document.write(suspendcode);
 
    var currentpos,timer;
   
    function initialize()
    {
        timer=setInterval ("scrollwindow ()",30);
    }
    function sc()
    {
        clearInterval(timer);
    }
    function scrollwindow()
    {
        currentpos = document.documentElement.scrollTop || document.body.scrollTop;
        window.scrollTo(0,++currentpos);
    }
    function amutop()
    {
        window.scrollTo(0,0)
        clearInterval(timer);
    }
    function amubutton()
    {
        window.scrollTo(0,80000)
        clearInterval(timer);
    }
</script> 

Chỉnh sửa: right:1px; thành left:1px; nếu bạn muốn thanh scrollbar nằm bên trái blog.

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm