heading stylish kaaaaaaise banaye 10 Stylish heading Subheading design For Blogger WordPress

ब्लॉग पोस्ट की heading को स्टाइलिश कैसे बनाये या ब्लॉग पोस्ट की heading को डिज़ाइन कैसे करें,

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

फ्रेंड्स आज के इस पोस्ट मे बता रहा हूँ की ब्लॉग पोस्ट की Heading, H1, H2, H3 को स्टाइलिश कैसे बनाये

आपको मालूम है की आज के टाइम मे कॉम्पीटिशन ज्यादा है ऐसे मे जिस ब्लॉग का डिज़ाइन थोड़ा अच्छा होता है उस विजिटर उस पर ही विजिट करना ज्यादा पसंद करते है इसलिए आप भी अपने ब्लॉग पोस्ट को अच्छा से डिज़ाइन करें ताकि विजिटर अगर एक बार विजिट करने तो दुबारा आपके ब्लॉग पर विजिट करना उसकी मज़बूरी बन जाए

कहने का मतलब की आपके कंटेंट और डिज़ाइन के कारण विजिट आपके ब्लॉग से इम्प्रेस हो जाए

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

ब्लॉग पोस्ट को अच्छे से डिज़ाइन करने के लिए Heading का use करना पड़ता है पोस्ट मे heading का use करने से रीडर्स को आपके कंटेंट को समझने मे आसानी होती है साथ ही आपके पोस्ट की डिज़ाइन भी अट्रैक्टिव हो जाती है

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

ये भी पढ़े..  10 Awsome Stylish Follow us Button on Blogger Blogspost

heading ko Stylish kaise banaye

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

code.1

Heading-design-kare
.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;}

code.2

Heading-design-kaise-kare
.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;}

code.3

Post-attractive-banaye
.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;}

code .4

Post-attractive-kaise-banaye
.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;}

code. 5

ये भी पढ़े..  15 Reason ब्लॉग्गिंग मे फेल क्यों होते है
Heading-kya-hai
.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 .6

Heading-ka-use-kaise-kare
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. 7

Heading-ko-stylish-kaise-banaye
Code / image Source – Blogginghindi
.entry-content h3{ background-color: #e3f0f2; background-image: url(https://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; }

code 8

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 .9

Beautiful-heading
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. 10

Acchibaat-subheading
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 ]
ये भी पढ़े..  live cricket online kaise dekhe( लाइव क्रिकेट कैसे देखे )
  1. Code Copy करने के बाद वर्डप्रेस मे लॉगिन करें जब डैशबोर्ड open हो जाए तब Appearence पर क्लिक करें
  2. Customise पर क्लिक करें
  3. उसके बाद Add Css पर Click करें और Box मे कॉपी किया हुआ कोड peste करें उसके बाद पब्लिश कर दे

आप आप अपने ब्लॉग को open करके देख सकते है आपने जहाँ – जहाँ h2 का उपयोग किया होगा वहां आपके सलेक्ट किए हुए डिज़ाइन के अंदर text Show हो रहे होंगे

इस प्रकार से आप अपने ब्लॉग वेबसाइट के पोस्ट को Heading का use करके अट्रैक्टिव बना सकते है

loading...

मुझे उम्मीद है ये पोस्ट आपको पसंद आएगा पसंद आए तो अपना कीमती फीडबैक जरूर दे साथ ही इस पोस्ट को सोशल साइट्स पर जरूर शेयर करें

About Mr Manish

आप सब लोगो के सहयोग से हमारा ये ब्लॉग धीरे - धीरे सफलता की ओर बढ़ा रहा है ऐसे ही सपोर्ट करते रहे  और इस ब्लॉग पर होने वाले नए पोस्ट पढ़ते रहिये www.hindivhelp.co.in  को विजेट करते रहिए   अधिक पढ़े... 

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.