जब भी कोई ब्लॉगर पोस्ट लिखता है तो वो चाहता है की उसका पोस्ट Professional दिखे और उसमे कोई गलती नही हो .पोस्ट के important part को highlight करने के लिए वो Sub-Heading का use करता है जिससे Readers भी उस पोस्ट को आसानी से पढ़ पाते हैं . लेकिन Blogger के अधिकतर Templates में Sub-Heading के लिए कोई ख़ास Design नही रहता है ऐसे में वह Sub-Heading को Customize करना चाहता है .
इसलिए यहाँ मै 10 Best और Stylish Sub-Heading Design दे रहा हूँ जिसे add कर आप अपने ब्लॉग को एक अलग Look दे सकते हैं .
आपको अपने ब्लॉग में इनमे से कोई एक CSS Code Add करना है .Code add करने के लिए आप दिए गए steps फॉलो करें .
इसलिए यहाँ मै 10 Best और Stylish Sub-Heading Design दे रहा हूँ जिसे add कर आप अपने ब्लॉग को एक अलग Look दे सकते हैं .
आपको अपने ब्लॉग में इनमे से कोई एक CSS Code Add करना है .Code add करने के लिए आप दिए गए steps फॉलो करें .
How to add Stylish Subheading in Blogger
Step 1. अपने blogger account में Log in कर Dashboard में जाएँ
Step 2. अब Template में जाकर Edit HTML को Select करें .
Step 3. फिर Ctrl+F दबाएँ और </b:skin> Search करें
Step 2. अब Template में जाकर Edit HTML को Select करें .
Step 3. फिर Ctrl+F दबाएँ और </b:skin> Search करें
Step 4. अब निचे दिए गए कोड्स में से कोई भी कोड copy करें और उसे </b:skin> के ऊपर Paste करें .
10 Stylish Subheading Design For Blogger Blog
Style 1
Style 2
.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}
Style 2
.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;
}
Style 3
.post h3 {
border:3px dashed #000000;
border-bottom:5px solid #000000;
padding: 0px 1px 4px 14px;
box-shadow: rgb(251, 10, 38) 3px 3px 3px;
color: rgb(251, 10, 38);
font-family:'Oswald',sans-serif;
font-size:110%;
font-weight:400;
margin: 0px 0px 1em;
text-transform: uppercase;
text-shadow: rgb(0, 0, 0) 1px 1px 0px;
}
Style 4
.post h3 {
padding:5px;
border:5px outset #000000;
color:#000000;
font:140% 'Oswald',Sans-Serif;
}
Style 5
.post h3 {
padding:5px;
border:5px dashed #000000;
color:#000000;
font:140% 'Oswald',Sans-Serif;
}
Style 6
.post h3 {
padding:5px;
border: 1px solid #cccccc;
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
box-shadow: 0 0 20px rgba(0, 0, 0, .2);
color:#333333;
font:140% 'Oswald',Sans-Serif;
text-transform: uppercase;
}
Style 7
.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;
}
Style 8
.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;
}
Style 9
.post h3 {
padding:5px;
border:5px dotted rgb(251, 10, 38);
color:#000000;
font:140% 'Oswald',Sans-Serif;
}
Style 10
.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);
}
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);
}
आपको इन 10 Css Codes में से कोई एक Code </b:skin> के ऊपर Paste करना है . यदि आपके Template में पहले से ही .post h3 का CSS Code है तो सबसे पहले उसे Remove करें और फिर इनमे से कोई एक कोड add करें .
आपको यदि Code Install करने में कोई Problem आ रही है तो निचे Comment करें .
हमारे फेसबुक पेज को लाइक करें - Techredefining On FB
Comments
Post a Comment