<!--<head><style type='text/css'>@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(//fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu4mxP.ttf)format('truetype');}</style>
<link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=7306137828648818524&zx=7a942ec2-315a-41c2-befe-cebbe91c52d1' media='none' onload='if(media!='all')media='all'' rel='stylesheet'/><noscript><link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=7306137828648818524&zx=7a942ec2-315a-41c2-befe-cebbe91c52d1' 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 » Comment » Recent Comment » Thủ Thuật Blogspot » Widget » Tạo Widget Recent Comment với Avatar bo tròn và Tiêu đề bài viết

Tạo Widget Recent Comment với Avatar bo tròn và Tiêu đề bài viết

Comment Recent Comment Thủ Thuật Blogspot Widget

tháng 1 17, 2018

Share on Facebook Tweet on Twitter  

Chào các bạn, hôm nay mình sẽ 'chia sẻ lại' một widget recent comment khá đẹp và đẹp do Duy Phạm viết. Trước đó mình cũng có chia sẻ lại một mẫu widget recent comment khác của Duy Phạm và Idblanter, code javascript thì mình bê nguyên của tác giả còn CSS thì mình viết lại hoàn toàn.
Widget này còn một điểm hay nữa là khi bạn rê chuột vào tiêu đề bài viết thì sẽ hiện ra đoạn trích dẫn của nhận xét đó và bạn có thể tùy chỉnh được độ dài ngắn của đoạn trích dẫn đấy, rất hay!
Bạn có thể xem lại 2 mẫu widget trước tại đây: https://www.bacsiwindows.com/widget/rc

Cách thực hiện

Bạn tạo một widget HTML/Javascript rồi dán toàn bộ code này vào:

LABEL : #Comment #Recent Comment #Thủ Thuật Blogspot #Widget

posted by

at

<!--
<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/984859869-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY7tMpSY_oLO736rZ3XzatKXClW6Fg:1731968259652';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d7306137828648818524','//diendzfed.blogspot.com/2018/01/tao-widget-recent-comment-voi-avatar-bo.html','7306137828648818524');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '7306137828648818524', 'title': 'Nguy\u1ec5n Di\u1ec7n Blogger', 'url': 'https://diendzfed.blogspot.com/2018/01/tao-widget-recent-comment-voi-avatar-bo.html', 'canonicalUrl': 'http://diendzfed.blogspot.com/2018/01/tao-widget-recent-comment-voi-avatar-bo.html', 'homepageUrl': 'https://diendzfed.blogspot.com/', 'searchUrl': 'https://diendzfed.blogspot.com/search', 'canonicalHomepageUrl': 'http://diendzfed.blogspot.com/', 'blogspotFaviconUrl': 'https://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\x22https://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\x22https://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\x22https://diendzfed.blogspot.com/feeds/3411804058739292721/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/51f2c5635a23dea1', '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': '3411804058739292721', 'postImageThumbnailUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8oTBQCEWUpladLHlU5Etjby7tP0xFyuyIxfhitkwQkGJHjgfBwiRWKtFyFfi0LcTUtZeB1YfFenwRIZFoPx69GSvXzFbhJmnUgdeGoLsHv_dUMSXy4zvN8N05yFdkB1_f7FIWnfuOXlCz/s72-c/widget-recent-comment-voi-avatar-bo-tron-va-tieu-de-bai-viet------------BacSiWindows-Com.png', 'postImageUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8oTBQCEWUpladLHlU5Etjby7tP0xFyuyIxfhitkwQkGJHjgfBwiRWKtFyFfi0LcTUtZeB1YfFenwRIZFoPx69GSvXzFbhJmnUgdeGoLsHv_dUMSXy4zvN8N05yFdkB1_f7FIWnfuOXlCz/s1600/widget-recent-comment-voi-avatar-bo-tron-va-tieu-de-bai-viet------------BacSiWindows-Com.png', 'pageName': 'T\u1ea1o Widget Recent Comment v\u1edbi Avatar bo tr\xf2n v\xe0 Ti\xeau \u0111\u1ec1 b\xe0i vi\u1ebft', 'pageTitle': 'Nguy\u1ec5n Di\u1ec7n Blogger: T\u1ea1o Widget Recent Comment v\u1edbi Avatar bo tr\xf2n v\xe0 Ti\xeau \u0111\u1ec1 b\xe0i vi\u1ebft'}}, {'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 Widget Recent Comment v\u1edbi Avatar bo tr\xf2n v\xe0 Ti\xeau \u0111\u1ec1 b\xe0i vi\u1ebft', 'description': 'Ch\xe0o c\xe1c b\u1ea1n, h\xf4m nay m\xecnh s\u1ebd \x27chia s\u1ebb l\u1ea1i\x27 m\u1ed9t widget recent comment kh\xe1 \u0111\u1eb9p v\xe0 \u0111\u1eb9p do Duy Ph\u1ea1m  vi\u1ebft. Tr\u01b0\u1edbc \u0111\xf3 m\xecnh c\u0169ng c\xf3 chia s\u1ebb l\u1ea1i m\u1ed9...', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8oTBQCEWUpladLHlU5Etjby7tP0xFyuyIxfhitkwQkGJHjgfBwiRWKtFyFfi0LcTUtZeB1YfFenwRIZFoPx69GSvXzFbhJmnUgdeGoLsHv_dUMSXy4zvN8N05yFdkB1_f7FIWnfuOXlCz/s1600/widget-recent-comment-voi-avatar-bo-tron-va-tieu-de-bai-viet------------BacSiWindows-Com.png', 'url': 'https://diendzfed.blogspot.com/2018/01/tao-widget-recent-comment-voi-avatar-bo.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 3411804058739292721}}]);
_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/2494029944-lbx__vi.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/1964470060-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 Widget Recent Comment với Avatar bo tròn và Tiêu đề bài viết

Cách thực hiện

Related Post