Tạo nút back to top kết hợp menu recent comments tuyệt đẹp

0 comments tháng 10 24, 2018
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") ? "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDhmK2V6dOkYnlAqy_Bx7D3n6tGnYm1gHvnB65-vVsjKhwr90bWZLmhn0iL0_tvR0FZl_pQ7j5FoIqExleSOn-cQdieN6sAxl2EbCS1MblEDRZ1lN_3odblzyUikmGiCowRlMzEPGWMr9v/" + avatarSize + "/Blog-Mas-Tamvan.png" : -1 != g.indexOf("blogblog.com/img/openid16-rounded.gif") ? "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDhmK2V6dOkYnlAqy_Bx7D3n6tGnYm1gHvnB65-vVsjKhwr90bWZLmhn0iL0_tvR0FZl_pQ7j5FoIqExleSOn-cQdieN6sAxl2EbCS1MblEDRZ1lN_3odblzyUikmGiCowRlMzEPGWMr9v/" + 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 += "&hellip;", 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:&#39;&#39;;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&amp;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'/>

Lời Kết

Chúc Các Bạn Thành Công =))

Không có nhận xét nào:

Đăng nhận xét

Đăng ký: Đăng Nhận xét (Atom)

Pick Your Style