Skip to main content

HOW TO INSERT CODEBOX IN BLOGGER POST

              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



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


    Step 1: Go to Blogger Template and click the 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 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>

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 2020 

Comments

Popular posts from this blog

NASA's Shocking Discovery: Alien Planet Found 3 Days Ago, Cover-Up Revealed

For decades, conspiracy theorists and UFO enthusiasts have claimed that NASA has been hiding the truth about extraterrestrial life and the existence of alien planets. These claims have often been dismissed as mere speculation, but recent developments suggest that there may be more to the story than we previously thought. According to sources within NASA, the agency has recently made a groundbreaking discovery of an alien planet located in a distant solar system. The planet, which is said to be inhabited by intelligent alien beings, was discovered just three days ago by NASA scientists using state-of-the-art telescopes and other astronomical equipment. However, instead of announcing the discovery to the public, NASA has decided to keep the information under wraps and hide it from the world. This decision has sparked outrage and disbelief among many scientists, researchers and members of the public who believe that the discovery of an alien planet is a matter of global importance a...

Stranger Things S4 All Episodes Free download

If you get Redirected to any other website after clicking the download link then there is another download link available in comment section or you can simply try below link and when you get Redirected to another website simply hit back button and click it again untill the link opens in telegram Click here to download

JUST-IN: NASA Detects Radio Signal from Proxima Centauri

Scientists studying archival data collected by the Parkes radio telescope in Australia say they have found a radio signal that came from the direction of Proxima Centauri, the closest star to Earth. Proxima Centauri has at least one planet that may be habitable to life as we know it. There is a slim chance that the signal came from extraterrestrial beings, though other explanations are far more likely. Extraordinary claims require extraordinary evidence, and no one—including the astronomers analyzing the data—are claiming they’ve found aliens. A paper analyzing the findings is not expected to be published until early 2021, so there’s a lot we don’t know. But as is often the case with exciting science results, the news leaked early:  The Guardian   broke the story  on 18 December, the scientists involved  spoke publicly to  Scientific American , and experts at the SETI Institute  have   reacted . Finding life beyond Earth  is one of The Planetary S...