Blog च्या Heading ला Stylish कसे बनवायचे?

Stylish Heading ब्लॉगच्या SEO च्या दृष्टीने खूप महत्वाच्या असतात. ब्लॉगच्या Heading जर Stylish असतील तर User Experience सुधारतो म्हणजे युजर तुमच्या ब्लॉगवरती जास्त वेळ टिकवून राहतो, ज्यामुळे वेबसाइट चा SEO चांगला राहतो आणि ब्लॉग रँक करण्यासाठी महत्वाचा असलेला User Experience वाढतो. Stylish Heading युजर्स ला वाचण्यास सोप्या जातात, आवश्यक माहिती लवकर शोधता येते म्हणजे Website Navigation सोपे होते. यामुळे ब्लॉगवरतील कंटेंट सुटसुटीत आणि दिसायला आकर्षक दिसते.

ब्लॉग कसा सुरु करावा यावर माहिती हवी असेल तर पुढील पोस्ट नक्की वाचा – ब्लॉग कसा तयार करावा, जाणून घ्या संपूर्ण माहिती

Stylish Heading मुळे वेबसाइट अधिक Attractive आणि Professional दिसायला लागते. Fonts, Color आणि Size यासारख्या Design Parameters च्या सहाय्याने आकर्षक Heading तयार करून, वेबसाइटला अधिक आकर्षक बनविता येते आणि युजर्सना जास्तवेळ साइटवर राहण्यासाठी प्रोत्साहित करता येते. आजच्या या पोस्टमध्ये मी तुमच्या ब्लॉगर आणि वर्डप्रेस ब्लॉगच्या Heading ला डिजाइन करण्यासाठी काही Stylish Heading CSS Code घेऊन आलो आहे, त्याच्या मदतीने तुम्ही तुमच्या ब्लॉगवरील Heading ला डिजाइन करू शकता.

Blog च्या Heading ला Stylish कसे बनवायचे? (Stylish Heading CSS WordPress and Blogger)

वर्डप्रेस आणि ब्लॉगरमध्ये, तुम्ही CSS कोड टाकून तुमच्या Headings ला Stylish बनवू शकता. तुमच्या आवडीनुसार तुम्ही स्टाइलमध्ये बदल करू शकता, त्यासाठी फक्त Color, Font Size, ई बदलायचे आहे. वरील सर्व कोड फक्त H2 टॅगला लागू होतील, जर तुम्हाला दुसऱ्या Heading ला लागू करायचा असेल तर Code मधील H2 च्या जागी ते Heading टाकावे.

वर्डप्रेस मध्ये कोड टाकणे –

• वर्डप्रेसच्या Dashboard वर जा आणि “Appearance” वर क्लिक करा.
• आता “Customize” या पर्यायायवर क्लिक करा.
• Customize मध्ये शेवटी “Additional CSS” पर्याय असेल यावर क्लिक करा.
• तेथे खाली दिलेला Code पेस्ट करा आणि आवश्यक ते बदल करून “Publish” बटणावर क्लिक करा.

ब्लॉगर मध्ये कोड टाकणे –

• ब्लॉगरच्या Dashboard वर जा आणि “Theme” वर क्लिक करा.
• आता “Customize” या पर्यायायवर क्लिक करा.
• Customize मध्ये Advanced पर्याय ओपन करा.
• त्यात शेवटी “Add CSS” पर्याय असेल यावर क्लिक करा.
• तेथे खाली दिलेला Code पेस्ट करा आणि “Save” बटणावर क्लिक करा.

1) Normal Style

Your Heading is Here

h2 {
    font-weight: 600;
    font-size: 23px;
    background: #ff9900;
    color: #fff;
    padding: 10px;
    line-height: 1.7em;
    box-shadow: 0 2px 10px 0 #cac9c9;
    text-align: center;
    user-select: none;
    cursor: pointer;
}

2) Gradient Style

Your Heading is Here

h2 { 
   font-weight: 600;
   font-size: 18px;
   background: linear-gradient(to right, #ff3366, #33ccff);
   color: #fff;
   padding: 10px;
   line-height: 1.7em;
   box-shadow: 0 2px 10px 0 #cac9c9;
   text-align: center;
   user-select: none;
   cursor: pointer;
}

3) Underline Style

Your Heading is Here

h2 { 
  font-weight: 600;
  font-size: 18px;
  background: #f0f0f0;
  color: #333;
  padding: 10px;
  line-height: 1.7em;
  text-align: center;
  user-select: none;
  cursor: pointer;
  border-bottom: 2px solid #007bff; 
}

4) Bordered Style

Your Heading is Here

h2 { 
  font-weight: 600;
  font-size: 18px;
  background: #fff; 
  color: #333;
  padding: 10px;
  line-height: 1.7em;
  text-align: center;
  user-select: none;
  cursor: pointer;
  border: 2px solid #ff9900;
}

5) Border + Gradient Style

Your Heading is Here

h2 {
   font-weight: 600;
   font-size: 18px;
   background-image: linear-gradient(to right, #ff5f00, #ff782f, #ff8d4e, #fea26d, #fbb58c);
   color: #fff;
   padding: 10px;
   line-height: 1.7em;
   box-shadow: 0 2px 10px 0 #cac9c9;
   text-align: left;
   user-select: none;
   cursor: pointer;
   border-left: 20px solid red;
}

6) Double Border Style

Your Heading is Here

h2 {
    font-weight: 600;
    font-size: 18px;
    background: #64b5f6; /* Attractive background color */
    color: #fff;
    padding: 10px;
    line-height: 1.7em;
    box-shadow: 0 2px 10px 0 #cac9c9;
    text-align: center;
    user-select: none;
    cursor: pointer;
    border-left: 30px solid #1e88e5; /* Attractive left border color */
    border-right: 30px solid #1e88e5; /* Attractive right border color */
}

7) Curved Corner Style

Your Heading is Here

h2 {
  font-weight: 600;
  font-size: 18px;
  background: #fff;
  color: #000;
  padding: 10px;
  line-height: 1.7em;
  box-shadow: 0 2px 10px 0 #cac9c9;
  text-align: center;
  user-select: none;
  cursor: pointer;
  border-left: 20px solid #ff5f00;
  border-right: 20px solid #ff5f00;
  border-radius: 5px 55px 5px 55px;
}

8) Side Rounded Style

Your Heading is Here

h2 {
    font-weight: 600;
    font-size: 18px;
    background: #fff;
    color: #000;
    padding: 10px;
    line-height: 1.7em;
    box-shadow: 0 2px 10px 0 #cac9c9;
    text-align: center;
    user-select: none;
    cursor: pointer;
    border-left: 20px solid #ff0077;
    border-right: 20px solid #ff0077;
    border-radius: 55px;
}

आजच्या या पोस्टमध्ये आपण Blogger आणि WordPress ब्लॉगसाठी Stylish Heading CSS कशी लागू करायची ते पाहिले. मी तुमच्यासाठी वरती काही Stylish Heading CSS दिलेले आहेत ते नक्की वापरून पाहा. आपण या CSS मध्ये आपल्या आवडीनुसार बदल करू शकता आणि इतर Headings टॅग्स वरती देखील Style लावू शकता.

ब्लॉगचा SEO आणि User Experience सुधारण्यासाठी, Stylish Heading CSS वापरणे हा एक उत्तम मार्ग आहे. जर आपल्याला आपल्या ब्लॉगसाठी अधिक आकर्षक Headings तयार करायची असतील तर या पोस्टमधील Code चा वापर करा आणि पोस्ट आवडली असेल तर मित्रांसोबत शेअर करायला विसरू नका आणि काही अडचण असेल तर कमेंट करून विचारू शकता.