BloggingHindi - Blogging Aur Internet Ki Sabhi Jankari

  • About Us
  • Contact Us
  • Blogging
  • WordPress
  • SEO

Blog Post Ki Heading Ko Stylish Design Kaise Kare. Without Plugin

Last Updated on April 11, 2022 by Md Arshad Noor 14 Comments

Post को ज्यादा attractive बनाने के लिए design करना बहुत जरुरी होता है. आपने बहुत सारे blogs को देखा होगा, जिसकी design बहुत beautiful होता है. हम इस post में एक बहुत ही अच्छी जानकारी के बारे में बता रहे हैं. हम इस post में heading को design कैसे करें. इसके बारे में बताने वाले है. जिससे आप अपने पोस्ट को अच्छे से design कर सकते हो।

Wordpress me bina plugin ke stylish heading kaise design kare.

आपने बहुत सारे ब्लॉग में देखा होगा की उसका design बहुत ही अच्छा होता है. ब्लॉग में अच्छी traffic पाने के लिए ब्लॉग का design भी अच्छी होना जरुरी है. जिस ब्लॉग का design अच्छा होता है, उसका bounce rate भी कम होता है. क्योकि उस ब्लॉग में visitors ज्यादा time तक रहता है. यदि आप भी किसी अच्छे design वाले ब्लॉग में visit करोगे तो आपको वहाँ से back होने का दिल नहीं करेगा.

Blog post को अच्छे से डिज़ाइन करने के लिए हम heading use करते हैं. यह SEO के लिए भी अच्छा होता है और इससे readers को समझने में आसानी होती है. यदि हम heading को अच्छे से design करेंगे तो इससे visitors को समझने में और भी ज्यादा आसानी होगी और साथ ही हमारे post की design भी बहुत attractive हो जायेगी. आज कल बहुत सारे blogs में heading को design करके use किया जाता है.

किसी भी website को design करने के लिए coding का use किया जाता है. यदि आपको coding की knowledge है तो easily customize करके design कर सकते हो लेकिन बहुत से लोगो को coding की knowledge नहीं होती है. इस कारण से वो अपने ब्लॉग को अच्छे से design नहीं कर पाता है. यदि आपको भी coding की जनकारी नही है तो अब आपको टेंशन लेने की जरुरत नहीं है. क्योकि हम आज आपको post heading को design करने के बारे में बता रहे हैं. अब आप भी अपने ब्लॉग पोस्ट को attractive बना सकते हो और अपने ब्लॉग को better से better design कर सकते हो। तो चलिए अब हम आपको निचे में इसके बारे में बता रहे हैं।

Blog Post की Heading को बिना plugin के अच्छे से design कैसे करे।

Mostly, हम post की heading के लिए h2, h3 या h4 use करते हैं. में अपने post की heading में h4 use करता हूँ तो हम आपको निचे में h4 को design करने के बारे में बता रहे हैं. हम आपको निचे में demo भी दिखाएंगे और उसका css code भी दिखाएंगे. आपको जो heading design अच्छा लगे, उसे आप अपने blog की css में add करके design कर सकते हो। तो चलिए हम step by step बता रहे हैं।

Step 1: आपको जिस heading की design अच्छा लगे, उसके CSS code को copy कर लीजिए।

style 1: BloggingHindi Style

Blog Post Ki Heading Ko Stylish Design Kaise Kare. Without Plugin 1

.entry-content h4 {
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 h4:before {
font-family: FontAwesome;
position: relative;
content: 'f061';
font-size: 17px;
padding-right: 10px;
}

Style 2

Blog Post Ki Heading Ko Stylish Design Kaise Kare. Without Plugin 2

.entry-content h4 {
padding: 3px;
text-shadow: -1px -1px 0px #000000;
box-shadow: -2px 2px 3px #000;
padding-left: 10px;
margin-bottom: 7px;
}
.entry-content h4:before {
font-family: FontAwesome;
position: relative;
content: 'f02d';
text-shadow: 0px 0px 0px #000;
color: #000;
font-size: 17px;
padding-right: 10px;
}

style 3 : ShoutMeLoud Heading Style

Blog Post Ki Heading Ko Stylish Design Kaise Kare. Without Plugin 3

.entry-content h4{
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;
}

Style 4

Blog Post Ki Heading Ko Stylish Design Kaise Kare. Without Plugin 4

.entry-content h4{
padding: 3px;
text-shadow: -2px -1px 1px #060606;
box-shadow: -3px 2px 3px #000;
padding-left: 10px;
margin-bottom: 7px;
background: #303030;
color: #F7F7F7;
}
.entry-content h4:before {
font-family: FontAwesome;
position: relative;
content: 'f054';
font-size: 17px;
padding-right: 10px;
}

style 5

Blog Post Ki Heading Ko Stylish Design Kaise Kare. Without Plugin 5

.entry-content h4: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
}

Step 2: अपने ब्लॉग में Login करें और Dashboard ->Appearance ->Customize में जाएँ.

  1. अब Additional CSS पर click करें.

Blog Post Ki Heading Ko Stylish Design Kaise Kare. Without Plugin 6

Step 3:

  1. अब आपको यहाँ पर heading की css code paste करना है, जिसे अपने ऊपर में copy किया था.
  2. अब Save & Publish की बटन पर Click करें।

Blog Post Ki Heading Ko Stylish Design Kaise Kare. Without Plugin 7

    अब आपको जिस heading को stylish बनाना है, उसके HTML tab में कुछ इस तरह से लिखें

    Example:
     <h4>आपका heading यहाँ लिखें</h4>
    इस तरह से आप अपने heading को आसानी से design कर सकते हो। इसके लिए बहुत सारे plugins भी है, जिसका use भी आप कर सकते हो। लेकिन ज्यादा better यही होगा की आप बिना plugin के ही design करो।

    में उम्मीद करता हूँ की आपको यह post अच्छा लगा होगा और अपने इस post की मदद से अपने post heading को और भी ज्यादा stylish बना दिया होगा। अगर आपको कोई सवाल पूछना है तो निचे comment करें। इस post को social media में share जरूर करें।

    You May Also Like

    • WordPress Site Me Malicious Code Scan Kaise Kare

      WordPress Site Me Malicious Code Scan Kaise Kare

    • WordPress Post Ya Kahi Bhi Feedback System Kaise Add Kare

      WordPress Post Ya Kahi Bhi Feedback System Kaise Add Kare

    • Top 10 Common WordPress Mistakes – Jo Sabhi Beginners Karte Hai

      Top 10 Common WordPress Mistakes – Jo Sabhi Beginners Karte Hai

    • WordPress Ke Liye Top 5 Free Hosting Companies [For Newbie]

      WordPress Ke Liye Top 5 Free Hosting Companies [For Newbie]

    About Md Arshad Noor

    हेलो दोस्तों, मेरा नाम मोहम्मद अरशद नूर है. में इस ब्लॉग में रेगुलर नई नई आर्टिकल्स लिखता हूँ. यहाँ पर हम ज्यादातर Blogging, Make Money, SEO, WordPress आदि से सम्बंधित Article मिलेगी. आपको हमारी लेख पसंद आती है तो इसे सोशल मीडिया में शेयर करें। अगर आपको कोई सहायता चाहिए तो कमेंट कीजिए।

    COMMENTs ( 14 )

    1. Himanshu kumar says

      आपका बहुत बहुत धन्यवाद .. मुझे इस कोड की जरुरत थी

      Reply
      • Md Arshad Noor says

        Thanks and Keep visiting…

        Reply
    2. Sultan singh says

      Brother aap apne blog ke code box ke code ko de sakte ho.

      Reply
    3. Ajay health says

      Thank bro

      Reply
      • Md Arshad Noor says

        Always wlcm dear!!

        Reply
    4. Deepesh Pandole says

      Verry good information sir thanks for sharing

      Reply
      • Md Arshad Noor says

        wlcm bro, keep visiting…

        Reply
    5. RISHIKESH MISHRA says

      Bhai aapne kaun sa heading lagaya hai iska code chahiye plzz.
      Jaldi dena aapka kaun sa theme hai

      Reply
    6. Utpal Konwar says

      agr me h2 aur h3 ke heading me bhi background add karna chahu to kaise karu

      Reply
      • Md Arshad Noor says

        Hi Utpal,
        Uske liye apko upar diye CSS code me h4 ke jagah h2 ya h4 add kar dena hoga.

        Reply
    7. shailesh says

      Bhai ye Blogger pe kaise work karega. Mene try to kiya lekin template me script hai wo ku6 samaj nai aa rahi hai aur ye script mene customise me jakar bhi dali lekin output nahi mila. ho sake to meri help karna mije iska solution mail pe bhej dena. Thamk you

      Reply
    8. shivam kushwah says

      Sir APka Blog Padke Meri Website pe Thoda Bhot traffic Aane lg gya hai Apke saare Blog Pdke Motivate Ho Jata Hoon me thankyou Sir

      Reply
    9. Ankita says

      Amazing and well explained. Very helpful and useful for me. Thanks to sharing with us.

      Reply
    10. Rakshit says

      Good information thankyou sir

      Reply

    Leave a Reply Cancel reply

    Your email address will not be published. Required fields are marked *

    Please do not spam! otherwise your comment will be removed.

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

    Useful Articles

    Google Keyword Ranking Check karne ke liye 5 Best Website

    Website Ko User Friendly Banane Ke Liye 5 Secrets

    PHP Version Ko Upgrade Karke Site Speed Ko 20% Increase Kare

    WordPress Toolbar/Adminbar Ko Hide Aur Customize Kaise Kare

    Adsense Account Kaise Banaye [Step By Step]

    Blogging Ke 10 Important Myths ke Bare Me Apko Pata Hona Chahiye

    Hostlelo Review – A Great Solution for New Bloggers

    QR Code Kya Hai? QR Code Kaise Banaye aur Scan Kaise Kare

    Blog Me Live Cricket Score Widget Kaise Add Kare

    7 Karn WordPress Me Jyada Plugin Use Nahi Karni Chahiye

    Directory Browsing Kya Hota Hai-Isko Disable Karne Ke 2 Tarike

    Twitter Account Ko Secure Kaise Rakhe

    Blog ko Delete kaise kare aur Delete kiya hua blog wapas kaise laye

    About Us

    mdarshadnoorहेल्लो दोस्तों, मेरा नाम मोहम्मद अरशद नूर है. में अररिया, बिहार का रहने वाला हूँ. मुझे नयी चीजें सीखना-सिखाना बहुत पसंद है. में पिछले 5 सालों से ब्लॉगिंग के फील्ड में हूँ. इस ब्लॉग में आपको ब्लॉगिंग और इन्टरनेट से सम्बन्धित जानकारी मिलेगी.

    SUBSCRIBE OUR NEWSLATTER

    हमारे नवीनतम पोस्ट की सूचना एवं उपयोगी सामग्री प्राप्त करने के लिए हमसे जुड़ें

    Posts for WP Users:

    Hacker Kisi WordPress Site Ko Hack Kaise Karte Hai [5 Methods]

    Google Me Blog Ke Niche Search Box Sitelink Kaise Show Kare

    Cornerstone Content Kya Hai? Cornerstone Content Kaise Likhte Hai?

    Hostgator Hosting par WordPress Install Kaise Kare [step by step]

    Facebook Reaction Buttons Ko WordPress Me Add Kaise Kare

    More Posts from this Category

    DMCA.com Protection Status

    Recommended For You

    Hostgator Hosting par WordPress Install Kaise Kare [step by step]

    5 Reasons! Apka YouTube Video Earning Nahi Kar Rahi Hai

    Top 20+ Online Tools By BloggingHindi

    7 Aadte Jo Apko Ek Successful Blogger Bana Sakti Hai

    11 Best Free Blogging Platforms

    Nulled Theme/Plugin Kya Hota Hai? Isko Use Kyo Nahi Kare – Full Guide

    Copyright © 2021 - All rights reserved. AboutContactSitemapDisclaimer