Pure Css Code Box With Hover Effect for Blogger

Adding a code box in blogger is a headache when you don't know how to create one or add it to your blogger blog. some of the users use blockquote function as code box which is an awesome way to use blockquote but what if you also use blockquote as quoting then what will you do? Here I created a code box which is purely based on CSS and does not slow your blog speed and is also very comfortable while using it and it will also add a very good view in your blogger post. 

Also, I added a hover effect in it. so whenever a user visits and hovers over the code box it will create a very beautiful hover effect.

Want to see the Demo. It is on this page. Go below to see it.

[DEMO ##eye##]

How to add CSS code box to blogger?

 
Step 1: Go to Blogger.com

Step 2: from the right sidebar go to "Theme"

Step 3(optional): Take a backup of your current theme so it can be reverted back in the future if you want.

Step 4: Now select "EDIT HTML" and wait for the HTML editor to open.

Step 5: click into the html editor and press Ctrl+F. now search for "]]></b:skin>"

.

Step 6: Once you find "]]></b:skin>" then paste the below-given code above the "]]></b:skin>" and click on save theme.

[/*-----Pure css code box by Humptechtips.com
Dont Remove the credits.-------*/
.code1 {
overflow:auto;width:85%;height:98%;
font-family: "Consolas", "Courier New", Courier, mono, serif;

color:#fff;
margin : 15px 35px 15px 15px;
padding : 10px 10px 10px 35px;
clear : both;
list-style-type : none;
background : #000000;
border : 2px solid #fd4326;
border-left:20px solid #fd4326;
-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border--moz-border-radius: 23px 20px 20px 20px;border-radius: 23px 20px 20px
}
.code1:hover{
background : #000000;
color: #fff;
border : 2px solid #0099ff;
border-left:20px solid #0099ff;
-webkit-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
box-shadow: 10px 10px 5px #888888;
}
/*-----Code box ends---------*/]

For Editing: 
Change the Green color code to change the border of the of the box.
Change the Orange Color code to change the border color after Hover 

Now the editing and adding the code is done. Your Code box is ready to use. 

How to Use the Code Box?

 
While writing an article or post go to HTML editor and add this code where you want to add the code box.

[<div class="code1">
Add your content Here
</div>] 

Replace the "Add your content Here" with your code or anything you want to write and publish the post. 

conclusion:

The above post was about "Pure Css Code Box With Hover Effect for Blogger". Most of the people love to use blogger and there are latest themes which have so much to do in blogger. With our CSS code box, it will add an another marvel to your blogger blog. Comment below if you are having any problem with it.