Blogger Shortcodes Guide Hindi
Blogger Theme Shortcodes: अपनी ब्लॉग पोस्ट को सुंदर और प्रोफेशनल कैसे बनाएं (JSR Digital Marketing Solutions)
प्रस्तावना:
क्या आप चाहते हैं कि आपकी Blogger पोस्ट professional, clean और visually attractive दिखे?
अगर हाँ, तो आपको "shortcodes" के concept को समझना चाहिए। WordPress में shortcodes automated plugins से add होते हैं, लेकिन Blogger में हमें इन्हें manually HTML और CSS के जरिए add करना होता है। यह गाइड आपको पूरी तरह से बताएगी कि कैसे आप अपने Blogger पोस्ट में advanced CSS shortcodes का use करके ब्लॉग का look और engagement बढ़ा सकते हैं।
🔧 Shortcode क्या होता है?
Shortcode एक reusable design element होता है। इसका उपयोग करके आप posts में predefined styles जैसे:
- Buttons
- Alert Boxes
- Info Cards
- Quotes
- Accordions
- Tabs आदि बना सकते हैं।
WordPress में यह [shortcode]content[/shortcode] जैसे दिखता है, लेकिन Blogger में हम CSS class या inline style का use करते हैं।
💡 Blogger Theme में Shortcodes कैसे Add करें?
Step-by-Step Guide:
- Blogger Dashboard ➜ Theme ➜ Edit HTML
<head>tag के नीचे या<b:skin>tag के अंदर नीचे दिए गए CSS code को paste करें:
<style>
/**** BUTTON SHORTCODE ****/
.jsr-button {
background: #2196F3;
color: white;
padding: 10px 20px;
display: inline-block;
font-weight: bold;
border-radius: 8px;
text-decoration: none;
transition: 0.3s;
}
.jsr-button:hover {
background: #0d47a1;
}
/**** INFO BOX ****/
.jsr-info-box {
background: #e0f7fa;
padding: 15px;
border-left: 6px solid #00796b;
font-size: 16px;
border-radius: 5px;
margin: 15px 0;
}
/**** ALERT BOX ****/
.jsr-alert {
background: #ffebee;
padding: 15px;
border-left: 6px solid #c62828;
font-size: 16px;
border-radius: 5px;
margin: 15px 0;
}
/**** ACCORDION ****/
.jsr-accordion {
background: #f1f1f1;
cursor: pointer;
padding: 15px;
border: none;
outline: none;
text-align: left;
font-weight: bold;
transition: 0.4s;
width: 100%;
border-radius: 5px;
}
.jsr-panel {
padding: 0 18px;
display: none;
background-color: white;
overflow: hidden;
border-left: 3px solid #2196F3;
}
/**** QUOTE BOX ****/
.jsr-quote {
background: #fefefe;
border-left: 5px solid #3f51b5;
padding: 15px;
font-style: italic;
margin: 20px 0;
color: #333;
}
</style>
🧪 Shortcodes को Blog Post में Use कैसे करें?
✅ Button:
<div class="jsr-button">Click Here</div>
ℹ️ Info Box:
<div class="jsr-info-box">यह एक जानकारी बॉक्स है।</div>
🚨 Alert Box:
<div class="jsr-alert">यह एक चेतावनी संदेश है।</div>
📘 Quote Box:
<div class="jsr-quote">“Knowledge is power. Information is liberating.”</div>
🔽 Accordion:
<button class="jsr-accordion">यह क्या है?</button>
<div class="jsr-panel">
<p>यह एक Accordion Content है जिसे क्लिक करने पर खोला जा सकता है।</p>
</div>
<script>
var acc = document.getElementsByClassName("jsr-accordion");
for (var i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
</script>
🎯 Shortcode Use करने के Benefits
- 🔹 Page का Look and Feel सुधरता है
- 🔹 Reader Engagement बढ़ता है
- 🔹 SEO में Indirect Help करता है (Bounce rate कम होता है)
- 🔹 मोबाइल friendly UI
- 🔹 Visuals = Better User Experience
📱 Responsive Design के लिए Tips
- Use
max-widthandwidth:100%rules in shortcodes - Avoid fixed padding for mobile
- Use
emor%units - Use
media queriesif needed
💰 AdSense Friendly Design Tips
- कोई animation या blinking effects use न करें
- Clean और distraction-free UI रखें
- Ad section से shortcodes दूर रखें
📌 Real Use Case Example
Blog: "Top 5 Digital Marketing Tools in 2025" Use shortcodes:
- Info Box for each tool
- Alert box for outdated tools
- Button for download links
- Accordion for FAQs
🔐 Blogger vs WordPress: Shortcode Comparison
| Feature | Blogger | WordPress |
|---|---|---|
| Built-in Shortcode Support | ❌ Manual (CSS/HTML) | ✅ Yes (via plugins) |
| Plugin Integration | ❌ None | ✅ Thousands |
| Speed & Simplicity | ✅ Faster | ⚠️ Plugin-heavy |
➡️ लेकिन Blogger में manual होने के बावजूद आप पूरा control रखते हैं।
🛠️ SEO Optimization Tips
- H2 / H3 Heading tags के अंदर shortcodes रखें
- Avoid overloading with buttons
- Use internal links inside info boxes
- Compress CSS when possible
🔚 निष्कर्ष (Conclusion)
अब आप जान चुके हैं कि shortcodes क्या होते हैं, उन्हें Blogger theme में कैसे add करें, और कैसे smart तरीके से post में use करें।
Visual improvement से न सिर्फ आपके blog की user experience बेहतर होती है, बल्कि ज्यादा readers attract होते हैं।
यदि आपको advanced accordion, pricing table, या custom tab layouts की जरूरत है, तो हमसे संपर्क करें:
📧 Email: jsrnews92@hotmail.com
🌐 Website: https://jsrdigital92.blogspot.com.
🏷️ Powered by: JSR Digital Marketing Solutions
यह एक जानकारी बॉक्स है।
🚨 Alert Box:
यह एक चेतावनी संदेश है।
📘 Quote Box:
“Knowledge is power. Information is liberating.”
🔽 Accordion:
यह एक Accordion Content है जिसे क्लिक करने पर खोला जा सकता है।
Comments
Post a Comment
A good massage is highly beneficial for both body and mind. It not only relieves fatigue but also improves blood circulation and reduces stress. If you re looking for a truly relaxing massage experience, you should definitely give it a try! Don’t forget to share your experience in the comments!"