How to create responsive code box in blogger - pre tags - one click select all | techgridle

Sometimes you have to write code in your blog posts just like we do in our posts when we need to share any kind of widget on our blog for our readers and to separate that code from the text, we use code box in our posts. So that’s what code boxes are mostly used for.

In this post, we will help you create responsive code boxes in Blogger using a specific HTML tag called pre tags. These codes boxes are responsive that is on click it will select all.

This tutorial is going to be a really simple and basic but I am still sharing it for beginners or newbies who don’t even know the basics of HTML and CSS or who are still in learning stage. Creating code box in Blogger is a bit of tricky too and I will also share that tricky part in the end so keep reading!

How to add code boxes in Blogger:

STEP 1:

•     Go to your Blogger dashboard.

•     Then, go to the Theme option there.

•     Click on Edit HTML option present there.

•     Now, search (Ctrl + F) their tag and just paste below code just after and click on SAVE.

GET CODE

(click here to view)

•     Finally, the first step is completed.

STEP 2 :

•  In the blogger dashboard >> Themes >> Edit HTML >> find a code there ( Ctrl+F key ).

• Now search for  ]]>

• And just above this tag paste anyone CSS code given below

**if you are facing problem in adding CSS code then try an alternative method

How to insert CSS code in blogger | easiest way  (click to view article)

Above that tag paste the following CSS code.

STYLE 1:

GET CODE (click here)

STYLE 2:

GET CODE (click here)

STYLE 3:

GET CODE (click here)

When you have successfully added any of the above CSS codes then Save your template!

STEP 3:

Now when you need to share codes on your post then you need to add code in a systematic format explained below:

While writing the blog post, when you need to add code in your post then you will write or paste your code just like normal text in Compose mode and then you will switch to the HTML mode of your editor and enclose that code in

the tag is shown below!