Breaking

Wednesday, 21 March 2018

HOW TO INSERT CODEBOX IN BLOGGER POST

              Blogger is a 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 others 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 2018



blogger code box, how to add codebox in blogger, codebox


    Step 1: Go to Blogger Template and click customise button present at the left, below the preview of your template.



customise blogger 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.

add custom css in blogger
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.


edit html in blogger template


2. Search custom CSS by using "Ctrl+f" function



custom css in blogger blog



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 HTML area. For adding Html, click 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>

how to add code box in blogger

     
   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 2018

No comments:

Post a Comment

Pages