How to Create Source Code Formatter With Textarea Tool in your Blog - Post or Page

453 words
23 min read
How to Create Source Code Formatter With Textarea Tool in your Blog - Post or Page - Techly Series

Hey Guys! Welcome back to Techly Series website.

Assuming You are observing the Source Code Formatter With Textarea Tool Script on blogger. This is the Right Place to you. Since You can get this Script for free and gain deep pocket With Your adsense.

Today, in this article, I will Discuss with you about How to Create Source Code Formatter With Textarea Tool in Blog - Post or Page.

Information

A text area is utilized to enter at least one lines of text as info relying upon what is appropriate. Now and again, the text area is non-editable and is utilized uniquely for showing text. An illustration of a non-editable text area is a text area that naturally shows the worker name when the representative number is determined.

An editable text area commonly contains a cursor to demonstrate where the text should be composed. Text areas are additionally alluded to as text boxes, text section boxes or text fields.

How to Create

So, to create Source Code Formatter With Textarea Tool on blogger you need to follow the following process below precisely.

What's more, with the help of these steps, you can easily make this tool in your blogger website.

Step 1

  • You will go to your - Blogger Dashboard
  • Go to Theme
  • Go to - Edit HTML
  • Search - </head> or &lt;/head&gt;
  • Copy this CSS Code below and Paste on top of </head> or &lt;/head&gt;
  • Save Theme

You must back up your theme before go to Edit HTML

<link rel='stylesheet' href='https://cdn.jsdelivr.net/gh/itsTSUI/tsP/toolBody.css'/>
<script crossorigin='anonymous' src='https://kit.fontawesome.com/4ad360bfd2.js'/>

Step 2

  • After Save Theme
  • Create a new Post or Page
  • Copy this HTML & Javascript Code below and Paste in your blog - Post or Page
  • Publish
<div class="Tbody">

<b>Text or Code</b>
<textarea id="ToCcode" rows="5" placeholder="Type Your Text or Code Here..."></textarea>

<b>Column Number</b>
<input id="Cols" value="45" placeholder="Enter Column Number Here..."/>

<b>Row Number</b>
<input id="Rows" value="15" placeholder="Enter Row Number Here..."/>

<b>Font Size</b>
<input id="Tfsize" value="12px" placeholder="Enter Font Size Here..."/>

<b>Font Colour</b>
<input id="Tfcolor" value="#ffffff" placeholder="Enter Color Code Here..."/>

<b>Background Colour</b>
<input id="Tbg" value="#000000" placeholder="Enter Color Code Here..."/>

<b>Border</b>
<input id="Tborder" value="1.5px solid #ff0000" placeholder="Enter Color Code Here..."/>

<b>Border Radius</b>
<input id="Tbradius" value="5px" placeholder="Enter Radius Here..."/>

<b>Padding</b>
<input id="Tpadding" Value="5px 10px" placeholder="Enter Padding Here..."/>

<button type="button" id="Gbutton">Get Code<i class="fa-regular fa-hand-point-right"></i></button>

<br/>

<b>Textarea Code</b>
<textarea id="Pcode" style="display:none"></textarea>

<textarea id="Tcode" rows="5" placeholder="Get Code Here .." readonly></textarea>

<button type="button" class="copybutton" data-clipboard-target="#Tcode"><i class="fa-regular fa-copy"></i>Copy Code</button>

<button type="button" id="Tanother"><i class="fa fa-repeat"></i>Try Another</button>

</div>

<script>
$("#Gbutton").click(function(){f=$("#ToCcode").val(),f=(f=(f=(f=(f=(f=f.replace(/\t/g," ")).replace(/&/g,"&amp;")).replace(/</g,"&lt;")).replace(/>/g,"&gt;")).replace(/"/g,"&quot;")).replace(/'/g,"&#039;"),$("#Pcode").val(f);var a=$("#Cols").val(),e=$("#Rows").val(),o=$("#Tfsize").val(),l=$("#Tfcolor").val(),c=$("#Tbg").val(),r=$("#Tborder").val(),t=$("#Tbradius").val(),n=$("#Tpadding").val(),d=$("#Pcode").val();$("#Tcode").val('<textarea cols="'+a+'" rows="'+e+'" style="background:'+c+";border:"+r+";border-radius:"+t+";font-size:"+o+";color:"+l+";padding:"+n+';line-height:1.5" readonly>'+d+"</textarea>")}),$(function(){new ClipboardJS(".copybutton"),$(".copybutton").click(function(){$(this).html("√ Code Copied");var a=$(this),e=setInterval(function(){a.html("<i class='fa-regular fa-copy'></i>Copy Code"),clearInterval(e)},1500)})}),$("#Tanother").click(function(){$("#ToCcode").val(""),$("#Pcode").val(""),$("#Tcode").val("")});
</script>

Final Words

You ought to indeed note by thinking in the remark box underneath. Or on the other hand you moreover bear to give some sort of Suggestion, likewise you can partake your conviction with me in the Comment Box beneath.

I didn't give this content to any individual who saw or replicated them. This content I've looked through a great deal and given by experience. So kindly don't note on this substance.

Assuming you experience any issues while coping this script you can impart me by Telegram and I'll attempt to help.

  • Aᴀ
  • A+
  • A-