Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Blogspot / Widget

Cara Menciptakan Widget Recent Comment Disqus Di Blog

Cara Memasang Widget Recent Comment Disqus di Blog Warna Cara Membuat Widget Recent Comment Disqus di Blog
Disqus merupakan sebuah layanan komentar di dunia maya yang bisa di integrasikan ke berbagai platform populer ibarat blog WordPress, Blogspot, Tumblr, dan lain-lain. Layanan ini terbilang terkenal karna penggunanya sudah banyak, hal ini tidak lain karna Disqus menyajikan layanan yang memuaskan kepada pengguna nya.  Disini Disqus sanggup menjadi solusi alternatif dari sistem komentar bawaan blog itu sendiri alasannya ialah Disqus sanggup memfasilitasi komentar-komentar yang ada dari pengguna blog secara lebih baik dan tentu universal. Selain itu Disqus juga sanggup pribadi terhubung dengan banyak sekali situs sosial media ibarat Facebook, Twitter, Google Plus dan lain-lain. Jadi sanggup dibilang memasang komentar Disqus di blog bukanlah hal sia-sia. Nah kali ini aku akan memperlihatkan tutorial menarik mengenai Disqus, hanya saja bukan memasang komentar Disqus, melainkan menciptakan widget Recent Comment Disqus, yang mana nantinya widget ini berkhasiat untuk menampilkan beberapa komentar pengunjung dalam satu tab. Artinya semua komentar pengunjung yang memakai layanan Disqus akan ditampilkan dalam 1 widget, sehingga nampak artikel mana yang paling sering di komentar oleh pemirsa. Tidak hanya itu widget Recent Comment Disqus kali ini mempunyai tampilan yang menarik, keren, serta warna-warni, sehingga akan disukai oleh Anda atau pengunjung Anda. Lantas bagaimana cara pemasangannya, simak aja tutorial berikut ini.

Cara Memasang Widget Recent Comment Disqus di Blog Warna-Warni
1.  Pertama Login terlebih dahulu ke Blogger
2.  Selanjutnya pilih Template → Edit HTML
4. Lalu cari kode ]]></b:skin> atau </style>
5. Kemudian Copy kode CSS berikut ini, lalu Paste diatas atau sebelum kode ]]></b:skin> atau </style> 

/* Recent Comments Disqus */ #recent_comments{display:block;margin:0 auto;padding:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;height:400px;} #recent_comments ul.dsq-widget-list{text-align:left;max-height:400px;overflow:auto} #recent_comments ul.dsq-widget-list::-webkit-scrollbar {height:8px;width:8px;background:#f5f5f5} #recent_comments ul.dsq-widget-list::-webkit-scrollbar-thumb {background-color:#e2e2e2;} #recent_comments img.dsq-widget-avatar{margin:3px 10px 7px 0;width:32px;height:32px;padding:0;float:left;clear:both;display:block} #recent_comments p.dsq-widget-meta{clear:both;font-size:85%;margin-top:5px;font-weight:400} #recent_comments p.dsq-widget-meta a{display:inline-block;width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff} #recent_comments p.dsq-widget-meta a:hover{color:#fff;text-decoration:underline} #recent_comments li.dsq-widget-item{margin:0;padding:10px;list-style-type:none;clear:both;border-bottom:1px solid #eee;color:#999;font-weight:400;line-height:1.3em!important} #recent_comments li.dsq-widget-item:last-child{border-bottom:none} #recent_comments a.dsq-widget-user {display:table;color:#fff;font-weight:750;} #recent_comments a.dsq-widget-user:hover{color:#E9A12F;} #recent_comments span.dsq-widget-comment{display:block;clear:both;margin-top:5px;} #recent_comments .dsq-widget-comment p{display:inline-block;font-family:"Times New Roman";font-size:14px;margin:0;font-weight:400;color:#000000;max-width:100%;} #recent_comments .dsq-widget-item pre{position:relative;background:#ffe4ad;padding-top:0;border-radius:4px;transition:all .3s} #recent_comments .dsq-widget-item pre:hover {background:#ffe4ad;} #recent_comments .dsq-widget-item pre code{color:#908575;font-size:82%} #recent_comments .dsq-widget-item pre:before{content:&#39;&#39;;position:absolute;padding:initial;font-size:initial;text-indent:initial;color:initial;top:0;right:0;width:1.2em;height:1.2em;background-color:#ebd099} #recent_comments .dsq-widget-item pre:after{content:&#39;&#39;;font-size:initial;padding:0;position:absolute;width:0;height:0;border-style:solid;border-width:0 1.2em 1.2em 0;border-color:transparent #fff transparent transparent}  /* Set color & level Disqus */ #recent_comments ul li:nth-child(1){background-color: #f44336;} #recent_comments ul li:nth-child(2){background-color: #e91e63;} #recent_comments ul li:nth-child(3){background-color: #9c27b0;} #recent_comments ul li:nth-child(4){background-color: #673ab7;} #recent_comments ul li:nth-child(5){background-color: #3f51b5;} #recent_comments ul li:nth-child(6){background-color: #2196f3;} #recent_comments ul li:nth-child(7) {background-color: #03a9f4;} #recent_comments ul li:nth-child(8){background-color:#00bcd4;} #recent_comments ul li:nth-child(9){background-color:#009688;} #recent_comments ul li:nth-child(10){background-color:#4caf50;} #recent_comments ul li:nth-child(11){background-color:#8bc34a;} #recent_comments ul li:nth-child(12){background-color:#cddc39;} #recent_comments ul li:nth-child(13){background-color:#ffeb3b;} #recent_comments ul li:nth-child(14){background-color:#ffc107;} #recent_comments ul li:nth-child(15){background-color:#ff9800;} #recent_comments ul li:nth-child(16){background-color:#ff5722;} #recent_comments ul li:nth-child(17){background-color:#795548;}
Disini Anda sanggup membuatnya tidak berwarna-warni dengan menghapus isyarat dari /* Set color & level Disqus */ hingga habis. Dan silahkan Anda ganti juga warna Nama, karna apabila isyarat warna dihapus, widget akan berwarna putih, dan tentu Nama si pengomen akan tidak kelihatan karna berwarna putih. Kaprikornus silahkan Anda edit sendiri sesuai keinginan.
6. Jika sudah Simpan atau Save templatenya
7.  Setelah itu lanjut pergi ke sajian "Tata Letak atau Layout" kemudian pilih Add a Gadget/ Tambahkan Gadget, pilihlah kawasan yang Anda sukai untuk memasang Recent Comment Disqus ini.
8. Nah kemudian akan muncul pop-up di browser, kemudian pilih saja HTML/Javascript
9. Setelah itu  Copy kode berikut ini dan Paste di kolom HTML/Javascript.

 <div id="recent_comments" class="dsq-widget"> <script defer="defer" type='text/javascript'> //<![CDATA[ document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://IDkamu.disqus.com/recent_comments_widget.js?num_items=18&hide_mods=0&hide_avatars=1&avatar_size=32&excerpt_length=120\"></scr" + "ipt>"); //]]> </script></div>
Silahkan Anda ganti isyarat yang aku ditandai dengan ID komentar Disqus dari blog yang Anda ingin pasang.
10. Terakhir silahkan Anda Save atau Simpan Widget, dan lihat hasilnya.
[Preview##eye##]

 Nah itulah langkah singkat pemasangan Recent Comment Disqus di blog, yang mana akan banyak sekali manfaatnya. Sekian dulu artikel kali ini, jikalau ada yang ingin Anda tanyakan atau tidak paham silahkan komentar dibawah ini, terima kasih.

Anda mungkin menyukai postingan ini :