CSS3 कोडिंग के साथ अपना पोस्ट शीर्षक आकर्षक बनाएँ

नोज जैसवाल : सभी पाठकों को मेरा प्यार भरा नमस्कार. पिछली पोस्ट को अत्यधिक पसंद करने के लिए आप सभी का दिल से धन्यबाद.आज पेश है (CSS3 कोडिंग के साथ अपना पोस्ट शीर्षक आकर्षक बनाएँ)  शीर्षक बहुत महत्वपूर्ण है, लेकिन अगर आपका ब्लॉगर कस्टम शीर्षक इतना अच्छा नहीं है,तो इसे बेहद आसानी से आकर्षक लुक दिया जा सकता है इसे CSS3 कोडिंग के साथ यह बहुत ही आकर्षक बनाया गया है. यदि आप ब्लॉगर के लिए आकर्षक शीर्षक जोड़ना चाहते हैं तो नीचे दिए आसान चरणों का पालन करें.



  • ब्लॉगर डैशबोर्ड पर जाएँ 
  • टेम्पलेट टैब पर क्लिक करें .
  • अब HTML संपादित करें बटन पर क्लिक करें
  • खोजें  ]]></b:skin>
  • ]]></b:skin>  कोड के ठीक ऊपर कोई एक कोड कापी कर पेस्ट कर दें जो स्टाइल आपको पसंद आये. 
Style 1

Demo


.post h2
{
background: #FBFBEF;
font-size: 20px;
padding: 4px 10px;
color: #333;
text-shadow: 1px 1px 1px #AAA;
border-bottom: 4px solid #01DF01;
-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;
}

Style 2

Demo


.post h2 {
font-size: 24px;
padding: 5px;
color: #fff;
text-shadow: 1px 1px 1px #333;
background: #E3BC50;
border-left: 20px solid #B9942D;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 1px 1px 2px #333;
-moz-box-shadow: 1px 1px 2px #333;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height: 1;
} 

Style 3 
DEMO

.post h2 {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKeH6Sv0tFXNr2Oxvul4uqXUQkgUs0Nq4HA5q8-f9fqPcdVht11WXM6jIC5ekFtKp15bOZToCzCHkL3XXWVWE8lGsAXEa6TnLKv-VWXjOzQo9Yj6XD9e2AB11Ty9-EnzaDzBCGPzgLiNA/s1600/h3.png") no-repeat 4px center transparent;
font-size: 20px;
font-family: Oswald;
font-weight:normal;
padding: 3px 10px 3px 80px;
color: #0274be;
border: 3px solid #5bb5f0;
text-shadow: 0 1px 0 #CCC;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
-moz-box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
-webkit-box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
margin: 15px 3px;
text-transform: uppercase;
line-height: 1.3;
}

Style 4 
Demo

.post h2 {
color:#666;
border-left:10px solid #666;
border-right:10px solid #666;
padding:3px 5px 3px  20px;
border-radius:15px;
-moz-border-radius:15px;
box-shadow:0px 0px 13px #666;
-webkit-box-shadow:0px 0px 13px #666;
-moz-box-shadow:0px 0px 13px #666;
}
.post h2:hover {
color:#FF133F;
border-left:10px solid #FF133F;
border-right:10px solid #FF133F;
box-shadow:0px 0px 13px #FF133F;
-webkit-box-shadow:0px 0px 13px #FF133F;
-moz-box-shadow:0px 0px 13px #FF133F;
}

Style 5 
Demo

.post h2
{
margin-top:10px;
    max-width:840px;
    padding:6px 2px;
color: #000000;
    padding-left:10px;
    margin-bottom:10px;
    font-size:20px;
    font-family:&#39;georgia&#39;;
    background-color:#F8FAFD;
    text-decoration:none;
    border-left:10px solid #3873CC;
    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#FF0000;
}

अब अपने टेमपलेट को सेव करें.



अब ड्रॉप मेनू से शीर्ष विकल्प का चयन करें और शीर्षक का आनंद लें. 


heading tutorial



क्या आपको यह लेख पसंद आया? अगर हां, तो ...इस ब्लॉग के प्रशंसक बनिए !!
इस पोस्ट का शार्ट यूआरएल चाहिए: यहाँ क्लिक करें। Sending request...
Comment With:
OR
The Choice is Yours!

17 कमेंट्स “CSS3 कोडिंग के साथ अपना पोस्ट शीर्षक आकर्षक बनाएँ”पर

  1. सुन्दर जानकारी,थैंक्स मनोज जी.

    ReplyDelete
  2. बेहद उम्दा विजेट सर,धन्यवाद.

    ReplyDelete
  3. मनोज सर कार्य की वजह से आपको कमेन्ट नहीं दे पाया फिर से शानदार बिजेट थैंक्स.

    ReplyDelete
  4. शानदार बिजेट थैंक्स मनोज जी.

    ReplyDelete
  5. बडी लम्‍बी प्रकिया है कोशिस जारी है आपको जन्‍माष्‍टमी की शुभकामनाये

    ReplyDelete
  6. Great post,Thanks

    ReplyDelete
  7. उपयोगी जानकारी आभार मनोज जी.

    ReplyDelete
  8. बेहतर जानकारी हमेशा की तरह ज्ञानवर्धक आपको साधुबाद

    ReplyDelete
  9. उपयोगी जानकारी,आपको जन्माष्टमी की शुभकामनाये

    ReplyDelete
  10. सभी मेहरबान पाठको और पोस्ट पर राय के लिये सभी ब्लॉगर साथिओं को दिल से आभार एवं जन्माष्टमी पर्व की शुभकानाएँ,आप सभी को भगवान् श्री कृष्ण की पूर्ण कृपा सदैव बनी रहे.

    ReplyDelete
  11. शानदार बिजेट थैंक्स

    ReplyDelete
  12. नीरज जी पोस्ट पर कमेन्ट के लिए आभार.

    ReplyDelete
  13. समझ मे आ गय मनोज जी ,
    आपका हमारे कार्यस्‍थल पर हार्दिक स्‍वागत है क्‍यो की आज जन्‍मास्‍टमी पर यहा मथुरा के पास होने से वि शेष उत्‍सव का आयोजन होता है तो इस त्‍यौहार प आपका यहा स्‍वागतहै

    ReplyDelete
  14. निमंत्रण का शुक्रिया विनोद जी. जन्मास्टमी पर्ब तो समस्त भारत में मनाया जाता है,हाँ वहां की बात ही अलग है.कभी समय मिला तो या प्रभु ने बुलाया जरुर आउंगा,शुक्रिया धन्यवाद.

    ReplyDelete
  15. बहुत ही बेहतरीन जानकारी दी है आपने.आज ही आपकी पोस्ट पर आना हुआ .और ये पोस्ट पढ़कर बहुत अच्छा लगा.इसी तरह का पोस्ट क्रम जारी रखिये.




    मोहब्बत नामा
    मास्टर्स टेक टिप्स

    ReplyDelete

Widget by:Manojjaiswal
Related Posts Plugin for WordPress, Blogger...
  • रफ़्तार
  • Online Marketing
    Praca poznań w Zarabiaj.pl
    Technology-Internet blog
     

    Blog Directories

    क्लिक >>

    About The Author

    Manoj jaiswal

    Man

    Behind

    This Blog

    Manoj jaiswal

    is a 56 years old Blogger.He loves to write about Blogging Tips, Designing & Blogger Tutorials,Templates and SEO.

    Read More.

    ब्लॉगर द्वारा संचालित|Template Style by manojjaiswalpbt | Design by Manoj jaiswal | तकनीक © . All Rights Reserved |