Hướng Dẫn Thêm Công Cụ Phương Tiện Vào Comment Cho Blogspot

Hello xin chào tất cả đã quay trở lại Blog của mình. Hôm nay mình sẽ hướng dẫn các bạn thêm công cụ phương tiện vào comment cho Blogspot. Công cụ này chắc chắn sẽ hữu ích với blog của bạn đó. Nhưng nó chỉ hỗ cho Median UI Template. Tuy nhiên bạn cũng có thể thử cho các phiên bản khác nhé.

Các bước thêm công cụ phương tiện vào comment cho Blogspot

/* Comment Features Added By Quanginhchiase.com */
#cm-menu{position:relative;font-family:var(--font-body);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(--link-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(--link-color);cursor:pointer}
.bbcode ul li b.linkz{color:var(--link-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(--link-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)}

/* Because in This Version 1.5 Yhere is No This Css So I Added it So That <i rel="code"></i>  Can Worked */
.commentContent i[rel="code"]:before{content:'</>';position:absolute;right:0;top:0;color:var(--highlight-comment);font-size:10px;padding:0 10px;z-index:2;line-height:35px}
.commentContent i[rel="code"]{display:block;white-space:pre; font-size:.8rem; position:relative;width:100%; border-radius:2px;background-color:var(--highlight-bg);color:var(--highlight-color); padding:20px;margin:25px auto; -moz-tab-size:2;-o-tab-size:2;tab-size:2;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;overflow:auto; font-family:var(--font-code);line-height:1.6em}
.darkMode .commentContent i[rel="code"]{background-color:rgba(0,0,0,.09);color:var(--dark-textAlt)}
.commentContent i[rel="code"]{margin:1.2em auto; font-style:normal}

/* Comment Parse Tool Added By Quanginhchiase.com */
#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(--link-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:#7687b7}
.btn-danger:active, .btn-danger:hover{opacity:.9}
.btn-info{background-color:#c16c6c}
.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 Css By Quanginhchiase.com */
.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:var(--dark-text)}

<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'>Bình luận</label>
</div>
<div class='cmbutton2'>
<label class='cmbutton-title' for='offcm-menu2'>Phương tiện +</label>
</div>
</div>
<div class='pesan-komen'>
  Để lại bình luận theo chủ đề của bài viết, tích vào <b>Thông báo cho tôi</b> để nhận thông báo qua email khi bình luận của bạn được phản hồi.
</div>
<div class='bbcode'>
Đặt <b><a href='https://imgbb.com/upload' rel='nofollow noopener noreffer' target='_blank' title='Upload Gambar di Sini'>URL Ảnh</a></b> hoặc <b>Code Snippet</b>, và <b>Quote</b>,  sau đó nhấp vào nút bạn muốn phân tích cú pháp. Sao chép kết quả phân tích cú pháp và dán nó vào trường nhận xét.
<div id='parser'>
<textarea id='codes' placeholder='Nhập mã / url_image rồi nhấp vào nút bên dưới để phân tích cú pháp' 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();'>Xóa văn bản</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>

<script type='text/javascript'>
//<![CDATA[
// New Clipboard JavaScript Added By Quanglinhchiase.com
/*!
 * clipboard.js v1.5.16
 * https://zenorocha.github.io/clipboard.js
 *
 * Licensed MIT © Zeno Rocha
 */
!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var t;t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,t.Clipboard=e()}}(function(){var e,t,n;return function e(t,n,i){function o(a,c){if(!n[a]){if(!t[a]){var l="function"==typeof require&&require;if(!c&&l)return l(a,!0);if(r)return r(a,!0);var s=new Error("Cannot find module '"+a+"'");throw s.code="MODULE_NOT_FOUND",s}var u=n[a]={exports:{}};t[a][0].call(u.exports,function(e){var n=t[a][1][e];return o(n?n:e)},u,u.exports,e,t,n,i)}return n[a].exports}for(var r="function"==typeof require&&require,a=0;a<i.length;a++)o(i[a]);return o}({1:[function(e,t,n){function i(e,t){for(;e&&e.nodeType!==o;){if(e.matches(t))return e;e=e.parentNode}}var o=9;if(Element&&!Element.prototype.matches){var r=Element.prototype;r.matches=r.matchesSelector||r.mozMatchesSelector||r.msMatchesSelector||r.oMatchesSelector||r.webkitMatchesSelector}t.exports=i},{}],2:[function(e,t,n){function i(e,t,n,i,r){var a=o.apply(this,arguments);return e.addEventListener(n,a,r),{destroy:function(){e.removeEventListener(n,a,r)}}}function o(e,t,n,i){return function(n){n.delegateTarget=r(n.target,t),n.delegateTarget&&i.call(e,n)}}var r=e("./closest");t.exports=i},{"./closest":1}],3:[function(e,t,n){n.node=function(e){return void 0!==e&&e instanceof HTMLElement&&1===e.nodeType},n.nodeList=function(e){var t=Object.prototype.toString.call(e);return void 0!==e&&("[object NodeList]"===t||"[object HTMLCollection]"===t)&&"length"in e&&(0===e.length||n.node(e[0]))},n.string=function(e){return"string"==typeof e||e instanceof String},n.fn=function(e){var t=Object.prototype.toString.call(e);return"[object Function]"===t}},{}],4:[function(e,t,n){function i(e,t,n){if(!e&&!t&&!n)throw new Error("Missing required arguments");if(!c.string(t))throw new TypeError("Second argument must be a String");if(!c.fn(n))throw new TypeError("Third argument must be a Function");if(c.node(e))return o(e,t,n);if(c.nodeList(e))return r(e,t,n);if(c.string(e))return a(e,t,n);throw new TypeError("First argument must be a String, HTMLElement, HTMLCollection, or NodeList")}function o(e,t,n){return e.addEventListener(t,n),{destroy:function(){e.removeEventListener(t,n)}}}function r(e,t,n){return Array.prototype.forEach.call(e,function(e){e.addEventListener(t,n)}),{destroy:function(){Array.prototype.forEach.call(e,function(e){e.removeEventListener(t,n)})}}}function a(e,t,n){return l(document.body,e,t,n)}var c=e("./is"),l=e("delegate");t.exports=i},{"./is":3,delegate:2}],5:[function(e,t,n){function i(e){var t;if("SELECT"===e.nodeName)e.focus(),t=e.value;else if("INPUT"===e.nodeName||"TEXTAREA"===e.nodeName)e.focus(),e.setSelectionRange(0,e.value.length),t=e.value;else{e.hasAttribute("contenteditable")&&e.focus();var n=window.getSelection(),i=document.createRange();i.selectNodeContents(e),n.removeAllRanges(),n.addRange(i),t=n.toString()}return t}t.exports=i},{}],6:[function(e,t,n){function i(){}i.prototype={on:function(e,t,n){var i=this.e||(this.e={});return(i[e]||(i[e]=[])).push({fn:t,ctx:n}),this},once:function(e,t,n){function i(){o.off(e,i),t.apply(n,arguments)}var o=this;return i._=t,this.on(e,i,n)},emit:function(e){var t=[].slice.call(arguments,1),n=((this.e||(this.e={}))[e]||[]).slice(),i=0,o=n.length;for(i;i<o;i++)n[i].fn.apply(n[i].ctx,t);return this},off:function(e,t){var n=this.e||(this.e={}),i=n[e],o=[];if(i&&t)for(var r=0,a=i.length;r<a;r++)i[r].fn!==t&&i[r].fn._!==t&&o.push(i[r]);return o.length?n[e]=o:delete n[e],this}},t.exports=i},{}],7:[function(t,n,i){!function(o,r){if("function"==typeof e&&e.amd)e(["module","select"],r);else if("undefined"!=typeof i)r(n,t("select"));else{var a={exports:{}};r(a,o.select),o.clipboardAction=a.exports}}(this,function(e,t){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var o=n(t),r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},a=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),c=function(){function e(t){i(this,e),this.resolveOptions(t),this.initSelection()}return a(e,[{key:"resolveOptions",value:function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};this.action=t.action,this.emitter=t.emitter,this.target=t.target,this.text=t.text,this.trigger=t.trigger,this.selectedText=""}},{key:"initSelection",value:function e(){this.text?this.selectFake():this.target&&this.selectTarget()}},{key:"selectFake",value:function e(){var t=this,n="rtl"==document.documentElement.getAttribute("dir");this.removeFake(),this.fakeHandlerCallback=function(){return t.removeFake()},this.fakeHandler=document.body.addEventListener("click",this.fakeHandlerCallback)||!0,this.fakeElem=document.createElement("textarea"),this.fakeElem.style.fontSize="12pt",this.fakeElem.style.border="0",this.fakeElem.style.padding="0",this.fakeElem.style.margin="0",this.fakeElem.style.position="absolute",this.fakeElem.style[n?"right":"left"]="-9999px";var i=window.pageYOffset||document.documentElement.scrollTop;this.fakeElem.addEventListener("focus",window.scrollTo(0,i)),this.fakeElem.style.top=i+"px",this.fakeElem.setAttribute("readonly",""),this.fakeElem.value=this.text,document.body.appendChild(this.fakeElem),this.selectedText=(0,o.default)(this.fakeElem),this.copyText()}},{key:"removeFake",value:function e(){this.fakeHandler&&(document.body.removeEventListener("click",this.fakeHandlerCallback),this.fakeHandler=null,this.fakeHandlerCallback=null),this.fakeElem&&(document.body.removeChild(this.fakeElem),this.fakeElem=null)}},{key:"selectTarget",value:function e(){this.selectedText=(0,o.default)(this.target),this.copyText()}},{key:"copyText",value:function e(){var t=void 0;try{t=document.execCommand(this.action)}catch(e){t=!1}this.handleResult(t)}},{key:"handleResult",value:function e(t){this.emitter.emit(t?"success":"error",{action:this.action,text:this.selectedText,trigger:this.trigger,clearSelection:this.clearSelection.bind(this)})}},{key:"clearSelection",value:function e(){this.target&&this.target.blur(),window.getSelection().removeAllRanges()}},{key:"destroy",value:function e(){this.removeFake()}},{key:"action",set:function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"copy";if(this._action=t,"copy"!==this._action&&"cut"!==this._action)throw new Error('Invalid "action" value, use either "copy" or "cut"')},get:function e(){return this._action}},{key:"target",set:function e(t){if(void 0!==t){if(!t||"object"!==("undefined"==typeof t?"undefined":r(t))||1!==t.nodeType)throw new Error('Invalid "target" value, use a valid Element');if("copy"===this.action&&t.hasAttribute("disabled"))throw new Error('Invalid "target" attribute. Please use "readonly" instead of "disabled" attribute');if("cut"===this.action&&(t.hasAttribute("readonly")||t.hasAttribute("disabled")))throw new Error('Invalid "target" attribute. You can\'t cut text from elements with "readonly" or "disabled" attributes');this._target=t}},get:function e(){return this._target}}]),e}();e.exports=c})},{select:5}],8:[function(t,n,i){!function(o,r){if("function"==typeof e&&e.amd)e(["module","./clipboard-action","tiny-emitter","good-listener"],r);else if("undefined"!=typeof i)r(n,t("./clipboard-action"),t("tiny-emitter"),t("good-listener"));else{var a={exports:{}};r(a,o.clipboardAction,o.tinyEmitter,o.goodListener),o.clipboard=a.exports}}(this,function(e,t,n,i){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function c(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function l(e,t){var n="data-clipboard-"+e;if(t.hasAttribute(n))return t.getAttribute(n)}var s=o(t),u=o(n),f=o(i),d=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),h=function(e){function t(e,n){r(this,t);var i=a(this,(t.__proto__||Object.getPrototypeOf(t)).call(this));return i.resolveOptions(n),i.listenClick(e),i}return c(t,e),d(t,[{key:"resolveOptions",value:function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};this.action="function"==typeof t.action?t.action:this.defaultAction,this.target="function"==typeof t.target?t.target:this.defaultTarget,this.text="function"==typeof t.text?t.text:this.defaultText}},{key:"listenClick",value:function e(t){var n=this;this.listener=(0,f.default)(t,"click",function(e){return n.onClick(e)})}},{key:"onClick",value:function e(t){var n=t.delegateTarget||t.currentTarget;this.clipboardAction&&(this.clipboardAction=null),this.clipboardAction=new s.default({action:this.action(n),target:this.target(n),text:this.text(n),trigger:n,emitter:this})}},{key:"defaultAction",value:function e(t){return l("action",t)}},{key:"defaultTarget",value:function e(t){var n=l("target",t);if(n)return document.querySelector(n)}},{key:"defaultText",value:function e(t){return l("text",t)}},{key:"destroy",value:function e(){this.listener.destroy(),this.clipboardAction&&(this.clipboardAction.destroy(),this.clipboardAction=null)}}]),t}(u.default);e.exports=h})},{"./clipboard-action":7,"good-listener":4,"tiny-emitter":6}]},{},[8])(8)});

// Comment Parse Tool Added By Quanglinhchiase.com
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(/^/,"<i rel='quote'>")).replace(/$/,"</i>"),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...' \/>");a.innerHTML = b;} repText('commentHolder');
///]]>
</script>

Lời kết