Nút Lên Trên Hiệu Ứng Mềm Mại Bắt Mắt Cực Đẹp Cho Blogspot

Chắc hẳn bạn nào đam mê thiết kế blog dưới nền tảng của blogspot đều biết đến blog VNBlogspot.Com của bác Tiến Nguyễn. Không biết mọi người thế nào chứ mình rất "mê" cái style của blog này, kể cả một trong số những thứ đơn giản như nút Lên Trên của VNBlogspot. Tuy nút Lên Trên này rất đơn giản nhưng hiệu ứng của nó thật mềm mại và bắt mắt. Và mình xin phép chia sẻ đến bạn đọc cách thêm nút Lên Trên của bác Tiến Nguyễn

Demo tại bài viết này

Cách Thêm Nút Lên Trên Vào Blog

Đơn giản bạn chỉ việc tạo một widget HTML và dán code sau vào phần nội dung sau đó lưu lại là hoàn thành thủ thuật

<style type="text/css">
#toTop {display: none;text-decoration: none;position: fixed;bottom: 10px;right: 10px;overflow: hidden;width: 30px;height: 30px;border: none;text-indent: -999px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7z0Ptnio4wzazLAWOwiSfMz_8EW38YceX583AsWFPUSDsVfrypXEPXPV38ayMXDMVrf7Q_hTnSi81oDIanGlLy363GYb1w7HbRF4t88XmLh0EyqkcZw7VRjXyrpOnWWdtshHYm05WzS-g/s1600/go_top.gif) no-repeat left top;
}
#toTopHover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7z0Ptnio4wzazLAWOwiSfMz_8EW38YceX583AsWFPUSDsVfrypXEPXPV38ayMXDMVrf7Q_hTnSi81oDIanGlLy363GYb1w7HbRF4t88XmLh0EyqkcZw7VRjXyrpOnWWdtshHYm05WzS-g/s1600/go_top.gif) no-repeat left -30px;width:30px;height:30px;display:block;overflow:hidden;float:left;opacity: 0;-moz-opacity: 0;filter:alpha(opacity=0);
}
#toTop:active, #toTop:focus {outline:none;}
</style>
<script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,r){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--)r[e(c)]=k[c]||e(c);k=[function(e){return r[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}('(3($){$.A.t=3(p){5 o={l:\'J D\',q:P,g:n,B:C,c:\'F\',9:\'M\',k:w,8:\'d\'};5 2=$.E(o,p);5 4=\'#\'+2.c;5 e=\'#\'+2.9;$(\'f\').O(\'<a R="#" m="\'+2.c+\'">\'+2.l+\'</a>\');$(4).x().y(3(){$(\'z, f\').7({h:0},2.k,2.8);$(\'#\'+2.9,i).b().7({\'j\':0},2.g,2.8);G H}).I(\'<s m="\'+2.9+\'"></s>\').K(3(){$(e,i).b().7({\'j\':1},n,\'d\')},3(){$(e,i).b().7({\'j\':0},L,\'d\')});$(6).N(3(){5 u=$(6).h();v(Q r.f.S.T==="U"){$(4).V({\'W\':\'X\',\'Y\':$(6).h()+$(6).Z()-10})}v(u>2.q)$(4).11(2.g);12 $(4).13(2.14)})}})(15);$(\'r\').16(3(){$().t({8:\'17\'})});',62,70,'||settings|function|containerIDhash|var|window|animate|easingType|containerHoverID||stop|containerID|linear|containerHoverIDHash|body|inDelay|scrollTop|this|opacity|scrollSpeed|text|id|600|defaults|options|min|document|span|UItoTop|sd|if|1200|hide|click|html|fn|outDelay|400|Top|extend|toTop|return|false|prepend|To|hover|700|toTopHover|scroll|append|200|typeof|href|style|maxHeight|undefined|css|position|absolute|top|height|50|fadeIn|else|fadeOut|Outdelay|jQuery|ready|easeOutQuart'.split('|'),0,{}))
//]]>
</script>
<a href="#" id="toTop" style="display: inline;"><span id="toTopHover" style="opacity: 0;"></span>To Top</a>

Chúc bạn thành công! Xin cảm ơn bác Tiến Nguyễn!

To Top