Dewa Blogger: Hasil penelusuran untuk cara-menampilkan-jumlah-komentar-disqus

Halaman

    Social Items

 Seperti yang sahabat tahu bahwa kini disqus sudah tidak lagi mendukung kemudahan import Cara Menampilkan Jumlah Komentar Disqus

Cara Menampilkan Jumlah Komentar Disqus - Seperti yang sahabat tahu bahwa kini disqus sudah tidak lagi mendukung kemudahan import dan syncronize untuk platform blogger. Dikarenakan Google telah mengupdate aplikasi otentik susukan data login dengan yang terbaru ialah OAuth 2.0. semenjak April 20 2015 yang lalu, sedangkan Disqus masih memakai susukan otentik yang usang ialah AuthSub yang mengakibatkan kemudahan import dan syncronize tidak berjalan dan otomatis akan teredirect ke halaman error / help Google.

Terlepas dari itu, pada kesempatan kali ini Akan memberi tips wacana cara memunculkan jumlah komentar Disqus di halaman index atau postingan. Tips kali ini Saya bagikan sebab ada sahabat blogger yang memakai sistem komentar disqus dan ingin memunculkan tampilan jumlah komentar sesuai dengan komentar yang ada pada artikel di blognya.

Ok sebelumnya sahabat sudah menginstall widget disqus di blog, kalau sudah silakan ikuti langkah berikut ini :

1. Login ke profil Disqus sahabat > kemudian klik icon settings > Admin > Settings > Install > Universal Code > Kemudian scroll ke bawah, temukan kalimat ‘How to display comment count’. Kemudian salin arahan sempurna sebelum </body>

Contoh kode 

<script type="text/javascript">     /* * * CONFIGURATION VARIABLES * * */     var disqus_shortname = 'arlinadesign';          /* * * DON'T EDIT BELOW THIS LINE * * */     (function () {         var s = document.createElement('script'); s.async = true;         s.type = 'text/javascript';         s.src = '//' + disqus_shortname + '.disqus.com/count.js';         (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);     }()); </script>

Kode yang ditandai merupakan user name disqus sobat.

2. Selanjutnya cari markup komentar kira-kira menyerupai ini (Kode ini diambil dari template default Blogger, untuk selebihnya sesuaikan dengan markup komentar template yang sahabat gunakan)

<span class='post-comment-link'> <b:include cond='data:blog.pageType not in {&quot;item&quot;,&quot;static_page&quot;} and data:post.allowComments' data='post' name='comment_count_picker'/> </span>

Kemudian ganti semua arahan di atas dengan arahan di bawah ini :

<span class='post-comment'><a expr:href='data:post.url + &quot;#disqus_thread&quot;' title='Comments'/></span>

Ganti title dengan kata yang diinginkan

Bagi pengguna template Minima Colored dan template dengan arahan serupa, dapat dengan cara di bawah ini :

<b:if cond='data:post.allowComments'>               <span class='comment-info'>               <i class='fa fa-comments-o'/> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'> <b:if cond='data:post.numComments == 0'> Add Comment </b:if> <b:if cond='data:post.numComments == 1'>1 Comment</b:if><b:if cond='data:post.numComments &gt; 1'><data:post.numComments/> Comments</b:if>                </a>               </span>             </b:if>

Ganti arahan yang ditandai menjadi menyerupai ini :

<b:if cond='data:post.allowComments'>               <span class='comment-info'>               <i class='fa fa-comments-o'/> <a expr:href='data:post.url + &quot;#disqus_thread&quot;' expr:onclick='data:post.addCommentOnclick' title='Comments'> <b:if cond='data:post.numComments == 0'> Add Comment </b:if> <b:if cond='data:post.numComments == 1'>1 Comment</b:if><b:if cond='data:post.numComments &gt; 1'><data:post.numComments/> Comments</b:if>                </a>               </span>             </b:if>

3. Selesai, simpan template.


Cukup sekian untuk tips Cara Menampilkan Jumlah Komentar Disqus, biar bermanfaat.


Cara Menampilkan Jumlah Komentar Disqus

Recent Comments Disqus berfungsi menampilkan komentar terbaru dari Disqus di situs teman dengan tampilan slide dari samping dan jikalau teman menekan tombol icon lonceng di pojok atas maka widget recent comments ini akan terbuka. Dengan widget ini teman akan jadi lebih gampang mengetahui komentar terbaru dari Disqus di situs sobat.

 berfungsi menampilkan komentar terbaru dari Disqus di situs teman dengan tampilan slide d Cara Memasang Recent Comments Disqus di Blog

Bagi teman yang ingin memasangnya, silakan ikuti langkah-langkah berikut ini.

Cara Memasang Recent Comments Disqus di Blog


Widget ini memakai font Awesome, silakan tambahkan link CSS berikut di atas </head>

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

Pertama, buka Blogger klik hidangan Tema dan klik tombol Edit HTML lalu tambahkan aba-aba CSS di bawah ini sebelum </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>

Selanjutnya tambahkan aba-aba ini bebas diantara aba-aba <body> dan </body> atau cukup tambahkan sebelum </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/AVvXsEic5ORtnkOJhyphenhyphenR675llC4AEdgjkDF3NH8XF97ufo3ikhwnvxELMrzrqP1O8Zstuf8Rj7r3CnYPE0UYedE1P6H_14836jNuBiLMivnvbaC84Nb3OgQJY90xrA5cUwZjcQoOwGk82uqamDC26/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://arlinadesign.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>

Ganti aba-aba yang ditandai dengan username Disqus blog sobat. Edit pada bab ini jikalau teman ingin mengubah setelan recent comments

num_items=20&hide_mods=0&hide_avatars=0&avatar_size=32&excerpt_length=180

Nilai Keterangan
num_items=20 Jumlah komentar yang muncul
hide_mods=0 Ganti 0 dengan 1 untuk menyembunyikan komentar admin
hide_avatars=0 Ganti 0 dengan 1 untuk menyembunyikan avatar
avatar_size=32 Ukuran gambar avatar
excerpt_length=180 Jumlah goresan pena komentar yang tampil

Selanjutnya tambahkan aba-aba ini di bawah sebelum </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>

Selesai, klik tombol Simpan tema untuk perubahan dan cek akhirnya di blog sobat.


Demikian Cara Memasang Recent Comments Disqus di Blog, agar bermanfaat bagi sobat. Wassalam.

Cara Memasang Recent Comments Disqus Di Blog