Skip to main content
Mister Design

follow us

Choose Your Categories

Redesign by BUNG MADAF

Cara Membuat Widget Recent Comments Disqus Pada Blog AMP

Lagi-lagi sharing tentang AMP HTML, kali ini yang saya akan bagikan adalah tutorial membuat widget recents comments Disqus untuk blog AMP. Disqus merupakan suatu layanan sistem komentar berjaringan di dunia maya, menurut saya layanan ini sangat membantu bagi blog yang menggunakannya, karna di-disqus sendiri mempunyai beberapa fitur seperti related comments, backlink, email notification, dan lainnya.

Widget ini berguna untuk memantau siapa sajakah commentar yang masuk ataupun tidak. Kerja dari widget ini adalah dimana kita klik commentarnya dan nanti kita akan di arahkan kehalaman yang telah Anda klik.

Cara Membuat Widget Recent Comments Disqus di blog AMP HTML


Widget ini yang pasti Anda harus sudah memasang/menggunakan sistem komentar disqus pada template atau blog Anda. Bila Anda masih menggunakan domain bawaan blogger atau blogspot, tidak perlu khawatir, karna disqus support dengan domain bawaan blogger.

Banyak blog di luar sana yang membuat tutorial seperti ini, namun ttorial tersebut tidak atau belum memiliki fitur validation amp html. Dibawah ini adalah contoh/demo yang sudah saya buat untuk Anda melihat dahulu seperti apa disain dan bentuk dari widget recent comment disqus ini.


Untuk memasang wdget recent koment disqus ini, Anda harus memasang 2(dua) kode js diatas kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt; berikut javascript yang harus Anda pasang.


<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>

Lalu pasang kode dibawah ini dimana Anda ingin menampilkan ikon atau lonceng ini. Kalau saya pasang pada bagian menu navigation, agar terlihat para pengunjung.


<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>

Jika Anda ingin memasang pada bagian menu navigation, silakan taruh di dalam tag <li> ... </li> dan akan menjadi kode seperti di bawah ini.


<li>
<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>
</li>

Kemudian taruh kode css dibawah ini ke dalam tag &lt;!--<b:skin><![CDATA[ atau <style type='text/css'>


.open-recent{cursor:pointer;top:0;right:0;z-index:998}
.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)}}

Jika sudah, terapkan kode dibawah ini ke atas kode </body> atau &lt;!--</body>--&gt; &lt;/body&gt;


<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=mister-design-1&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>

Silakan ganti tulisan mister-design-1 dengan username disqus Anda. Demikian tutorial membuat widget recent comments hari yang bsa saya berikan, semoga bermanfaat.

Referensi : https://www.kompiajaib.com/2018/05/widget-recent-comments-disqus-untuk.html

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