 |
| How to add a code box to an article or post on a blogspot site |
Hello Blogger! Welcome all of you to the HelpPoint blog. If you want to add a code box to your blog post (article). If you want to do this, read this post carefully and understand it without skipping.
How do I add a code box to a blogspot site article or post in this post? (How to add a code box to a blogger post in Hindi) I'm going to say,
Friends, if you have a free blogger template or a premium blogger template installed on your site, you can easily add a code box to your blogspot site article or post by following the steps mentioned in this post.
Read more:
How To Automatically Create Source Links In Blogger Posts
Why add a code box to a blogger post? (Why add a code box to a Blogger post?)
Friends, sometimes it happens that we have to write a post on some keywords which is related to coding as I wrote this post. Why add a code box to a blogger post? (Why add a code box to a Blogger post?) This requires us to share code, HTML code, Java code, JavaScript, etc. in our posts, when these codes can be very large. If you put this code directly into your post, our article will look bad and our visitors will not even understand. That's why we've added a post code box to our blog post, as you can see below.
So let's know how to add a code box to an article or post on a blogspot site?
How to add a code box to a blogspot site article or post? Go step by step.
Step 1.
Copy this code from your Blogger Dashboard HTML edit <head> and paste it in between .
<!--[www.akhelppoint.com ]-->
<link href="https://cdn.jsdelivr.net/npm/highlight.js@10.7.2/styles/atelier-heath-dark.css" rel="stylesheet"></link>
Step 2
Has now copied this codeAndPaste it occasionally .
<!--[www.akhelppoint.com ]-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"/>
<script>hljs.highlightAll();</script>Step 2
Now copy this code to your <head> andSearch for any style codePaste it first .
 |
<style> <!--[www.akhelppoint.com ]-->
/* 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 3
Save it now .
Also read
How to add posts featured by labels to Blogger templates
Now add me post code box to your blogger template it's done, now you have to write a post.
Now you need to follow the steps given in this post, add post code add
# Step.4
Add a post code box to an article or post on our Blogspot website. If you want to go to the new post inside Blogger's dashboard or edit the post, go and open it.
# Step.5
On the left side then click on the icon with pencil. Click HTML view feather . Do it
Now search where you want the code to appear.
Note: If you have the code
Or
pasted before it will not show any error.
HTML, JavaScript, Java, CSS etc. Before adding any code to your post, copy that code, open the website below and paste and copy according to the image below.
 |
| HTML Entity Encoder / Decoder Screenshot Image |
Note: If you have HTML code, follow the steps shown in the picture.
Because if you paste the HTML code directly, the code will not show.
# Step.6
Go to the HTML view and paste the copied code where you want it to appear.
And before the copied code
এবং কপি করা কোডের শেষে Write it down
# Step.7
Now compose view click Feather to do it
Preview itClick feather it, in your post via the blog post box
Show code inside inside
For more information, you can watch the video below, if you like the video, please like and subscribe to the channel to get more videos related to Blogger. Thanks.
How To Add Stylish Code Box To Blogger Post In Hindi [Using Syntax Highlighter Tool]
How to add a code box to an article or post on a blogspot site (How to add a code box to a blogger post in Hindi) If you still see a problem, you can let us know by commenting in the comment box . We hope you enjoy the information we provide and will find it useful. If you like the post, please share it with all your friends