<!--<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 » Popular Post » Thủ Thuật Blogspot » Thêm một style tuyệt đẹp của widget Popular Post cho Blogspot

Thêm một style tuyệt đẹp của widget Popular Post cho Blogspot

Thêm một style tuyệt đẹp của widget Popular Post cho Blogspot

CSS Popular Post Thủ Thuật Blogspot

tháng 12 28, 2017

Share on Facebook Tweet on Twitter  

Chào các bạn, lâu rồi chưa có bài viết thủ thuật blogspot mới. Hôm nay vô tình lục lại template cũ thì thấy có cái widget popular posts này khá đẹp nên rảnh thì chia sẻ luôn cho tăng tương tác!
Widget được thiết kế bằng CSS3 bởi Bác Sĩ Windows.

Với hình ảnh kích thước tỉ lệ 16:9 cùng hiệu ứng hover tuyệt đẹp, widget bài đăng phổ biến này rất phù hợp với những blog cá nhân, blog chia sẻ ảnh,...
Cùng xem và thực hiện nhé, rất đơn giản.

LABEL : #CSS #Popular Post #Thủ Thuật Blogspot

posted by

Nguyễn Đình Diện

at tháng 12 28, 2017

<!--
<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/3000588928-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY6e020td1xSgfXC9ZWFQIt-M2eItA:1753467370532';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d7306137828648818524','//diendzfed.blogspot.com/2017/12/them-mot-style-tuyet-ep-cua-widget.html','7306137828648818524');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '7306137828648818524', 'title': 'Nguy\u1ec5n Di\u1ec7n Blogger', 'url': 'http://diendzfed.blogspot.com/2017/12/them-mot-style-tuyet-ep-cua-widget.html', 'canonicalUrl': 'http://diendzfed.blogspot.com/2017/12/them-mot-style-tuyet-ep-cua-widget.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/3329966622004873033/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/8a67ddfb3e3580e6', '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': '3329966622004873033', 'postImageThumbnailUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYXMe7fVXvOd7dVxPt27s4XVMsnNgaI25mnpEZE1DgZM4cveRyN56LBiATY5vtA_aiUw9nxIgrFhe-_4T9GWT4LkJbzVUvDhHUHrE5DCbhyphenhyphenvUBLUTwWf6zUg5vEjAXCYLn59l_wrYt1Qyx/s72-c/beautiful-popular-post-widget-for-blogspot-----------BacSiWindows-Com.png', 'postImageUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYXMe7fVXvOd7dVxPt27s4XVMsnNgaI25mnpEZE1DgZM4cveRyN56LBiATY5vtA_aiUw9nxIgrFhe-_4T9GWT4LkJbzVUvDhHUHrE5DCbhyphenhyphenvUBLUTwWf6zUg5vEjAXCYLn59l_wrYt1Qyx/s1600/beautiful-popular-post-widget-for-blogspot-----------BacSiWindows-Com.png', 'pageName': 'Th\xeam m\u1ed9t style tuy\u1ec7t \u0111\u1eb9p c\u1ee7a widget Popular Post cho Blogspot', 'pageTitle': 'Nguy\u1ec5n Di\u1ec7n Blogger: Th\xeam m\u1ed9t style tuy\u1ec7t \u0111\u1eb9p c\u1ee7a widget Popular Post 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': 'Th\xeam m\u1ed9t style tuy\u1ec7t \u0111\u1eb9p c\u1ee7a widget Popular Post cho Blogspot', 'description': 'Ch\xe0o c\xe1c b\u1ea1n, l\xe2u r\u1ed3i ch\u01b0a c\xf3 b\xe0i vi\u1ebft th\u1ee7 thu\u1eadt blogspot  m\u1edbi. H\xf4m nay v\xf4 t\xecnh l\u1ee5c l\u1ea1i template  c\u0169 th\xec th\u1ea5y c\xf3 c\xe1i widget popular posts n\xe0...', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYXMe7fVXvOd7dVxPt27s4XVMsnNgaI25mnpEZE1DgZM4cveRyN56LBiATY5vtA_aiUw9nxIgrFhe-_4T9GWT4LkJbzVUvDhHUHrE5DCbhyphenhyphenvUBLUTwWf6zUg5vEjAXCYLn59l_wrYt1Qyx/s1600/beautiful-popular-post-widget-for-blogspot-----------BacSiWindows-Com.png', 'url': 'http://diendzfed.blogspot.com/2017/12/them-mot-style-tuyet-ep-cua-widget.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 3329966622004873033}}]);
_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/4148820731-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>-->