<!--<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 » Javascript » Thủ Thuật Blogspot » Widget » Tạo thanh công cụ cố định bên phải với hiệu ứng tuyệt đẹp cho Blogspot

Tạo thanh công cụ cố định bên phải với hiệu ứng tuyệt đẹp cho Blogspot

CSS Javascript Thủ Thuật Blogspot Widget

tháng 1 11, 2018

Share on Facebook Tweet on Twitter  

Chào mọi người, bài viết này sẽ hướng dẫn các bạn tạo thanh công cụ đẹp cho blogspot bằng HTML, Javascript và CSS. Kèm bên phải màn hình, có nút mở rộng khá đẹp. Để rõ hơn thì bạn hãy xem demo.
Live Demo

Tạo thanh công cụ với hiệu ứng tuyệt đẹp cho Blogspot

Chèn CSS

Bạn chèn CSS vào trước thẻ ]]></b:skin>

LABEL : #CSS #Javascript #Thủ Thuật Blogspot #Widget

posted by

Nguyễn Đình Diện

at tháng 1 11, 2018

<!--
<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/2726972568-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY6mRh3Y65IlnfTlxBRyBrfitZ1ccg:1750906905601';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d7306137828648818524','//diendzfed.blogspot.com/2018/01/tao-thanh-cong-cu-co-inh-ben-phai-voi.html','7306137828648818524');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '7306137828648818524', 'title': 'Nguy\u1ec5n Di\u1ec7n Blogger', 'url': 'http://diendzfed.blogspot.com/2018/01/tao-thanh-cong-cu-co-inh-ben-phai-voi.html', 'canonicalUrl': 'http://diendzfed.blogspot.com/2018/01/tao-thanh-cong-cu-co-inh-ben-phai-voi.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/3676005487765107991/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/fdadcd9dd72c67a1', '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': '3676005487765107991', 'postImageThumbnailUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLGUOtIf3_JBv2oaMndUD0G6-IuCw0TdfOc_wxUAJoe8EaAN20iouE2i6JyKbJib_ur28BhGmUlJCprt3G0oc1ERh6oXri2nGdNsoyeNOZpMZwQo1ehyphenhyphenI7w44zed6Yp5hQNIFw1bXH_7HP/s72-c/thanh-cong-cu-cho-blogspot.PNG', 'postImageUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLGUOtIf3_JBv2oaMndUD0G6-IuCw0TdfOc_wxUAJoe8EaAN20iouE2i6JyKbJib_ur28BhGmUlJCprt3G0oc1ERh6oXri2nGdNsoyeNOZpMZwQo1ehyphenhyphenI7w44zed6Yp5hQNIFw1bXH_7HP/s1600/thanh-cong-cu-cho-blogspot.PNG', 'pageName': 'T\u1ea1o thanh c\xf4ng c\u1ee5 c\u1ed1 \u0111\u1ecbnh b\xean ph\u1ea3i v\u1edbi hi\u1ec7u \u1ee9ng tuy\u1ec7t \u0111\u1eb9p cho Blogspot', 'pageTitle': 'Nguy\u1ec5n Di\u1ec7n Blogger: T\u1ea1o thanh c\xf4ng c\u1ee5 c\u1ed1 \u0111\u1ecbnh b\xean ph\u1ea3i v\u1edbi hi\u1ec7u \u1ee9ng tuy\u1ec7t \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 thanh c\xf4ng c\u1ee5 c\u1ed1 \u0111\u1ecbnh b\xean ph\u1ea3i v\u1edbi hi\u1ec7u \u1ee9ng tuy\u1ec7t \u0111\u1eb9p cho Blogspot', 'description': 'Ch\xe0o m\u1ecdi ng\u01b0\u1eddi, b\xe0i vi\u1ebft n\xe0y s\u1ebd h\u01b0\u1edbng d\u1eabn c\xe1c b\u1ea1n t\u1ea1o thanh c\xf4ng c\u1ee5 \u0111\u1eb9p cho blogspot b\u1eb1ng HTML, Javascript v\xe0 CSS. K\xe8m b\xean ph\u1ea3i m\xe0n h\xecnh, c\xf3...', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLGUOtIf3_JBv2oaMndUD0G6-IuCw0TdfOc_wxUAJoe8EaAN20iouE2i6JyKbJib_ur28BhGmUlJCprt3G0oc1ERh6oXri2nGdNsoyeNOZpMZwQo1ehyphenhyphenI7w44zed6Yp5hQNIFw1bXH_7HP/s1600/thanh-cong-cu-cho-blogspot.PNG', 'url': 'http://diendzfed.blogspot.com/2018/01/tao-thanh-cong-cu-co-inh-ben-phai-voi.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 3676005487765107991}}]);
_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 thanh công cụ cố định bên phải với hiệu ứng tuyệt đẹp cho Blogspot

Chèn CSS

Related Post