Chào mừng đã đến với blog của chúng tôi.Do yêu cầu của vài người nên hôm nay Nguyễn Diện Blog sẽ hướng dẫn các độc giả tạo nút back to top kết hợp menu recent comments
Các bước thực hiện
Thêm đoạn html bên dưới vào trước thẻ đóng </body> là xong
<div id='overlay-1'/>
<div id='disqus-notif'>
<a class='close-1' href='javascript:;' title='Close'><i class='fa fa-times'/></a>
<div class='header-1'><h4>Reccent Comment</h4></div>
<div class='dsq-widget' id='RecentComments'>
<script type='text/javascript'>
//<![CDATA[
// Recent Comments Settings
var numComments = 6,
showAvatar = true,
avatarSize = 60,
roundAvatar = true,
characters = 30,
showMorelink = true,
moreLinktext = "",
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
function mas_tamvan_recent_comment(a) {
var e, t = "a",
r = "b",
n = "c",
o = "l",
i = "m",
s = "o",
l = "p",
d = "s",
v = "t";
e = '<ul class="mas_tamvan_recent_comment">';
for (var m = 0; numComments > m; m++) {
var c, f, g, A;
if (m == a.feed.entry.length) break;
e += "<li>";
for (var h = a.feed.entry[m], u = 0; u < h.link.length; u++) "alternate" == h.link[u].rel && (c = h.link[u].href);
for (var p = 0; p < h.author.length; p++) f = h.author[p].name.$t, g = h.author[p].gd$image.src;
g = -1 != g.indexOf("/s1600/") ? g.replace("/s1600/", "/s" + avatarSize + "-c/") : -1 != g.indexOf("/s220/") ? g.replace("/s220/", "/s" + avatarSize + "-c/") : -1 != g.indexOf("/s512-c/") && 0 != g.indexOf("") ? "" + g.replace("/s512-c/", "/s" + avatarSize + "-c/") : -1 != g.indexOf("blogblog.com/img/b16-rounded.gif") ? "//1.bp.blogspot.com/-3sfPiW9c7Rw/V5IP4C90xlI/AAAAAAAAA70/kmMOj4TgPYsD4Qa5CFIkS3rIAPhTMwX-ACLcB/s" + avatarSize + "/Blog-Mas-Tamvan.png" : -1 != g.indexOf("blogblog.com/img/openid16-rounded.gif") ? "//1.bp.blogspot.com/-3sfPiW9c7Rw/V5IP4C90xlI/AAAAAAAAA70/kmMOj4TgPYsD4Qa5CFIkS3rIAPhTMwX-ACLcB/s" + avatarSize + "/Blog-Mas-Tamvan.png" : -1 != g.indexOf("blogblog.com/img/blank.gif") ? -1 != defaultAvatar.indexOf("gravatar.com") ? defaultAvatar + "&s=" + avatarSize : defaultAvatar : g, 1 == showAvatar && (A = 1 == roundAvatar ? "avatarImage" : "", e += '<div class="avatarClass"><img class="' + A + '" src="' + g + '" alt="' + f + '" title="' + f + '" width="' + avatarSize + '" height="' + avatarSize + '"/></div>'), e += '<a class="author" target="_blank" title="' + f + '" href="' + c + '">' + f + "</a>";
var k = h.content.$t,
x = k.replace(/(<([^>]+)>)/gi, "");
"" != x && x.length > characters ? (x = x.substring(0, characters), x += "…", 1 == showMorelink && (x += '<a target="_blank" title="' + moreLinktext + '"href="' + c + '">' + moreLinktext + "</a>")) : x = x, e += "<span>" + x + "</span>", e += "</li>"
}
e += "</ul>", e += '<a style="font-size:0px" title="' + f + '"href="//m' + t + d + v + t + i + "van." + r + o + "og" + d + l + "ot." + n + s + i + '">' + i + t + d + " t" + t + i + "van.</a>";
var b = ".xxx";
1 == hideCredits && (b = "display:none;"), document.write(e)
}
var numComments = numComments || 5,
avatarSize = avatarSize || 60,
characters = characters || 30,
defaultAvatar = defaultAvatar || "//www.gravatar.com/avatar/?d=mm",
moreLinktext = moreLinktext || "",
showAvatar = "undefined" == typeof showAvatar ? !0 : showAvatar,
showMorelink = "undefined" == typeof showMorelink ? !1 : showMorelink,
roundAvatar = "undefined" == typeof roundAvatar ? !0 : roundAvatar,
hideCredits = "undefined" == typeof hideCredits ? !1 : roundAvatar;
//]]>
</script>
<style type='text/css'>ul.mas_tamvan_recent_comment{display:inline-block;width:100%;padding: 5px;margin:0;position:relative;overflow:hidden;border-radius:5px}ul.mas_tamvan_recent_comment li a{font-weight: 700;text-decoration:none;color:#7596c8;padding:0 0 5px}ul.mas_tamvan_recent_comment li a.author{display:block}ul.mas_tamvan_recent_comment li{ width: -webkit-fill-available;position:relative;clear:both;display:inline-block;padding:10px;margin:0 0 15px 0;font-size:14px;border-radius:3px;background-color:#333;animation:show-chat-even 0.15s 1 ease-in;-moz-animation:show-chat-even 0.15s 1 ease-in;-webkit-animation:show-chat-even 0.15s 1 ease-in;float:left;margin-left:70px;color:#ddd;border:0}ul.mas_tamvan_recent_comment li:after{position:absolute;top:15px;content:'';width:0;height:0;border-top:15px solid #333;border-left:15px solid transparent;left:-15px}ul.mas_tamvan_recent_comment li .avatarImage{position:absolute;top:0;width:40px;height:40px;border-radius:50px;left:-70px;overflow:hidden}ul.mas_tamvan_recent_comment li .avatarImage img{width:100%;height:auto}</style>
<script src='/feeds/comments/default?alt=json&callback=mas_tamvan_recent_comment' type='text/javascript'/>
</div>
</div>
<ul id='scrollToTop'>
<li><a class='ripplelink' href='#top' title='Go up'><span class='ink animate' style='height: 47px; width: 47px; top: 2.17188px; left: -2.09375px;'/><i class='fa fa-chevron-up'/></a></li>
<li><a class='notif-show ripplelink' href='javascript:;' title='Open Disqus Notifications'><span class='ink animate' style='height: 47px; width: 47px; top: -11.8281px; left: -5.09375px;'/><i class='fa fa-bell'/></a></li>
<li><a class='ripplelink' href='#bottom' title='Go down'><span class='ink animate' style='height: 47px; width: 47px; top: -4.82813px; left: 0.90625px;'/><i class='fa fa-chevron-down'/></a></li>
</ul>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function(){var o=220,r=600;jQuery(window).scroll(function(){jQuery(this).scrollTop() > o?jQuery("#scrollToTop").fadeIn(r):jQuery("#scrollToTop").fadeOut(r)})});
$(function(){$("a[href*=#]:not([href=#])").click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var t=$(this.hash);if(t=t.length?t:$("[name="+this.hash.slice(1)+"]"),t.length)return $("html,body").animate({scrollTop:t.offset().top},600),!1}})});
// Notif Disqus
$(function(){$(".notif-show").on("click",function(){$("#disqus-notif").addClass("active").focus()});$(".close-1").on("click",function(){$("#disqus-notif").removeClass("active")})});
$(function(){$(".notif-show").on("click",function(){$("#overlay-1").addClass("active").focus()});$(".close-1").on("click",function(){$("#overlay-1").removeClass("active")})});
$("#RecentComments a").filter(function(){return this.hostname&&this.hostname!==location.hostname}).attr('rel', 'nofollow noopener').attr('target', '_blank');
//]]>
</script>
<div id='bottom'/>