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='notif-show' href='javascript:;'><i class='fa fa-comments-o'></i><span
class='count-1'>New!</span></a>
<div
id='overlay-1'></div>
<div
id='disqus-notif'>
<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/AVvXsEg46xASg45rjtc7UGRp5lvbgj8BRgfWfaitFeaSYAbAQKYA5aOd4-YqdfotQON9IPJEJxhMmy3nDB2tHxmP1gD99uyKrMS5k0tY6uZb_9w37iPJCbDRh_8AEASAQqzKpI_upZQQKA4KaeaM/s1600/disqus-1.png'/></a></div>
<div
class='dsq-widget' id='RecentComments'>
<script
defer='defer' type='text/javascript'>
//<![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>
<script
type='text/javascript'>
//<![CDATA[
$("#RecentComments
a").filter(function(){return
this.hostname&&this.hostname!==location.hostname}).attr('rel',
'nofollow').attr('target', '_blank');
//]]>
</script>
</div>
</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>
Bước Cuối cùng, thêm mã javascript mã dưới đây ngay trên </ body>
|
<script
type='text/javascript'>
//<![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>
|
<link
type='text/css' rel='stylesheet' href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'/>
|
Lưu
Template và xem kết quả ...
Hy vọng bài viết này hữu ích. Cám ơn.