Heading Stylish Kaise Banaye 10 Stylish Heading Subheading Design For Blogger Wordpress

Heading को Stylish कैसे बनाये

ब्लॉग पोस्ट की heading को स्टाइलिश कैसे बनाये या ब्लॉग पोस्ट की heading को डिज़ाइन कैसे करें, फ्रेंड्स आज के इस पोस्ट मे बता रहा हूँ की ब्लॉग पोस्ट की Heading, H1, H2, H3 को स्टाइलिश कैसे बनाये आपको मालूम है की आज के टाइम मे कॉम्पीटिशन ज्यादा है ऐसे मे जिस ब्लॉग का डिज़ाइन थोड़ा अच्छा होता है उस विजिटर उस पर ही विजिट करना ज्यादा पसंद करते है इसलिए आप भी अपने ब्लॉग पोस्ट को अच्छा से डिज़ाइन करें ताकि विजिटर अगर एक बार विजिट करने तो दुबारा आपके ब्लॉग पर विजिट करना उसकी मज़बूरी बन जाए कहने का मतलब की आपके कंटेंट और डिज़ाइन के कारण विजिट आपके ब्लॉग से इम्प्रेस हो जाए

आपने बहुत से ब्लॉग पर देखा होगा Heading का डिज़ाइन जिस ब्लॉग का डिज़ाइन अच्छा होता है विजिटर हमेशा उसी ब्लॉग पर विजिट करना पसंद करते है जिस ब्लॉग का डिज़ाइन अच्छा होता है उस ब्लॉग का Bounce Rate भी कम रहता है जो seo का बहुत बड़ा factor है ब्लॉग पोस्ट को अच्छे से डिज़ाइन करने के लिए Heading का use करना पड़ता है पोस्ट मे heading का use करने से रीडर्स को आपके कंटेंट को समझने मे आसानी होती है साथ ही आपके पोस्ट की डिज़ाइन भी अट्रैक्टिव हो जाती है

किसी भी वेबसाइट को डिज़ाइन करने के लिए Coding का नॉलेज होना जरुरी होता है लेकिन आपको टेंशन लेने की बिल्कुल जरुरत नहीं है अगर आपको coding नहीं भी आती है तो भी, क्योंकि मै यहाँ ऐसे Simple तरीका बता रहा हूँ जिससे आप पोस्ट को काफ़ी ज्यादा अट्रैक्टिव बना सकते है

heading ko Stylish kaise banaye

आप सबसे पहले यहाँ दिए गए कोई एक डिज़ाइन पसंद करें उसके बाद डिज़ाइन के नीचे का कोड कॉपी करें

.post h3{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 h3:hover {border-bottom: 4px solid #003F80;}

.post h3 {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 h3: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;}

.post h3{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 h3:hover {  border-left:10px solid #FC2B2C;}

.post h3 {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;}

.post h3 {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);}

Code – blogginghindi.com

.entry-content h3 {
padding: 3px;
padding-left: 10px;
background-image: -webkit-linear-gradient
(45deg, rgba(255, 255, 255, .2) 25%, transparent
25%, transparent 50%, rgba(255, 255, 255, .2) 50%
, rgba(255, 255, 255, .2) 75%, transparent 75%,
transparent);
background-color: #FEBD17;
border-radius: 9px;
box-shadow: 2px 2px 2px;
border: #000 1px solid;
}
.entry-content h3:before {
font-family: FontAwesome;
position: relative;
content: 'f061';
font-size: 17px;
padding-right: 10px;
}

Code / image Source – Blogginghindi

.entry-content h3{ background-color: #e3f0f2; background-image: url(http://www.shoutmeloud.com/wp-content/ plugins/custom-post/lib/images/note.png); background-position: 7px 50%; background- repeat: no-repeat no-repeat; border-bottom-left- radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right- radius: 4px; border: 1px solid rgb(102, 204, 204); color: #111111; font-family: Georgia, ‘Times New Roman’, Times, serif; font-size: 14px; line- height: 21.983333587646484px; margin-bottom: 1.571em; padding: 10px 10px 10px 45px; }

Heading-ka-use-post-me-kaise-kare — Image – Code : blogginghindi

.entry-content h3:before{ content:"\f0a4"; font-family:"FontAwesome"; font-style:normal; padding:9px 10px 9px 14px; display:inline-block; font-size:18px; margin:0 14px 0 0; background-color:#2a2b2c } .entry-content h4{ font-weight:400; padding:0 18px 0 0; background:#6c9be9; width:100%;margin-top:0; font-size:16px; line-height:none; font-style:normal }

Code – Acchibaat.com

h3 {font-size: 24px;line-height: 1.11111;BACKGROUND-COLOR: #3b85f2a1;COLOR: white;padding: 2px;padding-left: 5px;box-shadow: inset 3px -1px 20px 2px black;text-shadow: 3px 3px 6px black;border-left: 5px solid black;border-right: 5px solid black;}

Code source – acchibaat

h4 {font-size: 24px;line-height: 1.11111;background-image: url(https://www.acchibaat.com/wp-content/uploads/2018/07/bg3.png);text-shadow: -2px 2px 0px #0c0c0c;padding: 3px;color: #ffffff;padding-left: 10px;border-left: 3px solid #ffffff;border-right: 3px solid #ffffff;border-top: 6px double #ffffff;border-bottom: 6px double #ffffff;border-radius: 20px;}

[ Note – ये Css Code है जो की WordPress or Blogger दोनों मे work करता है अगर आप Blogger post Heading ko Design karna chahate hai to niche ka koi ek code Copy kare Uske use kaise add karna hai uske liye Ye Post padhe – Css Code ko kaha or Kaise add kiya jata hai ]

Code Copy करने के बाद वर्डप्रेस मे लॉगिन करें जब डैशबोर्ड open हो जाए तब Appearence पर क्लिक करें
Customise पर क्लिक करें उसके बाद Add Css पर Click करें और Box मे कॉपी किया हुआ कोड peste करें उसके बाद पब्लिश कर दे

आप आप अपने ब्लॉग को open करके देख सकते है आपने जहाँ – जहाँ h2 का उपयोग किया होगा वहां आपके सलेक्ट किए हुए डिज़ाइन के अंदर text Show हो रहे होंगे इस प्रकार से आप अपने ब्लॉग वेबसाइट के पोस्ट को Heading का use करके अट्रैक्टिव बना सकते है मुझे उम्मीद है ये पोस्ट आपको पसंद आएगा पसंद आए तो अपना कीमती फीडबैक जरूर दे साथ ही इस पोस्ट को सोशल साइट्स पर जरूर शेयर करें