Pure Css Code Box With Hover Effect for Blogger

SHARE IT


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.


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.

COMMENTS

Subscribe Us by Email and Get Free Updates On Hot Topics!
Name

Action,2,Android,11,Blogger,9,Blogger Themes,2,Free Internet,1,Games,5,GTA,2,Hindi/Urdu Tutorials,4,Huawei,2,IOT,4,Iphone,1,Mobile,8,Namesilo,1,News,9,Nokia,1,OnePlus,1,Plugins,4,Reviews,4,Samsung,1,SEO,1,Staff Pick,4,Tips & Tricks,8,Top 10,3,Windows,6,Xiaomi,1,
ltr
item
HumptechTips: Pure Css Code Box With Hover Effect for Blogger
Pure Css Code Box With Hover Effect for Blogger
using a code box in blogger helps a lot when you need to share some codes. With our hover effect code box, it will look more awesome than before....
https://3.bp.blogspot.com/-ypTx6wLEL_0/WS_vDNyW6mI/AAAAAAAAAsw/Dn_Z0rBJDuwUANtGm-H96T_gRl-Tkj2ugCLcB/s1600/dp%25282%2529.jpg
https://3.bp.blogspot.com/-ypTx6wLEL_0/WS_vDNyW6mI/AAAAAAAAAsw/Dn_Z0rBJDuwUANtGm-H96T_gRl-Tkj2ugCLcB/s72-c/dp%25282%2529.jpg
HumptechTips
http://www.humptechtips.com/2017/06/blogger-css-code-box-hover-effect.html
http://www.humptechtips.com/
http://www.humptechtips.com/
http://www.humptechtips.com/2017/06/blogger-css-code-box-hover-effect.html
true
540480682964900910
UTF-8
Loaded All Posts Not found any posts VIEW ALL Read More Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy