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
- Pertama, buka dashboard blogger > Halaman > buat Halaman baru.
- Lalu, letakkan kode dibawah ini pada tab HTML (bukan Compose).
Silahkan ganti giftekno dengan Disqus Shortname milik sobat.<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:'';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:'';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>
- Jangan lupa beri judul halamannya, kemudian klik Publikasikan.
Cara Memasang Recent Comment Disqus di Sidebar Blog
- Pertama, buka dashboard blogger > Tata Letak > Tambahkan Gadget > HTML/JavaScript
- Kemudian Letakkan kode dibawah ini.
Silahkan ganti panduankompi dengan Disqus Shortname milik sobat.<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:'';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:'';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>
- Terakhir, klik Simpan.