Setelah kemarin saya sudah menciptakan artikel ihwal cara menciptakan top disqus commentators diatas kolom komentar, saya rasa sudah cukup praktis 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 menyebarkan kepada para sobat 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 menyerupai blog kompiajaib.com, ada pula kotak pesan komentar untuk komentar disqus saja menyerupai pada blog ini. Makara perhatikan langkah-langkahnya dan jangan sambil tidur agar 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 memakai kotak pesan untuk 3 sistem komentar. Jika belum, silahkan buat kotak pesan pada url postingan KompiAjaib dibawah ini:
/search?q=cara-membuat-top-disqus-commentators
Selanjutnya kita akan menyisipkan top disqus commentators pada kotak pesan disqus.
1. Silahkan cari instruksi dibawah ini dan tambahkan instruksi menyerupai 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 instruksi 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 sempurna diatas instruksi 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 memakai komentar disqus dan ingin menciptakan pesan komentar menyerupai pada blog ini, silahkan perhatikan langkah dibawah ini:
1. Gunakan instruksi 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 instruksi 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 mempunyai akun disqus, silahkan login dengan akun media umum anda.</li>
<li>Gunakan <b>parse tool</b> untuk style teks dan instruksi 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 instruksi atau teks di sini lalu 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 instruksi 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 dapat menghosting dan men-defer script diatas di penyedia hosting kesayangan anda tapi jangan di google drive alasannya sudah ditutup. lalu 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...
No comments:
Post a Comment