Why You Need To Publish 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 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.First, go to your blogger Dashboard > Template > Edit HTML and search for: ]]></b:skin> and paste this above it:
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; }
.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
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>
