Saya pernah share cara menciptakan parser disqus comments button diatas kolom komentar dengan imbas show hide, sebab aku merasa sedikit yang menggunakannya maka aku berinisiatif untuk memindahkannya ke halaman statis semoga tidak mempengaruhi loading pada semua pengunjung blog. Gampangnya pengunjung yang tidak memakai tombol parser tidak mencicipi imbas loading tersebut, dan hanya yang ingin menggunakannya yang akan dialihkan ke halaman statis.
Bagaimana ingin mencoba memasang parser disqus comment di halaman statis? Silahkan copas instruksi berikut ini pada halaman statis yang sudah dibuat:
<style>
.btn,.mata,.parser,button{cursor:pointer}
.parser{float:left}
.checkbox{font:11px Tahoma,Verdana,Arial,Sans-Serif;line-height:1.6em;color:#eee;display:none}
#codes,#codes2{border:1px solid #ddd;width:100%;height:150px;display:block;background-color:#efefef;border-radius:3px;font:400 12px 'Courier New',Monospace;margin:7px 0 10px;padding:5px;box-sizing:border-box}
#opt1,#opt2,#opt3,#opt4,#opt5,.btn,.parser{display:inline-block;vertical-align:middle}
#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-group span{font:14px Tahoma,Verdana,Arial,Sans-Serif;vertical-align:2px;line-height:1;color:#555}
#opt1,#opt2,#opt3,#opt4,#opt5{border:none;outline:0;margin:0 10px 0 0}
#opt10,#opt11,#opt12,#opt13,#opt14,#opt15,#opt16,#opt17,#opt18,#opt19,#opt20,#opt6,#opt7,#opt8,#opt9{display:inline-block;vertical-align:middle;border:none;outline:0;margin:0}
.checkbox span{font:14px Tahoma,Verdana,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,.parser a{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-xs,.parser{font-size:12px;line-height:1.5;border-radius:3px;padding:1px 5px}
#konversi-pesan,#parser{display:block}
#parser{padding:0;margin:5px 0}
input.button-parse{padding:5px}
.strike{text-decoration:line-through}
.mata{float:right;padding-top:1px}
.clear{clear:both}
</style>
<div id='parser'>
<textarea id='codes' placeholder='Tulis/paste instruksi atau teks di sini lalu klik tombol yang sesuai.' 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>
<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/>
</span>
</div>
<script>
function cdClear(){var e=document.getElementById("codes");e.value="",e.focus();for(var t=document.querySelectorAll("#cvrt3, #cvrt4, #cvrt5, #cvrt6, #cvrt7, #cvrt8, #cvrt9, #cvrt10, #cvrt11"),c=0;c<t.length;c++)t[c].disabled=!1}function preConvert(){var e=document.getElementById("codes"),t=e.value,c=document.getElementById("opt1"),l=document.getElementById("opt2"),o=document.getElementById("opt3"),n=document.getElementById("opt4"),d=document.getElementById("opt5"),r=document.getElementById("opt10");t=t.replace(/\t/g," "),r.checked&&(c.checked&&(t=t.replace(/&/g,"&")),l.checked&&(t=t.replace(/'/g,"'")),o.checked&&(t=t.replace(/"/g,""")),n.checked&&(t=t.replace(/</g,"<")),d.checked&&(t=t.replace(/>/g,">")),t=t.replace(/^/,"<pre>"),t=t.replace(/$/,"</pre>"),e.value=t,e.focus(),e.select())}function codeConvert(){var e=document.getElementById("codes"),t=e.value,c=document.getElementById("opt1"),l=document.getElementById("opt2"),o=document.getElementById("opt3"),n=document.getElementById("opt4"),d=document.getElementById("opt5"),r=document.getElementById("opt11");t=t.replace(/\t/g," "),r.checked&&(c.checked&&(t=t.replace(/&/g,"&")),l.checked&&(t=t.replace(/'/g,"'")),o.checked&&(t=t.replace(/"/g,""")),n.checked&&(t=t.replace(/</g,"<")),d.checked&&(t=t.replace(/>/g,">")),t=t.replace(/^/,"<code>"),t=t.replace(/$/,"</code>"),e.value=t,e.focus(),e.select())}function precodeConvert(){var e=document.getElementById("codes"),t=e.value,c=document.getElementById("opt1"),l=document.getElementById("opt2"),o=document.getElementById("opt3"),n=document.getElementById("opt4"),d=document.getElementById("opt5"),r=document.getElementById("opt12");t=t.replace(/\t/g," "),r.checked&&(c.checked&&(t=t.replace(/&/g,"&")),l.checked&&(t=t.replace(/'/g,"'")),o.checked&&(t=t.replace(/"/g,""")),n.checked&&(t=t.replace(/</g,"<")),d.checked&&(t=t.replace(/>/g,">")),t=t.replace(/^/,"<pre><code>"),t=t.replace(/$/,"</code></pre>"),e.value=t,e.focus(),e.select())}function spoilerConvert(){var e=document.getElementById("codes"),t=e.value,c=document.getElementById("opt13");t=t.replace(/\t/g," "),c.checked&&(t=t.replace(/^/,"<spoiler>"),t=t.replace(/$/,"</spoiler>"),e.value=t,e.focus(),e.select())}function strongConvert(){var e=document.getElementById("codes"),t=e.value,c=document.getElementById("opt6");t=t.replace(/\t/g," "),c.checked&&(t=t.replace(/^/,"<strong>"),t=t.replace(/$/,"</strong>"),e.value=t,e.focus(),e.select())}function emConvert(){var e=document.getElementById("codes"),t=e.value,c=document.getElementById("opt7");t=t.replace(/\t/g," "),c.checked&&(t=t.replace(/^/,"<em>"),t=t.replace(/$/,"</em>"),e.value=t,e.focus(),e.select())}function uConvert(){var e=document.getElementById("codes"),t=e.value,c=document.getElementById("opt8");t=t.replace(/\t/g," "),c.checked&&(t=t.replace(/^/,"<u>"),t=t.replace(/$/,"</u>"),e.value=t,e.focus(),e.select())}function strikeConvert(){var e=document.getElementById("codes"),t=e.value,c=document.getElementById("opt9");t=t.replace(/\t/g," "),c.checked&&(t=t.replace(/^/,"<strike>"),t=t.replace(/$/,"</strike>"),e.value=t,e.focus(),e.select())}
</script>Praktis bukan??? Selamat mencoba...
No comments:
Post a Comment