Thứ Năm, 24 tháng 12, 2015

Hướng dẫn thêm bình luận hiện, ẩn

Penulis Tiện ích Việt Nam Diterbitkan 18:33

Tags

ALL in ONE

JavaScript

Kiến thức chung

Tổng hợp kiến thức

Nhận xét của khách tham quan blog của bạn thật sự là một điều quan trọng. Sau đây Tôi xin chia sẻ code tạp 1 cửa sổ hiện, ẩn những commet đó

HƯỚNG DẪN Chi tiết CÁC bước như sau:

1. Tới Blogger> Template> Chỉnh sửa HTML> Sau đó thêm mã CSS bên dưới ngay trên code]]> </ b: skin> hay </ style>

/* CSS Notifikasi Komentar Disqus */

.header-1 {background:#fff;border-bottom:1px solid #ddd;height:30px;padding:15px;overflow:hidden}

.header-1 h4{font-size:15px;float:left;margin:5px;padding:2px;color:#555}

.header-1 img{float:right}

.notif-show{position:fixed;top:10px;right:10px;z-index:9997;color:#fff!important;background:#444;padding:10px;font-size:13px;border-radius:4px}

#disqus-notif.active{right:0}

#disqus-notif{position:fixed;background:#fff;z-index:9999;width:30%;border-left:3px solid #e2e2e2;top:0;right:-500px;bottom:0;transition:all .7s ease-in-out}#overlay-1.active{background:rgba(53,58,61,.9);position:fixed;z-index:9998;overflow:hidden;width:100%;height:100%;top:0;left:0}.close-text{display:inline-block;font-weight:700;font-size:14px;position:relative;right:-15px;top:-7px;visibility:hidden;opacity:0;transition:all 250ms ease-in-out}.close-1:hover .close-text{visibility:visible;opacity:1;-webkit-transform:translate3d(-80px,0,0);transform:translate3d(-80px,0,0)}

.close-1{position:fixed;margin-left:-50px;margin-top:20px;font-size:35px;font-weight:700;color:#fff!important}

#RecentComments{display:block;width:100%;margin:0 auto;padding:10px 0 10px 20px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;height:100%;}

#RecentComments ul.dsq-widget-list{text-align:left;max-height:90%;overflow:auto;}

#RecentComments img.dsq-widget-avatar{margin:3px 10px 7px 0;width:32px;height:32px;padding:0;float:left;border-radius:3px;clear:both;display:block}

#RecentComments p.dsq-widget-meta{clear:both;font-size:80%;margin-top:5px;font-weight:400}

#RecentComments p.dsq-widget-meta a{display:inline-block;width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#2e9fff;font-size:12px}

#RecentComments p.dsq-widget-meta a:hover{color:#2e87e7}

#RecentComments li.dsq-widget-item{margin:0;padding:6px 0 4px;list-style-type:none;clear:both;border-bottom:1px solid #eee;color:#2e87e7;font-weight:600}

#RecentComments li.dsq-widget-item:last-child{border-bottom:none}

#RecentComments a.dsq-widget-user {display:table;color:#2e9fff;font-weight:700;font-size:14px}

#RecentComments a.dsq-widget-user:hover{color:#2e87e7;}

#RecentComments span.dsq-widget-comment{display:block;clear:both;margin-top:5px;}

#RecentComments .dsq-widget-comment p{display:inline-block;font-size:13px;margin:0;font-weight:400;color:#444}

#RecentComments .dsq-widget-item pre{position:relative;background-color:#f3ffca;padding-top:0;box-shadow:0 1px 0 rgba(0,0,0,.1);border-radius:0;opacity:.9;transition:all .3s;}

.count-1{background:#ED1E24;padding:2px 5px;font-size:11px;border-radius:3px;position:absolute;top:-8px;left:-20px}

#RecentComments .dsq-widget-item pre:hover {opacity:1}

#RecentComments .dsq-widget-item pre code {color:#444;font-size:82%;}

#RecentComments .dsq-widget-item pre:before{content:'';position:absolute;padding:initial;font-size:initial;text-indent:initial;left:initial;color:initial;top:0;right:0;width:1.2em;height:1.2em;background-color:#d8e3b0}

#RecentComments .dsq-widget-item pre:after{content:'';font-size:initial;padding:0;position:absolute;width:0;height:0;border-style:solid;border-width:0 1.2em 1.2em 0;border-color:transparent #fff transparent transparent}

@media screen and (max-width:480px) {#disqus-notif{width:100%}.close-1{margin:0;color:#444!important}}

Tiếp thêm mã HTML bên dưới mã chỉ bên dưới thẻ <body> hoặc <body

<a class='close-1' href='javascript:;' title='Close'>×<span class='close-text'>Close</span></a>

<div class='header-1'><h4>Notifications</h4><a href='https://disqus.com' target='_blank' title='Disqus'><img alt='Disqus Logo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1VXkNAnOHYDPk7xE0ySr8DDSQ4pobyGzFhlba7HKYuMp6g7d-BUz5IB-szJRuAAw5H_KCbGSnSu4mATDYGK1pZrkRMCog5mFBrnjdpzgjOtWKSl3zz437ZlFM7hv4Q11PkGgoNWyG05FY/s1600/disqus-1.png'/></a></div>

//<![CDATA[

document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://duniablanter.disqus.com/recent_comments_widget.js?num_items=18&hide_mods=0&hide_avatars=1&avatar_size=32&excerpt_length=120\"></scr" + "ipt>");

//]]>

</script>

//<![CDATA[

$("#RecentComments a").filter(function(){return this.hostname&&this.hostname!==location.hostname}).attr('rel', 'nofollow').attr('target', '_blank');

//]]>

</script>

</div>

https://duniablanter.disqus.com/recent_comments_widget.js thay thế nó bằng một link forum của bạn
Bước Cuối cùng, thêm mã javascript mã dưới đây ngay trên </ body>

//<![CDATA[

// Notif Komentar 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")})});

//]]>

</script>

Nếu chưa có bạn hãy thêm Font Awesome phía trên </ head>

Lưu Template và xem kết quả ...

Hy vọng bài viết này hữu ích. Cám ơn.