Publish Your Blogger Post Codes in Stylish CSS3 Boxes

Stylish CSS code boxes
Publishing your blog codes without boxes makes your blog look bad and the most important issue is; when you publish your codes without code boxes and backquotes, the crawl robots get confused when they visit your site. Honestly, i myself had published many codes without code boxes and backquotes,. But when i was looking at my blog, it was looking very bad and unprofessional. Therefore, i decided to change my thought. Today, i decided why not i share this tutorial with those who are looking code boxes. Ever needed to post some code into a blog post and you wanted it highlighted, in a box of a different color than the background color of your post? Or, you posted a really long code (javascript / css, etc) in a post and wanted scrollbars on it? Here is how to add it in Blogger with the CSS code. Here, i am going to share two types of boxes. One with scrollbar and other without scrollbar but when you paste a long code inside the second style, it creates the scrollbar automatically.

Adding the Style


  • Select your favorite style
  • Go to your blogger Dashboard > Template > Edit HTML
  • Click inside the template editor
  • Press Ctrl + F and search for ]]></b:skin>
  • Copy the code and paste right before the ]]></b:skin> and click save.


Style #1
With Code
/* Code Box ----------------------------------------------- */ 
.code { background:pink; background-repeat:no-repeat; border: solid #5C7B90; border-width: 1px 1px 1px 25px; color: black; font: 13px 'Courier New', Courier, monospace; line-height: 16px; margin: 10px 0 10px 10px; max-height: 200px; min-height: 16px; overflow: auto; padding: 10px 10px 10px; width: 90%; } .code:hover { background: #F08080; background-repeat:no-repeat; }
<div class="code">Your code goes here</div>

Style #2
With Code
pre.source-code {background: pink;
background-repeat:no-repeat; border: solid #5C7B90; 
border-width: 1px 1px 1px 25px; color: #000000; 
font: 13px 'Courier New', Courier, monospace; 
line-height: 16px; margin: 1px 1px 1px 25px; max-height: 500px; 
min-height: 16px; overflow: auto; padding: 28px 10px 10px; width: 90%;}
pre.source-code:hover {background: #F08080; background-repeat:no-repeat;}
<pre class="source-code">Your code goes here</code></pre>
Subcribe to Our Newsletter For Free

Subscribe Now

Recommended For You

Speak Your Mind