Widgets Recent Comments Disqus AMP HTML 2018

Widgets Recent comments Disqus AMP HTML - Comments are one of the important elements that should be in a blog page. Comments are a means of interaction between blog visitors or blog visitors with blog admin so intertwined communication that may be a solution that is facing.

In addition, comments can also be a pull of traffic from search results. Just like Blogger or Disqus comments that can appear in search results, then this is a door to the commented posting traffic. The more interaction in the comments of a page then of course the page view will increase and the opportunity to attract visitors from search results is higher. And to make it easier to monitor Disqus comments that come in, then the Disqus's comment comment widget becomes the solution.

Widgets recent comments Disqus serves to display the latest Disqus comments so this will make it easier to manage the comments. Then the blog admin would be easier to answer the questions asked by the visitor in the comment field. Just click it will go to the page.

Well this time I will share a widget Recent Comments Disqus for AMP HTML blog with show hide that will appear from the right side of the blog by clicking on the bell icon. If you are interested in making it, please follow the steps below.

Widgets Recent Comments Disqus AMP HTML

1. Please keep the following two js code above </head> or &lt;/head&gt;&lt;!--<head/>--&gt; and if it turns out in your blog template already there are both js, please step this step. Or if there is already js from one of them, then please equip with other js again.

<script async="" custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
<script async="" custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

2. Then please save the following HTML code for the bell or bell icon to display the recent widget comments Disqus. Please save where you want to display it.

<div class='open-recent' id='open-recent' on='tap:disqus-recent.show,disqus-recent-iframe.show,recent-disqus-box' role='button' tabindex='0' aria-label='Open Recent Comments'>
<svg width='24' height='24' viewBox="0 0 24 24">
    <path fill="#000000" d="M12,22A2,2 0 0,0 14,20H10A2,2 0 0,0 12,22M18,16V11C18,7.93 16.36,5.36 13.5,4.68V4A1.5,1.5 0 0,0 12,2.5A1.5,1.5 0 0,0 10.5,4V4.68C7.63,5.36 6,7.92 6,11V16L4,18V19H20V18L18,16Z" />
</svg>
  </div>

3. Then set with the following CSS:

.open-recent{cursor:pointer;position:fixed;top:0;right:0;z-index:998;}

CSS above will display a floating bell icon at the top right of the blog.

4. Then add also the following CSS for widget style recent comments Disqus this.

.top-comments-box-fixed{background:#fff;position:fixed;top:0;right:0;height:100vh;width:300px;padding:0;z-index:999;-webkit-animation-name:slideInRight;animation-name:slideInRight;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;}
.top-comments-box-fixed h3{font-size:18px;margin:0;padding:0 0 0 10px;color:#fff;height:50px;line-height:50px;background:#2e9fff;position:relative;-webkit-box-shadow:0 1px 8px rgba(0,0,0,.3);box-shadow:0 1px 8px rgba(0,0,0,.3);}
.top-comments-box-fixed h3 span{position:relative;z-index:2;}

.top-comments-box-fixed h3:after{content:"";background:url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 438 80' width='160' height='40' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%23ffffff' d='M30.208 1.602H.878v76.039h28.895c27.376 0 43.342-16.293 43.342-38.235v-.219c.002-21.943-15.75-37.585-42.907-37.585zM51.499 39.73c0 12.272-8.364 19.227-20.964 19.227h-8.582V20.286h8.582c12.6 0 20.964 7.06 20.964 19.226v.218zm35.629 37.907h21.182V1.602H87.128v76.035zm70.065-47.358c-10.538-2.391-13.145-3.911-13.145-7.385v-.22c0-2.716 2.5-4.888 7.604-4.888 6.733 0 14.338 2.605 21.292 7.496l10.536-14.885C175.223 3.772 165.122.294 152.196.294c-18.25 0-29.438 10.21-29.438 24.332v.218c0 15.644 12.492 20.207 28.676 23.896 10.32 2.389 12.818 4.127 12.818 7.279v.217c0 3.258-3.042 5.213-8.69 5.213-8.798 0-17.163-3.148-24.657-9.123L119.173 66.34c9.342 8.365 22.16 12.604 35.63 12.604 18.466 0 30.742-9.232 30.742-24.768v-.217c-.001-14.229-10.865-19.877-28.352-23.68zm120.573 9.343v-.218C277.766 17.57 260.387.08 236.922.08c-23.462 0-41.06 17.708-41.06 39.542v.216c0 21.834 17.38 39.324 40.845 39.324 8.689 0 16.619-2.5 23.137-6.736l8.363 7.494 10.645-11.84-7.818-6.623c4.341-6.193 6.732-13.799 6.732-21.835zm-21.398.433c0 2.607-.435 5.105-1.304 7.384l-10.319-9.341L234.1 50.047l10.537 9.018a21.655 21.655 0 0 1-7.711 1.412c-11.621 0-19.443-9.666-19.443-20.639v-.216c0-10.972 7.712-20.532 19.225-20.532 11.733 0 19.664 9.668 19.664 20.748v.216l-.004.001zm83.534 4.345c0 10.643-5.543 15.639-14.016 15.639-8.472 0-14.013-5.211-14.013-16.184V1.602h-21.397v42.69c0 23.789 13.578 34.763 35.194 34.763 21.617 0 35.629-10.754 35.629-35.305V1.602h-21.397V44.4zm68.868-14.121c-10.537-2.391-13.145-3.911-13.145-7.385v-.22c0-2.716 2.5-4.888 7.607-4.888 6.73 0 14.338 2.605 21.289 7.496L435.059 10.4C426.805 3.775 416.705.297 403.778.297c-18.25 0-29.438 10.21-29.438 24.332v.218c0 15.644 12.492 20.205 28.677 23.896 10.319 2.391 12.817 4.129 12.817 7.28v.216c0 3.258-3.043 5.215-8.69 5.215-8.8 0-17.164-3.152-24.658-9.125l-11.729 14.012c9.343 8.367 22.16 12.603 35.627 12.603 18.468 0 30.742-9.233 30.742-24.767v-.219c-.004-14.228-10.868-19.876-28.356-23.679z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e") no-repeat 10px 0;background-size:70%;opacity:0.3;top:0;left:0;bottom:0;right:0;position:absolute;z-index:1;}
.open-recent:focus,.open-recent:active,.close-recent:focus,.close-recent:active{outline:0;}
.close-recent{position:absolute;top:0;right:0;width:50px;height:50px;line-height:45px;text-align:center;font-size:40px;font-weight:300;color:#fff;cursor:pointer;z-index:2;}
.top-comments-box-fixed amp-iframe{height:calc(100vh - 50px);width:300px;position:absolute;top:50px;left:0;animation:myframe 1s;-moz-animation:myframe 1s;-webkit-animation:myframe 1s;}
.lightbox-recent-disqus{background:rgba(0,0,0,.8);width:100%;height:100%;position:absolute;}
@keyframes myframe{from{top:100%;}to{top:50px;}}
@-moz-keyframes myframe{from{top:100%;}to{top:50px;}}
@-webkit-keyframes myframe{from{top:100%;}to{top:50px;}}
@-webkit-keyframes slideInRight{0%{-webkit-transform:translateX(100%);transform:translateX(100%);visibility:visible;}100%{-webkit-transform:translateX(0);transform:translateX(0);}}
@keyframes slideInRight{0%{-webkit-transform:translateX(100%);transform:translateX(100%);visibility:visible;}100%{-webkit-transform:translateX(0);transform:translateX(0);}}

5. Please minify CSS above for smaller sizenya. And lastly please save the following HTML code above code </body>

<amp-lightbox id='recent-disqus-box' layout="nodisplay">
<div class="lightbox-recent-disqus" on="tap:disqus-recent.hide,disqus-recent-iframe.hide,recent-disqus-box.close" role="button" tabindex="0" aria-label="Close Recent Box">
<div class='top-comments-box-fixed' id='disqus-recent' hidden=''>
<h3><span>Recent Comments:</span><div class='close-recent' on='tap:disqus-recent.hide,disqus-recent-iframe.hide,recent-disqus-box.close' role='button' tabindex='0' aria-label='Close Box'>&amp;times;</div></h3>
<amp-iframe noloading='' id='disqus-recent-iframe'
   frameborder='0'
   height='300'
   layout='responsive'
   sandbox='allow-forms allow-scripts allow-same-origin allow-modals allow-popups'
   src='https://cdn.rawgit.com/KompiAjaib/kompi-html/master/amprecentcomments.html?shortname=Khalista&amp;fontBodyColor=555555&amp;fontBodyFamily=sans-serif&amp;fontLinkColor=2B0C93&amp;linkHoverColor=333333'
   width='600' hidden=''>
<amp-img noloading='' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgCo2esRlPEj1USU3zG6lYBQC6cQPqRsSsN5zPqJUvRm7NmhF6o_iuz4zS1d3GXxK9mVfTROG85uyNzVdok3nFjRtUBQCbS3e6sEZQ5zWoU59BMftJ_6qedQtZTHYtzTh9i9AS-6264WM/s1600/placeholder.png"
   layout="fixed-height"
   height="100vh"
   width="auto"
   placeholder=''>
    </amp-img>
  </amp-iframe>
  </div>
  </div>
</amp-lightbox>

Please replace the Khalista code with your blog Disqus shortname, and adjust the code 2B0C93 with the color code of your blog link.

6. Done, and see the results

That article I wrote about how to create Widgets Recent Comments Disqus AMP HTML, hopefully with this article I share this can be useful and good luck.

Share :