how to add code box in blogger post

Blog | | By
Are you want to add a code box in your blogger post 
If yes then read this post completely in the end you will know everything
We have provided 3 types of code box
But why do you need a code box in your blogger posts.
In some tutorials, we have to share some code to our readers to copy and paste those in some places. 
But if we simply paste these codes in our blog post then it becomes harder for readers to copy the code properly 
Sometimes the codes take lots of space in blog post and unmanned. So we need a code box with scroll function to  solve this issue.
You can also use a text file instead of code in post but it is not feels good as we share multiple codes with short length.
(toc)
Here are some steps to follow to add the code box in a blogger website.
There are many ways to add code box but we will show.you some popular code box that you have most seen.
This is the easiest way to add code box in blogger by adding small codes in blog post without changing the HTML code of your blogger theme.

Type 1 Add code box using HTML code


In this type you need to add a HTML CODE in your blog post and replace the text with the code you want to add in your blog post 

STEP 1 

Copy the below code and paste it into the HTML Section in your blog post editor of Blogger 

STEP 2

Now switch the blogger post editor to the compose view and replace the text with this code  
 

<pre style="background: rgb(238, 238, 238); border-bottom-color: initial; border-bottom-style: initial; border-image: initial; border-left-color: initial; border-left-style: initial; border-radius: 1px; border-right-color: initial; border-right-style: initial; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-width: 5px 0px 0px; color: #444444; font-family: &quot;Courier New&quot;, Courier, monospace; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: inherit; margin-bottom: 1.5em; margin-top: 0px; overflow-wrap: normal; overflow: auto; padding: px; vertical-align: baseline;"><span style="font-size: 15px;">Replace the text with codes</span></pre><p>Start write the next paragraph here </p>

Hurree you have successfully implement a code box in your blog post 

STEP 3

After adding the code box you can add other details in your blog post.
 
Remember you need to paste this code first in html mode and add the textbox info in compose mode 
You don’t need to change any code of your theme

Type 2 Add code box with click to copy button 

This is the advance version of code box

 first you have to follow these steps to create a code box like this

STEP 1 

 First , open your blog post editor.
copy this js code.
 

<!-- pastethis code above </head> Tag -->   
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>
<script src='https://clipboardjs.com/dist/clipboard.min.js'/>

 Now, go to your blogger dashboard. Click on theme, Click on customize.
 click on edit html. Now simply click anywhere in the theme code BOX.
 now, press control + f on your keyboard.
 now, you can see the search box.
 simply type /head tag,Press Enter.Now, you can see /head tag.
 simply paste js code above this /head tag.
 click on save.

 

STEP 2 

  now go back to the post.

copy this script code.

 

<!-- Paste above </body> Tag -->
<script>
 $(function() {
	var clipboard = new ClipboardJS('.ClickToCopyBtn');   
	 $(".ClickToCopyBtn").click(function() { 
             $(this).html('Copied!!'); 
              var that = $(this);
              var intrvrl =  setInterval(function(){  
              that.html('Click to Copy'); 
              clearInterval(intrvrl); }, 
            3000);
	 });
});
</script>

go to to edit template page.

 now we need to paste this JS script code above /body tag, to find a /body tag. simply click anywhere in the theme code. now, press control + f on your keyboard.

 now, you can see search box. simply type /body tag, Press Enter. 

now, you can see /body tag. simply paste js script code above this /body tag.

 click on save.

STEP 3

    now go back to the post.

 copy this CSS code.

 

/*-------Click-to-copy-------*/

.copyarea {
    display: flex;
    position: relative;
    width: 100%;
    height: auto;
}


.copyarea textarea {
  width: 100%;
  box-sizing: border-box;
  border: none;
  padding-top: 34px;
  padding-bottom: 34px;
  padding-right: 11px;
  padding-left: 11px;
  background: #f5f6f7;
}


.copyarea textarea:focus-visible {
    outline: -webkit-focus-ring-color auto 0px;
}


button.ClickToCopyBtn {
    width: 30%;
    height: auto;
    position: absolute;
    top: 0;
    right: 0;
    border: none;
    padding-top: 5px;
    padding-bottom: 5px;
    color: #fff;
    background: #0066ff;
}

button.ClickToCopyBtn:hover {
    background: #000;
}



@media screen and (max-width: 500px)
{button.ClickToCopyBtn {
    width: 100%;
}}


/*------------Click-to-copy------------*/

go to the Blogger dashboard. click on layout. click on Theme Designer. Click on Advanced. Now select “ADD CSS” from the drop down menu. Now Paste the CSS Code. click on Save.

STEP 4

   now go back to the post. go to html code. now, in this code

 

<div class="copyarea">
  <textarea width="100%" rows="11" id="Add-Unique-Tag">Add-Your-Text-or-Codes-Here^/textarea>
<button class="ClickToCopyBtn" data-clipboard-target="#Add-Unique-Tag">Click to Copy</button>
</div>

, you can see ^ sign. simply remove ^ sign, and add Left Pointing Angle Bracket.

 now copy this code.now paste this code in the post where you want to add copy to clipboard. open the post, go to html view. now paste the code. now, in this code, you can see  Add-Your-Text-or-Codes-Here tag,

 simply remove this & add your text or code, which you want to place in clipboard.

 now, we need to give a unique tag for this copy to clipboard

to add a unique tag, you can see Add-Unique-Tag text, simply remove it and add your own unique tag for this copy to clipboard.

make sure, these two tags are the same, to work this clipboard.

ALTERNATIVE STEP 5

   css for gradient color on copy button

 

background: #first-color;  /* place hex code */
background: -webkit-linear-gradient(to right, #first-color, #second-color);  /* Chrome 10-25, */
background: linear-gradient(to right, #first-color, #second-color); /* W3C, IE 10+/  Chrome 26+, /

ALTERNATIVE STEP 6

  css for hover gradient color on copy button
 

background: #second-color;  /* place hex code */
background: -webkit-linear-gradient(to right, #second-color, #first-color);  /* Chrome 10-25,  */
background: linear-gradient(to right, #second-color, #first-color); /* W3C, IE 10+/  Chrome 26+, */

Type 3 Add code box with double click to copy feature

Step 1:  First, Open your Blogger Dashboard.

Step 2: On Blogger Dashboard, click on Theme.

Step 3: Now Click the arrow down icon  next to ‘customize’ button.

Step 4: Click Edit HTML, and you can see the HTML format of your blog theme 

Step 5: Now search the code  ]]></b:skin> and paste the following CSS Codes just above  it.

/* hubpro css */
.HUBpr span{position:fixed;left:24px;bottom:-70px;display:inline-flex;align-items:center;text-align:center;justify-content:center;margin-bottom:20px;z-index:99981;background:#323232;color:rgba(255,255,255,.8);font-size:14px;font-family:inherit;border-radius:3px;padding:13px 24px; box-shadow:0 5px 35px rgba(149,157,165,.3);opacity:0;transition:all .1s ease;animation:slideinwards 2s ease forwards;-webkit-animation:slideinwards 2s ease forwards}
@media screen and (max-width:500px){.HUBpr span{margin-bottom:20px;left:20px;right:20px;font-size:13px}}
@keyframes slideinwards{0%{opacity:0}20%{opacity:1;bottom:0}50%{opacity:1;bottom:0}80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}}
@-webkit-keyframes slideinwards{0%{opacity:0}20%{opacity:1;bottom:0}50%{opacity:1;bottom:0}80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}}
.darkMode .HUBpr span{box-shadow:0 10px 40px rgba(0,0,0,.2)}

Step 6: Now Paste the following HTML code just below to <body> tag. 

<!--[ below <body> ]-->
<div id='HUBpro' class='HUBpr'></div>

Step 7: Now add the following Javascript Code just above the </body> tag. 


/* place code js /body */

<b:if cond='data:view.isSingleItem'>
  <script>/*<![CDATA[*/ /* Pre Content Copy Script by HUBpro */ for(var preClick=document.getElementsByTagName("pre"),i=0;i<preClick.length;i++)preClick[i].addEventListener("dblclick",function(){var e=getSelection(),o=document.createRange();o.selectNodeContents(this),e.removeAllRanges(),e.addRange(o),document.execCommand("copy"),e.removeAllRanges(),document.querySelector("#HUBpro").innerHTML="<span>Copied to clipboard!</span>"},!1); /*]]>*/</script>
</b:if>

Step 8: Now Save the changes by clicking save button 

When ever you want to create a code box with double click to copy btn write below code in your post and replace your code with Your_Code  and see the magic


/* place code in blog post */
<pre><code>Your_Code</code></pre>

That’s done! Now your visitors can double click on it to copy <pre> tag contents.

CONCLUSION

There are many ways to add a code box in blogger posts but these three methods are easy to use and works perfect.
If you have any doubt and if the code is not working then please contact us we will definitely try to resolve your problem 
If you like this post then please share this post with your friends 

Must Read

Leave a Comment

Your email address will not be published. Required fields are marked *