Pesan Dan Parse Tool Untuk Komentar Disqus Pada Blog Amp
Berawal dari coba-coba untuk menampilkan parse tool untuk komentar disqus pada blog AMP, ternyata berhasil juga dengan memakai amp-iframe dengan menghosting HTML parse tool di Github.Ini mempunyai kegunaan bila blog Anda merupakan blog tutorial atau blog yang memposting koding, sehingga akan lebih gampang dikala menjelaskan atau menampilkan koding di kolom komentar Disqus atau untuk mempermudah pengunjung untuk menciptakan 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.
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 instruksi di bawah ini <b:includable id='disqus-comment' var='post'>
................
................
................
</b:includable>
Dan silahkan simpan instruksi HTML ini di bawah instruksi 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>&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>
Langkah Ketiga
Silahkan simpan instruksi di bawah ini di atas instruksi komentar Disqus <b:include data='post' name='pesan-komentar'/>
<div class='clear'/>
Kaprikornus penampilannya menjadi ibarat 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 memakai js amp-accordion untuk show hide parse tool-nya ibarat di bawah ini.
<script async='async' custom-element='amp-accordion' src='https://cdn.ampproject.org/v0/amp-accordion-0.1.js'/>
Selesai.... kini silahkan lihat di postingan di atas komentar Disqus.
Jika Anda ingin menyimpan atau memodifikasi sendiri HTML parse tool-nya, silahkan gunakan instruksi 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 instruksi atau teks di sini kemudian 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/AVvXsEgYgxAcm1qKfTXyAIk9RTX5kV2ZFJGbCcNb1awoyOxw99H-8UIBnH3QwBp6ygG0Z_7wmnwswAJus563m1IvtHTe9rIllu2Q3al5KWZKve307n5Sp913qF2GcOvN2LjYoaoPHLVE2TdqXtez/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>
Sumber https://www.kompiajaib.com/
0 Response to "Pesan Dan Parse Tool Untuk Komentar Disqus Pada Blog Amp"
Posting Komentar