Skip to main content

HOW TO INSERT CODEBOX IN BLOGGER POST

By
              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 
Labels:
Location: United States

Comments

Post a Comment

Do Not Add HTML links to your comment. Otherwise, your comment won't be approved.

Popular posts from this blog

Proxima Centauri mystery deepens: We are on the brink of discovering aliens

By
Proxima Centauri, the closest star to our own Sun, has long been a subject of fascination for scientists and the general public alike. Located just 4.2 light years away, it has been the subject of numerous studies and observations over the years. Recently, however, the mystery surrounding Proxima Centauri has deepened even further, raising the question of whether we may be on the brink of discovering aliens. One of the most intriguing recent developments has been the discovery of an Earth-sized planet orbiting Proxima Centauri. Dubbed "Proxima b," this planet is located within the "habitable zone" of the star, meaning that it is possible that liquid water could exist on its surface. This has sparked speculation that the planet could potentially be home to some form of life. However, the mystery doesn't end there. In recent years, scientists have also detected strange bursts of radio waves emanating from Proxima Centauri. These bursts, known as "fast r...
Post a Comment
Read more

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

By
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...
Post a Comment
Read more