Skip to main content

follow us



How to Add Widget Disquss Recent Comment for AMP Blog HTML ? Here are some tutorials for you. Today iweblogsites will describe it and make your blog easy to leave comment from your visitor. Because Comments are one of the important elements that should be exist in your blog.

Any comments can also increase traffic from search results. Just like Blogger or Disqus comments that can appear in search results, then this is a way to post the commented traffic.

The more interactions in the comments of a blog then the page view will also increase and the chance of attracting visitors from search results was higher. to make it easy to monitor Disqus comments that come in, then the Disqus's comment comment widget becomes the solution.

How Add Widget Disquss Recent Comment for AMP Blog HTML


Widgets recent comments Disqus serves to display the latest Disqus comments so this will make it easier to manage the comments. Admin blog will be easier to answer questions asked visitors 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.

Follow these steps :

Step 1 :

Please save the following 2 js above the code
</head>
and if it turns out in your blog template already there are both js, please skip 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>

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>

Then set with the following CSS


.open-recent{

  cursor:pointer;

  position:fixed;

  top:0;

  right:0;

  z-index:998;

  }

The CSS above will place the floating bell icon at the top right of the blog. 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)}

}

Please minify CSS above for smaller sizenya. And lastly please save the following HTML code above the 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=iweblogsite&amp;fontBodyColor=555555&amp;fontBodyFamily=sans-serif&amp;fontLinkColor=2B0C93&amp;linkHoverColor=333333'

   width='600' hidden=''>

<amp-img noloading='' src="https://2.bp.blogspot.com/-rRo__E6FsPs/Ws7U-IT8KNI/AAAAAAAAw_Q/qCwa6vKHgTIB-ytesdA4FlKrXMRYt5NMACLcBGAs/s1600/placeholder.png"

   layout="fixed-height"

   height="100vh"

   width="auto"

   placeholder=''>

    </amp-img>

  </amp-iframe>

  </div>

  </div>

</amp-lightbox>

Please replace the iweblogsite code with your blog Disqus shortname, and customize the 2B0C93 code with your blog link color code. That's all about how to Add Widget Disquss Recent Comment for AMP Blog HTML. Hope you enjoy it.

Source : kompiajaib

You Might Also Like

Comment Rule Please leave your comment below. Comments wich contain links will not show up before we approved. Thank you for visiting iweblogsite
Open Comment