Widget recent comments Disqus berfungsi untuk menampilkan komentar Disqus terbaru sehingga ini akan lebih memudahkan untuk mengelola komentarnya.Admin blog akan menjadi lebih mudah untuk menjawab pertanyaan-pertanyaan yang diajukan pengunjung pada kolom komentar. Tinggal klik maka akan masuk ke halamannya.
Nah kali ini saya akan membagikan sebuah widget recent comments Disqus untuk blog AMP HTML dengan show hide yang akan muncul dari samping kanan blog dengan klik pada ikon bell.
Sebagai demonya silahkan buka iframe JSFiddle berikut ini.
Jika Anda tertarik untuk membuatnya, silahkan ikuti langkahnya berikut ini.
Silahkan simpan 2 buah js berikut ini di atas kode
</head> atau </head><!--<head/>--> dan jika ternyata di template blog Anda sudah ada kedua js ini, silahkan langkahi step ini. Atau jika sudah ada js dari salah satunya, maka silahkan lengkapi dengan js satunya lagi.
<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>Kemudian silahkan simpan kode HTML berikut untuk ikon lonceng atau bell untuk menampilkan widget recent comments Disqus. Silahkan simpan di mana Anda ingin menampilkannya.
<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='Buka Komentar'>
<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>Kemudian atur dengan CSS berikut:
.open-recent{
cursor:pointer;
position:fixed;
top:0;
right:0;
z-index:998;
}CSS di atas akan menempatkan ikon lonceng melayang di kanan atas blog.
Kemudian tambahkan juga CSS berikut ini untuk style widget recent comments Disqus ini.
.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 myship{from{right:0}
to{right:300px;}
}
@-moz-keyframes myship{from{right:0}
to{right:300px;}
}
@-webkit-keyframes myship{from{right:0}
to{right:300px;}
}
@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)}
}Silahkan minify CSS di atas agar sizenya lebih kecil. Dan terakhir silahkan simpan kode HTML berikut di atas kode
</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'>&times;</div></h3>
<amp-iframe 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&fontBodyColor=555555&fontBodyFamily=sans-serif&fontLinkColor=2B0C93&linkHoverColor=333333'
width='600' hidden=''>
<amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibXbPAwL2yEUin5xLBSpXY2V0HZgwxyc63_p88JQ2Wa-lW_Q5-3mlZb0IiFvjO7lp6CcE5-r7hJEM1-mVwqxyzl8xWN959rC2mbpK5QnmqMLnJTpMCS8TQdQsm9xp3Udvz-RFem_WDPSo/s1600/placeholder.png"
layout="fixed-height"
height="360"
width="auto"
placeholder=''>
</amp-img>
</amp-iframe>
</div>
</div>
</amp-lightbox>Silahkan ganti kode
kompiajaib dengan shortname Disqus blog Anda, dan sesuaikan kode 2B0C93 dengan kode warna link blog Anda.Selesai, selamat mencoba dan semoga bermanfaat.