IwanBerbagi.com - Masih seperti artikel saya sebelumnya yang membahas tentang pemasangan komentar disqus pada blog, yah jika sebelumnya kita membuat komentar disqus tersebut dengan fungsi load on click. Pada artikel kali ini komentar disqus akan kita hosting dan akan terload ketika komponen blog lainnya sudah terload dengan baik.

Cara ini terbilang sangat efektif, apa lagi untuk kamu yang sangat mengandalkan iklan adsense sebagai pencarian utama pada blog kamu. Karena dengan membuat komentar Disqus terload secara async maka iklan adsense akan tampil lebih dahulu, setelah semuanya tampil barulah komentar disqus tersebut tampil ataupun terload.

Selain itu juga saya sudah menambahkan Parser Disqus, agar memudahkan kita saat membuat efek huruf tebal, maupun miring bahkan memudahkan kita menyisipkan tag (pre/code) pada kolom komentar disqus. Berikut penampakan dari bahasan kita kali ini :
Memasang Komentar Disqus dengan Parser Disqus Async
Tertarik mencobanya di blog kamu? Ikuti tutorial saya berikut ini, saya akan membuat komentar disqus ini permanen jadi akan saya hilangkan beberapa fitur comment blogger yang tidak akan kita gunakan lagi.

#Langkah 1
Kamu perlu mencari kode yang seperti berikut :
<b:includable id='comments' var='post'>
Dan kamu ciutkan hingga tampak seperti berikut :
<b:includable id='comments' var='post'>...</b:includable>
Jika sudah, kamu hanya perlu mengganti kode yang kamu ciutkan tersebut dengan kode yang lumayan panjang berikut ini :
            <b:includable id='comments' var='post'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='disqus-title' id='disqus-title'>Disqus Comments</div>
<div class='pesan-komentar' id='pesan-komentar'>
  <div class='tombol-pesan'>How to style text in Disqus comments:<span class='mata' id='tombol-pesan' onclick='toggleNavPanel(&apos;isi-pesan&apos;)'>Show</span></div>
<div id='isi-pesan'>
<ul>
   <li>To write a <b>bold</b> letter please use <code>&amp;lt;strong&amp;gt;&amp;lt;/strong&amp;gt;</code> or <code>&amp;lt;b&amp;gt;&amp;lt;/b&amp;gt;</code>.</li>
   <li>To write a <i>italic</i> letter please use <code>&amp;lt;em&amp;gt;&amp;lt;/em&amp;gt;</code> or <code>&amp;lt;i&amp;gt;&amp;lt;/i&amp;gt;</code>.</li>
   <li>To write a <u>underline</u> letter please use <code>&amp;lt;u&amp;gt;&amp;lt;/u&amp;gt;</code>.</li>
   <li>To write a <span class='strike'>strikethrought</span> letter please use <code>&amp;lt;strike&amp;gt;&amp;lt;/strike&amp;gt;</code>.</li>
   <li>To write HTML code, please use <code>&amp;lt;code&amp;gt;&amp;lt;/code&amp;gt;</code> or <code>&amp;lt;pre&amp;gt;&amp;lt;/pre&amp;gt;</code> or <code>&amp;lt;pre&amp;gt;&amp;lt;code&amp;gt;&amp;lt;/code&amp;gt;&amp;lt;/pre&amp;gt;</code>.<br/>
And use <b>parse tool</b> below to easy get the style.</li>
  </ul>
<div class='parsebox'>
<span class='btn btn-primary btn-xs' id='show-parse2' onclick='showParser2();'>Show Parse Tool</span>
<span class='btn btn-primary btn-xs' id='hide-parse2' onclick='hideParser2();'>Hide Parse Tool</span>
<div class='parse-box'>
<div id='parser2'>
<textarea id='codes2' placeholder='Tulis/paste kode atau teks di sini lalu klik tombol yang sesuai. Untuk embed komentar, ambil ID DISQUS dari URL tombol share komentar Disqus.' spellcheck='false'/>
<div class='alert alert-success margin-bottom-20 collapse' id='btnInfo2' role='alert'>
        <button class='close close-copy' onclick='document.getElementById(&quot;btnInfo2&quot;).style.display = &quot;none&quot;;cdClear2();' type='button'><span aria-hidden='true'>&#215;</span></button>
        <h4>Codes copied to clipboard!</h4>
      </div>
<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><br/>
<button class='btn btn-primary btn-xs' id='cvrt11' onclick='embedConvert();this.disabled = true;'>embed</button> <span>How to get ID DISQUS - <a href='https://3.bp.blogspot.com/-5wJN6R18cZs/V8LMLmATPCI/AAAAAAAAnrk/j6xr9K2DPDMX7RNpb5qXttuHUwKQ7QK-wCLcB/s1600/Animation2.gif' rel='nofollow' target='_blank' title='Lihat di sini'>http://disq.us/p/[ID DISQUS]</a></span><br/>
<button class='btn button-link2 btn-xs btn-info' data-clipboard-action='copy' data-clipboard-target='#codes2' id='button-link2' type='submit'>Copy codes to clipboard!</button> <button class='btn btn-danger btn-xs' onclick='cdClear2();'>Bersihkan</button>
</span>
<span class='checkbox'>
  <input checked='' id='opt7' type='checkbox'/>
  <input checked='' id='opt8' type='checkbox'/>
  <input checked='' id='opt9' type='checkbox'/>
  <input checked='' id='opt10' type='checkbox'/>
  <input checked='' id='opt11' type='checkbox'/><br/>
  <input checked='' id='opt12' type='checkbox'/> <span>strong</span>
  <input checked='' id='opt13' type='checkbox'/> <span>em</span>
  <input checked='' id='opt14' type='checkbox'/> <span>u</span>
  <input checked='' id='opt15' type='checkbox'/> <span>strike</span><br/>
  <input checked='' id='opt16' type='checkbox'/> <span>pre</span>
  <input checked='' id='opt17' type='checkbox'/> <span>code</span>
  <input checked='' id='opt18' type='checkbox'/> <span>pre code</span>
  <input checked='' id='opt19' type='checkbox'/> <span>spoiler</span><br/>
  <input checked='' id='opt20' type='checkbox'/> <span>embed</span>
  </span>
  <div class='clear'/>
  </div>
  </div>
  <div class='clear'/>
</div></div></div>
<div id='disqus-comments'>
<div class='comments' id='comments'>
<b:include data='post' name='disqus-comment'/>
</div>    
            </div>
</b:if>
</b:includable>
            <b:includable id='disqus-comment' var='post'>
            </b:includable>

#Langkah 2
Selanjutnya kamu perlu menambahkan script disqus dan js disqus yang sudah saya hosting di firebase. Tambahkan kode berikut ini tepat diatas kode </body> ataupun kode &lt;!--</body>--&gt; &lt;/body&gt; biasanya ada paling bawah pada template kamu.
<script>
var disqus_shortname = &quot;ID_DISQUS&quot;;var disqus_blogger_current_url = &quot;<data:blog.canonicalUrl/>&quot;;if (!disqus_blogger_current_url.length){disqus_blogger_current_url = &quot;<data:blog.url/>&quot;}
var disqus_blogger_homepage_url = &quot;<data:blog.homepageUrl/>&quot;;var disqus_blogger_canonical_homepage_url = &quot;<data:blog.canonicalHomepageUrl/>&quot;;
    //<![CDATA[
function downloadJSAtOnload(){var a=document.createElement("script");a.src="https://firebasestorage.googleapis.com/v0/b/hostingib-66ddd.appspot.com/o/Khusus%20Share%20Host%2Fdisqus_parser.js?alt=media&token=864a9b22-b55f-4336-996a-90f05311ba61",document.body.appendChild(a)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
    //]]>
    </script>
Kamu hanya perlu mengganti ID_DISQUS dengan id Disqus punya kamu sendiri. Dan jangan lupa tambahkan CSS berikut ini untuk mempercantik tampilannya, dan menambhakan tampilan titlenya pada tag css style pada template kamu.
/* TITLE ONLY */
#disqus-title{font-size:16px;font-family:Roboto;font-weight:600;border-bottom:4px solid #fff;background:#f2f2f2;padding:12px}
#comments{padding:5px 10px;margin-top:0;display:none}

/* PARSER DISQUS */
.checkbox{font:11px Tahoma,Verdana,Arial,Sans-Serif;line-height:1.6em;color:#eee;display:none}
#codes2{border:1px solid #ddd;width:100%;height:150px;display:block;background-color:#efefef;font:400 12px &#39;Courier New&#39;,Monospace;margin:0 0 10px;padding:5px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
#codes2:active,#codes2:focus{background-color:#fff;color:#000;border:1px solid #ccc;outline:0}
.button-group{float:left;text-align:left;margin:-3px auto 0}
button{cursor:pointer}
.button-group span{font-family:Roboto,Arial,sans-serif;font-size:12px;vertical-align:2px;line-height:1;vertical-align:-1px;color:#555;display:inline;}
#opt7,#opt8,#opt9,#opt10,#opt11,#opt12,#opt13,#opt14,#opt15,#opt16,#opt17,#opt18,#opt19,#opt20{display:inline-block;vertical-align:middle;border:none;outline:0;margin:0}
.checkbox span{font:14px Roboto,Arial,sans-serif;vertical-align:middle;line-height:1;color:#555;margin-right:10px}
.btn,.btn:active{background-image:none}
.btn{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}
.btn:active:focus,.btn:focus{outline:0}
.btn:focus,.btn:hover{color:#333;text-decoration:none;outline:0}
.btn: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{color:#fff!important;background-color:#337ab7;border-color:#2e6da4}
.btn-primary:focus,.button-group button:disabled{color:#fff;background-color:#286090;border-color:#122b40}
.btn-primary:active,.btn-primary: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-info{color:#fff!important;background-color:#5bc0de;border-color:#46b8da}
.btn-info:focus{color:#fff;background-color:#31b0d5;border-color:#1b6d85}
.btn-info:active,.btn-info:hover{color:#fff;background-color:#31b0d5;border-color:#269abc}
.btn-xs{font-size:12px;line-height:1.5;padding:1px 5px}
.clear{clear:both;display:block}
.collapse{display:none}
#parser2{position:relative;display:none;-webkit-animation:slide-down .3s ease-out;-moz-animation:slide-down .3s ease-out;}
.alert-success{color:#3c763d;background-color:#dff0d8;border-color:#d6e9c6}
.alert{padding:15px;border:1px solid transparent;position:absolute;top:10px;right:10px;min-width:230px}
button.close{padding:0;cursor:pointer;background:0 0;border:0;-webkit-appearance:none;line-height:1}
.close{float:right;font-size:1.5rem;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.2}
button.close:focus{outline:0}
.close:hover{opacity:1!important}
#btnInfo2 h4{margin:0}
#button-link2,.parsebox #hide-parse2{display:none}
.parsebox{margin:0}
.parse-box{overflow:hidden;}
.parsebox #show-parse2,.parsebox #hide-parse2{cursor:pointer}
.parsebox #show-parse2{display:inline-block}
@-webkit-keyframes slide-down{0%{opacity:0;-webkit-transform:translateY(-100%)}
100%{opacity:1;-webkit-transform:translateY(0)}
}
@-moz-keyframes slide-down{0%{opacity:0;-moz-transform:translateY(-100%)}
100%{opacity:1;-moz-transform:translateY(0)}
}
.pesan-komentar{position:relative}
.pesan-komentar{background:#f2f2f2;padding:12px;width:100%!important;max-width:706px!important;display:block!important;margin:0 auto;line-height:1.3em;font-weight:300;font-size:100%;color:#444;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}
#isi-pesan,#konversi-pesan,#parser{display:none}
#isi-pesan li,#isi-pesan ul{list-style-type:disc!important}
#isi-pesan ul{margin-bottom:5px}
#parser{padding:0;margin:5px 0}
input.button-parse{padding:5px}
.pesan-komentar .strike{text-decoration:line-through}
.tombol-pesan{font-weight:600;font-family:Roboto;font-size:16px;}
.mata{float:right;padding-top:1px;text-transform:capitalize;cursor:pointer}
.clear{clear:both}

#Langkah 3
Selanjutnya kamu hanya perlu menghapus beberapa komponen komentar blogger yang tidak lagi digunakan, saya sudah menjelaskannya pada artikel saya sebelumnya. Kamu bisa membacanya DISINI. Jika sudah kamu bisa klik Simpan Tema, dan lihat hasilnya.
Tambahan, Saya sering kali mendapati komentar disqus tidak tampil di beberapa artikel, itu karena bentrok dengan pengaturan blogger, jika kamu bermasalah seperti itu juga kamu bisa membaca pembahasan sebelumnya http://goo.gl/0gaMv0
Cara ini cara yang paling efektif yang pernah saya share, dan saya sudah mencobanya pada beberapa blog saya dan sangat efektif untuk meningkatkan kecepatan laod pada templaet tersebut. Saya sedang memebuat template dengan menggunakan beberapa fitur faforite saya dan mungkin kamu juga menyukainya. Jadi stay tune aja pada blog ini. Jka ada pertanyaan silahkan kita bahas pada komentar.

Terima kasih untuk Kang Adhy yang sudah share Parser Disqusnya. Selamat mencoba.
Share this with short URL:
How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed