Skip to main content
Privacy • Sitemap
©2023 KOMPI AJAIB
HomeAMPBloggerHTML5TrikWidgetPesan Dan Parse Tool Untuk Komentar Disqus Pada Blog AMP

Pesan Dan Parse Tool Untuk Komentar Disqus Pada Blog AMP

Ditulis oleh: Adhy Suryadi
Ditulis pada: 11/12/2016

Berawal dari coba-coba untuk menampilkan parse tool untuk komentar disqus pada blog AMP, ternyata berhasil juga dengan menggunakan amp-iframe dengan menghosting HTML parse tool di Github.

Ini berguna jika blog Anda 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.

Demo parse tool-nya pada template AMP khusus untuk Kompi Ajaib, jadi jangan tanya apakah template-nya dibagikan atau tidak hehehe.... Silahkan coba tool-nya di atas komentar Disqus.

Demo Parse Tool

Jika Anda ingin mencobanya juga di blog AMP Anda, 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://cdn.rawgit.com/KompiAjaib/kompi-html/master/parser-codes.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.


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

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

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

#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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNhKNL4L4j_aiHx-PCvK8Axd27OPz20NTA3u_cjDKoBRDcm052P8KAiSytDSoKwp6d4r7F_MqJp-iDgOGgbWyIrqzIwCky8aiIgeHHkz8YLq9LLgcw_1qsPdMxjTG-rTParn6b8JAe5c0x/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>


Berbagi itu peduli:

Comment Policy:

Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui. Untuk komentar out of topics silahkan masuk ke Forum Kompi Ajaib
Buka Komentar
Buka Komentar
Jangan Diklik!

Menarik Untuk Dibaca Juga:


slot gacor joker123 sultan69 panenslot panen77 Panengg panenslot slot gacor Panen138 kenzo123 panenslot panenslot login panen138 panen77 linuxmagazines.com panen77 sublimelody.com http://103.146.203.79/ https://panenslot.shop/ panenslot panen77 Dewi138 Panen99 sbobet casino online mahjong ways 2 jawatogel kpk88 slot gacor betgratis
Iklan oleh KompiAjaib

Privacy • Sitemap
©2021 KOMPI AJAIB