-->

Home Amp Blogger Github Cara menampilkan parse tool untuk komentar disqus pada blog AMP

Cara menampilkan parse tool untuk komentar disqus pada blog AMP

Wi March 07, 2017

Cara menampilkan parse tool untuk komentar disqus pada blog AMP, Kang Adhy ternyata berhasil juga dengan menggunakan amp-iframe dengan menghosting HTML parse tool di Github. Ini berguna jika blog sobat merupakan blog tutorial atau blog yang memposting koding, sehingga akan lebih mudah ketika menjelaskan atau menampilkan koding di kolom komentar Disqus atau untuk mempermudah pengunjung untuk membuat style text pada komentar Disqus.

Jika Anda ingin mencobanya juga di blog AMP sobat, silahkan ikuti langkah-langkahnya di bawah ini.

Langkah Pertama

Simpan CSS di bawah ini di bagian style amp-custom untuk item untuk tampilan desktop dan mobile.

.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}

Langkah Kedua

Cari kode di bawah ini

<b:includable id='disqus-comment' var='post'>
................
................
................
</b:includable>

Dan silahkan simpan kode HTML ini di bawah kode tadi (jika sudah ada, silahkan ganti dengan 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>&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>
<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://rawgit.com/darwinisrin/parser-code/master/parser-code.html' width='747'>
</amp-iframe>
  </div>
</section>
  </amp-accordion>
<div class='clear'/>
</div>
</b:includable>

Langkah Ketiga

Silahkan simpan kode di bawah ini di atas kode komentar Disqus

<b:include data='post' name='pesan-komentar'/>
<div class='clear'/>

Jadi penampilannya menjadi seperti di bawah ini

<b:includable id='disqus-comment' var='post'>
<b:include data='post' name='pesan-komentar'/>
<div class='clear'/>
................
................
................
            </b:includable>

Dan terakhir pastikan blog AMP Anda sudah menggunakan js amp-accordion untuk show hide parse tool nya seperti di bawah ini.

Selesai.... sekarang silahkan lihat di postingan di atas komentar Disqus.

Baca juga : Cara Membuat Google Form untuk Contact Form di Blog AMP

Jika Anda ingin menyimpan atau memodifikasi sendiri HTML parse tool nya, silahkan gunakan kode di bawah ini

<!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;display:inline;}
#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}
.collapse{display:none}
#parser{position:relative}
.alert-success {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}
.alert {
    padding: 15px;
    border: 1px solid transparent;
    border-radius: 4px;
    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:none;
}
.close:hover{opacity:1!important}
#btnInfo h4{margin:0}
#button-link{display:none}
</style>
</head>
<body>

<div id='parser'>
<textarea id='codes' 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'></textarea>
<div class='alert alert-success margin-bottom-20 collapse' id='btnInfo' role='alert'>
        <button class='close close-copy' onclick='document.getElementById(&quot;btnInfo&quot;).style.display = &quot;none&quot;;cdClear();' 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPaPVRsgo9Wq2_O2EWz0mFeZPaAOp2asFyIe_o__E3OWRz-6A8MNaOCLrGQIR1xtG06C38y-9mVE_R7WCmYADD915H24nE5ae9DLIjNz80TO2DYYk7SxwBVntJEGVA-tYkDgzkbI5yy430/s1600/Animation2.gif' rel='nofollow' target='_blank' title='Lihat di sini'>http://disq.us/p/[ID DISQUS]</a></span><br/>
<button class='btn button-link btn-xs btn-info' id='button-link' data-clipboard-action='copy' data-clipboard-target='#codes' type='submit'>Copy codes to clipboard!</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/>
  <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,document.getElementById("btnInfo")
        .style.display = "none",document.getElementById("button-link")
        .style.display = "none"
}
}

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, "&amp;");
  if (opt2.checked) cv = cv.replace(/'/g, "&#039;");
  if (opt3.checked) cv = cv.replace(/"/g, "&quot;");
  if (opt4.checked) cv = cv.replace(/</g, "&lt;");
  if (opt5.checked) cv = cv.replace(/>/g, "&gt;");
  cv = cv.replace(/^/, "<pre>");
      cv = cv.replace(/$/, "</pre>");
  ctarea.value = cv;
  ctarea.focus();
  document.getElementById("button-link")
        .style.display = "inline-block"}
};
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, "&amp;");
  if (opt2.checked) cv = cv.replace(/'/g, "&#039;");
  if (opt3.checked) cv = cv.replace(/"/g, "&quot;");
  if (opt4.checked) cv = cv.replace(/</g, "&lt;");
  if (opt5.checked) cv = cv.replace(/>/g, "&gt;");
  cv = cv.replace(/^/, "<code>");
      cv = cv.replace(/$/, "</code>");
  ctarea.value = cv;
  ctarea.focus();
  document.getElementById("button-link")
        .style.display = "inline-block"}
};
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, "&amp;");
  if (opt2.checked) cv = cv.replace(/'/g, "&#039;");
  if (opt3.checked) cv = cv.replace(/"/g, "&quot;");
  if (opt4.checked) cv = cv.replace(/</g, "&lt;");
  if (opt5.checked) cv = cv.replace(/>/g, "&gt;");
  cv = cv.replace(/^/, "<pre><code>");
      cv = cv.replace(/$/, "</code></pre>");
  ctarea.value = cv;
  ctarea.focus();
  document.getElementById("button-link")
        .style.display = "inline-block"}
};
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();
  document.getElementById("button-link")
        .style.display = "inline-block"}
};
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();
  document.getElementById("button-link")
        .style.display = "inline-block"}
};
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();
  document.getElementById("button-link")
        .style.display = "inline-block"}
};

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();
  document.getElementById("button-link")
        .style.display = "inline-block"}
};
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();
  document.getElementById("button-link")
        .style.display = "inline-block"}
};
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();
  document.getElementById("button-link")
        .style.display = "inline-block"}
};
</script>
<script src='https://cdn.rawgit.com/zenorocha/clipboard.js/v1.5.16/dist/clipboard.min.js'></script>
<script>
//<![CDATA[
var clipboard = new Clipboard(".button-link");
clipboard.on("success", function (o) {
    console.log(o), document.getElementById("btnInfo")
        .style.display = "block", document.getElementById("codes")
        .value = ""
}), clipboard.on("error", function (o) {
    console.log(o)
});
//]]>
</script>
</body>
</html>

Sumber : Kompiajaib

Darwin Isrin

Pencinta Malam, Penyuka Hitam, Penikmat Gelap dan Pengurus Acara 😃

Amp, Blogger, Github

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 Hide Parser

Tambahkan Komentar Tutup Komentar

Disqus Comments