Skip to main content

Add Comments Message with Parse Tools on Blogger by TrickPk

Hello everyone, on this occasion I will share how to create a comment message with the parse tool on Blogger.

This tutorial is request by Darshan, via comments on one of these blog posts, for those of you who want to request the tutorial, you can comment on the forum or send a message via email via the contact page, you can also comment on our YouTube. if possible we will do it in the future.

Comment messages equipped with these tools will certainly be very useful for blogs with tutorial niches like this blog, besides being able to beautify the appearance of the blog, it will also make it easier for admins or blog visitors when they want to insert code or images into comments.

With this tool, visitors no longer need to open another page to parse the code, and manually write the tag like <i rel='pre'></i> , because the code will be parsed and the html tag added automatically. is it a pre , quote or image tag.

For the demo you can see on this blog comment section , ok for those of you who want to make it, let's see how below.

How to make a comment message with the parse tool on blogger


Please go to blogger select it your theme and edit html then copy the css below and put it above the code ]]></b:skin>

/* Color Variables by TrickPk.com*/ :root{ --main-btn-color: #f09800; --copy-btn-color: #c16c6c; --clean-btn-color: #7687b7; --font-name: 'Noto Sans', sans-serif; } /* Feature Comments by TrickPk.com*/ #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} .img-trickpk-code a{color:var(--main-btn-color)} .img-trickpk-code ul{border:1px solid #ededef;padding:10px;border-radius:4px;margin-top:20px;line-height:1.5em} .img-trickpk-code ul li{border-bottom:1px dashed #ededef;padding:10px 0;margin-bottom:0} .img-trickpk-code ul li:last-child{border-bottom:none} .img-trickpk-code ul li a{display:inline-block;color:var(--main-btn-color);cursor:pointer} .img-trickpk-code 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 ~ .img-trickpk-code{display:none} .cm-menus2:checked ~ .msg-trickpk-comment{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 by TrickPk.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-trickpk{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 please adjust the class if it's different or you can delete this section by TrickPk.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 .img-trickpk-code ul,.darkMode .img-trickpk-code 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}

further please copy the code below and place it under or above the code <div id='commentForm'> or <div id='threaded-comment-form'> if there is still an old comment message widget please delete it first. each template may have a different code.

<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'>Message Comment</label> </div> <div class='cmbutton2'> <label class='cmbutton-title' for='offcm-menu2'>Media +</label> </div> </div> <div class='msg-trickpk-comment'> Leave a comment according to the topic of the article, tick <b>Notify me</b> to get notified via email when your comment is replied to. </div> <div class='img-trickpk-code'> Put in <b><a href='https://www.trickpk.com/p/imgur.html' rel='nofollow noopener noreffer' target='_blank' title='Upload Image Here'>Image URL</a></b> or <b>Code Snippet</b>, or <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='Enter the code / url_image then click the button below to 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-trickpk' id='cvrt3' onclick='imgConvert();this.disabled = true;'>image</button> <button class='btn btn-primary btn-trickpk' id='cvrt4' onclick='preConvert();this.disabled = true;'>pre</button> <button class='btn btn-primary btn-trickpk' id='cvrt5' onclick='codeConvert();this.disabled = true;'>code</button> <button class='btn btn-primary btn-trickpk' id='cvrt7' onclick='quoteConvert();this.disabled = true;'>quote</button><br/> <button class='btn button-link btn-trickpk 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-trickpk' onclick='cdClear();'>Clear</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>

please copy the javascript below and place it above the code </body> or <!--</body>--></body>

<script src='https://cdn.rawgit.com/zenorocha/clipboard.js/v1.5.16/dist/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>

If you have, please click save, ok so that's Comments Message with Parse Tools on Blogger by TrickPk, hopefully it's useful, and thank you for visiting.

Our all Contents are Strongly Protected By DMCA.com. Please don't plagiarise our content. All rights to TrickPk have been reverted. 

Comments

  1. Thanks you so much for your response and this tutorial bro

    ReplyDelete
  2. Bro how to reduce that buttons size , i tried reducing padding but it's not working please help

    https://lh3.googleusercontent.com/-NqfL43CNMZU/YdvtYvuH5jI/AAAAAAAAFmI/GdcqpLvjN6opS3YV5y4xkfmdswDa80KUwCNcBGAsYHQ/h120/Web%2Bcapture_10-1-2022_142341_supertoolsguru.blogspot.com.jpeg

    ReplyDelete

Post a Comment

Popular posts from this blog

10000+ New Facebook VIP Stylish Bio Symbols 2024

Hello Friends, agar aaf bhi Instagram or Facebook account ky liye vip bio symbols search kar rahe hy to yaha par hum aaf ky liye facebook vip account bio symbols dene wale hai. Dosto aaf sab ka bahut bahut shukria hamari blog per visit karny ky liye, So dosto Aaj hum aafke liye Instagram or Facebook VIP Account New Bio Symbols 2024 lekar aaye hai jise aap Bio me copy aur paste karke apne facebook profile ko Vip account bana sakte hai. Yaha par humny Facebook aur Instagram vip account bnany ke liye tmam qism ke VIP bio symbols share kiye hai yaha par aafko VIP Symbols ke sath sath long vip bio symbols + Fb aur Instagram Stylish bio symbols bhi mil jayege. Aaf yaha se kisibhi Bio symbols ko copy karke fb account me paste kar sakte hai.To chaliye ASCII art Instagram, Facebook Stylish symbols ki taraf barhty hy Also Read: Facebook VIP Account Latest Bio Symbols Facebook VIP Account Latest Bio Symbols Part Part 1 Facebook VIP Account Latest Bio Symbols Part Part 2 Faceboo

100% Download Free Nadra Polio Vaccination Certificate Online

Polio vaccination is mandatory for all international travelers from Pakistan, regardless of age, to prevent the spread of polio to other countries. Pakistan remains among only two countries in the world where wild poliovirus remains in circulation, so it is crucial to ensure that anyone crossing borders or traveling from infected countries is vaccinated. Nadra Polio Vaccine For Overseas Air Travel Polio Vaccination Card Kesy Hasil Kary If you are planning to travel abroad, one document you may need to have on hand is a polio certificate. This certificate serves as proof that you have received the polio vaccine, which is required for entry into some countries. In this article, we'll cover everything you need to know about polio certificates, including why they're required, how to get them, and more. What is a polio certificate? A polio certificate is a document that serves as proof that you have received the polio vaccine. This vaccine is required for entry into some count

Procedure How to Set Rose Telegram Bot

The Rose bot is one of the most popular moderator bots for Telegram. There are many other Telegram groups bot for it but this one is the best... Telegram groups can have up to 100k members, that's a huge number. Managing such a large group seemed impossible. But, group managing bots like the Rose bot make it really simple. In this article, we will share a guide to help you set up the Rose bot on Telegram . What is Bot Rose? The Rose bot is one of the most popular moderator bots for Telegram. There are many other Telegram groups for it but this one is the best and most popular one out there. How to set rose telegram bot? To set up Bot Rose on Telegram, follow these steps: Open Telegram Group : To add Rose bot in your Telegram Group.  Add @MissRose_bot to group : Tap Add Member in your Telegram group. Find @MissRose_bot and add rose bot to group Give Admin Rights to Rose bot : you have to give Admin rights or Admin permission to Rose bot after adding it to your group. Send /conn