If you are a blogger, this post is very important for you! I am going to share such a tool; it is only for those who work to show coding on the blog. Because with this, you can beautifully blossom the codes in the middle of the blogger post. We tried many times but could not.
We use this tool under different names. For example, if I say how to show the codes on the website, how to arrange the codes within the blogger's website, and which website to put the codes on the blogger's website, We don't know what the name of this tool is.
Basically, the name of this tool is Parser. try to show here through various websites, but we will let you know through this post. How to use code on your website so that it is better for visitors.
There are a few steps to follow to use this tool or use it on your Blogger website.
By following the steps, you can use it on your Blogger website for free. You don't have to go to another website. Basically, not everyone shares these tools for free.
I am sharing these tools with you so that everyone can think about them and take advantage of them. To use this tool, you need to log in to the Blogger website. Then decide where you want to use this tool.
You can use it in your blog post, or you can use it on your blog page. So it depends on your usage.
So let's see how it works for you and how you can add it to your website.
We will give you a suggestion to put this code inside the page.
Copy and paste the following code into your blog:
<style scoped="" type="text/css">
#h4{ color:green;
}
#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:#499557}
#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:#f31212}
#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{background: rgba(0,0,0,.07);border:0;height:300px;width:100%;margin:0 0 10px;box-sizing:border-box;font-family:Consolas,Monaco,'Andale Mono',monospace;color:#111;border-radius:10px;box-shadow:inset 0 -5px 5px rgba(0,0,0,0.05);padding:20px}
#parser2 textarea#somewhere:active,#parser2 textarea#somewhere:focus{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>
<div id="parser2">
<textarea id="somewhere" placeholder="Write/paste the code here then click the Parse Code button"></textarea>
<div class="alert alert-success margin-bottom-20 collapse" id="btnInfo" role="alert">
<button class="close close-copy" onclick="document.getElementById("btnInfo").style.display = "none";cdClear();" type="button"><span aria-hidden="true">×</span></button>
<h4 id="h4">Code copied to clipboard</h4>
</div>
<br /> <button class="btn btn-primary btn-sm btn-parse" onclick="convert();" type="button">Parse Code</button>
<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</button> <button class="btn btn-danger btn-xs" id="btn_clear" onclick="cdClear();">Clean</button>
</div>
<script type="text/javascript">//<![CDATA[
function downloadJSAtOnload(){var d=document.createElement("script");d.src="https://cdn.jsdelivr.net/gh/Arlina-Design/redvision@master/htmlparse.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]></script>
<br>
<div class='pre notranslate'>
<pre><div class='pre html notranslate'>
<pre>Your_Code_Here</pre>
</div></pre>
</div>
Then publish it, and you will see that your work is done successfully.
We hereby provide you with complete details of these codes, and you can easily install the codes on your Blogger website without following any procedure.
If you have any questions or comments about this article, feel free to write them in the comments section.
You can join our Telegram group.
Thank you very much for viewing this post of ours.