Blogger में Message Box और Code Box कैसे लगाएं? [7+ New Design]

नमस्कार दादाभाई, आज की इस पोस्ट में हम सीखेंगे कि Blogger पोस्ट में सुंदर Message Box और Code Box कैसे जोड़ते हैं। आपने देखा होगा Teckpas.com या बड़ी-बड़ी Website पर नीले, पीले, हरे रंग के सुंदर-सुंदर Box दिखते हैं? लिखा होता है - Tips, Warning, Note। देखकर लगता है, वाह! कितनी Professional Website है।

और अपनी Post देखो दादा, सिर्फ सादा-सादा Text। कोई Design ही नहीं। इसी वजह से Visitor आते ही भाग जाता है।

तो दादा, घबराने की कोई बात नहीं। आज मैं आपको बिना Coding सीखे, सिर्फ Copy-Paste से 7+ सुंदर Box बनाना सिखाऊंगा। इससे आपकी पोस्ट भी एकदम Pro लगेगी यार।

तो आपने देखा होगा, Blogger के Editor में ऐसा कोई Button नहीं होता जिससे हम सीधा Warning Box या Code Box लगा सकें। इसी वजह से बहुत से नए Blogger को दिक्कत होती है।

आज मैं आपको बिना किसी Plugin के, सिर्फ HTML और CSS से 5 तरह के Box बनाना सिखाऊंगा। इसे लगाने के बाद आपकी पोस्ट एकदम Professional लगेगी।

Table of Contents

तो इस Problem को कैसे ठीक करें?

दादा, Blogger का Editor एकदम सादा है। वहाँ आपको Bold, Italic का Button तो मिल जाएगा, लेकिन सुंदर Warning Box या Code Box का कोई Button नहीं मिलेगा।

तो हम क्या करें? Post को ऐसे ही सादा छोड़ दें?

नहीं दादा, बिल्कुल नहीं। इसी Problem को ठीक करने के लिए हम थोड़ा सा HTML और CSS का जादू Use करते हैं। हम Blogger में "Message Box" और "Code Box" बनाते हैं।

दादा, Message Box मतलब समझो एक रंगीन डब्बा। जैसे आपके घर में कोई जरूरी कागज होता है तो आप उसे एक अलग File में रखते हो ताकि खो न जाए। वैसे ही Blog में कोई जरूरी Tips है, कोई Warning है, तो उसे आप Box के अंदर लिख देते हो।

इससे क्या फायदा होता है।

पहला फायदा, आपकी Post एकदम Professional लगती है। बड़ी-बड़ी Website जैसे Teckpas.com जैसी लगती है। Visitor को लगता है - हाँ, ये बंदा Pro Blogger है।

दूसरा फायदा, Google भी खुश हो जाता है। जब आपकी Post सुंदर होती है, User ज्यादा देर तक रुकता है। इससे Bounce Rate कम होता है। और दादा, Bounce Rate कम मतलब SEO में फायदा और AdSense का Approval जल्दी।

तीसरा फायदा Code Box का। दादा अगर आप बिना Box के Code डालोगे तो Blogger उस Code को चलाने की कोशिश करेगा। आपकी Post टूट जाएगी। लेकिन Code Box में डालने से Code एकदम साफ-सुथरा दिखता है। User एक Click में Copy भी कर सकता है।

तो दादा, अगर आपको सच में Blogging में आगे बढ़ना है, तो आज से ही ये 7+ Box Use करना शुरू कर दो। आपकी Post की खूबसूरती 10 गुना बढ़ जाएगी।

Message Box क्या होता है?

देखो दादा, Message Box एक छोटा सा रंगीन डब्बा होता है। इसके अंदर हम कोई जरूरी बात लिखते हैं ताकि पढ़ने वाले का ध्यान तुरंत उस पर जाए।

जैसे आपने देखा होगा बड़ी-बड़ी Website पर लिखा होता है - Warning, Tips, Note। बस वही Message Box है।

जब आप सीधा-सादा Text लिखते हो तो लोग उसे Skip कर देते हैं। लेकिन वही बात अगर आप एक Box के अंदर लिखोगे तो लोग उसे जरूर पढ़ेंगे यार।

Message Box लगाने के फायदे क्या हैं?

दादा, इसके बहुत फायदे हैं। मैं आपको अपने अनुभव से बता रहा हूँ।

1. पोस्ट सुंदर लगती है: सीधी पोस्ट में कोई Design नहीं होता। Box लगाने से पोस्ट की खूबसूरती कई गुना बढ़ जाती है।

2. जरूरी बात Highlight होती है:  मान लो आपने कोई Warning देना है, तो आप उसे Box में लिखोगे तो User तुरंत समझ जाएगा कि ये जरूरी है।

3. User ज्यादा देर तक रुकता है: जब पोस्ट सुंदर लगती है तो लोग ज्यादा देर तक पढ़ते हैं। इससे Bounce Rate कम होता है, जो SEO के लिए बहुत अच्छा है।

4. Mobile में भी अच्छा दिखता है:  आजकल 90% लोग Mobile से Blog पढ़ते हैं। ये Box Mobile में भी एकदम Clean दिखते हैं।

Blogger में Message Box कैसे लगाएं?

ये बहुत आसान है, आपको Coding सीखने की जरूरत नहीं है यार।

बस ये Step Follow करो।

Step 1:  सबसे पहले नीचे दिए गए Code में से जो Design आपको पसंद है उसे Copy कर लो।

Copy Code 👇

<div style="background-color: #5bcf97; border-left: 5px solid #2196f3; padding: 15px; margin: 20px 0; color: #0d47a1;"> <strong>Tip:- </strong> Type your message here. </div> <br/> <div style="background-color: #d9edf7; border-left: 5px solid rgb(49, 112, 143); border-radius: 4px; color: #31708f; margin: 20px 0px; padding: 15px;"> <strong>Info:</strong> This is an informational message box. </div> </br> <div style="background-color: #fcf8e3; border-left: 5px solid rgb(138, 109, 59); border-radius: 4px; color: #8a6d3b; margin: 20px 0px; padding: 15px;"> <strong>Warning:</strong> Please double-check the information below. </div> <br/> <div style="background-color: #e89d25; border-left: 5px solid rgb(49, 112, 143); border-radius: 4px; color: #31708f; font-family: sans-serif; margin: 20px 0px; padding: 15px;"> <strong>Alert</strong> This is an example of an information Alert message box. </div> </br> <div style="background-color: #dff0d8; border-left: 5px solid rgb(60, 118, 61); border-radius: 4px; color: #3c763d; margin: 20px 0px; padding: 15px;"> <strong>Success!</strong> Your post has been updated successfully. </div> </br> <div style="background-color: #f2dede; border-left: 5px solid rgb(169, 68, 66); border-radius: 4px; color: #a94442; margin: 20px 0px; padding: 15px;"> <strong>Error!</strong> Please check your internet connection and try again. </div> <br/> <div style="background-color: #e6f4ea; border-left: 6px solid #137333; padding: 15px; border-radius: 4px; margin: 20px 0; color: #202124;"> <strong>Important Note:</strong> Type your message or announcement here. </div>

Step 2: अब अपने Blogger Dashboard पर जाओ > New Post पर Click करो।

Step 3: Post Editor में ऊपर Pen Icon के बगल में <> जैसा एक Icon होगा, उसको बोलते हैं HTML View। उस पर Click करो।

Step 4: जहाँ पर Box दिखाना चाहते हो, वहाँ Code को Paste कर दो।

Step 5: अब फिर से Pen Icon पर Click करके Normal View में आ जाओ। वहाँ Type your message here की जगह अपना Message लिख दो। बस हो गया।

7+ Ready-Made Message Box Design - Direct Copy करो

मैंने आपके लिए 7 सबसे अच्छे Design तैयार किए हैं। आपको बस Copy करना है।

Box 1: Tips Box - कोई Trick बताने के लिए।

जब आप कोई Tips देना चाहते हो तो ये वाला Use करो।

<div style="background-color: #e3f2fd; border-left: 5px solid #2196f3; padding: 15px; margin: 20px 0; border-radius:4px; color: #0d47a1;">

  <strong>☝️ Tips:- </strong> यहाँ पर अपना Tips लिखें।

</div>

Box 2: Info Box - कोई जानकारी देने के लिए।

कोई जानकारी देनी हो तो इसके लिए Best है।

<div style="background-color: #d9edf7; border-left: 5px solid #31708f; border-radius: 4px; color: #31708f; margin: 20px 0px; padding: 15px;">

  <strong>ℹ️ Info:</strong> यहाँ अपनी जानकारी लिखें।

</div>

Box 3: Warning Box - चेतावनी देने के लिए।

अगर आप User को कोई चेतावनी देना चाहते हो तो ये वाला लगाओ।

<div style="background-color: #fcf8e3; border-left: 5px solid #8a6d3b; border-radius: 4px; color: #8a6d3b; margin: 20px 0px; padding: 15px;">

  <strong>⚠️ Warning:</strong> यहाँ अपना Warning Message लिखें।

</div>

Box 4: Alert Box।

<div style="background-color: #fff3cd; border-left: 5px solid #ff9800; border-radius: 4px; color: #856404; margin: 20px 0px; padding: 15px;">

    <strong>🤚 Alert:</strong> यहाँ अपना Alert Message लिखें।

</div>

Box 5: Success Box।

जब कोई काम Successfully हो जाए तो ये वाला दिखाओ।

<div style="background-color: #dff0d8; border-left: 5px solid #3c763d; border-radius: 4px; color: #3c763d; margin: 20px 0px; padding: 15px;">

    <strong>🥇 Success!</strong> आपका काम Successfully हो गया है।

</div>

Box 6: Error Box।

कोई Error बतानी हो तो ये वाला Use करो।

<div style="background-color: #f2dede; border-left: 5px solid #a94442; border-radius: 4px; color: #a94442; margin: 20px 0px; padding: 15px;">

    <strong>❌ Error!</strong> कुछ गड़बड़ हो गई है, दोबारा Try करें।

</div>

Box 7: Important Note Box।

ये सबसे ज्यादा Use होता है। कोई भी जरूरी नोट के लिए।

<div style="background-color: #e6f4ea; border-left: 6px solid #137333; padding: 15px; border-radius: 4px; margin: 20px 0; color: #202124;">

  <strong>📝 Important Note:</strong> यहाँ अपना जरूरी Message लिखें।

</div>

Code Box क्या है और क्यों जरूरी है?

दादा, अगर आप अपने Blog पर HTML, CSS Code Share करते हो तो Code Box लगाना बहुत जरूरी है।

बिना Code Box के आपका Code बिखर जाता है और Blogger उसे चलाने की कोशिश करता है। इसलिए Code को सही से दिखाने के लिए हम Code Box का Use करते हैं।

Code Box लगाने से User को Code Copy करने में आसानी होती है।

Simple Code Box का Design।

<pre style="background-color: #f5f5f5; border: 1px solid #ddd; border-left: 4px solid #ff5722; padding: 15px; overflow-x: auto; border-radius: 5px; font-family: monospace;">

यहाँ अपना Code Paste करें

</pre>

Box लगाते समय ये गलतियां कभी मत करना यार।

एक बात हमेशा याद रखिए। बहुत से नए Blogger ये गलतियां करते हैं।

1. ज्यादा रंग मत Use करो: एक पोस्ट में 2-3 से ज्यादा रंग के Box मत लगाओ। इससे Design खराब लगता है।

2. Inline CSS का ज्यादा Use मत करो: हर लाइन में Style मत लिखो। जितना हो सके Simple रखो। इससे Blog की Speed कम नहीं होगी।

3. HTML को Encode करना मत भूलो:  अगर आप Code Box में HTML Code दिखा रहे हो तो उसे पहले HTML Parser Tool से Encode जरूर कर लो, नहीं तो Code टूट जाएगा।

आखिर बात

तो दादा, देखा आपने? Message Box लगाना कितना आसान है।

आपको बस ऊपर दिया गया Code Copy करना है और अपनी Post में HTML Mode में Paste कर देना है। बस। आपकी Post एकदम Teckpas.com जैसी Professional बन जाएगी।

दादा, मैं तो यही बोलूंगा - आज से ही अपनी हर Post में एक-दो Box Use करना शुरू कर दो। इससे आपकी Post सुंदर भी लगेगी और AdSense का Approval भी जल्दी मिलेगा।

अगर Code लगाने में कोई Problem हो, तो नीचे Comment कर देना दादा, मैं तुरंत Help कर दूंगा।

ये पोस्ट अगर काम की लगी तो अपने दोस्तों के साथ Share जरूर करना।

धन्यवाद। फिर मिलते हैं एक नया पोस्ट के साथ।🙏