Setelah kemarin saya sudah membuat artikel tentang cara membuat top disqus commentators diatas kolom komentar, saya rasa sudah cukup gampang untuk di modifikasi ulang sesuai selera. Namun ternyata masih ada yang kesulitan memasang top disqus commentators ini ke dalam kotak pesan komentar disqus. Karena itu disini saya akan berbagi kepada para sahabat blogger tips dan trik memasangnya kedalam pesan komentar.
Sebelumnya ada 2 hal dan cara yang harus diperhatikan; bahwa ada kotak pesan komentar disqus untuk 3 sistem komentar seperti blog kompiajaib.com, ada pula kotak pesan komentar untuk komentar disqus saja seperti pada blog ini. Jadi perhatikan langkah-langkahnya dan jangan sambil tidur supaya tidak nyasar kemana-mana, dan pastikan blog anda sudah terpasang jquery library dan font awesome.
Model pertama untuk pengguna 3 sistem komentar
Pastikan bahwa blog anda sudah menggunakan kotak pesan untuk 3 sistem komentar. Jika belum, silahkan buat kotak pesan pada url postingan KompiAjaib dibawah ini:
http://www.kompiajaib.com/2016/08/membuat-parse-tool-untuk-text-style.html
Selanjutnya kita akan menyisipkan top disqus commentators pada kotak pesan disqus.
1. Silahkan cari kode dibawah ini dan tambahkan kode seperti yang saya tandai;
.tombol-pesan{display:block;font-weight:500;float:left;}</head>
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
/*<![CDATA[*/
.topcomment-sh{display:inline;float:right;font-size:12px;line-height:1.5;border-radius:3px;padding:2px 5px;color:#fff!important;background-color:#337ab7;border-color:#2e6da4;box-sizing:border-box;font-weight:400;margin-left:10px;cursor:pointer;}
.topcomment-sh:hover{color:#fff;background-color:#286090;border-color:#204d74}
#topcomment{display:block;width:100%;margin:0 auto;padding:10px 0 0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;height:auto}
#topcomment-box{padding-top:30px;display:none}
.dsq-widget ul.dsq-widget-list{padding:0!important;margin-right:-30px!important;text-align:left}
img.dsq-widget-avatar{margin:0 10px 7px 0!important;width:58px!important;height:58px!important;padding:0!important;float:left;border-radius:3px!important}
li.dsq-widget-item{margin:0 2% 5px 0!important;padding:0 0 4px!important;list-style-type:none;clear:none!important;border-bottom:1px solid #ddd;display:inline;float:left;width:30.333333%}
a.dsq-widget-user{font-weight:500!important;display:block!important;margin-bottom:5px}
a.dsq-widget-user:hover{color:#444}
/*]]>*/
</style>
</b:if>2. Copy kode dibawah ini
<div class='topcomment-sh' onclick='toggleNavPanel1('topcomment-box')'><i aria-hidden='true' class='fa fa-comments'/> <span id='topcomment-button'>Show Top Commentators</span></div>
<div id='topcomment-box'>
<div class='dsq-widget' id='topcomment'>
<script type='text/javascript'>
//<![CDATA[
document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://user-name.disqus.com/top_commenters_widget.js?num_items=9&hide_mods=1&hide_avatars=0&avatar_size=32\"></scr" + "ipt>");
//]]>
</script>
</div>
</div>
<div class='clear'/>username : ganti dengan user nama disqus andanum_items : jumlah tampilan (silahkan atur jumlahnya)hide_mods : sembunyikan komentar admin (1 sembunyi, 0 tampil)hide_avatars : sembunyikan gambar (1 sembunyi, 0 tampil)avatar_size : mengatur ukuran gambar userdan simpan / paste tepat diatas kode berikut;
<div id='isi-pesan'>3. Terakhir simpan script dibawah ini diatas
</body>
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
function toggleNavPanel1(e){var t=document.getElementById(e),c=document.getElementById("topcomment-button"),l="block";t.style.display==l?(t.style.display="none",c.innerHTML="Show Top Commentator"):(t.style.display="block",c.innerHTML="Hide Top Commentator")}
$("a").filter(function(){return this.hostname&&this.hostname!==location.hostname}).attr('rel', 'nofollow').attr('target', '_blank');
//]]>
</script>
</b:if>Model kedua untuk pengguna komentar disqus saja
Jika blog anda hanya menggunakan komentar disqus dan ingin membuat pesan komentar seperti pada blog ini, silahkan perhatikan langkah dibawah ini:
1. Gunakan kode dibawah ini dan simpan diatas
</head>
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
/*<![CDATA[*/
.pesan-komentar{background:#444;padding:5px 10px 10px;width:auto;margin:20px 0;line-height:1.3em;position:relative;font-weight:400;border:1px solid #ddd;font-size:14px;color:#fff}
.pesan-komentar:before{content:"";width:0;height:0;position:absolute;bottom:-22px;left:14px;border:11px solid transparent;border-color:#fff transparent transparent}
.pesan-komentar:after{content:"";width:0;height:0;position:absolute;bottom:-20px;left:15px;border:10px solid transparent;border-color:#444 transparent transparent}
.pesan-komentar ul li{margin:0 20px;padding-left:0;list-style-type:disc}.btn,.mata,.parser,button{cursor:pointer}
.parser{float:left}
.checkbox{font:11px Tahoma,Verdana,Arial,Sans-Serif;line-height:1.6em;color:#eee;display:none}
#codes,#codes2{border:1px solid #ddd;width:100%;height:150px;display:block;background-color:#efefef;border-radius:3px;font:400 12px 'Courier New',Monospace;margin:7px 0 10px;padding:5px;box-sizing:border-box}
#opt1,#opt2,#opt3,#opt4,#opt5,.btn,.parser{display:inline-block;vertical-align:middle}
#codes:focus{background-color:#fff;color:#000;border:1px solid #ccc;outline:0}
.button-group{float:left;text-align:left;margin:-3px auto 0}
.button-group span{font:14px Tahoma,Verdana,Arial,Sans-Serif;vertical-align:2px;line-height:1;color:#555}
#opt1,#opt2,#opt3,#opt4,#opt5{border:none;outline:0;margin:0 10px 0 0}
#opt10,#opt11,#opt12,#opt13,#opt14,#opt15,#opt16,#opt17,#opt18,#opt19,#opt20,#opt6,#opt7,#opt8,#opt9{display:inline-block;vertical-align:middle;border:none;outline:0;margin:0}
.checkbox span{font:14px Tahoma,Verdana,Arial,Sans-Serif;vertical-align:middle;line-height:1;color:#555;margin-right:10px}
.btn,.btn:active{background-image:none}
.btn,.parser{font-weight:400;padding:6px 12px;margin-bottom:5px;font-size:14px;line-height:1.42857143;text-align:center;white-space:nowrap;-ms-touch-action:manipulation;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid transparent;border-radius:4px}
.btn:active:focus,.btn:focus,.parser:active:focus,.parser:focus{outline:0}
.btn:focus,.btn:hover,.parser:focus,.parser:hover{color:#333;text-decoration:none;outline:0}
.btn:active,.parser:active{outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}
.btn-primary,.parser,.parser a{color:#fff!important;background-color:#337ab7;border-color:#2e6da4}
.btn-primary:focus,.button-group button:disabled,.parser:focus{color:#fff;background-color:#286090;border-color:#122b40}
.btn-primary:active,.btn-primary:hover,.parser:active,.parser:hover{color:#fff;background-color:#286090;border-color:#204d74}
.btn-danger{color:#fff!important;background-color:#d9534f;border-color:#d43f3a}.btn-danger:focus{color:#fff;background-color:#c9302c;border-color:#761c19}
.btn-danger:active,.btn-danger:hover{color:#fff;background-color:#c9302c;border-color:#ac2925}
.btn-xs,.parser{font-size:12px;line-height:1.5;border-radius:3px;padding:1px 5px}
#isi-pesan{display:block}
#konversi-pesan,#parser{display:none}
#isi-pesan li,#isi-pesan ul{list-style-type:disc!important}
#isi-pesan ul{padding-left:5px;margin-bottom:5px}
#parser{padding:0;margin:5px 0}
input.button-parse{padding:5px}
.strike{text-decoration:line-through}
.mata{float:right;padding-top:1px}
.clear{clear:both}
.topcomment-sh{display:inline;float:left;font-size:12px;line-height:1.5;border-radius:3px;padding:2px 5px;color:#fff!important;background-color:#337ab7;border-color:#2e6da4;box-sizing:border-box;font-weight:400;margin-left:10px;cursor:pointer;}
.topcomment-sh:hover{color:#fff;background-color:#286090;border-color:#204d74}
#topcomment{display:block;width:100%;margin:0 auto;padding:10px 0 0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;height:auto}
#topcomment-box{padding-top:30px;display:none}
.dsq-widget ul.dsq-widget-list{padding:0!important;margin-right:-30px!important;text-align:left}
img.dsq-widget-avatar{margin:0 10px 7px 0!important;width:58px!important;height:58px!important;padding:0!important;float:left;border-radius:3px!important}
li.dsq-widget-item{margin:0 2% 5px 0!important;padding:0 0 4px!important;list-style-type:none;clear:none!important;border-bottom:1px solid #ddd;display:inline;float:left;width:30.333333%}
a.dsq-widget-user{color:#ff0;font-weight:500!important;display:block!important;margin-bottom:5px}
a.dsq-widget-user:hover{color:#fff}
/*]]>*/
</style>
</b:if>2. Selanjutnya copy kode dibawah ini;
<b:includable id='pesan-komentar' var='post'>
<div class='pesan-komentar' id='pesan-komentar'>
<div id='isi-pesan'>
<b>Note :</b>
<ul>
<li>Gunakan bahasa ramah lingkungan. Link promo masuk <b>Spam</b></li>
<li>Jika tidak memiliki akun disqus, silahkan login dengan akun media sosial anda.</li>
<li>Gunakan <b>parse tool</b> untuk style teks dan kode HTML.</li>
</ul>
<b:if cond='data:blog.isMobileRequest == "false"'>
<div class='parser' onclick='toggleNavPanel2('parser')'><i aria-hidden='true' class='fa fa-code'/> <span id='parser-button'>Show Parser Box</span></div>
<div class='topcomment-sh' onclick='toggleNavPanel1('topcomment-box')'><i aria-hidden='true' class='fa fa-comments'/> <span id='topcomment-button'>Show Top Commentators</span></div>
<div id='topcomment-box'>
<div class='dsq-widget' id='topcomment'>
<script type='text/javascript'>
//<![CDATA[
document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://nomifrod.disqus.com/top_commenters_widget.js?num_items=9&hide_mods=1&hide_avatars=0&avatar_size=32\"></scr" + "ipt>");
//]]>
</script>
</div>
</div>
<div class='clear'/>
<div id='parser'>
<textarea id='codes' placeholder='Tulis/paste kode atau teks di sini kemudian klik tombol yang sesuai.' spellcheck='false'/>
<span class='button-group'>
<button class='btn btn-primary btn-xs' id='cvrt3' onclick='strongConvert();this.disabled = true;'>strong</button>
<button class='btn btn-primary btn-xs' id='cvrt4' onclick='emConvert();this.disabled = true;'>em</button>
<button class='btn btn-primary btn-xs' id='cvrt4' onclick='uConvert();this.disabled = true;'>u</button>
<button class='btn btn-primary btn-xs' id='cvrt5' onclick='strikeConvert();this.disabled = true;'>strike</button>
<button class='btn btn-primary btn-xs' id='cvrt7' onclick='preConvert();this.disabled = true;'>pre</button>
<button class='btn btn-primary btn-xs' id='cvrt8' onclick='codeConvert();this.disabled = true;'>code</button>
<button class='btn btn-primary btn-xs' id='cvrt9' onclick='precodeConvert();this.disabled = true;'>pre code</button>
<button class='btn btn-primary btn-xs' id='cvrt10' onclick='spoilerConvert();this.disabled = true;'>spoiler</button>
<button class='btn btn-danger btn-xs' onclick='cdClear();'>Bersihkan</button>
</span>
<span class='checkbox'>
<input checked='' id='opt1' type='checkbox'/>
<input checked='' id='opt2' type='checkbox'/>
<input checked='' id='opt3' type='checkbox'/>
<input checked='' id='opt4' type='checkbox'/>
<input checked='' id='opt5' type='checkbox'/><br/>
<input checked='' id='opt6' type='checkbox'/> <span>strong</span>
<input checked='' id='opt7' type='checkbox'/> <span>em</span>
<input checked='' id='opt8' type='checkbox'/> <span>u</span>
<input checked='' id='opt9' type='checkbox'/> <span>strike</span><br/>
<input checked='' id='opt10' type='checkbox'/> <span>pre</span>
<input checked='' id='opt11' type='checkbox'/> <span>code</span>
<input checked='' id='opt12' type='checkbox'/> <span>pre code</span>
<input checked='' id='opt13' type='checkbox'/> <span>spoiler</span><br/>
</span>
</div></b:if>
</div>
<div class='clear'/>
</div>
</b:includable><b:includable id='threaded_comments' var='post'>
................
................
................
</b:includable>3. Lalu copy kode pemanggil kotak pesan disqus dibawah ini;
<b:include data='post' name='pesan-komentar'/><div class='comments' id='comments'>4. Terakhir simpan script berikut diatas
</body>
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
function cdClear(){var e=document.getElementById("codes");e.value="",e.focus();for(var t=document.querySelectorAll("#cvrt3, #cvrt4, #cvrt5, #cvrt6, #cvrt7, #cvrt8, #cvrt9, #cvrt10, #cvrt11"),c=0;c<t.length;c++)t[c].disabled=!1}function preConvert(){var e=document.getElementById("codes"),t=e.value,c=document.getElementById("opt1"),l=document.getElementById("opt2"),o=document.getElementById("opt3"),n=document.getElementById("opt4"),d=document.getElementById("opt5"),r=document.getElementById("opt10");t=t.replace(/\t/g," "),r.checked&&(c.checked&&(t=t.replace(/&/g,"&")),l.checked&&(t=t.replace(/'/g,"'")),o.checked&&(t=t.replace(/"/g,""")),n.checked&&(t=t.replace(/</g,"<")),d.checked&&(t=t.replace(/>/g,">")),t=t.replace(/^/,"<pre>"),t=t.replace(/$/,"</pre>"),e.value=t,e.focus(),e.select())}function codeConvert(){var e=document.getElementById("codes"),t=e.value,c=document.getElementById("opt1"),l=document.getElementById("opt2"),o=document.getElementById("opt3"),n=document.getElementById("opt4"),d=document.getElementById("opt5"),r=document.getElementById("opt11");t=t.replace(/\t/g," "),r.checked&&(c.checked&&(t=t.replace(/&/g,"&")),l.checked&&(t=t.replace(/'/g,"'")),o.checked&&(t=t.replace(/"/g,""")),n.checked&&(t=t.replace(/</g,"<")),d.checked&&(t=t.replace(/>/g,">")),t=t.replace(/^/,"<code>"),t=t.replace(/$/,"</code>"),e.value=t,e.focus(),e.select())}function precodeConvert(){var e=document.getElementById("codes"),t=e.value,c=document.getElementById("opt1"),l=document.getElementById("opt2"),o=document.getElementById("opt3"),n=document.getElementById("opt4"),d=document.getElementById("opt5"),r=document.getElementById("opt12");t=t.replace(/\t/g," "),r.checked&&(c.checked&&(t=t.replace(/&/g,"&")),l.checked&&(t=t.replace(/'/g,"'")),o.checked&&(t=t.replace(/"/g,""")),n.checked&&(t=t.replace(/</g,"<")),d.checked&&(t=t.replace(/>/g,">")),t=t.replace(/^/,"<pre><code>"),t=t.replace(/$/,"</code></pre>"),e.value=t,e.focus(),e.select())}function spoilerConvert(){var e=document.getElementById("codes"),t=e.value,c=document.getElementById("opt13");t=t.replace(/\t/g," "),c.checked&&(t=t.replace(/^/,"<spoiler>"),t=t.replace(/$/,"</spoiler>"),e.value=t,e.focus(),e.select())}function strongConvert(){var e=document.getElementById("codes"),t=e.value,c=document.getElementById("opt6");t=t.replace(/\t/g," "),c.checked&&(t=t.replace(/^/,"<strong>"),t=t.replace(/$/,"</strong>"),e.value=t,e.focus(),e.select())}function emConvert(){var e=document.getElementById("codes"),t=e.value,c=document.getElementById("opt7");t=t.replace(/\t/g," "),c.checked&&(t=t.replace(/^/,"<em>"),t=t.replace(/$/,"</em>"),e.value=t,e.focus(),e.select())}function uConvert(){var e=document.getElementById("codes"),t=e.value,c=document.getElementById("opt8");t=t.replace(/\t/g," "),c.checked&&(t=t.replace(/^/,"<u>"),t=t.replace(/$/,"</u>"),e.value=t,e.focus(),e.select())}function strikeConvert(){var e=document.getElementById("codes"),t=e.value,c=document.getElementById("opt9");t=t.replace(/\t/g," "),c.checked&&(t=t.replace(/^/,"<strike>"),t=t.replace(/$/,"</strike>"),e.value=t,e.focus(),e.select())}function toggleNavPanel2(e){var t=document.getElementById(e),c=document.getElementById("parser-button"),l="block";t.style.display==l?(t.style.display="none",c.innerHTML="Show Parser Box"):(t.style.display="block",c.innerHTML="Hide Parse Box")}
function toggleNavPanel1(e){var t=document.getElementById(e),c=document.getElementById("topcomment-button"),l="block";t.style.display==l?(t.style.display="none",c.innerHTML="Show Top Commentator"):(t.style.display="block",c.innerHTML="Hide Top Commentator")}
$("a").filter(function(){return this.hostname&&this.hostname!==location.hostname}).attr('rel', 'nofollow').attr('target', '_blank');
//]]>
</script>
</b:if>Supaya tidak mengganggu loading blog, anda bisa menghosting dan men-defer script diatas di penyedia hosting kesayangan anda tapi jangan di google drive karena sudah ditutup. kemudian gunakan script dibawah ini;
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
function downloadJSAtOnload(){var d=document.createElement("script");d.src="url-hosting.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>
</b:if>ganti yang saya tandai dengan url file.js tersebut.
selesai dan selamat mencoba...
