How to add a code box to a blogspot article or post?
Hello blogger!
Welcome to the Channel SEO Blog. If you want to add icon box to your blog post, you should read and understand this post without ignoring it.
How do I add a blogspot article or post icon box to this post? (How to Add Code Box to Blogger Post) I would say,
Friends, if you have installed free blogger template or premium blogger template on your site, you can easily add code box to any article or post on your blogspot website Follow the steps given in this post.
Why is it important to add an icon box to a blogger post? (Why is it important to add an icon box to a blogger post?)
Friends, sometimes it happens that we have to write a post on some coding related keyword like I have written this post Why is it important to put code box in blogger post? (Why is it important to add a code box in Blogger? Post?) In this you have to share the code in your post like HTML code, Java code, JavaScript etc. All these codes can be huge. If you put this code directly in your post, our article will look really bad and our visitors won't understand. That's why we've added a zip box to our blog posts, as you can see below.
Let's see how to add a code box to a blogspot article or post?
How to add a code box to a blogspot article or post? Go step by step.
Step 1:- By copying this code from blogger dashboard, edit the HTML and paste it in <head> and </head>.
<link href="https://cdn.jsdelivr.net/npm/highlight.js@10.7.2/styles/atelier-heath-dark.css" rel="stylesheet"></link>
Step 2: Now copy this code and paste it in <body> and </body>.
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js'/> <script>hljs.highlightAll();</script>
Step 3: Now by copying this code, find any style code between <head> and </head> and paste it before </head>.
<style>
/* Highlighter */ .post-body code{padding:1.2em}.hljs{display:block;overflow-y:hidden;overflow-x:hidden;font-size:14px;padding:1.2em;background:#262a2d;color:#fff;line-height:1.5;text-align:left;word-spacing:0;font-family:monospace;border-radius:8px;max-height:350px}.hljs:hover,.hljs:focus{overflow-y:auto;overflow-x:auto}.hljs-name,.hljs-strong{font-weight:500}.hljs-code,.hljs-emphasis{font-style:italic}.hljs-tag{color:#55c8f9}.hljs-variable,.hljs-template-variable,.hljs-selector-id,.hljs-selector-class{color:#a2e4ff}.hljs-string,.hljs-bullet{color:#b3ffb3}.hljs-type,.hljs-title,.hljs-section,.hljs-attribute,.hljs-quote,.hljs-built_in,.hljs-builtin-name{color:#fdfd8e}.hljs-number,.hljs-symbol,.hljs-bullet{color:#fd4f4f}.hljs-keyword,.hljs-selector-tag,.hljs-literal{color:#fcc28c}.hljs-comment,.hljs-deletion,.hljs-code{color:rgba(255,255,255,.6)}.hljs-regexp,.hljs-link{color:#c6b4f0}.hljs-meta{color:#fc9b9b}.hljs-deletion{background-color:#fc9b9b;color:#333}.hljs-addition{background-color:#a2fca2;color:#333}.hljs a{color:inherit}.hljs a:focus,.hljs a:hover{color:inherit;text-decoration:underline}mark .hljs-attr,mark .hljs-string,mark .hljs-bullet{background-color:#f24a4a;color:#fff}.hljs mark{background-color:#f24a4a;color:#fff;padding:2px 5px;border-radius:2px}.BLOG_mobile_video_class{display:none!important}.hljs mark span.hljs-number,.hljs mark span.hljs-comment,.hljs mark span.hljs-symbol,.hljs mark span.hljs-string,.hljs mark span.hljs-attr,.hljs mark span.hljs-keyword,.hljs mark span.hljs-name,.hljs mark span.hljs-tag{color:#fff;margin:.15rem 0}.Night mark .hljs-attr,.Night mark .hljs-string,.Night mark .hljs-bullet{background-color:#2e86de;color:#fff}.hljs mark .hljs-selector-class{color:#fff}
</style> Step 4:- Save Now.
Now that the zipbox has been added to your Blogger template, you need to write a post.
Now you have to add the code to the post as per the steps mentioned in this post.
Step 5:- If you want to add zip box to blogspot website article or post, go to new post or edit post in blogger dashboard and open it.
Step 6:- Click on the pencil icon on the left side and then click on View HTML.
Now locate where you want the icon to appear.
Note: If you paste the code before </div> or <br /> then no error will appear.
Step 7:- Go to HTML view and paste the copied code where you want to display it.
Type <br/> <pre> <code> before the copied code and </code> </pre> <br/> after the copied code.
<br/> <pre> <code> Paste Your Code</code> </pre> <br/> Step 8:- Now click on compose view.
To see it, you can preview the blog post box in your post by clicking Preview.
The code will start within the show.
For more information you can watch the video below, if you like the video then like and subscribe the channel for more videos related to blogger. Thanks
How to Add Stylish Code Box in Blogger Post [Using Syntax Highlighter Tool]
In this post we learned –
How to Add Code Box in Blogspot Article or Post (How to Add Code Box in Blogger Post ) If you still face any problem then you can ask us by commenting in comment box. We hope you like the information we provide and find it useful. If you like this post then share this post with your friends who want to read this post.
0 Comments