Create Responsive Code Boxes in Blogger Using "pre" Tag

Responsive Code Boxes for Blogger

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 our previous post we created the notification boxes for Blogger and in this post I will help you create responsive code boxes in Blogger using a specific HTML tag called <pre> tag.

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 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:

CSS#1:

code box 1

  • Go to your Blogger account > Theme > Backup Template.
  • Click on Edit HTML
  • Search for <head> tag and just below that tag paste the following source link to Font Awesome 
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet'/>

  • Now search for ]]> </b:skin>
  • Above that tag paste the following CSS code.
pre{font-family: Monaco, "Andale Mono", "Courier New", Courier, monospace;
background-color: #f5f5f5;
-webkit-background-size: 100% 50px;
-moz-background-size: 100% 50px;
background-size: 100% 50px;
line-height: 25px;
color: #444;
position: relative;
padding: 30px;
margin: 15px 0 10px;
overflow: hidden;
white-space: pre-wrap;
position: relative;
border: 1px solid #ddd;
-webkit-user
    -select: all;
    -moz-user-select: all;
    -ms-user-select: all;
    user-select: all;
}

pre:after{font-family: FontAwesome;
position: relative;
content: "\f121";
float: right;
font-size: 60px;
font-weight: bold;
color: #ddd;
top: -10px;}  

CSS#2:

code box 2

  • Search for ]]> </b:skin> and just above that paste the following CSS code.
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono');
pre{font-family: Roboto Mono;
background: rgba(0,0,0,0.85);
  border-radius:6px;
-webkit-background-size: 100% 50px;
-moz-background-size: 100% 50px;
background-size: 100% 50px;
line-height: 25px;
color: #8a8a80;
position: relative;
padding: 30px;
margin: 15px 0 10px;
overflow: hidden;
white-space: pre-wrap;
position: relative;
-webkit-user-select: all;
    -moz-user-select: all;
    -ms-user-select: all;
    user-select: all;
}

pre:before{content:'Code';display:block;background:#ff9800;margin-left:-30px;margin-right:-30px;color:#fff;padding-left:7px;font-weight:400;font-size:15px;margin-top:-30px;margin-bottom:10px; font-family: roboto mono;}   

CSS#3: 

code box 3

  • Search for ]]> </b:skin> and just above that paste the following CSS code.
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono');
pre{font-family: Roboto Mono;
background: #fff;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-left:8px solid #6dbb90;
  border-right:8px solid #6dbb90;
  -webkit-background-size: 100% 50px;
-moz-background-size: 100% 50px;
background-size: 100% 50px;
line-height: 25px;
color: #555;
position: relative;
padding: 30px;
margin: 15px 0 10px;
overflow: hidden;
white-space: pre-wrap;
position: relative;
-webkit-user-select: all;
    -moz-user-select: all;
    -ms-user-select: all;
    user-select: all;
}

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

 The HTML:

Now it's time to share the tricky part! While writing 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 <pre></pre> tag like below!

<pre>
Your code goes here </pre> 

Note: Code Box won't show up in Compose mode. For that you will have to preview your post and in case you need to alter the code then always switch to the HTML mode to alter it!

Over to you!

Now you know how easy it is to add these responsive code boxes in your Blogger posts. We use the exactly same tactic when we share codes in our posts just like we did in this post. HAHA 😃 Stay blessed and keep reading our tutorials!

If you like our tutorials then don't forget to follow us on Facebook and Twitter. We are always active to help and live up to your expectations!

No comments:

Powered by Blogger.