Home
Blogger Tips
Templates

Blogspot Site के Article या Post में Code Box कैसे Add करें ?

Blogspot Site के  Article या Post में Code Box कैसे Add करें?

Blogspot Site के Article या Post में Code Box कैसे Add करें
Blogspot Site के  Article या Post में Code Box कैसे Add करें


हैलो ब्लॉगर ! स्वागत है आप सभी का  AK Help Point ब्लॉग में । अगर आप भी अपने ब्लॉग के Post (Article) मे Code Box Add करना चाहते हैं तो इस पोस्ट को बिना Skip किए ध्यान से पढ़िएगा और समझिएगा ।

मैं इस पोस्ट मे Blogspot Site के  Article या Post में Code Box कैसे Add करें? (How to Add Code Box in Blogger post in Hindi) बताने वाला हूँ , 

दोस्तो अगर आपके साइट मे कोई भी Free Blogger Template Install या Premium Blogger Template Install कर के रखा है तो उसमे आप इस पोस्ट मे बताए गए Steps को Follow करके आसानी से अपने Blogspot Site के  Article या Post में Code Box Add कर सकते हैं । 


यह भी पढ़ें:

How to Add Automatically Create Source Link in Blogger Post


Blogger Post में Code Box Add करना क्यों जरूरी है?(Why is it necessary to add Code Box to Blogger Post?)

दोस्तो कभी-कभी क्या होता है की हमे कुछ ऐसे Keyword पर पोस्ट लिखना पड़ता है जो Codding से Related होता है जैसे मैंने ये पोस्ट लिखा है Blogger Post में Code Box Add करना क्यों जरूरी है?(Why is it necessary to add Code Box to Blogger Post?)  इसमे हमे Html Code, Java Code, JavaScript, etc Code अपने Post में Share करना पड़ता है, जबकि ये सब Code बहुत बड़ा हो सकता है । अगर इस Code को directly अपने पोस्ट मे डालेंगे तो हमारा Article बहुतऔर खराब दिखेगा और हमारे Visitor को समझ भी नहीं आएगा । इसलिए हमे अपने Blog के Post में Post Code Box Add कर के रखा है, नीचे आप देख सकते हैं । 

तो चलिये जानते हैं Blogspot Site के  Article या Post में Code Box कैसे Add करते हैं ?

Blogspot Site के  Article या Post में Code Box कैसे Add करें? जाने Step by Step.

Step1.

इस Code को Copy करके अपने Blogger Dashboard से Edit Html मे जाकर <head> और </head> के बीच Paste कर दीजिये ।


 <!--[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

अब इस Code को Copy करके  <body> और </body> के बीच Paste कर दीजिये ।


 <!--[www.akhelppoint.com ]-->
 <script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js'/>
<script>hljs.highlightAll();</script>

Step.2

अब इस Code को Copy करके अपने <head> और </head> के बीच किसी Style Code को Search करके </head> के पहले Paste कर दीजिये ।
Blogspot Site के Article या Post में Code Box कैसे Add करें




 <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 कर दीजिये । 

यह भी पढ़ें 

How to Add Featured Post by Label on Blogger Template


अब आपके Blogger Template me Post Code Box Add हो चुका है, अब आपको एक Post लिखने की ज़रूरत है ।
    अब आपको इस पोस्ट मे बताए गए steps के अनुसार , पोस्ट मे Code को Add करना है 

#Step.4 
अपने Blogspot Website के Article या Post मे Post Code Box Add करना चहते हैं तो अपने Blogger के Dashboard मे New Post पर या Edit Post पर जाए और उसे open करें । 

#Step.5

Left Side मे Pencil वाले Icon पर Click करे, फिर HTML view पर Click कर दें। 

Blogspot Site के Article या Post में Code Box कैसे Add करें ? Best Blogger Tips.


अब यहा पर वो स्थान Search करे जहां पर आप Code को Show कराना चाहते हैं।

Note: अगर आप </div> या <br /> के पहले Code को Paste करेंगे तो कोई Error नहीं Show होगा।
HTML, JavaScript, Java, CSS, etc किसी Code को अपने Post मे मे Add करने से पहले उस Code को Copy कीजिये और नीचे दिये गए Website को Open कीजिये और नीचे इमेज के अनुसार Paste और Copy कीजिये

HTML entity encoder/decoder Screenshot image
HTML entity encoder/decoder Screenshot image


Note: यदि HTML code हो तब इमेज मे दिखाये Step को Follow कीजिये 
क्योकि Html Code Directly Paste करने पर Code Show नहीं होगा। 


#Step.6

Copied Code को HTML View मे जाकर जहां Show कराना चाहते हैं वहाँ पर paste कर दें । 
      और Copied Code के पहले <br/><pre><code> और Copied Code के अंत मे </code> </pre> <br/> लिख दें । 
Edit Post in Html



#Step.7
अब Compose View पर Click कर दें । 
  इसे देखने के लिए Preview पर Click कर के देख सकते हैं , आपके पोस्ट मे Blog Post Box के 
अंदर Code Show होने लगेगा ।

अधिक जानकारी के लिए आप नीचे दिये गए विडियो को देख सकते हैं विडियो अच्छा लगे तो like और Blogger से जुड़ी और विडियो पाने के लिए Channel को Subscribe कर लीजिएगा । Thank You।

How to Add Stylish Code Box in Blogger Post in Hindi [Using Syntax Highlighter Tool]







इस पोस्ट मे हमने सीखा -
      Blogspot Site के  Article या Post में Code Box कैसे Add करते हैं  (How to Add Code Box in Blogger post in Hindi) अगर अब भी अगर आपको कोई Problem देखने को मिले तो आप हमें Comment Box में Comment करके पूछ सकते हैं। हम उम्मीद करतेहैं कि आपको हमारे द्वारा दी गई जानकारी अच्छी लगी होगी और आपके लिए Useful साबित होगी। अगर आपको यह पोस्ट पसंद आया है तो कृपया इस Post को अपने सभी दोस्तों के साथ Share करे