Panduan Kompi https://www.panduankompi.xyz/2018/06/cara-membuat-recent-comment-disqus-di-blog.html

Cara Memasang Recent Comment Disqus di Blog

Before/After Ad Space
Cara Memasang Recent Comment Disqus di Blog

Kali ini saya akan membagikan Cara Memasang Recent Comment Disqus di Blog. Recent Comment Disqus berfungsi untuk menampilkan komentar terbaru disqus pada situs anda. Widget ini bisa anda letakkan di sidebar atau di halaman statis. Untuk memasangnya hanya butuh beberapa langkah mudah.



Cara Memasang Recent Comment Disqus di Halaman Statis Blog

 

  1. Pertama, buka dashboard blogger > Halaman > buat Halaman baru.
  2. Lalu, letakkan kode dibawah ini pada tab HTML (bukan Compose).

    <div class="dsq-widget" id="recent_comments">
    <script defer="defer" type="text/javascript">
    //<![CDATA[
    document.write("<scr" + "ipt type="text/javascript" src="https://daftartutorial.disqus.com/recent_comments_widget.js?num_items=18&hide_mods=0&hide_avatars=0&avatar_size=32&excerpt_length=120"></scr" + "ipt>");
    //]]>
    </script></div>
    <style>
    /* Recent Disqus Comments */
    #recent_comments{display:block;margin:0 auto;padding:0;}
    #recent_comments ul.dsq-widget-list{text-align:left;}
    #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:#aaa}
    #recent_comments p.dsq-widget-meta a:hover{color:#1976d2;text-decoration:underline}
    #recent_comments li.dsq-widget-item{margin:0;padding:10px 0;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:#1976d2;font-weight:700;}
    #recent_comments a.dsq-widget-user:hover{color:#1565c0;}
    #recent_comments span.dsq-widget-comment{display:block;clear:both;margin-top:5px;}
    #recent_comments .dsq-widget-comment p{display:inline-block;font-size:92%;margin:0;font-weight:400;color:#444;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}
    </style>
    
    Silahkan ganti giftekno dengan Disqus Shortname milik sobat.
  3. Jangan lupa beri judul halamannya, kemudian klik Publikasikan.

 

Cara Memasang Recent Comment Disqus di Sidebar Blog 

 

  1. Pertama, buka dashboard blogger > Tata Letak > Tambahkan Gadget > HTML/JavaScript
  2. Kemudian Letakkan kode dibawah ini.
    <div id="recent_comments" class="dsq-widget">
    <script defer="defer" type='text/javascript'>
    //<![CDATA[
    document.write("<scr" + "ipt type="text/javascript" src="https://panduankompi.disqus.com/recent_comments_widget.js?num_items=18&hide_mods=0&hide_avatars=0&avatar_size=32&excerpt_length=120"></scr" + "ipt>");
    //]]>
    </script></div>
    <style>
    /* Recent Disqus Comments */
    #recent_comments{display:block;margin:0 auto;padding:0;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{text-align:left;max-height:400px;overflow:auto}
    #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:#aaa}
    #recent_comments p.dsq-widget-meta a:hover{color:#1976d2;text-decoration:underline}
    #recent_comments li.dsq-widget-item{margin:0;padding:10px 0;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:#1976d2;font-weight:700;}
    #recent_comments a.dsq-widget-user:hover{color:#1565c0;}
    #recent_comments span.dsq-widget-comment{display:block;clear:both;margin-top:5px;}
    #recent_comments .dsq-widget-comment p{display:inline-block;font-size:92%;margin:0;font-weight:400;color:#444;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}
    </style>
    
    Silahkan ganti panduankompi dengan Disqus Shortname milik sobat.
  3. Terakhir, klik Simpan.
Demikian tentang Cara Memasang Recent Comment Disqus di Blog, Selamat Mencoba.
Before/After Ad Space

Share this post:

Reactions:
0 Comments

Please read our Comment Policy before commenting. 🙌

Horizontal Ad Space

Notification