Blogger is the best free and trustworthy platform for blogging. Blogger is a reliable and easy way to launch your blogging passion. it is difficult to customise blogger blog as compared to other platforms like Wordpress, Wix, Joomla etc but there are some tricks that let you customise your blog by editing Html.
Here, in this blog post, I will show you how to add code box in blogger posts. Code box creates a separate text box with different colour and font and separates it from other text on the blog. Thus lets visitors easily find the code they want. let us start with step 1.
Also Read: Top 5 Free Blogger Templates To Create A Beautiful Blog 2020
Step 1: Go to Blogger Template and click the customise button present at the left, below the preview of your template.
Step 2: Go to advance and then Add Custom CSS or add CSS. Paste the code given below in the code box.
In some cases, you would not be able to add custom CSS. You can do it by editing your template HTML.
1. Goto your blog template and click edit template.
2. Search custom CSS by using "Ctrl+f" function
3. Place the above code from step 2 below "Custom CSS here".
Step 3: Go to your post in which you want to add code box and put the given below code in the HTML area. For adding Html, click the HTML button at the top of the post. Now replace here is your code with the code you want to put in your blog post.
This tutorial was a little bit of blog customisation, in the next tutorials, I will discuss some other customisation that will take your blog to the next level. If you face any problem while doing the operations, ask me in the comments box below. I will try to help you as soon as possible.
Regards.............NaSyx
Also Read: TOP 5 WAYS TO MAKE MONEY ONLINE IN 2020
Here, in this blog post, I will show you how to add code box in blogger posts. Code box creates a separate text box with different colour and font and separates it from other text on the blog. Thus lets visitors easily find the code they want. let us start with step 1.
Also Read: Top 5 Free Blogger Templates To Create A Beautiful Blog 2020
Step 1: Go to Blogger Template and click the customise button present at the left, below the preview of your template.
 |
| www.3ptechies.com |
Step 2: Go to advance and then Add Custom CSS or add CSS. Paste the code given below in the code box.
 |
| https://blog.bthemez.com/solve-blogger-layout-problem/ |
.code { background:#f5f8fa; background-repeat:no-repeat; border: solid #5C7B90; border-width: 1px 1px 1px 20px; color: #000000; font: 13px 'Courier New', Courier, monospace; line-height: 16px; margin: 10px 0 10px 10px; min-height: 16px; overflow: auto; padding: 28px 10px 10px; width: 90%; } .code:hover { background-repeat:no-repeat; }
(or)
In some cases, you would not be able to add custom CSS. You can do it by editing your template HTML.
1. Goto your blog template and click edit template.
2. Search custom CSS by using "Ctrl+f" function
3. Place the above code from step 2 below "Custom CSS here".
Step 3: Go to your post in which you want to add code box and put the given below code in the HTML area. For adding Html, click the HTML button at the top of the post. Now replace here is your code with the code you want to put in your blog post.
<div class="code">
here is your all code
</div>
here is your all code
</div>
This tutorial was a little bit of blog customisation, in the next tutorials, I will discuss some other customisation that will take your blog to the next level. If you face any problem while doing the operations, ask me in the comments box below. I will try to help you as soon as possible.
Regards.............NaSyx
Also Read: TOP 5 WAYS TO MAKE MONEY ONLINE IN 2020
Comments
Post a Comment
Do Not Add HTML links to your comment. Otherwise, your comment won't be approved.