How to add a massage box in your Blog post

Welcome friends, इस post में हम discus करेंगे, blogger post और page पर Message Box और Code Box और Notification Box कैसे add कर सकते हैं। इसके बारे में विस्तार से आलोचना करेंगे।

📦 Blogger post और page पर Message Box और Code Bos कैसे जोड़े?

दोस्तों, वर्तमान समय में blogger blogspot अभी भी सबसे powerful फ्री blogging platform में से एक है। Blogger blog का उपयोग ब्लॉगर से लेकर कोई लोग करता है। ब्लॉगर को डिफॉल्ट पोस्ट एडिटर में मैसेज बॉक्स, अलर्ट बॉक्स, या कोड बॉक्स जोड़ने का कोई अलग विकल्प नहीं है। कोई blog writers जानकारी, चेतावनिया, नोटिफिकेशन या प्रोग्रामिंग कोड को खूबसूरती से प्रदर्शित करने के लिए संघर्ष करते हैं। "कोड बॉक्स" लगाने से एक ब्लॉक पोस्ट का खूबसूरती कोई गुना बढ़ जाती है।

इस समस्या का समाधान करने के लिए content creators HTML और CSS Code का उपयोग करके ब्लॉगर या वेबपेज में "Message Box" और "Code Box" "Notification Box" बनता है। इनका use करने से आप जो लिखते हैं वह अधिक प्रोफेशनल आकर्षक और पाठक अनुकूल बन जाता है।

📦 What are Message Box?

📦 Message Box एक विशेष box है जहां important जानकारी, Warning, किसी पकड़ का नोटिस या निर्देश प्रदर्शित होते हैं। मैसेज बॉक्स ऐड करने से पाठक का ध्यान तेजी से आकर्षित होता है।

📦 एक अच्छा मैसेज बॉक्स use करता की अनुभव को बेहतर बनाता है और महत्वपूर्ण जानकारी को increase करता है।

Also Read - How to create automatic internal link in blogger post

For example - ⚠️ Warning box. ☝️Tips box. ℹ️ Info ( information) box. 🤚Alert box.🥇Success box. ❌ Error box. 📝 Important note box. etc.

Copy your Code - सबसे पहले इस Code को copy कीजिए। इसके बाद वेबपेज में इस्तेमाल करने से पहले किसी html editor में पेस्ट करके आप चाहे तो box का colour, font size, border-radius, border- colour, padding, change कर सकते हैं। box के अंदर जो डिफॉल्ट मैसेज लिखा हुआ है उसको replace करके आप जो मैसेज लिखना चाहते हैं उसको आप पेस्ट कीजिए, और उसको edit कीजिए और आपका काम तुरंत हो जाएगा।

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>

📦 Message Box किस लिए use होता है?

No 1. Important जानकारी पर focus डालना।

No 2. यदि कोई जानकारी बहुत महत्वपूर्ण है, तो उसे मैसेज बॉक्स की मदद से highlight किया जा सकता है।

No 3. User का ध्यान आकर्षित करते हैं।

No 4. यदि पाठक पोस्ट के बीच में कोई मैसेज बॉक्स है तो पाठक आसानी से नोटिस कर सकता है।

No 5. ब्लॉक पोस्ट को एक professional लुक देता है।

No 6. वेबपेज का डिजाइन अधिक सुंदर और आधुनिक दिखता है।

No 7. ब्लॉगर पोस्ट seo में बहुत develop होता है।

No 8. पाठक महत्वपूर्ण जानकारी को आसानी से समझ सकता है जिसमें visitor का अनुभव में सुधार होता है।

📦 Message Box and Code Box का Benefits क्या है?

दोस्तों, website page/post में कोड बॉक्स या मैसेज बॉक्स एड कर से पोस्ट को अधिक आकर्षक प्रोफेशनल और यूजर फ्रेंडली बानता है।

इस बॉक्स में महत्वपूर्ण जानकारी, विशेष निर्देश, चेतावनी, और नोट्स प्रदर्शित किए जाते हैं। कभी-कभी महत्वपूर्ण जानकारी पोस्ट से खो जाती है, यह ठीक तरह से दिखाई नहीं देता है, लेकिन मैसेज बॉक्स का उपयोग करने से जानकारी स्पष्ट हो जाती है, और पाठक का ध्यान आसानी से आकर्षित हो जाती है। पाठक पोस्ट की महत्वपूर्ण हिस्सा तुरंत find कर सकता है और महत्वपूर्ण जानकारी तुरंत प्राप्त कर सकती है।

Box no 1. इस type का box general information, tips और reminder के लिए use होता है।

<strong>Tip:- </strong> Type your message here.

</div>

☝️ Tips box:- Type your message here.

Box no 2. इस type का box में कोई भी information या info message देने के लिए use होता है।

<strong>Info:</strong> This is an informational message box.

</div>

ℹ️ Info box :- This is an informational message box.

Box no 3. इस प्रकार का box technical message issues या important Warning देने के लिए use होता है।

<strong>Warning:</strong> Please double-check the information below.

</div>

⚠️ Warning box :- Please double-check the information below.

Box no 4. इस type का box अलर्ट या चेतावनी देने के लिए use होता है।

<strong>Alert</strong> This is an example of an information Alert message box.

</div>

🤚 Alert box :- This is an example of an information Alert message box.

Box no 5. इस type का box कुछ भी Successfully message मैसेज देने के लिए use होता है।

<strong>Success!</strong> Your post has been updated successfully.

</div>

🥇 Success box :- Your post has been updated successfully.

Box no 6. इस type का box में Error message /problem message देने के लिए use होता है।

<strong>Error</strong> Please check your internet connection and try again.

</div>

❌ Error box :- Please check your internet connection and try again.

Box no 7. इस type का box में important note या किसी भी प्रकार का जानकारी या important message देने के लिए use होता है।

<strong>Important Note:</strong> Type your message or any notes here.

</div>

📝 Important Note box :- Type your message or any notes here.

📦 Friends, इस प्रकार Code Box पूरा करने पर पाठक आसानी से बात समझ में आ जाता है। आजकल ज्यादातर user मोबाइल से blog post read करना पसंद करते हैं। इसलिए पोस्ट में कोड बॉक्स या नोटिफिकेशन बॉक्स होना बहुत जरूरी है। इसमें बड़ा कोड को मोबाइल पर भी खूबसूरती से देखा जा सकता है।

code box use करते समय कुछ गलतियां ना करें।

जैसे एचटीएमएल को इनकोड ना करें, उत्तीरिक्त या याद कलर का प्रयोग ना करें, ज्यादा कलर का इस्तेमाल करने से डिजाइन खराब दिखती है। और साइट पर लोड ज्यादा बढ़ता है। इनलाइन सीएसएस का अवधि उपयोग न करें, अधिक उसे होने से बार-बार साइड स्पीड धीमा हो जाता है।

Message Box और Code Box सीधी तार पर ऑप्टिमाइज नहीं होता है, लेकिन यूजर्स की अनुभव को बेहतर बनाता है। कोड बॉक्स को ऐड करने से bounce rate काम होता है। पेज पर समय बढ़ जाता है, और यूजर्स की यूजर exprence बहुत बढ़ जाता है। यह box लगाने से गूगल सर्च इंजन में एक बेहतर crawl के लिए जाता है, इसमें साइट ज्यादा से ज्यादा रैंक होने में चांसेस बढ़ जाता है।

📦 सबसे अंत में friends, बोलना चाहेंगे, एक सफल ब्लॉगर पोस्ट की एक पहचान जानकारी इस तरह से प्रस्तुत करता है कि पाठक आसानी से समझ सकता है। और आवश्यक जानकारी तुरंत पा सके। कोड बॉक्स एक ऐसा बॉक्स है, की good जानकारी प्रस्तुत करने के लिए यह महत्वपूर्ण भूमिका निभाता है।

ब्लॉगर पोस्ट और पेज पर कोड बॉक्स या मैसेज बॉक्स जोड़ना आधुनिक ब्लॉगिंग का एक महत्वपूर्ण हिस्सा है। इसमें महत्वपूर्ण जानकारी ऐड करने की सामग्री और अधिक आकर्षक बनाने के लिए बहुत मदद कर सकता है।

यदि आप नियमित रूप से बोगर प्लेटफार्म, वर्डप्रेस प्लेटफार्म पर टेक्निकल रिलेटेड पोस्ट अपलोड करते हैं तो मैसेज बॉक्स और कोड बॉक्स आपका करना लगभग आवश्यक है। टेक्निकल तरीके से बॉक्स को use करने से आपकी सामग्री में सुधार होगा और ब्लॉक अधिक से अधिक सर्च इंजन में रैंक हो सकता है।

Friends, इस post को कैसे लगा आप नीचे दिया comment section में जरूर comments करके suggest कीजिए और कोई भी problem हो तो तुरंत message में लिखिए और इस पोस्ट को अपने दोस्तों के साथ ज्यादा से ज्यादा share कीजिए जिसमें उसको भी कोड बॉक्स का अधिक से अधिक लाभ हो।

धन्यवाद.🙏