Thêm nút Back To Top hình tên lửa cho blogspot

Thêm nút Back To Top hình tên lửa cho blogspot
Hôm nay lại trở về với chủ đề thủ thuật Blogspot nha các bạn. Dạo này hơi bận nên thỉnh thoảng mới ra được bài viết cho các bạn, lịch đăng bài mình sẽ chia làm 2 lần:
  1. Đăng vào Thứ 6 hàng tuần
  2. Đăng vào Chủ nhật
Ngoài ra nếu mình rảnh mình sẽ ra bài thường xuyên hơn vào các ngày trong tuần. Mong các bạn liên tục ủng hộ mình nhé.


Với nút Back To Top hay còn gọi là nút quay về đầu trang cho các bạn mới làm blog, khi bạn đã quá chán với nút mặc định của bạn rồi thì bạn nên tham khảo nút dạng tên lửa của mình nha rất độc và lạ đó nhen.😂

Cách thực hiện

Rất đơn giản, các bạn chỉ cần vào trang chỉnh sửa HTML của Blogspot và thêm đoạn code dưới đây vào trên thẻ </body>

<style>
.ignielRocket svg{width:50px;height:50px;transition:all .3s ease}
.ignielRocket svg path{fill:#189dfe}
.ignielRocket:hover svg,.ignielRocket.launch svg{transform:rotate(-45deg)}
.ignielRocket:hover svg path,.ignielRocket.launch svg path{fill:#ff5722}
.ignielRocket{visibility:hidden;opacity:0;position:fixed;left:30px;z-index:99;cursor:pointer;border-radius:100px;bottom:-30px}
.ignielRocket.show{visibility:visible;opacity:1;bottom:30px;transition:all .5s ease}
.ignielRocket.launch{visibility:visible;opacity:1;bottom:0;transition:all 0 ease}
.ignielRocket.launch:after {background:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M4,10A1,1 0 0,1 3,9A1,1 0 0,1 4,8H12A2,2 0 0,0 14,6A2,2 0 0,0 12,4C11.45,4 10.95,4.22 10.59,4.59C10.2,5 9.56,5 9.17,4.59C8.78,4.2 8.78,3.56 9.17,3.17C9.9,2.45 10.9,2 12,2A4,4 0 0,1 16,6A4,4 0 0,1 12,10H4M19,12A1,1 0 0,0 20,11A1,1 0 0,0 19,10C18.72,10 18.47,10.11 18.29,10.29C17.9,10.68 17.27,10.68 16.88,10.29C16.5,9.9 16.5,9.27 16.88,8.88C17.42,8.34 18.17,8 19,8A3,3 0 0,1 22,11A3,3 0 0,1 19,14H5A1,1 0 0,1 4,13A1,1 0 0,1 5,12H19M18,18H4A1,1 0 0,1 3,17A1,1 0 0,1 4,16H18A3,3 0 0,1 21,19A3,3 0 0,1 18,22C17.17,22 16.42,21.66 15.88,21.12C15.5,20.73 15.5,20.1 15.88,19.71C16.27,19.32 16.9,19.32 17.29,19.71C17.47,19.89 17.72,20 18,20A1,1 0 0,0 19,19A1,1 0 0,0 18,18Z' fill='%23ff5722'></path></svg>") no-repeat center center;background-size:30px 30px;content:'';display:block;width:30px; height:30px;transform:rotate(90deg);position:relative;text-align:center;margin:auto}
</style>
<div class='ignielRocket'>
<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M2.81,14.12L5.64,11.29L8.17,10.79C11.39,6.41 17.55,4.22 19.78,4.22C19.78,6.45 17.59,12.61 13.21,15.83L12.71,18.36L9.88,21.19L9.17,17.66C7.76,17.66 7.76,17.66 7.05,16.95C6.34,16.24 6.34,16.24 6.34,14.83L2.81,14.12M5.64,16.95L7.05,18.36L4.39,21.03H2.97V19.61L5.64,16.95M4.22,15.54L5.46,15.71L3,18.16V16.74L4.22,15.54M8.29,18.54L8.46,19.78L7.26,21H5.84L8.29,18.54M13,9.5A1.5,1.5 0 0,0 11.5,11A1.5,1.5 0 0,0 13,12.5A1.5,1.5 0 0,0 14.5,11A1.5,1.5 0 0,0 13,9.5Z'></path></svg>
</div>
<script type='text/javascript'>
//<![CDATA[
// Rocket Back to Top by igniel.com
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('A a=["\\i\\b\\j","\\j\\b\\c\\g\\i\\g\\b\\k","\\z\\g\\y\\k\\g\\h\\d\\x\\b\\e\\t\\h\\i","","\\e\\c\\c","\\d\\f\\I\\k\\e\\p","\\q\\h\\o\\b\\B\\h\\v\\d\\f\\c\\c","\\c\\e\\q\\b\\d\\d\\H\\b\\j","\\c\\p\\b\\E","\\f\\m\\m\\v\\d\\f\\c\\c","\\c\\e\\q\\b\\d\\d","\\D\\C\\n\\n\\j\\F","\\f\\k\\g\\o\\f\\i\\h","\\n","\\p\\i\\o\\d\\N\\R\\b\\m\\J","\\e\\d\\g\\e\\t"];r U(l){$(w)[a[Q]](r(){$(a[2])[a[1]]()[a[0]]==-K&&$(a[2])[a[6]](a[5])[a[4]]({u:a[3]});O $(w)[a[7]]()>M?$(a[2])[a[9]](a[8]):$(a[2])[a[6]](a[8])}),$(a[2])[a[L]](r(){$(V)[a[9]](a[5])[a[s]]({u:a[P]},l);$(a[T])[a[s]]({S:a[G]},l)})}',58,58,'||||||||||_0x2bf4|x6F|x73|x6C|x63|x61|x69|x65|x74|x70|x6E|_0x1aefx2|x64|x30|x6D|x68|x72|function|12|x6B|top|x43|document|x52|x67|x2E|var|x76|x31|x2D|x77|x78|13|x54|x75|x79|100|15|300|x2C|return|11|10|x62|scrollTop|14|ignielRocket|this'.split('|'),0,{}));
ignielRocket(1000);
//]]>
</script>

Về tác giả

Lê Vạn Bảo Trọng
Xin chào! Mình là BaoTrongIT – một lập trình viên đam mê chia sẻ kiến thức lập trình, đặc biệt là về JavaScript, Node.js, NestJS, và các công nghệ backend/frontend hiện đại. Trên blog này, mình thường xuyên đăng tải các bài viết thủ thuật, kinh nghi…

2 nhận xét

  1. Nguyễn Tỉnh Blog
    Hay :3
  2. Lê Vạn Bảo Trọng
    Lê Vạn Bảo Trọng
    💥💤😒❤😒❤😒