<!--<head><style type='text/css'>@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-stretch:normal;font-display:swap;src:url(//fonts.gstatic.com/s/roboto/v48/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbVmUiA8.ttf)format('truetype');}</style>
<link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=7306137828648818524&zx=f6237e5c-46ef-42b6-89d7-632e00aebeb1' media='none' onload='if(media!='all')media='all'' rel='stylesheet'/><noscript><link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=7306137828648818524&zx=f6237e5c-46ef-42b6-89d7-632e00aebeb1' rel='stylesheet'/></noscript>
<meta name='google-adsense-platform-account' content='ca-host-pub-1556223355139109'/>
<meta name='google-adsense-platform-domain' content='blogspot.com'/>

</head>-->

Home » CSS » Thủ Thuật Blogspot » Tạo nút Back To Top với hiệu ứng Hover bằng CSS cực đẹp cho Blogspot

Tạo nút Back To Top với hiệu ứng Hover bằng CSS cực đẹp cho Blogspot

CSS Thủ Thuật Blogspot

tháng 1 22, 2018

Share on Facebook Tweet on Twitter  

Chào các bạn, theo yêu cầu của một số bạn muốn mình chia sẻ cách làm nút back to top mà mình đang sử dụng trên Blog. Thì bài viết hôm nay mình sẽ hướng dẫn các bạn cách làm nút back to top tuyệt đẹp và chất này!

Tạo nút Back To Top với hiệu ứng Hover bằng CSS cực đẹp và chất

Bạn có thể xem Demo ngay tại trang chủ của bacsiwindows.com

LABEL : #CSS #Thủ Thuật Blogspot

posted by

Nguyễn Đình Diện

at tháng 1 22, 2018

<!--
<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/2838643729-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY4kGwTR84IwzqjdCJP-uXvhhFMEeA:1750243617323';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d7306137828648818524','//diendzfed.blogspot.com/2018/01/tao-nut-back-to-top-voi-hieu-ung-hover.html','7306137828648818524');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '7306137828648818524', 'title': 'Nguy\u1ec5n Di\u1ec7n Blogger', 'url': 'http://diendzfed.blogspot.com/2018/01/tao-nut-back-to-top-voi-hieu-ung-hover.html', 'canonicalUrl': 'http://diendzfed.blogspot.com/2018/01/tao-nut-back-to-top-voi-hieu-ung-hover.html', 'homepageUrl': 'http://diendzfed.blogspot.com/', 'searchUrl': 'http://diendzfed.blogspot.com/search', 'canonicalHomepageUrl': 'http://diendzfed.blogspot.com/', 'blogspotFaviconUrl': 'http://diendzfed.blogspot.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': false, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': '', 'encoding': 'UTF-8', 'locale': 'vi', 'localeUnderscoreDelimited': 'vi', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Nguy\u1ec5n Di\u1ec7n Blogger - Atom\x22 href\x3d\x22http://diendzfed.blogspot.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22Nguy\u1ec5n Di\u1ec7n Blogger - RSS\x22 href\x3d\x22http://diendzfed.blogspot.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Nguy\u1ec5n Di\u1ec7n Blogger - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/7306137828648818524/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Nguy\u1ec5n Di\u1ec7n Blogger - Atom\x22 href\x3d\x22http://diendzfed.blogspot.com/feeds/48455092265705441/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': false, 'adsenseAutoAds': false, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/b246884865dba831', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Nh\u1eadn \u0111\u01b0\u1eddng li\xean k\u1ebft', 'key': 'link', 'shareMessage': 'Nh\u1eadn \u0111\u01b0\u1eddng li\xean k\u1ebft', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Chia s\u1ebb v\u1edbi Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'X', 'key': 'twitter', 'shareMessage': 'Chia s\u1ebb v\u1edbi X', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Chia s\u1ebb v\u1edbi Pinterest', 'target': 'pinterest'}, {'name': 'Email', 'key': 'email', 'shareMessage': 'Email', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27vi\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': false, 'jumpLinkMessage': '\u0110\u1ecdc th\xeam', 'pageType': 'item', 'postId': '48455092265705441', 'postImageThumbnailUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5KDXMDrF60cw2nWPfIoQvYh2AL_jcyyqIYwp_0XXhVAWvPU232RFD_NBBVpGJagFkXKX4liyBUO0zoBb69XpoJbLOC7I2sWSOeog8bKAoAqnLCU-nM8dDzxScqOAQssGkeuxmCxFW-xge/s72-c/tao-nut-back-to-top-voi-hieu-ung-bang-css-tuyet-dep-cho-blogspot------------BacSiWindows-Com.png', 'postImageUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5KDXMDrF60cw2nWPfIoQvYh2AL_jcyyqIYwp_0XXhVAWvPU232RFD_NBBVpGJagFkXKX4liyBUO0zoBb69XpoJbLOC7I2sWSOeog8bKAoAqnLCU-nM8dDzxScqOAQssGkeuxmCxFW-xge/s1600/tao-nut-back-to-top-voi-hieu-ung-bang-css-tuyet-dep-cho-blogspot------------BacSiWindows-Com.png', 'pageName': 'T\u1ea1o n\xfat Back To Top v\u1edbi hi\u1ec7u \u1ee9ng Hover b\u1eb1ng CSS c\u1ef1c \u0111\u1eb9p cho Blogspot', 'pageTitle': 'Nguy\u1ec5n Di\u1ec7n Blogger: T\u1ea1o n\xfat Back To Top v\u1edbi hi\u1ec7u \u1ee9ng Hover b\u1eb1ng CSS c\u1ef1c \u0111\u1eb9p cho Blogspot'}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Ch\u1ec9nh s\u1eeda', 'linkCopiedToClipboard': '\u0110\xe3 sao ch\xe9p \u0111\u01b0\u1eddng li\xean k\u1ebft v\xe0o b\u1ea3ng nh\u1edb t\u1ea1m!', 'ok': 'Ok', 'postLink': 'Li\xean k\u1ebft b\xe0i \u0111\u0103ng'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': 'T\xf9y ch\u1ec9nh', 'isResponsive': true, 'isAlternateRendering': false, 'isCustom': true}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'T\u1ea1o n\xfat Back To Top v\u1edbi hi\u1ec7u \u1ee9ng Hover b\u1eb1ng CSS c\u1ef1c \u0111\u1eb9p cho Blogspot', 'description': 'Ch\xe0o c\xe1c b\u1ea1n, theo y\xeau c\u1ea7u c\u1ee7a m\u1ed9t s\u1ed1 b\u1ea1n mu\u1ed1n m\xecnh chia s\u1ebb c\xe1ch l\xe0m n\xfat back to top m\xe0 m\xecnh \u0111ang s\u1eed d\u1ee5ng tr\xean Blog. Th\xec b\xe0i vi\u1ebft h\xf4m nay m\xec...', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5KDXMDrF60cw2nWPfIoQvYh2AL_jcyyqIYwp_0XXhVAWvPU232RFD_NBBVpGJagFkXKX4liyBUO0zoBb69XpoJbLOC7I2sWSOeog8bKAoAqnLCU-nM8dDzxScqOAQssGkeuxmCxFW-xge/s1600/tao-nut-back-to-top-voi-hieu-ung-bang-css-tuyet-dep-cho-blogspot------------BacSiWindows-Com.png', 'url': 'http://diendzfed.blogspot.com/2018/01/tao-nut-back-to-top-voi-hieu-ung-hover.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 48455092265705441}}]);
_WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'H-Site', document.getElementById('Header1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML1', 'H-Rigt', document.getElementById('HTML1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/4162115085-lbx__vi.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/123180807-lightbox_bundle.css'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML3', 'grids', document.getElementById('HTML3'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PopularPostsView', new _WidgetInfo('PopularPosts1', 'sidebar', document.getElementById('PopularPosts1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML2', 'sidebar', document.getElementById('HTML2'), {}, 'displayModeFull'));
</script>
</body>-->

Tạo nút Back To Top với hiệu ứng Hover bằng CSS cực đẹp cho Blogspot

Related Post