Đỗ Xuân Thạnh_Skyskysky :

Thứ Năm, 14 tháng 2, 2013

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 blogVNBlogspot.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


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/AVvXsEh2kf7cwzN563yqoM21WF8S01VsLytNILjFRmaFclWp2-3cP3WJbzdGD34O-EPiFaD-g79DnmF_zYE9JKAtWQV4MkpbCUpWwc7q7uHxP9csbdpcWKVKpPnOInX9eVqzLDWPB2krNKJIMPI4/s1600/go_top.gif) no-repeat left top;
}
#toTopHover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2kf7cwzN563yqoM21WF8S01VsLytNILjFRmaFclWp2-3cP3WJbzdGD34O-EPiFaD-g79DnmF_zYE9JKAtWQV4MkpbCUpWwc7q7uHxP9csbdpcWKVKpPnOInX9eVqzLDWPB2krNKJIMPI4/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 !

Không có nhận xét nào:

Đăng nhận xét

Những người bạn

 
Support : Creating Website | SkyskyskyTemplate | DoThanh Template
Proudly powered by Blogger
Copyright © 2011. Những người bạn của Sky+ - All Rights Reserved
Template Design by Creating Website Published by SkyDoThanh Template