How To Install Recent Comment Disqus + Back To Top.
surely you already know with this style that many have used. and especially the template users commenting on disqus .. one of them is the famous blog Arlina Design uses Recent Comment Disqus + Back To Top
How do I make it? ok let's just discuss
Step 1
First As usual Login to Blogger> click Themes> Click Edit Theme . after you enter the editing template Search</head>orfor more quickly Press Ctrl + F on your computer keyboard After you find Place the code below right above the Codeor</head><!--<head/>-->
</head></head><!--<head/>-->
Step 2
After that look for the codeor put the code below right above it. but in order to be neat, you should place it just below the code, what if your template uses a Footer , if not Put it right aboveor / body & gt; </body><!--</body>--></body></footer></body><!--</body>--><
After that, look for the code</body>or<!--</body>--></body>put the code below right above:
If you are bored with the model above, you can use this one Css
Step 4
Insert the template and see the results of the
new Css version used by Arlina
Ok so first How to Install Disqus Recent Comments + Back To Top, hopefully it will be useful for you
surely you already know with this style that many have used. and especially the template users commenting on disqus .. one of them is the famous blog Arlina Design uses Recent Comment Disqus + Back To Top
How do I make it? ok let's just discuss
Step 1
First As usual Login to Blogger> click Themes> Click Edit Theme . after you enter the editing template Search</head>orfor more quickly Press Ctrl + F on your computer keyboard After you find Place the code below right above the Codeor</head><!--<head/>-->
</head></head><!--<head/>-->
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
/* Notifikasi Disqus */
.header-1{background:#2e9eff;color:#fff;height:auto;padding:15px;overflow:hidden}.header-1 h4{font-size:18px;float:left;color:#fff}.header-1 img{float:right}#scrollToTop .notif-show{color:#54a0ff;transition:all .6s}#scrollToTop .notif-show:hover{color:#2e86de}.notif-show:hover i{animation:rubberBand 1s}#disqus-notif{position:fixed;background:#fff;z-index:999;width:23.5%;top:0;right:-769px;bottom:0;transition:all .5s}#disqus-notif.active{right:0}#overlay-1.active{background:rgba(53,58,61,.92);position:fixed;z-index:998;overflow:hidden;width:100%;height:100%;top:0;left:0}#disqus-notif .close-1{position:fixed;margin-left:-40px;margin-top:16px;color:#fff;transition:all .3s}#disqus-notif .close-1 i{font-family:fontawesome;font-size:20px;font-weight:normal;font-style:normal;transform:rotate(270deg);transition:all .3s}#disqus-notif .close-1:hover i{transform:rotate(360deg)}#RecentComments{display:block;width:100%;margin:0 auto;padding:0;height:100%}#RecentComments ul.dsq-widget-list{background:#f6f7f9;text-align:left;max-height:95%;overflow:auto;overflow-x:hidden}#RecentComments img.dsq-widget-avatar{margin:0 10px 0 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:#ced6e0;font-size:12px}#RecentComments p.dsq-widget-meta a:hover{color:#a4b0be}#RecentComments li.dsq-widget-item{background:#fff;margin:10px;padding:10px;clear:both;color:#888;border-radius:5px;border-bottom:2px solid rgba(0,0,0,0.08)}#RecentComments a.dsq-widget-user{display:table;color:#22a6b3;font-weight:400;font-size:14px;margin:7px 0 0 0}#RecentComments a.dsq-widget-user:hover{color:#2e87e7}#RecentComments span.dsq-widget-comment{display:block;clear:both;margin:20px 10px 10px 0}#RecentComments .dsq-widget-comment p{display:inline-block;font-size:13px;margin:0;font-weight:400;color:#444;line-height:1.5}#RecentComments .dsq-widget-item pre{position:relative;background-color:#f1f2f6;color:#000;font-family:monospace;line-height:normal;overflow:hidden;text-overflow:ellipsis;padding:10px;margin:5px 0;border-radius:3px;font-size:12px}#RecentComments .dsq-widget-item pre code{color:#000;padding:0}#disqus-notif.active #RecentComments li.dsq-widget-item{animation:bounceInLeft 1.5s}#RecentComments .dsq-widget-comment p a{color:#3498db}#RecentComments .dsq-widget-comment p a:hover{color:#2980b9}
@media screen and (max-width:1366px){#disqus-notif{width:35%}}@media screen and (max-width:768px){#disqus-notif{width:100%}#disqus-notif .close-1{background:#535c68;display:block;text-align:left;margin:0;padding:0 15px;position:relative;font-size:35px;font-weight:500;color:#fff}}
.kotak_iklanpost{margin:20px auto;text-align:center}#st-4{z-index:70!important}.kotak_iklanpost img{margin:auto;-webkit-touch-callout:initial;-webkit-user-select:initial;-khtml-user-select:initial;-moz-user-select:initial;-ms-user-select:initial;user-select:auto;pointer-events:auto;width:100%}
/* Go Up and Down */
#scrollToTop{display:none;list-style:none;font-size:0;position:fixed;bottom:49%;right:0;cursor:pointer;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:99}#scrollToTop a{position:relative;overflow:hidden;display:inline-block;background:#fff;color:#222;font-size:.9rem;margin:0 auto;padding:14px 16px;box-shadow:0 1px 2px rgba(0,0,0,0.06),0 1px 2px rgba(0,0,0,0.1)}#scrollToTop a:hover{color:#747d8c}#top{position:absolute;top:0}#scrollToTop li:nth-child(1){animation:slideInTop .5s}#scrollToTop li:nth-child(2){animation:slideInRight .5s}#scrollToTop li:nth-child(3){animation:slideInDown .5s}
</style>
</b:if>Step 2
After that look for the codeor put the code below right above it. but in order to be neat, you should place it just below the code, what if your template uses a Footer , if not Put it right aboveor / body & gt; </body><!--</body>--></body></footer></body><!--</body>--><
<b:if cond='data:blog.pageType == "item"'>
<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>Notifications</h4><img alt='Disqus Logo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWQ0rtaA3hFuTKMY1nzX3pWPKGi4EQbjveSlqwqjVa5psUViUj8MeuBFTLVJ3pjKIGjkYaLqmQMqcVKTqAdPza3SRgsNc8iCrSglr9-q3aizEzibggAuVzjB9dirGIQrGVmZk_J-XD4Nbz/s1600/Disqusq.png' title='Disqus'/></div>
<div class='dsq-widget' id='RecentComments'>
<script defer='defer' type='text/javascript'>
//<![CDATA[
document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://theboegis.disqus.com/recent_comments_widget.js?num_items=20&hide_mods=1&hide_avatars=0&avatar_size=32&excerpt_length=180\"></scr" + "ipt>");
//]]>
</script>
</div>
</div>
<ul id='scrollToTop'>
<li><a class='ripplelink' href='#top' title='Go up'><i class='fa fa-chevron-up'/></a></li>
<li><a class='notif-show ripplelink' href='javascript:;' title='Open Disqus Notifications'><i class='fa fa-bell'/></a></li>
<li><a class='ripplelink' href='#bottom' title='Go down'><i class='fa fa-chevron-down'/></a></li>
</ul>
<div id='top'/>
<div id='bottom'/>
</b:if>search https://theboegis.disqus.com replace the link diqus friendStep 3
After that, look for the code</body>or<!--</body>--></body>put the code below right above:
<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>If you are bored with the model above, you can use this one Css
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
/* Notifikasi Disqus */
.header-1{background:#2e9eff;color:#fff;height:auto;padding:15px;overflow:hidden}.header-1 h4{font-size:18px;float:left;color:#fff}.header-1 img{float:right}#scrollToTop .notif-show{color:#54a0ff;transition:all .6s}#scrollToTop .notif-show:hover{color:#2e86de}.notif-show:hover i{animation:rubberBand 1s}#disqus-notif{position:fixed;background:#fff;z-index:999;width:23.5%;top:0;right:-769px;bottom:0;transition:all .5s}#disqus-notif.active{right:0}#overlay-1.active{background:rgba(53,58,61,.92);position:fixed;z-index:998;overflow:hidden;width:100%;height:100%;top:0;left:0}#disqus-notif .close-1{position:fixed;margin-left:-40px;margin-top:16px;color:#fff;transition:all .3s}#disqus-notif .close-1 i{font-family:fontawesome;font-size:20px;font-weight:normal;font-style:normal;transform:rotate(270deg);transition:all .3s}#disqus-notif .close-1:hover i{transform:rotate(360deg)}#RecentComments{display:block;width:100%;margin:0 auto;padding:0;height:100%}#RecentComments ul.dsq-widget-list{background:#f6f7f9;text-align:left;max-height:95%;overflow:auto;overflow-x:hidden}#RecentComments img.dsq-widget-avatar{margin:0 10px 0 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:#ced6e0;font-size:12px}#RecentComments p.dsq-widget-meta a:hover{color:#a4b0be}#RecentComments li.dsq-widget-item{background:#fff;margin:10px;padding:10px;clear:both;color:#888;border-radius:5px;border-bottom:2px solid rgba(0,0,0,0.08)}#RecentComments a.dsq-widget-user{display:table;color:#22a6b3;font-weight:400;font-size:14px;margin:7px 0 0 0}#RecentComments a.dsq-widget-user:hover{color:#2e87e7}#RecentComments span.dsq-widget-comment{display:block;clear:both;margin:20px 10px 10px 0}#RecentComments .dsq-widget-comment p{display:inline-block;font-size:13px;margin:0;font-weight:400;color:#444;line-height:1.5}#RecentComments .dsq-widget-item pre{position:relative;background-color:#f1f2f6;color:#000;font-family:monospace;line-height:normal;overflow:hidden;text-overflow:ellipsis;padding:10px;margin:5px 0;border-radius:3px;font-size:12px}#RecentComments .dsq-widget-item pre code{color:#000;padding:0}#disqus-notif.active #RecentComments li.dsq-widget-item{animation:bounceInLeft 1.5s}#RecentComments .dsq-widget-comment p a{color:#ced6e0}#RecentComments .dsq-widget-comment p a:hover{color:#a4b0be}
@media screen and (max-width:1366px){#disqus-notif{width:35%}}@media screen and (max-width:768px){#disqus-notif{width:100%}#disqus-notif .close-1{background:#535c68;display:block;text-align:left;margin:0;padding:0 15px;position:relative;font-size:35px;font-weight:700;color:#fff}}
.kotak_iklanpost{margin:20px auto;text-align:center}#st-4{z-index:70!important}.kotak_iklanpost img{margin:auto;-webkit-touch-callout:initial;-webkit-user-select:initial;-khtml-user-select:initial;-moz-user-select:initial;-ms-user-select:initial;user-select:auto;pointer-events:auto;width:100%}
/* Go Up and Down */
#scrollToTop{display:none;list-style:none;position:fixed;bottom:49%;right:30px;cursor:pointer;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:99}#scrollToTop a{position:relative;overflow:hidden;display:inline-block;background:#fff;color:#222;font-size:.9rem;margin:5px auto;padding:14px 16px;border-radius:99em;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)}#scrollToTop a:hover{color:#747d8c;box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12)}#top{position:absolute;top:0}#scrollToTop li:nth-child(1){animation:slideInTop .5s}#scrollToTop li:nth-child(2){animation:slideInRight .5s}#scrollToTop li:nth-child(3){animation:slideInDown .5s}
</style>
</b:if>Step 4
Insert the template and see the results of the
new Css version used by Arlina
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
/* Notifikasi Disqus */
.header-1{background:#2e9eff;color:#fff;height:auto;padding:15px;overflow:hidden}.header-1 h4{font-size:18px;float:left;color:#fff}.header-1 img{float:right}#scrollToTop .notif-show{position:relative;color:#222;transition:all .6s}#scrollToTop .notif-show:hover{color:#222}.notif-show:hover i{animation:rubberBand 1s}#disqus-notif{position:fixed;background:#fff;z-index:999;width:23.5%;top:0;right:-769px;bottom:0;transition:all .5s}#disqus-notif.active{right:0}#overlay-1.active{background:rgba(53,58,61,.92);position:fixed;z-index:998;overflow:hidden;width:100%;height:100%;top:0;left:0}#disqus-notif .close-1{position:fixed;margin-left:-40px;margin-top:16px;color:#fff;transition:all .3s}#disqus-notif .close-1 i{font-family:fontawesome;font-size:20px;font-weight:normal;font-style:normal;transform:rotate(270deg);transition:all .3s}#disqus-notif .close-1:hover i{transform:rotate(360deg)}#RecentComments{display:block;width:100%;margin:0 auto;padding:0;height:100%}#RecentComments ul.dsq-widget-list{background:#f6f7f9;text-align:left;max-height:95%;overflow:auto;overflow-x:hidden}#RecentComments img.dsq-widget-avatar{margin:0 10px 0 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:#ced6e0;font-size:12px}#RecentComments p.dsq-widget-meta a:hover{color:#a4b0be}#RecentComments li.dsq-widget-item{background:#fff;margin:10px;padding:10px;clear:both;color:#888;border-radius:5px;border-bottom:2px solid rgba(0,0,0,0.08)}#RecentComments a.dsq-widget-user{display:table;color:#22a6b3;font-weight:400;font-size:14px;margin:7px 0 0 0}#RecentComments a.dsq-widget-user:hover{color:#2e87e7}#RecentComments span.dsq-widget-comment{display:block;clear:both;margin:20px 10px 10px 0}#RecentComments .dsq-widget-comment p{display:inline-block;font-size:13px;margin:0;font-weight:400;color:#444;line-height:1.5}#RecentComments .dsq-widget-item pre{position:relative;background-color:#f1f2f6;color:#000;font-family:monospace;line-height:normal;overflow:hidden;text-overflow:ellipsis;padding:10px;margin:5px 0;border-radius:3px;font-size:12px}#RecentComments .dsq-widget-item pre code{color:#000;padding:0}#disqus-notif.active #RecentComments li.dsq-widget-item{animation:bounceInLeft 1.5s}#RecentComments .dsq-widget-comment p a{color:#3498db}#RecentComments .dsq-widget-comment p a:hover{color:#2980b9}
@media screen and (max-width:1366px){#disqus-notif{width:35%}}@media screen and (max-width:768px){#disqus-notif{width:100%}#disqus-notif .close-1{background:#535c68;display:block;text-align:left;margin:0;padding:0 15px;position:relative;font-size:35px;font-weight:500;color:#fff}}
.kotak_iklanpost{margin:20px auto;text-align:center}#st-4{z-index:70!important}.kotak_iklanpost img{margin:auto;-webkit-touch-callout:initial;-webkit-user-select:initial;-khtml-user-select:initial;-moz-user-select:initial;-ms-user-select:initial;user-select:auto;pointer-events:auto;width:100%}
/* Go Up and Down */
#scrollToTop{display:none;list-style:none;font-size:0;position:fixed;bottom:49%;right:2%;cursor:pointer;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:99}#scrollToTop a{position:relative;overflow:hidden;display:inline-block;background:#fff;color:#222;font-size:.8rem;margin:0 auto;padding:12px 14px;border:1px solid rgba(0,0,0,0.05)}#scrollToTop li:nth-child(1) a{border-radius:99em 99em 0 0;border-bottom:0}#scrollToTop li:nth-child(3) a{border-radius:0 0 99em 99em;border-top:0}#scrollToTop a:hover{color:#747d8c}#top{position:absolute;top:0}#scrollToTop li:nth-child(1){animation:slideInTop .5s}#scrollToTop li:nth-child(2){animation:slideInRight .5s}#scrollToTop li:nth-child(3){animation:slideInDown .5s}#scrollToTop .notif-show .sindicat{display:block;font-size:16px;background:#FFBA00;position:absolute;top:10px;right:10px;width:10px;height:10px;border-radius:10px}.sindicat{animation:sindicat 1s ease infinite}
</style>
</b:if>Ok so first How to Install Disqus Recent Comments + Back To Top, hopefully it will be useful for you