Thêm hình ảnh lên nút BACK TO TOP ( trở về đầu trang)

Đăng bởi Admin | 21/10/13 | 0 nhận xét

1. Tới Blogger Bảng điều khiển> Mẫu

2 Sao lưu mẫu của bạn 

3. Nhấp chuột vào Chỉnh sửa HTML 

4. Tìm  ]]></b:skin> và thêm mã dưới đây ngay trên nó:

#backtotop {
padding:5px;
position:fixed;
bottom:10px;right:10px;
cursor:pointer;
}

5. Bây giờ tìm đoạn mã </body> và thêm mã dưới đây ngay trên nó:

<a href="#" id="backtotop"> <img src = " Hình ảnh-Url "alt =" Trở về đầu trang "/> </ a>  

Bạn có thể chọn nút yêu thích của bạn và thay đổi từ màu đỏ, hình ảnh-Url vào nút url ở mã trên:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSc3dKuZ2d-N6ab34jrfXR9k552wH56dzok802C8Bh2Cekg1OwMw4064qKWhJaS_8FtK8IGcutgqRnICauraCMocZ65KpHBJbyKb9d3th19KxXISVuASxGg3cgTUpHmKho0_M63TKDiuGx/s1600/bttp-5.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNFhBihqWy5tUChhWQVpaUp1iUsMZEUHDV916k3TM4TUMgcm4FcTmUGjdBBPgxhxjA1hGUVjzq1ynKwZx9w3ljoB0o0F1ln-nPHp3y8b3L7iW8qMjYWeV2sJpma7lWkEfmSlspXBsExJoa/s1600/bttp-4.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihUgsEwhRh9PJ0ogTIocX35Q9ZA6SA35entJoDzbdvYsem_sXZxx7vf7fNYiNtOd9txgtnurfLOi0thlVLdNkv70pZXHTbM5cc-94o666Fn41ptNor2cq1d3PpkjDmbt0mFqXHV73M8Jvm/s1600/bttp-3.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia9y6IhX7sg6J1D_RHVmPumbWyc5-Daccgdic4fIY-1jJ74rIa3XnJnrFigELbHd4tUcqNomAJwSZc-XE6_Ms3Yd6N6ccqNhkMVYYGTe7WuD5369mODPBGiZLtb_wS-TQwO8BzahP2HIRf/s1600/bttp-1.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7KH6jBpPMls-VS2mieH-OoWHZK87CB1U75M5MZ6RUN4N-FrrBDxuMGDKh6am_TwRp6cWTfzgo39Yb-nESChlrTMNA63GYZHoOM3lzqZO7NFDdRGGePhNiNvPLDSQZW51CR5oTDNvcPIDd/s1600/bttp-2.png

http://4.bp.blogspot.com/_JwD5r652h00/SvDBBZGgr-I/AAAAAAAAAQg/1X96vgeWqaw/s400/bttp-6.png0/bttp-7.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjokghRvdubBV4E_-4uVSRNtVmQIz68yipgepTOEYsZfXdZ8gJm6H5j96SWWhPoOhLOlh0ajfN3RpOyE-yQ5MgLFt-1vw2dkh78rH7av3doHSGEG974Vrg8UrTAQQGCtoEOhs2B4LW7ofL0/s400/bttp-10.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg28mXqs6HQigkBnCjyH_BXbaZF2N_r62w3EdljUvJf7Hk5UydYY5o1vU1AaqsXWH-c1GOwZSuuBYLgZmCH_l7qdnQo31JUi4ngUj_wxeVQn07sY_JA2wX9uTD1cajviJ2F5B_uIixxMJnr/s400/bttp-9.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLILjjpw1S6oRgbfoZKlZHRRr3pCoA4frW-vultulxiaXlXhL_k8wROuDFNcbFB30yCogV1A5XB3Gm3eGq5mTy4RYsFphsqTaNSKuoofqA3wMy4dgnCKqye6KFt9JqlW_dS-DuivCwujIQ/s400/bttp-8.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKoNE_TSibmLZ4jJC5gBeHlEPLt0TOrnydESIJESlO6jjJTdQtSW9dO_31UhCO_K57tJDBnTgiauhElH2VfZke6M6S3D0JuCPuhszluwvlW-IJjBdHvtsu3hVObjUEl-hMQkNOMsDlZU25/

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOQv26WJSnpTx8HmuOzMXql_dXJkTC_ZNWZ3HNKEW-pTG4VItEiKrhRSxa70N09wQ62t0YLdH5Sif38sz5SRg5NE7TFYSv5M82fQJkPjDvIyLgProItiwv3UZlFfiX5DLQumcpNDjaqCk2/s400/bttp-11.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKFAEvajl-Ykh-q5H_RBw-Dq-PU41OQanKgYrQccTypAfzxDEVHZJKMXql56rOcm3-6YtlRMtBek9_XaFPz6AD7dDunTNduR7CrTKewDEOZwd6Y3BNyeb8TLkCWgEw9cZh8Md8r6UGFM1r/s400/bttp-12.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTO_NWX3vGeFJ7QOqW59_vy0SuuJfzk3zp8xqM67k8x6ht3YhQ5aXULNi9kYSZ489zPF2cf1E85yUt-mHtpzGnYnAU2U77SuQSs-QahxSxI6FR0ddEn-h37EdhcjGumXOGgQSdqsSBlWBS/s400/bttp-13.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh53GEwXUtOHxcY2iHi-W3WEm7TmeqsxSslL6iXptyQRU1UNPoxK6uBfKjeXivl0zLFRMCUlu2fQBVYJjb8c5du6J7eHBhKR1nLkV-tKFY9AuVw04A5yKhQJNTgSnBBww7cxh85wnJEPayM/s400/bttp-14.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidCjtszQxw97AASHEju9odSda11t7usr93dPFkw60XymqMtnIanpnpF5GeTpQAAvPmMqw0HWJRqfznyaLKG5oTVMBczc9zMHlm6CYp5z6-aw3yoIKeDzcSiZSR_fnWpw8J2DQZbrAWU18b/s400/bttp-15.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9HJNQltjghzjmB6CKI92FdDPiolj1QZVgKFIYnrfuXfDrrxVZadrPHJuxZLvxj0-DtkyvnLvEPuVC0IHrHQpp9JegSG7uCAv-EmWRl6bK9u3bDhPMgN8FVDpGJNXsT2NWBk2oxYuByYrW/s1600/bttp-16.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPniobIENNArjre1gfgluTRJ_lFYIsCTwg2nOi6ZLfuWPV2uvwkKcVmw1Bew04VgNgtn1Fc07GAJvNwgN6PsZMTPoIviQe4Q0JasGOIwYj3VuNhXBHWVDHmeM5qp_SW7ZsU_Y6Q5lGqJ2u/s400/bttp-17.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGwvC58sXG7zPqIMp7aCTkvn9TDD8WJ1129kL5fBVzKNDx6epJxW0zm93siMavcdPPwEfDBIseWu4Jne0-9HbuX1y0a-gyj5qCGouudKVXhH_esYis9Eodgcq75SISbY5Dzzrwj-6xB8Ef/s400/bttp-19.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgol3zeGpq7vZqNGLD8jr2VP26e-PSeHndCWyFxsB-LkF1NJWKqpGmwfFGxkWcEuX8JUxTLls22OgTBergLaWSxx2J_d5BnhrM2TgJTAgsotp1GG8DT7ab9JvEtbnuV_md8tqRDFwW8SNT/s400/20.png

Sau khi thay thế các  hình ảnh-Url  với nút url yêu thích của bạn, nó sẽ trông như thế này:

<a href="#" id="backtotop"> <img src = " https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgol3zeGpq7vZqNGLD8jr2VP26e-PSeHndCWyFxsB-LkF1NJWKqpGmwfFGxkWcEuX8JUxTLls22OgTBergLaWSxx2J_d5BnhrM2TgJTAgsotp1GG8DT7ab9JvEtbnuV_md8tqRDFwW8SNT/s400/20.png "alt =" trở về đầu trang "/> </ a>

6. Tìm đoạn code  <head>      và dán đoạn code sau vào SAU nó:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'
type='text/javascript'></script>
<script language="javascript">
$(window).ready(function(){
$('#backtotop').click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
});
</script>

Bấm  Save Template  

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

                                                                                               Theo: bdlab.blogspot.com