Thu thuat blog

Saturday, July 25, 2015

No comments

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

Chọn thêm 1 widget HTML 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="/" >Home</a></div>

<div class="bt"><a href="http://www.nhaozo.net/search/label/Gi%E1%BA%A3i%20tr%C3%AD" >Giải trí</a></div>

<div class="bt"><a href="http://vskiwi.blogspot.com/search/label/T%E1%BA%A3n%20m%E1%BA%A1n%20MMO" >Tản mạn</a></div>

<div class="bt"><a href="http://www.nhaozo.net/search/label/Youtube" >Youtube</a></div>

<div class="bt"><a href="http://vskiwi.blogspot.com/p/about.html" >About</a></div>

<div class="bt"><a href="/" >Contact</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.