TẠO NÚT BACK TO TOP, HOME, GO BACK TUYỆT ĐẸP CHO BLOGSPOT
December 02, 2017 #Thủ Thuật #Thủ thuật BlogChào các bạn đến với bài viết tiếp theo của mình. Bài viết này mình sẽ hướng dẫn cho các bạn một Thủ Thuật Blog nhỏ >> TẠO NÚT BACK TO TOP, HOME, GO BACK TUYỆT ĐẸP CHO BLOGSPOT. OK làm thôi =))
Ảnh minh họa |
CÁC BƯỚC THỰC HIỆN
</head>
hoặc <head/>
trong theme.<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>B3: Dán toàn bộ đoạn CSS dưới đây vào trước thẻ
]]></b:skin>
trong theme./* Back to top, Back home, Go back*/
.back-to-top{z-index:9999;width:35px;height:35px;position:fixed;bottom:90px;right:10px;cursor:pointer;overflow:hidden;font-size:16px;background-color:rgba(0,0,0,.5);color:#fff;text-align:center;line-height:33px;border-radius:46px;transition:all .3s ease;opacity:0.6}
.back-home{z-index:9999;width:35px;height:35px;position:fixed;bottom:50px;right:10px;cursor:pointer;overflow:hidden;font-size:16px;background-color:rgba(0,0,0,.5);color:#fff;text-align:center;line-height:33px;border-radius:46px;transition:all .3s ease;opacity:0.6}
.go-back{z-index:9999;width:35px;height:35px;position:fixed;bottom:10px;right:10px;cursor:pointer;overflow:hidden;font-size:16px;background-color:rgba(0,0,0,.5);color:#fff;text-align:center;line-height:33px;border-radius:46px;transition:all .3s ease;opacity:0.6}
.back-top1:hover,.back-home:hover{opacity:1},go-back:hover{opacity:1}
body
.) <a class='back-to-top' href='#' title='Back to Top'><i class='fa fa-chevron-up' style='color:#fff'/></a>
<div class='back-home' title='Back to Home'><a href='/' style='padding:8px 10px'><i class='fa fa-home' style='color:#fff'/></a></div>
<a class='go-back' onclick='history.back(-1)' title='Go-back'><i class='fa fa-arrow-left' style='color:#fff'/></a>
0 bình luận