Cara Membuat Pesan Dan Tombol Parse di Komentar Disqus Pada Blog AMP

Cara Membuat Pesan Dan Tombol Parse di Komentar Disqus Pada Blog AMP

Cara Membuat Pesan Dan Tombol Parse di Komentar Disqus Pada Blog AMP

Pada pesan dan tombol parse ini efektif untuk blog tutorial atau blog yang memposting koding, sehingga akan lebih mudah saat menjelaskan atau menampilkan koding di kolom komentar Disqus atau untuk mempermudah pengunjung untuk membuat style text pada komentar Disqus.
Cara Membuat Pesan Dan Tombol Parse di Komentar Disqus Pada Blog AMP

Berikut langkahnya,

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


2. Cari kode di bawah ini

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

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://cdn.rawgit.com/KompiAjaib/kompi-html/master/parser-codes.html' width='747'>
</amp-iframe>
  </div>
</section>
  </amp-accordion>
<div class='clear'/>
</div>
</b:includable>

3. Silahkan simpan kode di bawah ini di atas kode komentar Disqus

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

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

<script async='async' custom-element='amp-accordion' src='https://cdn.ampproject.org/v0/amp-accordion-0.1.js'/>

Selesai....


Jika ingin menyimpan atau memodifikasi 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;}
#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 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>
<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 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, "&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();
  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, "&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();
  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, "&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();
  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, "&amp;");
  if (opt15.checked) cv = cv.replace(/'/g, "&#039;");
  if (opt16.checked) cv = cv.replace(/"/g, "&quot;");
  if (opt17.checked) cv = cv.replace(/</g, "&lt;");
  if (opt18.checked) cv = cv.replace(/>/g, "&gt;");
  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>

Demikianlah cara membuat pesan dan tombol parse di komentar Disqus pada blog AMP. Selamat mencoba.

sumber code : www.kompiajaib.com/2016/11/pesan-dan-parse-tool-untuk-komentar.html

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Blogger
Disqus
Pilih Sistem Komentar Yang Disukai

3 Comments Add Comment

Sudah ada solusinya ternya. Terimaoasih mas sudah membagikan triknya

Balas

oke, sama-sama mas.. :-bd

Balas

Kalau nurut saya kodenya masih terlalu panjang. Bisa memberatkan loading blog. Jika nggak perlu2 amat sebaiknya dihindari saja. Atau sederhanakan lagi kodenya.

Balas
Add Comment

Berkomentarlah dengan baik, Kepribadian anda tercemin saat berkomentar.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
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

Like CIDOSHARE? Keep us running by whitelisting CIDOSHARE in your ad blocker.

This is how to whitelisting CIDOSHARE in your ad blocker.

Thank you!

×
×
×