How to Add Stylish Code Box in your Blog Post

Hello friendsToday i am going to show you, How to Create Stylish Codebox for Blog Post

Note:
If you provide Codes to your visitors, this Codebox will help you to do that, it also contains a button to copy the Codes.

By Using this Code box Code you can easily provide Codes to your visitors. You just need to follow simple below given steps to use this code box.

Before we start let's take a look at its demo by clicking on below demo bar.

HTML
Your_codes_here
CSS
Your_codes_here
JS
Your_codes_here

STEPS

  • First of all Login to your Blogger Dashboard.
  • On Blogger Dashboard, click Theme
  • Click Edit HTML, you will be redirected to editing page.

    • Finally !
    Now search the code  </b:skin> and paste the following CSS Codes just above to it.

CSS
.cBox{position:relative;background:#fff;width:100%;border-radius:6px;box-shadow:0 10px 40px rgba(0,0,0,.1);padding:20px;margin:30px 0 30px}
.cBox .cBoxH{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}
.cBox .cBoxH span{margin:0;font-weight:700;font-family:inherit;font-size:1.1rem}
.cBox .cBoxB{cursor:pointer;display:inline-flex;align-items:center;padding:12px;outline:0;border:0;border-radius:50%;background:#056aff;transition:all .3s ease;-webkit-transition:all .3s ease}
.cBox .cBoxB:hover{opacity:.8}
.cBox .cBoxB .icn{flex-shrink:0;display:inline-block;width:18px;height:18px;background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 24 24'><rect x='5.54615' y='5.54615' width='16.45385' height='16.45385' rx='4'/><path d='M171.33311,181.3216v-8.45385a4,4,0,0,1,4-4H183.787' transform='translate(-169.33311 -166.86775)'/></svg>");background-size:cover;background-repeat:no-repeat;background-position:center}
.cBox .cBoxB.copied{background:#2dcda7}
.cBox .cBoxB.copied .icn{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 24 24'><path d='M22 11.07V12a10 10 0 1 1-5.93-9.14'/><polyline points='23 3 12 14 9 11'/></svg>")}
.cBox pre{min-height:350px;margin:0;background:#f6f6f6;padding:15px;border-radius:5px;color:#08102b;font-size:.8rem;font-family:monospace;overflow:scroll;scroll-behavior:smooth;scroll-snap-type:x mandatory;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
.cBox pre::before, .cBox pre::after{content:''}
.darkMode .cBox{background:#2d2d30}
.darkMode .cBox pre{background:#252526;color:#fffdfc}

At last:
Paste the following HTML just below to <body> tag. If you don't find it, it is probably already parsed which is &lt;body&gt;.

JS
 <script>/*<![CDATA[*/ /* Codebox Script by Writedroid */ function copyC(e,t){var o=document.getElementById(e),n=document.getElementById(t),e=getSelection(),t=document.createRange();e.removeAllRanges(),t.selectNodeContents(n),e.addRange(t),document.execCommand("copy"),e.removeAllRanges(),o.classList.add("copied"),document.getElementById("toastNotif").innerHTML="<span>Copied to Clipboard!</span>",setTimeout(()=>{o.classList.remove("copied")},3e3)} /*]]>*/</script>

Take attention towards below given HTML code to use code box in posts

HTML
<!--[ Code Box 1 ]-->
<div class='cBox'>
  <div class='cBoxH'>
    <!--[ Heading ]-->
    <span>HTML</span>
    <!--[ Copy Button ]-->
    <button id='copy1' class='cBoxB' onclick="copyC('copy1','code1')">
      <i class='icn'></i>
    </button>
  </div>
  <!--[ Content ]-->
  <div id='code1'>
    <pre>Your_codes_here</pre>
  </div>
</div>

<!--[ Code Box 2 ]-->
<div class='cBox'>
  <div class='cBoxH'>
    <!--[ Heading ]-->
    <span>CSS</span>
    <!--[ Copy Button ]-->
    <button id='copy2' class='cBoxB' onclick="copyC('copy2','code2')">
      <i class='icn'></i>
    </button>
  </div>
  <!--[ Content ]-->
  <div id='code2'>
    <pre>Your_codes_here</pre>
  </div>
</div>

<!--[ Code Box 3 ]-->
<div class='cBox'>
  <div class='cBoxH'>
    <!--[ Heading ]-->
    <span>JS</span>
    <!--[ Copy Button ]-->
    <button id='copy3' class='cBoxB' onclick="copyC('copy3','code3')">
      <i class='icn'></i>
    </button>
  </div>
  <!--[ Content ]-->
  <div id='code3'>
    <pre>Your_codes_here</pre>
  </div>
</div>


Conclusion

I made this post step by step on How to Add Stylish Code Box in your Blog Post. I hope you have liked it and Please do share with your friends and follow our blog for more

if you face any problems or have any questions please feel free to ask in comments section or Contact us

Comments

Post a Comment

Popular posts from this blog

[ UPDATED ]How to add a Stylish Note Block [Notebox] in any Blogger Template 2022

Image
  H ello Everyone! Welcome back to Monetizy, Today on this occasion our tutorial is  How to add a Stylish Note Block [Notebox] in any Blogger Template,   Note Block [Notebox] is Used to add important info, warning sentences or highlight sentences so that users can notice it easily and get aware of that. What is Note Block ? Note Block is a feature which is present default in some of the blogger the templates like iMagz, Median Ui, Fletro pro etc.... Note Block is used to Highlight a Important information, Any warning sentence or Highlight Any important steps so that the users can read it more efficiently and better than the normal text. so, this is the main use of Note Block Feature.  But some of the blogger templates which have default Note Block Feature have same old look and many of the blogger themes doesn't have this Note Block Feature exist so, I have tried to make something new  and gave a unique look to Note Block [Notebox] and this Notebox can be a...
Read more

New YouTube Tax Policy Will Reduce Income from the US Market?

Image
New YouTube Tax Policy Will Reduce Income from the US Market? YouTube informed content creators that YouTubers outside the United States may soon see as much as 30% of their earnings from US viewers withheld for tax. Indian YouTube creators were asked to provide their tax information to the platform in order to determine if they have any tax implications on earnings from US viewers, and how much. The new tax will affect the earnings of Indian YouTubers. It is especially applicable to those with a large US viewership. YouTubers claim that the US ad revenue is more than the Indian equivalent. Beebom is an English-language tech review channel that has more than 2 million subscribers.  TechWorldX  viewers in India are higher than in the US, the average revenue from advertisements shown to US viewers is greater. Although YouTube’s earnings have been taxed so far, content creators are concerned that Google, the company that owns YouTube will also begin levying taxes on its Goog...
Read more

Median Ui 1.6 Redesign Added Many More Feature Try It Now Fast Adsense Approval Template.

Image
➥  Median ui 1.6 Redesign Blogger Template Describe  Hello my dear friends ! Are you really finding a  Median UI redesign Blogger Template  ? Your searchs is over here! Finally I am going to share  Median UI Redesign Blogger Theme for free . Its a best redesign version of  median UI  because in this theme we are use high quality SVG icons to give attractive look for website or blog. You can edit  SVG icon fill color  as your choice.  Amazing background use in this median UI redesign blogger theme . Its also have popup recent comments widget to view the recent comments of your blog or website. So its also responsive with all types of device. It is also an  AdSense friendly blogger template  because I got AdSense in this template. So if you use this redesign blogger theme in your website then your website obviously approved by Google AdSense service. AdSense ads placements in this template is better than any other templates. So I...
Read more