Publish Your Blogger Codes In Stylish CSS3 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 non-professional.

Pay Attention: Beautiful Sidebar Email Subscription Widget for Blogger

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.

Check out: Trending Post Widget for Blogger

Adding Stylish CSS3 Boxes to Blogger

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

Share this post