Seperti yang sudah aku terangkan di postingan sebelumnya mengenai blog sekarang ini sudah mulai banyak para Blogger yang sudah mulai menggunakan Template pada Blognya masing-masing. Perubahan pun bukan hanya terjadi pada Platform Blogger saja melainkan di Wordpress pun banyak yang sudah mulai menggunakan ini.
Banyak kelebihan yang didapat dengan menggunakan template , selain lebih fast loading tampilannya pun menyesuaikan secara sempurna untuk pengguna dan pembaca yang menggunakan smartphone mereka.
Selain penerapan kode-kode pada template ini, ternyata salah satu Platform sosial adalah Disqus sebagai media forum dan diskusi pun mengikuti perkembangan ini, bagi sahabat yang sudah menerapkan template Blog dan sudah menggunakan komentar Disqus pada komentar blognya kebetulan di postingan kali ini aku akan mengembangkan cara Membuat Tool Parse Text Style di Komentar Disqus, menyerupai yang sudah kita tahu dikomentar Disqus sahabat dapat menggunakan <strong></strong>, <b></b>, <em></em>, <i></i>, <u></u>, <strike></strike>, <code></code>, <pre></pre>, <pre><code></code></pre> dimana kode-kode tersebut tujuannya untuk menambahkan gaya penulisan baik untuk penebalan Bold, garis bawah, miring, coret text dan bahkan sekarang ini ada penambahan fitur gres adalah <spoiler></spoiler> untuk menampilkan dan memunculkan konten yang ada di kolom komentar atau pun embed komentar Platform Disqus pada komentar Blog.
Nah di kesempatan kali ini aku akan membagikan cara tersebut yang aku ilham dari blog kompiajaib, disini akan dibahas cara pembuatan Parse Tool komentar Disqus Bloggernya. Tujuan semoga para pembaca kita ketika ingin berkomentar dapat dengan mudah jikalau ingin menambahkan Gaya goresan pena jadi tinggal buka saja parse tool yang tersedia di atasnya, pembaca cukup copy paste saja isyarat parse yang dihasilkan kemudian mampu digunakan bersamaan dengan komentar Disqus pada Blog.
Langsung saja cara penerapannya silahkan ikuti berikut ini.
Pertama
Silahkan sahabat copy isyarat CSS dibawah ini lalu simpan di area style amp-custom ini untuk tampilan Desktop dan Mobile-nya.
Ke Dua
Langkah selanjutnya silahkan sahabat cara isyarat dibawah ini
Tambahkan isyarat HTML dibawah ini simpan sempurna dibawahnya isyarat tadi, namun jikalau sudah ada jikalau sudah tersedia silahkan ganti saja dengan isyarat dibawah ini.
Perhatikan baik-baik petunjuk diatas.
Ketiga
Langkah berikutnya silahkan sahabat copy isyarat dibawah ini lalu simpan diatas isyarat sript pada komentar Disqus.
Jika sudah akan tampil menyerupai dibawah ini
Hal yang perlu diperhatikan pastikan di dalam template sahabat sudah terpasang isyarat JS amp-accordion yang gunanya untuk buka tutup tampilan atau istilahnya show and hide untuk parse toolnya, adapun isyarat JS amp-accordion menyerupai dibawah ini.
Nah untuk sahabat yang ingin menerapkan sendiri dan ingin menyimpan untuk nantinya dimodifikasi isyarat Parse Tool Komentar HTMLnya silahkan sahabat copy lalu simpan di Github sahabat dan share dengan cdn rawgit punya sobat, berikut kodenya
Baiklah sahabat ini saja yang mampu aku bagikan untuk terus mengikuti updated Blog ini sahabat mampu follow dan jikalau dirasa manfaat aku izinkan untuk menshare nya jadi kita mampu membantu sobat-sobat blogger yang lainnya juga, terima kasih sudah berkunjung.
.pesan-komentar{background:#fff;padding:20px 0 8px;display:block;margin:0 20px 0 0;line-height:1.3em;font-weight:300;border-bottom:1px solid #ddd;font-size:100%;color:#444;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box} #isi-pesan li,#isi-pesan ul{list-style-type:disc} #isi-pesan ul{padding-left:20px;margin:5px 0} .pesan-komentar .strike{text-decoration:line-through} .tombol-pesan{display:block;font-weight:500} amp-accordion.parse_box section:not([expanded]) .show-less,amp-accordion.parse_box section[expanded] .show-more{display:none} amp-accordion.parse_box h5{width:80px} a.btn-primary{color:#fff} .btn,.btn:active{background-image:none} .btn{font-weight:400;display:inline-block;padding:6px 12px;margin-bottom:5px;font-size:14px;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-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{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;background-color:#337ab7;border-color:#2e6da4} .btn-primary:focus{color:#fff;background-color:#286090;border-color:#122b40} .btn-primary:active,.btn-primary:hover{color:#fff;background-color:#286090;border-color:#204d74} .btn-xs{font-size:12px;line-height:1.5;border-radius:3px;padding:1px 5px} .clear{clear:both}Ke Dua
Langkah selanjutnya silahkan sahabat cara isyarat dibawah ini
<b:includable id='disqus-comment' var='post'> ................ ................ ................ </b:includable>Tambahkan isyarat HTML dibawah ini simpan sempurna dibawahnya isyarat tadi, namun jikalau sudah ada jikalau sudah tersedia silahkan ganti saja dengan isyarat dibawah ini.
<b:includable id='pesan-komentar' var='post'> <div class='pesan-komentar' id='pesan-komentar'> <div class='tombol-pesan'>How to style text in Disqus comments:</div> <div id='isi-pesan'> <ul> <li>To write a <b>bold</b> letter please use <code>&lt;strong&gt;&lt;/strong&gt;</code> or <code>&lt;b&gt;&lt;/b&gt;</code>.</li> <li>To write a <i>italic</i> letter please use <code>&lt;em&gt;&lt;/em&gt;</code> or <code>&lt;i&gt;&lt;/i&gt;</code>.</li> <li>To write a <u>underline</u> letter please use <code>&lt;u&gt;&lt;/u&gt;</code>.</li> <li>To write a <span class='strike'>strikethrought</span> letter please use <code>&lt;strike&gt;&lt;/strike&gt;</code>.</li> <li>To write HTML code, please use <code>&lt;code&gt;&lt;/code&gt;</code> or <code>&lt;pre&gt;&lt;/pre&gt;</code> or <code>&lt;pre&gt;&lt;code&gt;&lt;/code&gt;&lt;/pre&gt;</code>.<br/> And use <b>parse tool</b> below to easy get the style.</li> </ul> </div> <div class='clear'/> <amp-accordion class='parse_box'> <section> <h5 class='btn btn-primary btn-xs'> <span class='show-more'>Show Parser</span> <span class='show-less'>Hide Parser</span> </h5> <div class='parse-box'> <amp-iframe frameborder='0' height='240' layout='responsive' sandbox='allow-forms allow-scripts allow-same-origin allow-modals allow-popups' src='https://cdn.rawgit.com/KompiAjaib/kompi-html/master/parser-codes.html' width='747'> </amp-iframe> </div> </section> </amp-accordion> <div class='clear'/> </div> </b:includable>Perhatikan baik-baik petunjuk diatas.
Ketiga
Langkah berikutnya silahkan sahabat copy isyarat dibawah ini lalu simpan diatas isyarat sript pada komentar Disqus.
<b:include data='post' name='pesan-komentar'/> <div class='clear'/>Jika sudah akan tampil menyerupai dibawah ini
<b:includable id='disqus-comment' var='post'> <b:include data='post' name='pesan-komentar'/> <div class='clear'/>................ ................ ................ </b:includable>Hal yang perlu diperhatikan pastikan di dalam template sahabat sudah terpasang isyarat JS amp-accordion yang gunanya untuk buka tutup tampilan atau istilahnya show and hide untuk parse toolnya, adapun isyarat JS amp-accordion menyerupai dibawah ini.
<script async='async' custom-element='amp-accordion' src='https://cdn.ampproject.org/v0/amp-accordion-0.1.js'/>Nah untuk sahabat yang ingin menerapkan sendiri dan ingin menyimpan untuk nantinya dimodifikasi isyarat Parse Tool Komentar HTMLnya silahkan sahabat copy lalu simpan di Github sahabat dan share dengan cdn rawgit punya sobat, berikut kodenya
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Parse Code</title> <meta content='width=device-width, initial-scale=1' name='viewport'> <link href='https://fonts.googleapis.com/css?family=Roboto:100,200,300,400italic,400,500,500italic,700,700italic,900' rel='stylesheet' type='text/css'/> <style> body { background-color:white; margin:0; padding:0; color:#212121;font-family:Roboto,Arial,sans-serif; } a{text-decoration:none;color:#e8554e;font-weight:700} ::selection{background:#e8554e;color:#fff} .checkbox{font:11px Tahoma,Verdana,Arial,Sans-Serif;line-height:1.6em;color:#eee;display:none} #codes{border:1px solid #ddd;width:100%;height:150px;display:block;background-color:#efefef;border-radius:3px;font:400 12px 'Courier New',Monospace;margin:0 0 10px;padding:5px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;} #codes:active,#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{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;} #opt1,#opt2,#opt3,#opt4,#opt5{display:inline-block;vertical-align:middle;border:none;outline:0;margin:0 10px 0 0} #opt6,#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,.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{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-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;border-radius:3px;padding:1px 5px} .clear{clear:both;display:block} </style> </head> <body> <div id='parser'> <textarea id='codes' placeholder='Tulis/paste isyarat atau teks di sini lalu klik tombol yang sesuai. Untuk embed komentar, ambil ID DISQUS dari URL tombol share komentar Disqus.' spellcheck='false'></textarea> <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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt6786Slh1p_vtGAgNA_eImo3rahDcHxj7rLUZnbFIwhQyFFa3g2igyZvPx-9xkGOCdjabqq9i-jxBXyz6nUxlJl0AW1VZDgp2ifltuNW1VEtgy8qOW4CHLkXfCeQ8Gtt51C2-uV2kIqpq/s1600/Animation2.gif' rel='nofollow' target='_blank' title='Lihat di sini'>http://disq.us/p/[ID DISQUS]</a></span><br/> <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/> <input checked='' id='opt20' type='checkbox'/> <span>embed</span> </span> <div class="clear"></div> </div> <script> function cdClear() { var wtarea = document.getElementById('codes'); wtarea.value = ''; wtarea.focus(); var clears = document.querySelectorAll('#cvrt3, #cvrt4, #cvrt5, #cvrt6, #cvrt7, #cvrt8, #cvrt9, #cvrt10, #cvrt11') for (var i = 0; i < clears.length; i++) { clears[i].disabled = false } } function cdClear2() { var wtarea = document.getElementById('codes2'); wtarea.value = ''; wtarea.focus(); var clears = document.querySelectorAll('#cvrt, #cvrt2') for (var i = 0; i < clears.length; i++) { clears[i].disabled = false } } function preConvert() { var ctarea = document.getElementById('codes'), cv = ctarea.value, opt1 = document.getElementById('opt1'), opt2 = document.getElementById('opt2'), opt3 = document.getElementById('opt3'), opt4 = document.getElementById('opt4'), opt5 = document.getElementById('opt5'), opt10 = document.getElementById('opt10'); cv = cv.replace(/\t/g, " "); if (opt10.checked) { if (opt1.checked) cv = cv.replace(/&/g, "&"); if (opt2.checked) cv = cv.replace(/'/g, "'"); if (opt3.checked) cv = cv.replace(/"/g, """); if (opt4.checked) cv = cv.replace(/</g, "<"); if (opt5.checked) cv = cv.replace(/>/g, ">"); cv = cv.replace(/^/, "<pre>"); cv = cv.replace(/$/, "</pre>"); ctarea.value = cv; ctarea.focus(); ctarea.select();} }; function codeConvert() { var ctarea = document.getElementById('codes'), cv = ctarea.value, opt1 = document.getElementById('opt1'), opt2 = document.getElementById('opt2'), opt3 = document.getElementById('opt3'), opt4 = document.getElementById('opt4'), opt5 = document.getElementById('opt5'), opt11 = document.getElementById('opt11'); cv = cv.replace(/\t/g, " "); if (opt11.checked) { if (opt1.checked) cv = cv.replace(/&/g, "&"); if (opt2.checked) cv = cv.replace(/'/g, "'"); if (opt3.checked) cv = cv.replace(/"/g, """); if (opt4.checked) cv = cv.replace(/</g, "<"); if (opt5.checked) cv = cv.replace(/>/g, ">"); cv = cv.replace(/^/, "<code>"); cv = cv.replace(/$/, "</code>"); ctarea.value = cv; ctarea.focus(); ctarea.select();} }; function precodeConvert() { var ctarea = document.getElementById('codes'), cv = ctarea.value, opt1 = document.getElementById('opt1'), opt2 = document.getElementById('opt2'), opt3 = document.getElementById('opt3'), opt4 = document.getElementById('opt4'), opt5 = document.getElementById('opt5'), opt12 = document.getElementById('opt12'); cv = cv.replace(/\t/g, " "); if (opt12.checked) { if (opt1.checked) cv = cv.replace(/&/g, "&"); if (opt2.checked) cv = cv.replace(/'/g, "'"); if (opt3.checked) cv = cv.replace(/"/g, """); if (opt4.checked) cv = cv.replace(/</g, "<"); if (opt5.checked) cv = cv.replace(/>/g, ">"); cv = cv.replace(/^/, "<pre><code>"); cv = cv.replace(/$/, "</code></pre>"); ctarea.value = cv; ctarea.focus(); ctarea.select();} }; function spoilerConvert() { var ctarea = document.getElementById('codes'), cv = ctarea.value, opt13 = document.getElementById('opt13') cv = cv.replace(/\t/g, " "); if (opt13.checked) {cv = cv.replace(/^/, "<spoiler>"); cv = cv.replace(/$/, "</spoiler>"); ctarea.value = cv; ctarea.focus(); ctarea.select();} }; function strongConvert() { var ctarea = document.getElementById('codes'), cv = ctarea.value, opt6 = document.getElementById('opt6') cv = cv.replace(/\t/g, " "); if (opt6.checked) {cv = cv.replace(/^/, "<strong>"); cv = cv.replace(/$/, "</strong>"); ctarea.value = cv; ctarea.focus(); ctarea.select();} }; function emConvert() { var ctarea = document.getElementById('codes'), cv = ctarea.value, opt7 = document.getElementById('opt7') cv = cv.replace(/\t/g, " "); if (opt7.checked) {cv = cv.replace(/^/, "<em>"); cv = cv.replace(/$/, "</em>"); ctarea.value = cv; ctarea.focus(); ctarea.select();} }; function uConvert() { var ctarea = document.getElementById('codes'), cv = ctarea.value, opt8 = document.getElementById('opt8') cv = cv.replace(/\t/g, " "); if (opt8.checked) {cv = cv.replace(/^/, "<u>"); cv = cv.replace(/$/, "</u>"); ctarea.value = cv; ctarea.focus(); ctarea.select();} }; function strikeConvert() { var ctarea = document.getElementById('codes'), cv = ctarea.value, opt9 = document.getElementById('opt9') cv = cv.replace(/\t/g, " "); if (opt9.checked) {cv = cv.replace(/^/, "<strike>"); cv = cv.replace(/$/, "</strike>"); ctarea.value = cv; ctarea.focus(); ctarea.select();} }; function embedConvert() { var ctarea = document.getElementById('codes'), cv = ctarea.value, opt20 = document.getElementById('opt20') cv = cv.replace(/\t/g, " "); if (opt20.checked){ cv = cv.replace(/^/, "<iframe src=\"https://embed.disqus.com/p/"); cv = cv.replace(/$/, "\" style=\"border:0;width:100%;height:300px;\" seamless=\"seamless\" scrolling=\"no\" allowtransparency=\"true\"><\/iframe>"); ctarea.value = cv; ctarea.focus(); ctarea.select();} }; function cdConvert() { var ctarea = document.getElementById('codes2'), cv = ctarea.value, opt14 = document.getElementById('opt14'), opt15 = document.getElementById('opt15'), opt16 = document.getElementById('opt16'), opt17 = document.getElementById('opt17'), opt18 = document.getElementById('opt18') cv = cv.replace(/\t/g, " "); if (opt14.checked) cv = cv.replace(/&/g, "&"); if (opt15.checked) cv = cv.replace(/'/g, "'"); if (opt16.checked) cv = cv.replace(/"/g, """); if (opt17.checked) cv = cv.replace(/</g, "<"); if (opt18.checked) cv = cv.replace(/>/g, ">"); if (cv.lastIndexOf('\n') != -1 || cv.length > 40) { cv = cv.replace(/^/, "<i rel=\"pre\">"); } else { cv = cv.replace(/^/, "<i rel=\"code\">"); }; cv = cv.replace(/$/, "</i>"); ctarea.value = cv; ctarea.focus(); ctarea.select(); }; function imgConvert() { var ctarea = document.getElementById('codes2'), cv = ctarea.value, opt19 = document.getElementById('opt19') cv = cv.replace(/\t/g, " "); if (opt19.checked){ cv = cv.replace(/^/, "<i rel=\"image\">"); cv = cv.replace(/$/, "</i>"); ctarea.value = cv; ctarea.focus(); ctarea.select();} }; </script> </body> </html>Baiklah sahabat ini saja yang mampu aku bagikan untuk terus mengikuti updated Blog ini sahabat mampu follow dan jikalau dirasa manfaat aku izinkan untuk menshare nya jadi kita mampu membantu sobat-sobat blogger yang lainnya juga, terima kasih sudah berkunjung.
Comments