Blogger Post में HTML या CSS Code Box कैसे Add Kare

How to add code box in blog post in hindi : नमस्कार दोस्तों ! आज मैं आपको बताने जा रहा हूँ कि कैसे आप अपने blog post में HTML या CSS code के लिए code box को add कर सकते हैं | Blogger blog बहुत ही अच्छा platform है उन सभी के लिए जो कि अपने thought को share करना चाहते है और इससे money earning करना चाहते है | Blogger blog free है और यह आपको आपके choice के अनुसार blogger template को edit करने का option देते है |

आप blogger blog template को edit HTML ऑप्शन पर click करके edit कर सकते है और उसमे html या CSS code को add कर सकते है या फिर customise पर क्लिक करके CSS code को add कर सकते है |

bloggger post me html css code box kaise add kare

जब आप कोई ऐसा post लिखते है जिसमे कि कुछ उपयोगी HTML और CSS program की जानकारी देते है तो आप जरूर चाहते होंगे कि HTML और CSS code आपके पोस्ट में stylish and professional दिखें | तो दोस्तों आप मैं आपको इसी बारे में बताने जा रहा हूँ कि HTML और CSS code box को अपने blogger post  में कैसे show करें |

WordPress में इसके लिए विशेष plugins होता है | बहुत सारे tools भी है जहाँ से आप code box के लिए code बना सकते हैं | परंतु इसमें एक समस्या यह हो सकती है कि code के साथ उनके site का link भी हो | इस तरह का code अपने site पर लगाना ठीक नहीं होगा | आपको डरने की जरुरत नहीं है | मैं जो आपको code दे रहा हूँ उसमे किसी भी तरह का link जुड़ा हुआ नहीं होगा |

Blog Post में Code Box कैसे Add करें ?

Blogger post में code box को लगाने के लिए मैं आपको आसान सा method बतलाता हूँ | बस आप मेरे steps को follow करें |

Step 1

सबसे पहले अपने blogger account में login करके blogger dashboard में जाएं |

Step 2

  1. Theme (template) पर click करे |
  2. Customise पर click करें |
click on theme and then customise

Step 3

Customise पर click करने के बाद एक नया window open होगी |
click on advanced and then add css

  1. Advanced पर click करें |
  2. Add CSS option पर click करें |
  3. अब आपके सामने एक new box open होगी जो कि CSS editor है | नीचे दिए code को copy करके इस box में paste कर दे और उसके बाद Apply to Blog button पर click करें |
/* Code Box ———————————————– */ .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; max-height: 200px; min-height: 16px; overflow: auto; padding: 10px 10px 10px; width: 90%; } .code:hover { background: #FAFAFA; background-repeat:no-repeat;}

Step 4

Post editor को open कीजिए |

switch on html mode in blogger post editor
  1. HTML button पर click करें |
  2. Post में जिस place पर code box को रखना है, उस place पर नीचे दिए code का इस्तेमाल करें |

    <div class=”code”> Your Code </div>

  3. <div class=”code”> और </div> के बीच में HTML or CSS code को रखें और फिर compose button पर click करें |

इसी प्रकार आप code को <div class=”code”> और </div> के बीच में रखकर अपने post में code box को लगा सकते है |

Note:- बहुत से free blogger template में code को add करने के लिए customise option में CSS editor box नहीं होता है | अगर आपके ब्लॉगर टेम्पलेट में यह option नहीं है तो आप दूसरे method से HTML और CSS code box को अपने post में लगा सकते है | दूसरे method का इस्तेमाल करने के लिए यह post पढ़े : Blogger Post में Code Box कैसे Add करे ?

HTML और CSS Code box को blog post में लगाने में कोई problem आती है तो मुझे comment करके बताये | मैं आपके problem को दूर करने का पूरी कोशिश करूँगा | इसी तरह का post पढ़ते रहने के लिए मुझे subscribe करें |

अगर यह post आपको पसंद आया हो तो इसे अपने दोस्तों के साथ facebook, twitter etc. जैसे social site पर share करें |

Share your love
Himanshu Kumar
Himanshu Kumar

Hellow friends, welcome to my blog NewFeatureBlog. I am Himanshu Kumar, a part time blogger from Bihar, India. Here at NewFeatureBlog I write about Blogging, Social media, WordPress and Making Money Online etc.

2 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *