Tạo float icon cho website/blog

Ảnh minh họa

Đây là bài viết của bạn Hư trúc , viết cho WP , nay Yolks xin mượn lại bài này để giúp chuyển hóa qua blogger ^^ . Đây là 1 dạng icon trôi nổi chạy khắp trang blog cùng bạn đó.

1.Chèn jquery:

Nếu đã có rồi thì thôi còn chưa có thì add cái dòng này vào trước thẻ </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js' type='text/javascript'/>

2.Code html:

<div id='slidemenu'>
<ul><li><a class='sm-support' href='ymsgr:sendim?the_paddy_field' target='_blank'>Hỗ trợ trực tuyến</a></li>
<li><a class='sm-faq' href='http://vngreenzone.blogspot.com/2011/05/ban-hoi-toi-ap.html' target='_blank'>hỏi đáp</a></li>
<li><a class='sm-contact' href='http://vngreenzone.blogspot.com/p/contact.html' target='_blank'>liên hệ</a></li></ul>
</div>

Yolks thì yolks chèn nó sau

<div id='main-wrapper'>

1. Thay the_paddy_field bằng nick yahoo của bạn
2. Thay tất cả link web của yolks thành link của bạn

3A.Chèn css cách 1:

#slidemenu{position:fixed;bottom:10px;left:10px;}
#slidemenu,#slidemenu ul{margin:0;padding:0;text-align:left;}
#slidemenu li{list-style:none;}
#slidemenu a{display:block;width:40px;height:40px;margin:5px 0 0;text-indent:-500em}
#slidemenu a.sm-support{background: url(link-hinh-anh-cho-icon-support) no-repeat;}
#slidemenu a.sm-faq{background: url(link-hinh-anh-cho-icon-hoi-dap) no-repeat;}
#slidemenu a.sm-contact{background: url(link-hinh-anh-cho-icon-lien-he) no-repeat;}

Bạn cần cập nhật lại link hình ảnh cho phù hợp. Hình ảnh nên có kick thước 180×40 (icon có kích thước 40×40).

3B.Chèn css cách 2

#slidemenu{position:fixed;middle:35px;left:90px}
#slidemenu,#slidemenu ul{margin:0;padding:0;text-align:left}
#slidemenu li{list-style:none}
#slidemenu a{display:block;width:40px;height:40px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj62h0lxbaoww7zFkF-Y9V46u0xOD654KPhtniOrB9HEL0TW2CpnDewESkR3qGjUJxKYQg6d5GJqFpoxbQr_dqEtsIHwD6vYEX14pJVmKI-Ia_qVcv57QdHjwy_BmJrE5iW6rKWg1LPT20/s1600/sprite2.png) no-repeat 0 -200px;margin:5px 0 0;text-indent:-500em}
#slidemenu a.sm-support{background-position:0 0}
#slidemenu a.sm-faq{background-position:0 -41px}
#slidemenu a.sm-contact{background-position:0 -82px}

• Lưu ý : chỉ sử dung 1 trong 2 cách
• Thay https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj62h0lxbaoww7zFkF-Y9V46u0xOD654KPhtniOrB9HEL0TW2CpnDewESkR3qGjUJxKYQg6d5GJqFpoxbQr_dqEtsIHwD6vYEX14pJVmKI-Ia_qVcv57QdHjwy_BmJrE5iW6rKWg1LPT20/s1600/sprite2.png cái ảnh này thành ảnh của bạn sau khi chỉnh sửa( css cách 2 sẽ giúp đỡ mất thời gian hơn)
• Thay đổi thông số: left:90px thành của bạn tại vì blog yolks canh cho nó sát phần bài viết

4.Thêm jquery

Tìm:

</body>

copy đoạn mã này vào trước nó

<script type="text/javascript">
var $slidemenu = $("#slidemenu");
jQuery(window).load(function(){
    $("#slidemenu a").hover(function() {
        $(this).stop().animate({'width':'180px'}, 250);
    }, function() {
        $(this).stop().animate({'width':'40px'}, 250);
    });

    var $sml = $("#wrap").position().left;
    if ($sml > 50) {
        $sml1=$sml-50;
        $("#slidemenu").css({'left': $sml1 + "px"});
    }
});
$(window).resize(function() {
    $sml = $("#wrap").position().left;
    if ($sml > 50) {
        $sml1=$sml-50;
        $("#slidemenu").css({'left': $sml1 + "px"});
    } else {
        $("#slidemenu").removeAttr("style");
    }
});;
</script>

Bạn thay "#wrap" ở trên bằng id name hoặc class name mà bạn muốn vị trí các icon canh theo.Cái này hư trúc không biết thì các bạn thử canh xem sao. nếu có gì mới mẻ báo ngay cho yolks