Blog mới của Nguyễn Lâm Blog. Welcome
Home
Blogger
Tutorial

Thêm Parse Tool Vào Bình Luận Median UI

them-parse-tool-vao-binh-luan-median-ui

 Xin chào các bạn, hôm nay mình sẽ hướng dẫn cho các bạn thêm Parse Tool (Công cụ phân tích cú pháp) vào bình luận blogger.

Trước đây, ở template Median UI v1.4, người thiết kế đã thêm tính năng này vào trên bình luận của template đó nhưng sau khi cập nhật phiên bản Median UI v1.5 thì người thiết kế template này đã ẩn nó đi. Bạn vẫn dùng được nhưng sẽ không có các mẫu bình luận như trước đây cho bạn copy xuống. Phía dưới là hình demo về bình luận của Median UI v1.4.

comment-median-ui-ban-cu
Comment Median UI v1.4 (bản cũ)

Ở phiên bản Median UI v1.5, sẽ không thấy mẫu bình luận phân tích cú pháp như phiên bản trước, cho nên ở bài viết này mình sẽ hướng dẫn thêm vào nhé.

Cách Thêm Parse Tool Vào Bình Luận Median UI

Để thêm Parse Tool vào bình luận Median UI v1.5, các bạn hãy làm theo các bước sau:

Bước 1: Truy cập vào Blogger.com.

Bước 2: Vào Chủ đề và chọn Chỉnh sửa HTML.

Bước 3: Ấn tổ hợp Ctrl + F để tìm đến ]]></b:skin>, hãy dán CSS bên dưới lên trước nó. 

/* Variable Warna */
:root{
--main-btn-color: #f09800;
--copy-btn-color: #c16c6c;
--clean-btn-color: #7687b7;
--font-name: 'Noto Sans', sans-serif;
}

/* Komentar Fitur */
#cm-menu{position:relative;font-family:var(--font-name);font-size:14px;background:#fff;border-radius:4px;padding:20px 20px 85px;color:#333;margin: 0 0 20px -2px;line-height:1.5em;box-shadow:0 6px 18px 0 rgba(9,32,76,.075)}
#cm-menu:before{content:'';display:block;border:11px solid;border-color:#fff transparent transparent transparent;position:absolute;bottom:-22px;left:31px}
.bbcode a{color:var(--main-btn-color)}
.bbcode ul{border:1px solid #ededef;padding:10px;border-radius:4px;margin-top:20px;line-height:1.5em}
.bbcode ul li{border-bottom:1px dashed #ededef;padding:10px 0;margin-bottom:0}
.bbcode ul li:last-child{border-bottom:none}
.bbcode ul li a{display:inline-block;color:var(--main-btn-color);cursor:pointer}
.bbcode ul li b.linkz{color:var(--main-btn-color)}
.cmbutton{display:grid;grid-template-columns:1fr 1fr;width:calc(100% - 40px);margin-top:25px;position:absolute;bottom:20px}
.cmbutton1{border-bottom-left-radius:4px}
.cmbutton2{border-bottom-right-radius:4px}
.cmbutton-title{padding:10px;border-top:5px solid #e8e8e8;display:block;text-align:center}
.cmbutton label{display:block;cursor:pointer}
.cm-menus1:checked ~ .cmbutton .cmbutton1 .cmbutton-title, .cm-menus2:checked ~ .cmbutton .cmbutton2 .cmbutton-title{border-top:5px solid var(--main-btn-color)}
.cm-menus1:checked ~ .bbcode{display:none}
.cm-menus2:checked ~ .pesan-komen{display:none}
.cm-menus1:checked ~ .cmbutton .cmbutton1, .cm-menus2:checked ~ .cmbutton .cmbutton2{background:rgba(23,191,99,.07)}

#comment-content pre, #comment-content i[rel="pre"]{padding:15px;font-size:12px;margin:0;overflow-x:auto;white-space:pre;display:block;color:#e0d072;background:#262a2d;user-select:text;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text}
#comment-content code, #comment-content i[rel="code"]{padding:2px 4px;background-color:#f1f1f1;color:#e6472e;border-radius:2px;font-family:'Fira Mono',monospace;font-size:12px;display:inline;line-height:1.8em}
#comment-content blockquote, #comment-content b[rel="quote"]{margin:0;padding:15px;border:1px dashed #ededef;border-radius:4px;font-size:13px;font-style:italic}
#comment-content img{border-radius:4px}

/* Comment Parse Tools */
#parser{position:relative;margin-top:20px}
#codes{border:1px solid #ededef;width:100%;height:150px;display:block;background-color:#fafafa;border-radius:4px;font:400 11px 'Fira Mono',monospace;resize:none;margin:0 0 10px;padding:10px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;box-shadow:none}
#codes:active,#codes:focus{background-color:#f5f5f5;color:#444;outline:0}
.btn-xs{font-family:var(--font-name);font-size:12px;line-height:1.5;border-radius:2px;padding:1px 5px;border:none;color:#fff;outline:0;cursor:pointer}
.btn-primary{background-color:var(--main-btn-color);margin-bottom: 10px;}
.btn-primary:active, .btn-primary:hover, .parser:active, .parser:hover, .btn-primary:focus, .button-group button:disabled, .parser:focus{opacity:.9}
.btn-danger{background-color:var(--clean-btn-color)}
.btn-danger:active, .btn-danger:hover{opacity:.9}
.btn-info{background-color:var(--copy-btn-color)}
.btn-info:active, .btn-info:hover{opacity:.9}
.alert{padding:6px;border-radius:4px;position:absolute;top:10px;right:10px;min-width:100px}
.alert span{font-size:12px}
.alert-success{color:#3c763d;background-color:rgba(215,236,206,.58)}
.closer{float:right;margin-top:3px;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.2;padding:0;cursor:pointer;background:0 0;border:0;-webkit-appearance:none;line-height:1}
.checkbox{display:none}

/* Dark Mode silakan sesuaikan classnya jika berbeda atau bisa di hapus bagian ini */
.darkMode .cmbutton-title{border-top:5px solid #1f1f1f}
.darkMode .cm-menus1:checked ~ .cmbutton .cmbutton1, .darkMode .cm-menus2:checked ~ .cmbutton .cmbutton2{background:rgba(0,0,0,.07)}
.darkMode .post #codes{border:1px solid #3a3b3c;background-color:#1f1f1f}
.darkMode .post #codes:active,.darkMode #codes:focus{background-color:#18191a;color:inherit;outline:0}
.darkMode .post .alert-success{color:#989b9f;background-color:rgba(51,53,56,.60)}
.darkMode .post .closer{color:#fff;text-shadow:0 1px 0 #fff}
.darkMode #cm-menu{background:#242526;color:#c6c9ce;box-shadow:0 6px 18px 0 rgba(23,23,26,0.02)}
.darkMode .bbcode ul,.darkMode .bbcode ul li{border-color:rgba(255,255,255,.1)}
.darkMode #cm-menu:before{border-color:#292a2b transparent transparent transparent}
.darkMode #codes,darkMode #codes:active,.darkMode #codes:focus{border:1px solid #3a3b3c;background-color:#1f1f1f;color:#fefefe}

Ngoài ra, bạn có thể thêm CSS ở trên thẻ </head> như sau.

  <style>
    <!--[ Thay Thành CSS ]-->
  </style>
</head>

Bước 4: Tiếp theo hãy Ctrl + F và tìm đến thẻ <div id='threaded-comment-form'>, các bạn hãy sao chép HTML ở dưới và dán vào dưới thẻ <div id='threaded-comment-form'>. 

<div id='cm-menu'>
<input checked='' class='cm-menus1 hidden' id='offcm-menu1' name='accordion-menu' type='radio'/>
<input class='cm-menus2 hidden' id='offcm-menu2' name='accordion-menu' type='radio'/>
<div class='cmbutton'>
<div class='cmbutton1'>
<label class='cmbutton-title' for='offcm-menu1'>Comment Messages</label>
</div>
<div class='cmbutton2'>
<label class='cmbutton-title' for='offcm-menu2'>Media +</label>
</div>
</div>
<div class='pesan-komen'>
Put In <b><a href='https://imgbb.com/upload' rel='nofollow noopener noreffer' target='_blank' title='Upload Gambar di Sini'>Image URL</a></b> or <b>Code Snippet</b>, And <b>Quote</b>, then click the button you want to parse. Copy the parse result and paste it into the comments field.
</div>
<div class='bbcode'>
Put In <b><a href='https://imgbb.com/upload' rel='nofollow noopener noreffer' target='_blank' title='Upload Gambar di Sini'>Image URL</a></b> or <b>Code Snippet</b>, And <b>Quote</b>, then click the button you want to parse. Copy the parse result and paste it into the comments field.
<div id='parser'>
<textarea id='codes' placeholder='Masukkan kode / url_gambar lalu klik tombol di bawah ini untuk di parse' spellcheck='false'/>
<div class='alert alert-success margin-bottom-20 collapse' id='btnInfo' role='alert' style='display: none;'>
<button class='closer close-copy' onclick='document.getElementById(&quot;btnInfo&quot;).style.display = &quot;none&quot;;cdClear();' type='button'><span aria-hidden='true'>&#215;</span></button>
<span>Copy Code</span>
</div>
<span class='button-group'>
<button class='btn btn-primary btn-xs' id='cvrt3' onclick='imgConvert();this.disabled = true;'>image</button>
<button class='btn btn-primary btn-xs' id='cvrt4' onclick='preConvert();this.disabled = true;'>pre</button>
<button class='btn btn-primary btn-xs' id='cvrt5' onclick='codeConvert();this.disabled = true;'>code</button>
<button class='btn btn-primary btn-xs' id='cvrt7' onclick='quoteConvert();this.disabled = true;'>quote</button><br/>
<button class='btn button-link btn-xs btn-info' data-clipboard-action='copy' data-clipboard-target='#codes' id='button-link' style='display: none;' type='submit'>Copy Code</button>
<button class='btn btn-danger btn-xs' onclick='cdClear();'>Clear Text</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>image</span>
<input checked='' id='opt7' type='checkbox'/>
<span>quote</span>
<input checked='' id='opt8' type='checkbox'/>
<span>pre</span>
<input checked='' id='opt9' type='checkbox'/>
<span>code</span>
</span>
<div class='clear'/>
</div>
</div>
</div>

Bước 5: Đi đến thẻ </body> hoặc &lt;!--</body>--&gt;&lt;/body&gt; và dán JavaScript bên dưới lên trên thẻ đó nhé. 

<script src='https://cdn.jsdelivr.net/gh/nguyenlamblog/nguyenlamblog.xyz@5cbf666/JS/clipboard.min.js'/>
<script>
//<![CDATA[
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,document.getElementById("btnInfo").style.display="none",document.getElementById("button-link").style.display="none"}function preConvert(){var e=document.getElementById("codes"),t=e.value,c=document.getElementById("opt1"),l=document.getElementById("opt2"),n=document.getElementById("opt3"),o=document.getElementById("opt4"),d=document.getElementById("opt5"),u=document.getElementById("opt8");t=t.replace(/\t/g,"    ");u.checked&&(c.checked&&(t=t.replace(/&/g,"&amp;")),l.checked&&(t=t.replace(/'/g,"&#039;")),n.checked&&(t=t.replace(/"/g,"&quot;")),o.checked&&(t=t.replace(/</g,"&lt;")),d.checked&&(t=t.replace(/>/g,"&gt;")),t=(t=t.replace(/^/,"<i rel='pre'>")).replace(/$/,"</i>"),e.value=t,e.focus(),document.getElementById("button-link").style.display="inline-block")}function codeConvert(){var e=document.getElementById("codes"),t=e.value,c=document.getElementById("opt1"),l=document.getElementById("opt2"),n=document.getElementById("opt3"),o=document.getElementById("opt4"),d=document.getElementById("opt5"),u=document.getElementById("opt9");t=t.replace(/\t/g,"    ");u.checked&&(c.checked&&(t=t.replace(/&/g,"&amp;")),l.checked&&(t=t.replace(/'/g,"&#039;")),n.checked&&(t=t.replace(/"/g,"&quot;")),o.checked&&(t=t.replace(/</g,"&lt;")),d.checked&&(t=t.replace(/>/g,"&gt;")),t=(t=t.replace(/^/,"<i rel='code'>")).replace(/$/,"</i>"),e.value=t,e.focus(),document.getElementById("button-link").style.display="inline-block")}function imgConvert(){var e=document.getElementById("codes"),t=e.value,c=document.getElementById("opt6");t=t.replace(/\t/g,"    ");c.checked&&(t=(t=t.replace(/^/,"<i rel='img'>")).replace(/$/,"</i>"),e.value=t,e.focus(),document.getElementById("button-link").style.display="inline-block")}function quoteConvert(){var e=document.getElementById("codes"),t=e.value,c=document.getElementById("opt7");t=t.replace(/\t/g,"    ");c.checked&&(t=(t=t.replace(/^/,"<b rel='quote'>")).replace(/$/,"</b>"),e.value=t,e.focus(),document.getElementById("button-link").style.display="inline-block")}var clipboard=new Clipboard(".button-link");clipboard.on("success",function(e){console.log(e),document.getElementById("btnInfo").style.display="block",document.getElementById("codes").value=""}),clipboard.on("error",function(e){console.log(e)}); function repText(id) {var a = document.getElementById(id); if (!a) return; var b = a.innerHTML; b = b.replace(/<i rel="img">(.*?)<\/i>/ig, "<img class='lazy cm-image' data-src='$1' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=' alt='loading...' \/>"); b = b.replace(/<i rel="pre">(.*?)<\/i>/ig, "<pre><code>$1<\/code><\/pre>"); b = b.replace(/<i rel="code">(.*?)<\/i>/ig, "<pre><code>$1<\/code><\/pre>"); b = b.replace(/<b rel="quote">(.*?)<\/b>/ig, "<blockquote>$1<\/blockquote>"); a.innerHTML = b;} repText('comment-holder');
///]]>
</script>

Kết Luận

Vậy là mình đã hướng dẫn cho các bạn xong cách Thêm Parse Tool Vào Bình Luận Median UI rồi. Nếu có vấn đề gì với hướng dẫn trên thì hãy comment bên dưới cho mình biết nhé.

Post a Comment