Skip to main content
Ivhaa Design

follow us

Cara Memasang Widget Recement Comment Blog AMP

Cara Memasang Widget Recement Post Blog AMP

Baca juga:



Telah sekian lama tidak nulis lagi akhirnya bisa nulis tutorial di blog kesayangan. Pada artikel ini saya akan memberikan tutorial lagi buat kalian semua. Karena tidak lama di kelola akhir nya ketinggalan banyak dari yang lain.

Recement Komentar Disqus yang akan di bahas pada kali ini. Elment yang satu ini sangat lah penting jika di pasang di blog kita karena untuk interaksi pengunjung dengan pemilik blog. Artikel ini saya dapat dari blog Kompi Ajaib akhirnya saya tulis di blog saya ini.

Nah gimana apa kalian tertarik dengan tutorial ini yuk simak tutorial berikut ini jika kalian tertarik.

Silahkan Kalian Simpan Kode Berikut ini di atas kode </head> tepat di atasnya.
<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>


Simpan kode berikut ini untuk icon komentarnya karena sudah saya modifikasi.
<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 style="width:24px;height:24px" viewBox="0 0 24 24">
    <path fill="#000000" d="M9,22A1,1 0 0,1 8,21V18H4A2,2 0 0,1 2,16V4C2,2.89 2.9,2 4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H13.9L10.2,21.71C10,21.9 9.75,22 9.5,22V22H9M13,10V6H11V10H13M13,14V12H11V14H13Z" />
</svg></div>
Kemudian tambahkan CSS berikut ini :
.open-recent{
  cursor:pointer;
  position:fixed;
  top:0;
  right:0;
  z-index:998;
  }
CSS di atas ini berfungsi agar icon tersebut melayang di sebelah kanan. Kemudian tambahkan CSS ini untuk style comment disqus nya
.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)}
}

Langkah terakhir tinggal pasang kode berikut ini di atas kode HTML ini </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=kompiajaib&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>
Ganti nama Kangsudar dengan nama disqus kalian kemudian simpan template.

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar