Wednesday, June 13, 2018

Cara Mudah Membuat Widget Recent Comments Disqus Keren Pada Blogger

Cara Mudah Membuat Widget Recent Comments Disqus Keren Pada Blogger




Cara Mudah Membuat Widget Recent Comments Disqus Keren Pada Blogger - JOKAM INFORMATIKA

Jokam-Informatika.com - Bagi sobat yang memiliki sebuah blog ataupun website pastinya sudah tidak asing dengan komentar para pengunjung, sebuah komentar dari pengunjung sangatlah penting bagi pemilik website karena dapat memberikan indikasi kepada para pengunjung bahwa tulisan yang sudah kita muat telah dibaca dan juga didiskusikan oleh berbagai pengunjung sebelum kita. Namun sebagai admin, pastinya kita mempunyai kewajiban yang besar untuk membalas pertanyaan yang diajukan oleh komentator. Oleh karena itu seharusnya apabila anda sebagai pemilik website maka anda diwajibkan mengetahui satu persatu komentar terbaru yang belum anda jawab. Dengan adanya widget ini maka pekerjaan anda akan terasa lebih ringan dan anda juga bisa terhindar dari ketidaktahuan komentar terbaru. Padahal hal tersebut sangatlah penting untuk dibalas sebagai admin yang baik.

Seperti apakah cara pembuatannya dan apa kelebihannya ?

Simak ulasan berikut ini untuk mengetahuinya,

Widget Komentar - adalah salah satu fitur yang memudahkan admin dalam meninjau komentar yang ditambahkan oleh pengunjung ketika mereka mengalami kendala ataupun sebuah permasalahan pada saat mempelajari konten anda. Dengan memiliki widget ini maka tentunya memudahkan anda pada saat me-moderasi komentar pengunjung. Berikut ini merupakan cara untuk membuatnya :
  • Masuk pada dashboard Blogger.
KLIK DISINI
  • Kemudian klik tab "Theme" kemudian klik "Edit HTML".
  • Lalu cari tulisan dengan cara "CTRL+F" dan tulis "</head>".
  • Setelah ketemu maka tempatkan kode ini diatas </head> tersebut dengan kode CSS berikut :

/* Widget Recent Comments*/

<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:26px;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:30%;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:15px;position:relative;right:21px;top:-12px;visibility:hidden;opacity:0;transition:all .5s}
#disqus-notif .close-1{position:fixed;margin-left:-40px;margin-top:auto;font-size:50px;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:92%;overflow:auto;overflow-x:hidden}
#RecentComments img.dsq-widget-avatar{margin:0 10px 0 0;width:77px;height:80px;padding:0;float:left;border-radius:3px;clear:both;display:block}
#RecentComments p.dsq-widget-meta{clear:both;font-size:80%;margin-top:5px;margin-bottom:15px;font-weight:400}
#RecentComments p.dsq-widget-meta a{display:inline-block;width:97%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#ced6e0;font-size:13px}
#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:75px 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{top:60px;right:10px;z-index:997;background:#535c68;text-align:right;margin:0;padding:0 10px;position:absolute;font-size:35px;font-weight:700;color:#fff}#disqus-notif .close-text{display:none}#RecentComments ul.dsq-widget-list{max-height:92%}}
</style>

  • Kemudian cari lagi dengan cara "CTRL+F" dan tulis "</body>".
  • Setelah ketemu maka tempatkan kode ini diatas </body> tersebut dengan kode Javascript HTML berikut :

<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>Comments</h4><img alt='Disqus Logo' src='https://3.bp.blogspot.com/-GxPuYrEWjRA/Wt6bJW3fSbI/AAAAAAAAE1E/gUdQHSaGUXMs_QfK1mIm0JF9qvHd2xFFwCLcBGAs/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://jokam-informatika.disqus.com/recent_comments_widget.js?num_items=189&hide_mods=1&hide_avatars=0&avatar_size=35&excerpt_length=354\"></scr" + "ipt>");
//]]>
</script>
</div>
</div>

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

Keterangan :
jokam-informatika = ganti dengan id disqus sobat
num_items = jumlah komentar yang ditampilkan
hide_mods = berguna untuk komentar admin (0 untuk menampilkan, 1 untuk menyembunyikan)
hide_avatars = berguna untuk foto komentator (0 untuk menampilkan, 1 untuk menyembunyikan)
avatar_size = ukuran foto
excerpt_length = karakter huruf yang dimuat

  • Kemudian save dan terapkan pada blog.
  • Lalu cek website anda apabila berhasil maka, akan timbul sebuah lonceng di pojok kanan atas website sobat. dan apabila di klik akan menunjukan berbagai komentar terbaru dari website blog sobat.


Baca juga lainnya :



Mungkin itu yang dapat saya sampaikan didalam artikel saya yang berjudulkan Cara Mudah Membuat Widget Recent Comments Disqus Keren Pada Blogger.
Semoga apa yang sudah saya sampaikan dapat bermanfaat bagi anda maupun orang lain yang ingin mengetahui tentang Widget Recent Comments Disqus Blogger.
Sekian dan terimakasih.




PERLU DIKETAHUI


Iklan yang tampil pada halaman situs ini sepenuhnya sudah diatur oleh Pihak Google, kami hanya menyediakan tempat kosong khusus untuk iklan dari Google. Maka, apabila ada iklan yang dirasa kurang baik bagi anda sehingga tidak seharusnya ditampilkan, harap segera menginformasikan hal tersebut kepada kami dengan melalui Formulir Kontak yang ada di bagian bawah sendiri pada situs ini. Kemudian, kami akan segera menyampaikannya pada pihak Google terkait masalah tersebut.
Laporan dapat anda sertakan lampiran :
  • Nama Iklan
  • Alamat Screenshoot(Gambar) Iklan


Load Disqus Comments Hide Disqus Comments