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 करें
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 करे



How to Add Featured Post by Label on Blogger Template in Hindi

How to Add Featured Post by Label on Blogger Template in Hindi

 How to Add Featured Post by Label on Blogger Template in Hindi


हैलो दोस्तों, स्वागत है AKHelpPoint ब्लॉग मे । मैं इस ब्लॉग पर Blogging, SEO Tips, Earn Money, Blog Design and Customization जुड़ी Usful Post करता रहता हूँ और आज मैं आपके लिए एक बहुत ही बढ़िया टिप्स ले कर आया हूं जो है How to Install Featured Post by Label on Blogger Template in Hindi. 

    हाँ दोस्तों अगर आपके ब्लॉगर टेम्पलेट (Blogger template) में featured Post नही दिया हुआ है तो आप उस Blogger Template me Fearutred Post Add कर सकते हैं और उस Fearutred Post को अपने हिसाब से Customize भी कर सकते हैं।

How to Add Featured Post by Label on Blogger in Hindi
How to Add Featured Post by Label on Blogger in Hindi


 Featured Post क्या होता है? ( What is a Featured Post?)


दोस्तों Featured Post एक तरह का Gadget होता है। इसकी मदद से हम अपने blog किसी भी बढ़िया पोस्ट को Show करा सकते हैं।

       इससे हमे और हमारे Visiter दोनों को फायदा होता हैं।

जब हम daily अपने Blog Post डालते रहते हैं, तो जो पोस्ट लोग ज्यादा पढ़ते है वह लिस्ट में नीचे चला जाता है,  जिससे हमारे visitor को नज़र नही आती है और वो हमारी साइट को छोड़कर दूसरे साइट पर चले जाते हैं।

      लेकिन जब हम उस Post या Category को Featured Post में Add कर के रखेंगे तो हमारे visitors उस पोस्ट को आराम से Open कर के पढ़ सकते हैं।

Blogger Template में Label Featured Post Add कैसे करे (How to Add Featured Post by Label on Blogger in Hindi)

अपने Blogger Template Me Featured Post Add करने के लिए दिए गए steps को Follow कीजिए।


1.Blogger में Login कीजिए

2.Theme Menu पर Click कीजिए।

3.Edit Html पर Click कीजिए।


नीचे दिए गए code को Copy कर के इसे </head> से पहले Paste कर दीजिए।


<b:if cond='data:view.isHomepage'>
<style type='text/css'>
/* Featured */
#featured-wrapper{padding:0 20px 0 0}
.featured{color:#666;line-height:1.4em;margin:0;padding:0}
.featured ul{list-style:none;margin:0;padding:0}
.featured li{margin:0;padding:0;line-height:1.4em}
.featured .widget{padding:0;margin:0 0 20px}
ul.tech_thumbs{margin:0;padding:0}
ul.tech_thumbs li{margin:0 0 1px;padding:0}
ul.tech_thumbs .tech_box{background:#050505;position:relative;margin:0;padding:0;overflow:hidden;width:100%;height:auto}
span.tech_title a{left:0;bottom:0;position:absolute;margin:0;padding:20px 30px;height:auto;line-height:1.2em;color:#fff}
span.tech_title2 a{left:0;top:0;position:absolute;margin:0;padding:15px 30px;height:auto;line-height:1.4em;color:#fff}
ul.tech_thumbs p,ul.tech_thumbs2 p{line-height:1.2em;color:#eee;margin:8px 0 0;padding:0;font-size:12px;font-weight:400;text-transform:none;letter-spacing:normal}
span.tech_title a:hover,span.tech_title2 a:hover,span.tech_title3 a:hover{text-decoration:none}
ul.tech_thumbs .tech_box img{height:auto;width:100%;opacity:.6;transition:all .5s ease}
ul.tech_thumbs .tech_box:hover img{opacity:.5}
ul.tech_thumbs2,ul.tech_thumbs3{margin:0;padding:0}
ul.tech_thumbs2 li{float:left;margin:0 1px 1px 0;padding:0}
ul.tech_thumbs2:nth-child(odd) li{margin:0 0 1px 0}
ul.tech_thumbs2 .tech_box2{background:#050505;position:relative;margin:0;overflow:hidden;width:313.9px;height:170px}
ul.tech_thumbs2 .tech_box2 img{opacity:.5;width:100%;height:100%;transition:all .5s ease}
ul.tech_thumbs2 .tech_box2:hover img{opacity:.3}
span.tech_title{font-size:24px;font-weight:500;margin:0;padding:0;letter-spacing:1px}
span.tech_title2{font-size:16px}
@media screen and (max-width:768px){
#featured-wrapper{padding:0;margin:0 auto 10px auto;overflow:hidden}
ul.tech_thumbs2{display:none}}
</style>
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(e){for(h=0;h<numtech;h++){f=(o=e.feed.entry[h]).title.$t;if(h==e.feed.entry.length)break;for(m=0;m<o.link.length;m++){if("replies"==o.link[m].rel&&"text/html"==o.link[m].type)o.link[m].title,o.link[m].href;if("alternate"==o.link[m].rel){u=o.link[m].href;break}}var t;try{t=o.media$thumbnail.url,t=t.replace("/s72-c/","/w"+box_width+"-h"+box_height+"-c/")}catch(e){s=o.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),t=-1!=a&&-1!=b&&-1!=c&&""!=d?d:no_box}var i=(x=o.published.$t).substring(0,4),r=x.substring(5,7),n=x.substring(8,10),l=new Array;l[1]="January",l[2]="February",l[3]="March",l[4]="April",l[5]="May",l[6]="June",l[7]="July",l[8]="August",l[9]="September",l[10]="October",l[11]="November",l[12]="December",document.write('<ul class="tech_thumbs">'),document.write("<li>"),document.write('<div class="tech_box"><a href="'+u+'"><img width="'+box_width+'" height="'+box_height+'" alt="'+f+'" src="'+t+'"/></a><span class="tech_title"><a href="'+u+'" target ="_top">'+f+"<p>"+l[parseInt(r)]+" "+n+", "+i+" </p></a></span></div>"),document.write("</li>"),document.write("</ul>")}for(h=1;h<numtech2;h++){f=(o=e.feed.entry[h]).title.$t;if(h==e.feed.entry.length)break;for(m=1;m<o.link.length;m++){if("replies"==o.link[m].rel&&"text/html"==o.link[m].type)o.link[m].title,o.link[m].href;if("alternate"==o.link[m].rel){u=o.link[m].href;break}}try{g=o.media$thumbnail.url.replace("/s72-c/","/w"+box_width2+"-h"+box_height2+"-c/")}catch(e){s=o.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),g=-1!=a&&-1!=b&&-1!=c&&""!=d?d:no_box2}var i=(x=o.published.$t).substring(0,4),r=x.substring(5,7),n=x.substring(8,10);document.write('<ul class="tech_thumbs2">'),document.write("<li>"),document.write('<div class="tech_box2"><a href="'+u+'"><img width="'+box_width2+'" height="'+box_height2+'" alt="'+f+'" src="'+g+'"/></a><span class="tech_title tech_title2"><a href="'+u+'" target ="_top">'+f+" <p>"+l[parseInt(r)]+" "+n+", "+i+"</p></a></span></div>"),document.write("</li>"),document.write("</ul>")}};
var numtech=1,numtech2=3,box_width=629,box_height=350,box_width2=314,box_height2=170; 
var no_box = 'https://2.bp.blogspot.com/-hJCmymH_jbk/WmpmjvEx2nI/AAAAAAAABqI/mwD8HQPUjI8OfBNfJ8CniDVD40bnPAMswCLcBGAs/s1600/tech1.jpg'; 
var no_box2 = 'https://2.bp.blogspot.com/-MfOI67FUg6Q/WmpmjW8Ml5I/AAAAAAAABqE/8GdkCFEZEIkwplEXubzxtaKUvs9CyK9NwCLcBGAs/s1600/tech2.jpg';
//]]>
</script>
</b:if>

Note: Mareked Code को  ऊपर के Code मे Search करें  box_width = 629 box_height = 350 box_width2 = 314 and box_height2 = 170; अपने Blogger Template के According 
 इसके  Width और Height को Change कर दे.
 
अब नीचे Image मे दिखाये Marked Code को <body> और </body> के बिच Search कीजिये और उस Code को  निचे दिए गए Code के साथ Replace  कर कर दें। 

Blogger Html Edit Box Featured Post Code
Blogger Html Edit Box Featured Post Code


   Note: अगर इमेज मे दिखाये गए Marked Code Search करने पर न मिले तो आप इस code को <body> और </body> के बीच जहा Show करना चाहते है वहाँ Paste कर दें ।
4. अब Save कर दें.

<b:if cond='data:view.isHomepage'>
<div id='featured-wrapper'>
  <b:section class='featured' id='featured' maxwidgets='1' showaddelement='yes'>
    <b:widget id='HTML200' locked='false' title='' type='HTML' version='1'>
      <b:widget-settings>
        <b:widget-setting name='content'>Featured</b:widget-setting>
      </b:widget-settings>
      <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
<div class='widget-content'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?orderby=published&amp;alt=json-in-script&amp;callback=labelthumbs\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
</b:includable>
    </b:widget>
  </b:section>
</div>
</b:if>


5. अब Blogger Layout पर click कीजिये।

ब्लॉग्स्पॉट Layout


6. Featured Widget के Edit Link पर Click करे।
 
Blogspot Layout Featured Edit Widget Popup image
Blogspot Layout Featured Edit Widget Popup image

7. Featured की जगह आप अपने साइट मे से उस Label का नाम लिख दें जिसका पोस्ट को Show करना चाहते हैं उसके बाद Save कर दें 

एक बार अपने Site को Refresh कीजिए।

 अब आप अपने Site Ko Blogger Template मे Featured Post Show होने लगेगा।


Blogger Template Ko Download and Install Kaise Kare - AKHelpPoint

Blogger Template Ko Download and Install Kaise Kare - AKHelpPoint

Blogger Template Ko Install Kaise Kare (How To Install Blogger Template in Hindi)


Hello Friends! Welcome to my Blog AK Help Point
Friends agar aapne ek Blogger.Com par website bana ke rakha hai aur use ek Beautiful Looking dena chahte hai to iske liye Blogger Template Bahut Jaruri Hota Hai. 
    
Jab aap Blogger pe Blog Create Kar Rahe Honge to usme Blogger.Com Ke diye huye kuchh Blogger Template Pahle Se Available hote , jinme se kisi ek ko Choose kar ke apna blog ko Create Karna hota hai, But ye Template Jyada achhe Nahi dikhte Hain aur isme kuch kamiya bhi rahti hai. isliye Friends aaj main iss post me Blogger Template Ko Install Kaise Kare (How to Install Blogger Template in Hindi) ke bare me batayenge , to aap iss post ko bina skip karte huye Dhyan se padhiyega.

How to install blogger template
How to install blogger template

Friends pahle mai bat dun ki Blogger Theme ya Blogger Template free me bhi milta hai aur Blogger Template Buy bhi kar sakte hain jise Premium Blogger Template kahte Hain.

Free Blogger Template:  Free Blogger Template Download kar ke agar aap apne Blogger Me Install Karenge to aapke Blogger site me Kuchh kuchh kamiya aur kuchh aisi Chij hote hain Jise aap nhi hat sakte (ex. Footer Credit) , agar aap Footer Credit ko Remove karte hai to aapke site ko open hote hi aapka site us site me redirect ho jayega jaha se wo Template Download Kiya Gaya tha.

Premium Blogger Template:  Premium Blogger Template Download karke Agar aap apne Blogger Site Me Install Karte hai to aapko Free Blogger Template Me Jo likha hai waisi koi pareshani nahi hoga. but aapko buy karna hoga.

Kon sa Blogger Template Download Kare ?

Friends Jab aapko Kisi Blogger Template Ko Download Karna ho to aap Uss Template me Kya kya Feature mil raha hai us par dhyan jarur de ye feature aapke Blog ko Ranking Me bahut hep Har karta hai, isliye Friends Jab bhi aap koi template Download kare to dekh le ki Template Responsive aur SEO Friendly hai ya nhi, kyoki ye bahut jaruri hai.

Blogger Template Download Kaise Kare ?


Friends Blogger Template Download Free and Premium dono tarah ke Link Niche diya gaya hai Aap Is Link se apne Pasand ke anusar Download Kar Le





jo aapne template Download kiya hai , agar wo "Zip, Rar" Format me hai Use Extract kar le
agar Extract Nahi ho raha hai to aap ZArchiver app Android  Mobile le liye Use Kar Sakte Hain, Ye aapko Play store  pe Mil jayega.

Blogger Template Ko Install Kaise Kare?
(How to Install Blogger Template in Hindi)

Aagar aapne Blogger Template Download Kar Liya Hai aur Use Extract kar Liya aur Install karna Chahte hai to aap niche bataye gaye Step Ko Follow kijiye....

Step-1: apne Gmail Account se Blogger me Login kijiye.

Step-2: us Site Ko Choose Kare Jisme Blogger Template Install Karna Chahte Hain.
How to install blogger template

Step-3: Theme pe Click Kare
How to install blogger template

Step-4: Agar Aapka blogger Classic Version  me Hai to Backup/Restore  par Click kare aur agar  Blogger Ke New Version me hai to right  side ke Three dots  par click kare.
How to install blogger template

Step-5:  Pahle wale Theme Ko Download Karne Ke Liye (1)  par click kare.
 New Blogger Blogger Template Install Karne ke liye (2) pae click karke apne File Manager se template ko Choose kare (Template .xml Format me Hoga)

How to install blogger template

Step-6: Upload par Click kar de

ab aapka Template install ho jayega.


Blogger Template Ko Customize or Design kaise kare?  agar aap chahte hai ki main ispar bhi post likhu to hame comment me jarur bataye.


Mujhe ummid hai aapko ye post pasand aaya hoga , agar koi Question ya Advices ho to hame Comment jarur kare.
  Thank You.