¿Cómo crear una herramienta HTML Parser tools en Blogger?

¿Cómo crear una herramienta HTML Parser en Blogger?

Hola a todos: En esta ocasión, compartiré con todos ustedes cómo crear una herramienta de analizador HTML en Blogger. Para todos los blogueros, la presencia de herramientas de análisis de HTML puede ser muy útil, especialmente para blogs que usan codificación para insertar código de secuencia de comandos HTML en publicaciones o artículos en el sitio.

No solo esto, la herramienta de análisis html también puede ayudarlo como herramienta antes de adjuntar el código de anuncio de Adsense en cualquier plantilla de blogger. Si instala esta herramienta en su blog o sitio web, puede obtener muchos beneficios. De esta forma no necesitaremos visitar ningún otro sitio para convertir el código html.

Es muy fácil crear HTML Parse Tools en Blogger, es decir, tienes que usar una página estática para crear HTML Parse Tools. Para que pueda llegar allí fácilmente y usarlo. Si desea crear esta herramienta de análisis html en línea en un blog, lea la publicación completa.

Índice de contenidos

    Cómo crear un HTML Parser Tool en Blogger

    Paso 1: Primero vaya a Blogger.Com.

    Paso 2: Luego inicie sesión en su cuenta de Blogger.

    Paso 3: Luego seleccione el menú "Página" .

    Paso 4: Luego crea una nueva página.

    Paso 5: Después, haga clic en Vista Html .

    Paso 6: Luego copie el código de la secuencia de comandos de la herramienta HTML Parse a continuación y péguelo allí.

    <style scoped="" type="text/css">
    #parser2{position:relative;overflow:hidden}
    #parser2 .btn,#parser2 .btn:active{background-image:none}
    #parser2 .btn{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:0;border-radius:4px;cursor:pointer;transition:all .3s}
    #parser2 .btn:active:focus,#parser2.btn:focus{outline:0}
    #parser2 .btn:focus,#parser2 .btn:hover{color:#333;text-decoration:none;outline:0}
    #parser2 .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)}
    #parser2 .btn-primary{color:#fff;background:#3e51b5}
    #parser2 .btn-primary:focus,.button-group button:disabled{color:#fff;background:#286090}
    #parser2 .btn-primary:active,#parser2 .btn-primary:hover{color:#fff;opacity:.9}
    #parser2 .btn-danger{color:#fff;background:#f39c12}
    #parser2 .btn-danger:focus{color:#fff;opacity:.9}
    #parser2 .btn-danger:active,#parser2 .btn-danger:hover{color:#fff;opacity:.9}
    #parser2 .btn-info{color:#fff;background:#5bc0de}
    #parser2 .btn-info:focus{color:#fff;background:#31b0d5}
    #parser2 .btn-info:active,#parser2 .btn-info:hover{color:#fff;background:#31b0d5}
    #parser2 .btn-xs{font-size:12px;line-height:1.5;border-radius:3px;padding:1px 5px}
    #parser2 textarea#somewhere{border:1px solid rgba(0,0,0,0.05);height:300px;width:100%;margin:0 0 10px;box-sizing:border-box;font-family:Consolas,Monaco,'Andale Mono',monospace;color:#111;border-radius:8px;padding:20px;transition:all .6s}
    #parser2 textarea#somewhere:active,#parser2 textarea#somewhere:focus{border-color:rgba(0,0,0,0.15);outline:0}
    #parser2 .btn-sm{display:inline-block;font-size:13px;line-height:1.5;border-radius:5px;padding:12px;margin:0 auto 10px auto;width:30%;box-shadow:0 3px 1.2rem -0.8rem rgba(0,0,0,0.8)}
    #parser2 .btn-xs{font-size:13px;line-height:1.5;border-radius:5px;padding:12px;margin:auto;width:30%;box-shadow:0 3px 1.2rem -0.8rem rgba(0,0,0,0.8)}
    .collapse{display:none}
    .alert-success{color:#222;background:#fff}
    .alert{border:0;padding:5px 15px;border-radius:10px;position:absolute;top:20px;right:20px;min-width:210px;color:#0984e3;font-size:13px;box-shadow:0 2px 4px 0 rgba(0,0,0,0.16)}
    button.close{padding:0;cursor:pointer;background:none;border:0;-webkit-appearance:none}
    .close{float:right;font-size:1.3rem;color:#0984e3;margin:1px 0 0 0}
    button.close:focus{outline:0}
    .close:hover{opacity:1!important}
    #btnInfo h4{margin:0;font-size:13px;line-height:2}
    #button-link{display:none}
    .clear{clear:both;display:block;margin-bottom:2px}
    .alert br{display:none}
    </style>
    <br />
    <div id="parser2"><textarea id="somewhere" placeholder="Write/paste the code here then click the Parse Code button"></textarea><br />
    <div class="alert alert-success margin-bottom-20 collapse" id="btnInfo" role="alert"><button class="close close-copy" onclick="document.getElementById(&quot;btnInfo&quot;).style.display = &quot;none&quot;;cdClear();" type="button"><span aria-hidden="true">&#215;</span></button> <br />
    <h4>Code copied to clipboard</h4></div><button class="btn btn-primary btn-sm btn-parse" onclick="convert();" type="button">Parse Code</button> <br />
    <div class="clear"></div><button class="btn button-link btn-xs btn-info" data-clipboard-action="copy" data-clipboard-target="#somewhere" id="button-link" type="submit">Copy Code to Clipboard</button> <button class="btn btn-danger btn-xs" id="btn_clear" onclick="cdClear();">Clean</button> </div>
    <script type="text/javascript">
    //<![CDATA[
    function convert() {
        var ele1 = document.getElementById("somewhere");
        var replaced;
        replaced = ele1.value;
        replaced = replaced.replace(/&/ig, "&amp;");
        replaced = replaced.replace(/</ig, "&lt;");
        replaced = replaced.replace(/>/ig, "&gt;");
        replaced = replaced.replace(/"/ig, "&quot;");
        replaced = replaced.replace(/'/ig, "&#039;");
        replaced = replaced.replace(/&#177;/ig, "&plusmn;");
        replaced = replaced.replace(/&#169;/ig, "&copy;");
        replaced = replaced.replace(/&#174;/ig, "&reg;");
        replaced = replaced.replace(/ya'll/ig, "ya'll");
        ele1.value = replaced;
    	document.getElementById("button-link")
            .style.display = "inline-block";
        document.getElementById("btn_clear")
            .style.display = "inline-block";
    }
    function cdClear() {
      var wtarea = document.getElementById('somewhere');
      wtarea.value = '';
      document.getElementById("btnInfo")
            .style.display = "none",document.getElementById("button-link")
            .style.display = "none"
    }
    
    /*!
     * 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)});
    var clipboard = new Clipboard(".button-link");
    clipboard.on("success", function (o) {
        console.log(o), document.getElementById("btnInfo")
            .style.display = "block", document.getElementById("somewhere")
            .value = ""
    }), clipboard.on("error", function (o) {
        console.log(o)
    });
    //]]></script>

    Paso 7: Finalmente, guarde y publique la página. Vea el resultado de Esta herramienta.

    Conclusión

    En esta publicación, he dicho cómo crear una herramienta de analizador HTML en Blogger. ¿Cómo te gustó esta publicación? Puedes decirlo comentando y si tienes alguna pregunta, también puedes comentar tu pregunta. También puede cambiar el aspecto de esta herramienta de análisis de HTML de diferentes formas, por ejemplo, puede cambiar el tema o el tamaño de la caja de herramientas de análisis de HTML para que se adapte a la apariencia de usted o de su blog.

    Deja una respuesta

    Tu dirección de correo electrónico no será publicada.

    Subir

    Este sitio utiliza cookies de Google para prestar sus servicios y para analizar su tráfico. Tu dirección IP y user-agent se comparten con Google, junto con las métricas de rendimiento y de seguridad, para garantizar la calidad del servicio, generar estadísticas de uso y detectar y solucionar abusos. Más información