Cách tạo menu trượt bên phải blog/website

Cách tạo menu trượt bên phải blog/website

Chọn thêm 1 widget mới, và thêm đoạn code dưới đây vào:

demo

<style>#box{ width:190px; font-size:12px; line-height:20px; right:-140px; top:25%; position:fixed; z-index:100}#tab{ float:left; list-style:none outside none; margin:0; padding:0; position:relative; z-index:99}#tab li span{ display:block; padding:0 5px; position:relative}#links{ width:80px; padding:10px; float:left; border-left:1px solid #B4B8BB}.show,.hide{  transition:margin-right .4s ease-in; -webkit-transition:margin-right .4s ease-in}.hide{ margin-right:0px}.show{ margin-right:95px}#arrow,bt{ cursor:pointer}.bt{ width:77px; height:40px; margin:-1px; text-align:center; border:1px solid #858fa6; font:bold 13px Helvetica,Arial,sans-serif; text-shadow:0px 0px 5px rgba(0,0,0,0.75); background:#014464; background-image:-o-linear-gradient(left,#1F82AF,#002F44); background-image:-ms-linear-gradient(left,#1F82AF,#002F44); background-image:-moz-linear-gradient(left,#1F82AF,#002F44); background-image:-webkit-linear-gradient(left,#1F82AF,#002F44); background-image:-webkit-gradient(linear,left top,right top,from(#1F82AF),to(#002F44))}.bt a{ line-height:40px; color:#fff; display:block}.bt:hover{ transition:background .3s linear; background:#32A3D3; -o-transition:background .3s linear; -moz-transition:background .3s linear; -webkit-transition:background .3s linear}#deco{ width:75px; float:left; box-shadow:0px 0px 5px #000; -moz-box-shadow:0px 0px 5px #000; -webkit-box-shadow:0px 0px 5px #000}</style>

<div id="box" class="hide">

    <ul id="tab">

        <li>

            <img id="arrow" onclick="toggle(&#39;box&#39;);" src="https://lh6.googleusercontent.com/-Kuy2-REXl8w/UylsKq89BOI/AAAAAAAAFXk/DlVM10aDgCk/w44-h80-no/arrowleft.png" />

        </li>

    </ul>

    <div id="links">

        <div id="deco">

            <div class="bt"><a href="http://gioitrelocthuy.blogspot.com/2014/03/kinh-long-thuong-xot-chua.html" >THĂM CHÚA</a></div>

<div class="bt"><a href="http://gioitrelocthuy.blogspot.com/2012/02/thanh-mau-hoc.html" >MẸ MARIA</a></div>

<div class="bt"><a href="http://gioitrelocthuy.blogspot.com/2013/09/tv-cong-giao-tong-hop.html" >XEM TV</a></div>

 <div class="bt"><a href="http://gioitrelocthuy.blogspot.com/2012/02/nghe-radio-cong-giao-truc-tuyen.html" >RADIO</a></div>

<div class="bt"><a href="http://gioitrelocthuy.blogspot.com/search/label/Nghe%20v%C3%A0%20suy%20g%E1%BA%ABm" >SUY NIỆM</a></div>

<div class="bt"><a href="http://gioitrelocthuy.blogspot.com/2014/02/suy-niem-ve-le-song.html" >LẼ SỐNG</a></div>

<div class="bt"><a href="http://gioitrelocthuy.blogspot.com/2013/05/danh-ngon-cong-giao.html" >Ý ĐẸP +</a></div>

            <div class="bt"><a href="http://gioitrelocthuy.blogspot.com/search/label/Th%C3%A1nh%20ca" >THÁNH CA</a></div>

<div class="bt"><a href="http://gioitrelocthuy.blogspot.com/search/label/g%C3%B3c%20h%E1%BB%8Dc%20t%E1%BA%ADp" >HỌC TẬP</a></div>

<div class="bt"><a href="http://gioitrelocthuy.blogspot.com/2012/02/niem-vui-kham-pha_20.html" >TẠI SAO?</a></div>

            <div class="bt"><a href="http://gioitrelocthuy.blogspot.com/search/label/G%C3%B3c%20ngh%E1%BB%87%20thu%E1%BA%ADt" >ĐẸP +</a></div>

            <div class="bt"><a href="http://gioitrelocthuy.blogspot.com/search/label/Du%20L%E1%BB%8Bch" >DU LỊCH</a></div>

            <div class="bt"><a href="http://gioitrelocthuy.blogspot.com/search/label/K%E1%BA%BFt%20n%E1%BB%91i%20websites " >WEB HAY</a></div>

            <div class="bt"><a href="http://gioitrelocthuy.blogspot.com/search/label/T%C3%A0i%20li%E1%BB%87u%20C%C3%B4ng%20Gi%C3%A1o%20t%E1%BB%95ng%20h%E1%BB%A3p" >DOWNLOAD</a></div>

 <div class="bt"><a href="http://gioitrelocthuy.blogspot.com/2000/12/lien-he-gop-y.html" >LIÊN HỆ</a></div>

        </div>

    </div>

</div>

<script language='javascript'>

function toggle(id) {

    var el = document.getElementById(id);

    var img = document.getElementById("arrow");

    var box = el.getAttribute("class");

    if(box == "hide"){

        el.setAttribute("class", "show");

        delay(img, "https://lh5.googleusercontent.com/-SIotgb99OAE/Uyls3FRiCFI/AAAAAAAAFXw/yvKaTH2GcaQ/w44-h80-no/arrowright.png", 400);

    }

    else{

        el.setAttribute("class", "hide");

        delay(img, "https://lh6.googleusercontent.com/-Kuy2-REXl8w/UylsKq89BOI/AAAAAAAAFXk/DlVM10aDgCk/w44-h80-no/arrowleft.png", 400);

    }

}

function delay(elem, src, delayTime){

    window.setTimeout(function() {elem.setAttribute("src", src);}, delayTime);

}</script>

THAY ĐỔI CÁC MENU ĐƯỜNG LINKS PHÙ HỢP VỚI MỤC ĐÍCH CỦA BẠN.

Chúc bạn thành công.

Sưu tầm.