If your blog is about all about coding or tutorials then you need to highlight codes in your blog posts , Right ?
Code Boxes can be used to highlight code lines or commands .It shows the codes in a special box from which users can copy the code easily.
Code Boxes can be used to highlight code lines or commands .It shows the codes in a special box from which users can copy the code easily.
Sample Code Box
Step 1: Log into your Blogger Account .Go to your Blog Dashboard > Template .
Step 2: Click on Customize
Step 3: Go to Adavanced > Add CSS
Step 4: Copy and Paste the following code
.code { background:#292929 ; background-repeat:no-repeat; border: solid #CC4040 ; border-width: 2px 2px 2px 20px; color: #ffffff; font color:#d3d3d3; font: 13px 'Courier New', Courier, monospace; line-height: 16px; margin: 10px 0 10px 10px; max-height: 200px; min-height: 16px; overflow: auto; padding: 28px 10px 10px; width: 90%; } .code:hover { background-repeat:no-repeat; }
Note - You can also customise the code box by changing the above CSS code.
Step 5: Now whenever you are composing a new blog post , just go to the HTML section and type the following code where you want the code box to appear.
<div class="code"> Your Code </div>
Step 6: Use Preview to view the changes.
- Consider Liking Our Facebook Page -
Step 6: Use Preview to view the changes.
> Voila There You Go Enjoy Your Code Box <
> Made Simple <
