Publish Your Blogger Codes In Stylish CSS3 Boxes

Write Your Blogger Codes In Stylish 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>

Meet Our Blogger Community! JOIN NOW

Subcribe to Our Newsletter For Free

Subscribe Now

Recommended For You

4 comments: