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

Thứ Năm, 16 tháng 5, 2013


 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/AVvXsEisxSWZ_uARqt3tgZty15rwg6GDKL3nPwPXu2tBeHFQ5XNMRybY9A3nNDSOhUt9dI2TFa68cj3oiT97KPGbv0RrxMCH3dxJk41f7Bp0zfhuyX9jT62SWuwj3wH_WDmBLL5hx2HH-jJwFIgJ/s1600/go_top.gif) no-repeat left top;
}
#toTopHover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisxSWZ_uARqt3tgZty15rwg6GDKL3nPwPXu2tBeHFQ5XNMRybY9A3nNDSOhUt9dI2TFa68cj3oiT97KPGbv0RrxMCH3dxJk41f7Bp0zfhuyX9jT62SWuwj3wH_WDmBLL5hx2HH-jJwFIgJ/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!
 
Tags: ,

Ý kiến bạn đọc [ 0 ]


Ý kiến của bạn