Cara Menciptakan Widget Recent Comments Disqus Di Blog

Cara Membuat Widget Recent Comments Disqus di Blog - Pada kesempatan kali ini aku akan membagikan tutorial bagaimana cara menciptakan dan memasang recent comments disqus yang berbentuk lonceng notifikasi di blog AMP dan Non Amp.

Seperti yang ditulis oleh Kompi Ajaib, bahwa komentar merupakan salah satu element penting yang sebaiknya ada di dalam sebuah halaman blog. Komentar merupakan sarana interaksi antara pengunjung blog atau pengunjung blog dengan admin blog sehingga terjalin komunikasi yang mungkin saja menjadi sebuah solusi yang tengah dihadapi

Selain itu, komentar juga sanggup jadi penarik traffic dari hasil pencarian. Seperti halnya komentar Blogger atau Disqus yang sanggup muncul di hasil pencarian, maka ini merupakan sebuah pintu untuk kemudian lintas postingan yang dikomentari tersebut.

Semakin banyak interaksi di dalam komentar sebuah halaman maka sudah niscaya page view pun akan meningkat dan kesempatan menjaring pengunjung dari hasil pencarian pun semakin tinggi. Dan untuk memudahkan memantau komentar Disqus yang masuk, maka widget recent comment Disqus menjadi solusinya.

Dengan menambahkan widget recent comments di blog ini akan mempermudah kalian untuk melihat komentar terbaru yang di tulis oleh pengunjung maupun admin blog.

Tentu saja hal tersebut cukup bermanfaat terutama bagi admin yang sedang mengelola blog tersebut. Karena tentu saja dengan memasang widget recent comment disqus ini kalian akan gampang untuk memoderasi komentar ataupun pertanyaan yang di tulis oleh pengunjung blog pada kolom komentar.

Widget Recent Comments Disqus di Blog Non Amp

Pertama, silahkan tambahkan CSS Font Awesome berikut sempurna sebelum arahan </head>, Jika sebelumnya blog kalian sudah terpasang CSS Font awesome, silahkan lewati step ini.

<script type='text/javascript'> //<![CDATA[ function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) } loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"); //]]> </script>

Selanjutnya, silahkan salin CSS dibawah ini dan letakkan sebelum arahan </head>

<style type='text/css'> /* Animation */  @keyframes rubberBand{from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,0.75,1);transform:scale3d(1.25,0.75,1)}40%{-webkit-transform:scale3d(0.75,1.25,1);transform:scale3d(0.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,0.85,1);transform:scale3d(1.15,0.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}} @keyframes bounceInLeft{from,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);animation-timing-function:cubic-bezier(0.215,0.610,0.355,1.000)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}to{-webkit-transform:none;transform:none}}  /* Recent Comments Disqus */  .header-1{background:#2e9eff;color:#fff;height:auto;padding:15px;overflow:hidden} .header-1 h4{font-size:18px;float:left;color:#fff} .header-1 img{float:right} .notif-show{position:fixed;top:10px;right:10px;z-index:997;color:#fff!important;background:rgba(0,0,0,0.2);font-size:16px;font-weight:normal;width:auto;padding:6px 8px;cursor:pointer;backface-visibility:hidden;-webkit-transform:translateZ(0);transform:translateZ(0);border-radius:2px;transition:all .6s} .notif-show:hover{background:#2e9eff;animation:rubberBand 1s} #disqus-notif{position:fixed;background:#fff;z-index:999;width:25%;top:0;right:-769px;bottom:0;transition:all .5s} #disqus-notif.active{right:0} #overlay-1.active{background:rgba(53,58,61,.92);position:fixed;z-index:998;overflow:hidden;width:100%;height:100%;top:0;left:0} #disqus-notif .close-text{display:inline-block;font-weight:700;font-size:14px;position:relative;right:15px;top:-7px;visibility:hidden;opacity:0;transition:all .5s} #disqus-notif .close-1{position:fixed;margin-left:-40px;margin-top:6px;font-size:35px;font-weight:700;color:#fff} #disqus-notif .close-1:hover .close-text{visibility:visible;opacity:1;-webkit-transform:translate3d(-50px,0,0);transform:translate3d(-50px,0,0)} #RecentComments{display:block;width:100%;margin:0 auto;padding:0;height:100%} #RecentComments ul.dsq-widget-list{background:#f6f7f9;text-align:left;max-height:95%;overflow:auto;overflow-x:hidden} #RecentComments img.dsq-widget-avatar{margin:0 10px 0 0;width:32px;height:32px;padding:0;float:left;border-radius:3px;clear:both;display:block} #RecentComments p.dsq-widget-meta{clear:both;font-size:80%;margin-top:5px;font-weight:400} #RecentComments p.dsq-widget-meta a{display:inline-block;width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#ced6e0;font-size:12px} #RecentComments p.dsq-widget-meta a:hover{color:#a4b0be} #RecentComments li.dsq-widget-item{background:#fff;margin:10px;padding:10px;clear:both;color:#888;border-radius:5px;border-bottom:1px solid rgba(0,0,0,0.08)} #RecentComments a.dsq-widget-user{display:table;color:#22a6b3;font-weight:700;font-size:14px;margin:7px 0 0 0} #RecentComments a.dsq-widget-user:hover{color:#2e87e7} #RecentComments span.dsq-widget-comment{display:block;clear:both;margin:20px 10px 10px 0} #RecentComments .dsq-widget-comment p{display:inline-block;font-size:13px;margin:0;font-weight:400;color:#444;line-height:1.5} #RecentComments .dsq-widget-item pre{position:relative;background-color:#f8cf82;color:#000;font-family:monospace;line-height:normal;overflow:hidden;text-overflow:ellipsis;padding:10px;margin:5px 0;border-radius:3px;font-size:12px} #RecentComments .dsq-widget-item pre code{color:#000} #disqus-notif.active #RecentComments li.dsq-widget-item{animation:bounceInLeft 1.5s} @media screen and (max-width:1366px){#disqus-notif{width:35%}} @media screen and (max-width:768px){#disqus-notif{width:100%}#disqus-notif .close-1{background:#535c68;display:block;text-align:left;margin:0;padding:0 15px;position:relative;font-size:35px;font-weight:700;color:#fff}#disqus-notif .close-text{display:none}} </style>

Kemudian salin arahan berikut dan letakkan antara arahan <body> dan </body>

<a class='notif-show' href='javascript:;'><i class='fa fa-bell'/></a> <div id='overlay-1'/> <div id='disqus-notif'> <a class='close-1' href='javascript:;' title='Close'>&#215;<span class='close-text'>Close</span></a> <div class='header-1'><h4>Notifications</h4><img alt='Disqus Logo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-d7Z00GWuUkg8JXJ_TWaUJWL0zK9pHhSb9q1mm-wDshyphenhyphenfWOoLPTM4f3avwMFHdq0ThO2sJ8m8oSsCU2ValiEB6UKtav9h2iExU_9R_dOdzpHN57ghVZgiq8F7DchyphenhyphentTgpAzzwwsBF47rb/s1600/Disqusq.png' title='Disqus'/></div> <div class='dsq-widget' id='RecentComments'> <script defer='defer' type='text/javascript'> //<![CDATA[ document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://maduracomputindo.disqus.com/recent_comments_widget.js?num_items=20&hide_mods=0&hide_avatars=0&avatar_size=32&excerpt_length=180\"></scr" + "ipt>"); //]]> </script> </div> </div>

Silahkan ganti arahan yang ditandai dengan username disqus kalian.

Terakhir, silahkan letakkan Javascript berikut ini sebelum arahan </body>

<script defer='defer' type='text/javascript'> //<![CDATA[ // Recent Comments Disqus $(function(){$(".notif-show").on("click",function(){$("#disqus-notif").addClass("active").focus()});$(".close-1").on("click",function(){$("#disqus-notif").removeClass("active")})}); $(function(){$(".notif-show").on("click",function(){$("#overlay-1").addClass("active").focus()});$(".close-1").on("click",function(){$("#overlay-1").removeClass("active")})}); $("#RecentComments a").filter(function(){return this.hostname&&this.hostname!==location.hostname}).attr('rel', 'nofollow noopener').attr('target', '_blank'); //]]> </script>

Widget Recent Comments Disqus di Blog AMP

Silahkan simpan 2 buah js berikut ini di atas arahan </head> atau &lt;/head&gt;&lt;!--<head/>--&gt; dan kalau ternyata di template blog Anda sudah ada kedua js ini, silahkan langkahi step ini. Atau kalau 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 arahan 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='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>

Selanjutnya silahkan 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 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 semoga ukuran/sizenya lebih kecil

Terakhir silahkan simpan arahan HTML berikut di atas arahan </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=maduracomputindo&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/AVvXsEjTX3XODOwMsK7s5iIsvRA-zY8vp2ScfF05J7wgb64QD8v_YRMg31fx_bdFrH0-3NNieOqcGvHqkqZPRrm75EHmG08FDtMH3jgMKEF8OVykW9ure0d6cWM9Rl4ISk9jbcBi_npFLIdXQN8/s1600/placeholder.png"    layout="fixed-height"    height="100vh"    width="auto"    placeholder=''>     </amp-img>   </amp-iframe>   </div>   </div> </amp-lightbox>

Silahkan ganti arahan maduracomputindo dengan shortname Disqus blog Anda, dan silahkan ganti arahan 2B0C93 dengan arahan warna yang kalian kehendaki.

Demikian tutorial Cara Membuat dan Memasang Widget Recent Comments Disqus di Blog Amp dan Non AMP yang sanggup aku bagikan kali ini, semoga bermanfaat teruntuk kalian para blogger. Terima kasih juga aku ucapkan kepada Kompi Ajaib dan Arlina Design. Salam Luar Biasa.

Ref : Kompi Ajaib & Arlina Design

Share this post