हैलो दोस्तों ! स्वागत है आपका इस खास पोस्ट में ब्लॉग पोस्ट की heading को स्टाइलिश कैसे बनाये या ब्लॉग पोस्ट की heading को डिज़ाइन कैसे करें इसके बारे में आपको फुल गाइड करूंगा और 10 कस्टम डिजाइन के Css भी आपको इस पोस्ट में प्रोवाइड करवाऊंगा । ब्लॉग पोस्ट की Heading, H1, H2, H3 को स्टाइलिश कैसे बनाये आपको मालूम है की आज के टाइम मे Compitation ज्यादा है ऐसे मे जिस ब्लॉग का डिज़ाइन थोड़ा अच्छा होता है उस पर विजिटर ही विजिट करना ज्यादा पसंद करते है इसलिए आप भी अपने ब्लॉग पोस्ट को अच्छा से डिज़ाइन करें ताकि विजिटर अगर एक बार विजिट करने तो दुबारा आपके ब्लॉग पर विजिट करना उसकी मज़बूरी बन जाए कहने का मतलब की आपके कंटेंट और डिज़ाइन के कारण विजिट आपके ब्लॉग से इम्प्रेस हो जाए ।
|
| Heading stylish kaise banaye | 10 stylish Heading Design for Blogger Blog Post? |
Heading, H1, H2, H3 को स्टाइलिश बनाने के लिए आपको बस एक Css अपनी थीम में जोड़ना होगा नीचे Top 10 Heading Stylish Css Code नीचे प्रोवाइड किए है जिसे आप अपनी पसंद के हिसाब से Choose कर सकते है ।
Heading को Stylish कैसे बनाये
Heading, H1, H2, H3 को स्टाइलिश बनाने के लिए आपको नीचे दिए गए Css मे से अपनी पसंद का एक Css को अपनी थीम में जोड़ना होगा जोड़ने का प्रोसेस नीचे बता दिया है।
हर बार की तरह Theme को Edit करने से पहले Backup जरूर ले ताकि कोई दिक्कत आने पर आप अपनी थीम को Restore कर सके ।
- सबसे पहले अपने ब्लॉगर खाते में लॉग इन करें और अपने Blogger Dashboard पर जाएँ
- अब पर क्लिक करें Theme पर क्लिक करें और उसके बाद Edit HTML पर क्लिक करे ।
- फिर Ctrl+F की का उपयोग कर अपनी थीम में
</b:skin>को सर्च करे ।</b:skin>
- फिर
</b:skin>हाईलाइट हो जाएगा फिर नीचे दिए कोड में से अपनी पसंद के Css कोड को</b:skin>टैग के ऊपर / पहले पेस्ट करे ।
- और कोड को डालने के बाद अंत में अपनी थीम को Save कर दे ।
Top 10 stylish Heading (H1, H2, H3,H4) Design for Blogger Blog Post
Style 1
|
Style 1 के लिए कोड नीचे हैं -
.post h2{ margin-top:10px; max-width:95%; padding:6px 2px; color: #000000; padding-left:10px; margin-bottom:10px; font-size:20px; font-family:'Oswald',sans-serif; background-color:#F8FAFD; text-decoration:none; border-left:10px solid #05A8FC; box-shadow:1px 1px 2px gainsboro; transition: border-left .777s; -webkit-transition: border-left .777s; -moz-transition: border-left .777s; -o-transition: border-left .777s; -ms-transition: border-left .777s; } .post h2:hover { border-left:10px solid #FC2B2C; } Style 2
|
|
Style 2 के लिए कोड नीचे हैं -
.post h2 { color:#222222; border-left:10px solid #222222; border-right:10px solid #222222; padding:3px 5px 3px 20px; border-radius:15px; -moz-border-radius:15px; box-shadow:0px 0px 13px #222222; -webkit-box-shadow:0px 0px 13px #222222; -moz-box-shadow:0px 0px 13px #222222; } .post h2:hover { color:#219DFC; border-left:10px solid #219DFC; border-right:10px solid #219DFC; box-shadow:0px 0px 13px #219DFC; -webkit-box-shadow:0px 0px 13px #32A4FC; -moz-box-shadow:0px 0px 13px #32A4FC; } Style 3
|
Style 3 के लिए कोड नीचे हैं -
.post h2{ background: #F9F9F9; font-family:'Oswald',sans-serif; font-size: 120%; padding: 6px 12px; color: #333; text-shadow: 1px 1px 1px #AAA; border-bottom: 4px solid #03DA03; -webkit-border-radius: 0 0 6px 6px; -moz-border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px; -webkit-box-shadow: 1px 1px 2px #AAA; -moz-box-shadow: 1px 1px 2px #AAA; box-shadow: 1px 1px 2px #AAA; margin: 6px 3px; text-transform: capitalize; width: 95%; line-height:1.0em; } .post h2:hover { border-bottom: 4px solid #003F80; } Style 4
|
Style 4 के लिए कोड नीचे हैं -
.post h2 { border-bottom-right-radius: 15px; border-top-left-radius: 15px; border: 3px solid rgb(251, 10, 38); padding: 0px 1px 4px 14px; box-shadow: rgb(251, 10, 38) 3px 3px3px; color: rgb(251, 10, 38); font-family:'Oswald',sans-serif; font-size:120%; font-weight:400; margin: 0px 0px 1em; text-transform: uppercase; text-shadow: rgb(0, 0, 0) 1px 1px 0px; } Style 5
|
Style 5 के लिए कोड नीचे हैं -
.post h2 { border:3px dashed #000000; border-bottom:5px solid #000000; padding: 0px 1px 4px 14px; box-shadow: rgb(251, 10, 38) 3px 3px 3px; color: rgb(251, 10, 38); font-family:'Oswald',sans-serif; font-size:120%; font-weight:400; margin: 0px 0px 1em; text-transform: uppercase; text-shadow: rgb(0, 0, 0) 1px 1px 0px; } Style 6
|
Style 6 के लिए कोड नीचे हैं -
.post h2 { background:#333; margin:5px 4px 5px 0; padding:9px 0 9px 10px; border:0; color:white; font-size:120%; line-height:16px; font-family:'Oswald',sans-serif; text-decoration:none; text-transform:uppercase; box-shadow:4px 4px 0px rgba(33,33,33,0.45); } Style 7
|
Style 7 के लिए कोड नीचे हैं -
.post h2 { padding:5px; border:5px outset #000000; color:#000000; font:140% 'Oswald',Sans-Serif; } Style 8
|
Style 8 के लिए कोड नीचे हैं -
.post h2 { padding:5px; border:5px dashed #000000; color:#000000; font:140% 'Oswald',Sans-Serif; } Style 9
|
Style 9 के लिए कोड नीचे हैं -
.post h2 { padding:5px; border:5px dotted rgb(251, 10, 38); color:#000000; font:140% 'Oswald',Sans-Serif; } Style 10
|
Style 10 के लिए कोड नीचे हैं -
.post h2 { padding:5px; border: 1px solid #cccccc; -moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2); -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2); box-shadow: 0 0 20px rgba(0, 0, 0, .2); color:#333333; font:140% 'Oswald',Sans-Serif; text-transform: uppercase; }
Recomanded : मैने इस Css में H2 का प्रयोग किया है आप H2 की जगह अपने हिसाब से जिसे Design देना चाहते है उसको रख सकते है , जैसे H3,H4 का प्रयोग कर सकते है इसके लिए आप .post h2 की जगह .post h3,.post h4 रख सकते है ।
Customization
- आप अपनी इच्छा के अनुसार Font Family को बदल सकते हैं।
- फ़ॉन्ट आकार बदलने के लिए अन्य मान के साथ 120% को बदलें।
- Colour को बदलने के लिए अभी लगे कलर कोड को आपके न्यू कोड बदलें ।
How to Use the Code in Blog Post?
बस नई पोस्ट के लिए जाएं और Heading, Sub Headline और Minore Heading के साथ आर्टिकल लिखें,जैसा कि आप सामान्य रूप से करते है ।
Conclusion
उम्मीद है कि आपने अपने Blogger Template में Stylish Heading (H1, H2, H3,H4) के Css कोड को सफलतापूर्वक जोड़ लिया है। यदि आपको कोई समस्या आ रही है तो आप बेझिझक कॉमेंट कर सकते है हम आपकी सहायता अवश्य करेंगे । ऐसे ही Blogger Guide के लिए नीचे Rating और वेबसाइट को Bookmark करना न भूले ।
0 Comments