Sometimes to blogging needed to writing something specially in a box. Many of us who do tutorial related blogging have to write coding in the post which is usually better to put in the box. But it is not possible to write in the box like normal writing.
 |
| How to create textbox in blogger post. Three easy and better ways. |
Today we will learn how to create a text box in a post. We will look at three easy and better ways to create textbox.
Let's get started.......>
01. Most Easy( without copy button).
Just select your writing type "HTML View" and paste these code in your choses position. Now type your text where you see "write your text here" and then save or publish your post.
<form>
<textarea cols="40" onclick="select()" readonly="" rows="10" style="height: 286px; margin: 0px; width: 637px;">write your text here</textarea>
</form>
02. Easy too( with copy button).
Select your writing type "HTML View" and paste these code in your choses position. Now type your text where you see "Your text here" and then save or publish your post.
<br><textarea rows="5" cols="60" readonly id="Inputtxt">Your text here</textarea>
</br>
<button onclick="myFunction()">Copy</button>
<script type="text/javascript">
function myFunction() {
var copyTxt = document.getElementById("Inputtxt");
copyTxt.select();
document.execCommand("copy");
}
</script><br>
To understand more clearly you can see the video.
03. Best textbox ( with copy button).
> By This way you can set up a best textbox on your blogger.
At first you need to go your 'Edit HTML' ( Blogger admin panel>Theme>Edit HTML) option. Now find this code"</body>" and paste 1st code after "</body>".
<script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js'/><script>var clipboard = new ClipboardJS(".cbtn");clipboard.on('success', function() {M.toast({html:"Copy Successfully",classes:"green"});});
clipboard.on('error', function() {M.toast({html:"Copy error",classes:"red"});});</script>
/* Code Box With Clipboard Button by gxfreee (gxfreee.com) */
.r1 {text-align: left;height: auto;width: auto;padding-top: 10px;padding-bottom: 10px;padding-left: 20px;box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);border-radius: 0 0 4px 4px;}
.cbtn {color: #FFFFFF;background-color: #26a69a;letter-spacing: .5px;cursor: pointer;font-size: 14px;outline: 0;border: none;border-radius: 4px;line-height: 36px;padding: 0 16px;text-transform: uppercase;box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);font-weight: bold;}
.toast {height: auto;width: auto;background-color: #50A950;padding-top: 10px;padding-bottom: 10px;padding-left: 10px;padding-right: 10px;position: fixed;display: inline-block;color: white;margin-left: 50%;margin-top: 5%;border-radius: 5px;}
.c-box{position: relative;display: block;background-color: #000000;font-family: Monospace;font-size: 16px;color: #FFFFFF;white-space: pre-wrap;line-height: 1.2em;padding: 0px;margin: 0;border: 0;border-radius: 4px 4px 0 0;}
>Your HTML editing done. Now save your Theme.
>Go to your post where you want to add textbox. in this post you need to select your writing type "HTML View" and paste these code where you want to show a textbox.
<br>
<div class="c-box" id="content">Paste Your Code in this area only
</div>
<div class="r1">
<button class="cbtn" data-clipboard-target="#content">Click Here To Copy</button>
</div>
<br>
>Now change writing type to "Compose view". Type your text Where you see "Paste Your Code in this area only" . You can add any coding here without any problem. Now save or publish your post.
Note: If you need to add more box in a post you cannot use copy button for all boxes. You can use copy button for your first box and you need to copy other boxes code/text manually. So your should dismiss other copy button.
To understand more clearly you can see the video.
