HOW TO CUSTOMIZE BLOGGER HEADING AND SUBHEADING FOR POST
Today i will share with you that how you can customize blogger heading and sub-heading feature for your blogger post, As all we know that by default blogger has very rude heading and subheading function so it required a little css customization to look attractive lets do it
1. Go to Blogger>Template/Design>Edit Html
2. Click Expand Widget Box
3. Now Ctrl+F to Find .post h3
4. Replace .post h3 with below script
/* subheading html/css form / */
.post h3 {
background: url("http://icons.iconseeker.com/png/fullsize/crystal-clear-actions/star-10.png") no-repeat 3px center ;
background-size:25px 25px;
background-position:20px;
transparent;
text-align:left;
font-size: 18px;
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: 90px;
-webkit-border-radius: 90px;
border-radius: 90px;
-moz-box-shadow: 0 1px 2px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
-webkit-box-shadow: 0 1px 2px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
box-shadow: 0 1px 2px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
margin: 15px 3px;
text-transform: uppercase;
line-height: 1.3;
}
.post h3 a, #content h1 a:visited {
color: #000;
font-size:17px;
font-family: Georgia, Times New Roman;
font-weight: normal;
margin: 0 0 2px;
padding: 4px 0 0;
}
.post h3 a:hover {
color: #000;
font-size:18px;
text-decoration: none;
}
5. Now Find .post h2 and replace with below code
/* subheading html/css form */
.post h2 {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEGMK8osHtg1xsDjdNQf-HEL6LiaJo9mkWVhVbs20NLZ-9fbu0cIpYWhab2siwhtwwCUZ1zdRsG1UzBFJ8j28ifuo7-unmAMVyLdijph8R0_Ne-DnmiWMOhtxpGixotsYHcl2T-no47kA/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;
}
6. Now search for .post h4 and replace it with below code
/* subheading html/css form */
.post h4 {
background: url("http://aux2.iconpedia.net/uploads/4300999232032834341.png") no-repeat 3px center transparent;
background-size:20px 20px;
font-size: 12px;
font-family: Oswald;
font-weight:normal;
padding: 3px 10px 3px 80px;
color: #0274be;
border: 2px solid #5bb5f0;
text-shadow: 0 1px 0 #CCC;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
-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;
}
ALTERNATE METHOD: IF ABOVE CODES ARE NOT FINDABLE
Find ]]></b:skin> in you blog
Past this Code above ]]></b:skin>
/* subheading html/css form */
.post h4 {
background: url("http://aux2.iconpedia.net/uploads/4300999232032834341.png") no-repeat 3px center transparent;
background-size:20px 20px;
font-size: 12px;
font-family: Oswald;
font-weight:normal;
padding: 3px 10px 3px 80px;
color: #0274be;
border: 2px solid #5bb5f0;
text-shadow: 0 1px 0 #CCC;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
-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;
}
.post h2 {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEGMK8osHtg1xsDjdNQf-HEL6LiaJo9mkWVhVbs20NLZ-9fbu0cIpYWhab2siwhtwwCUZ1zdRsG1UzBFJ8j28ifuo7-unmAMVyLdijph8R0_Ne-DnmiWMOhtxpGixotsYHcl2T-no47kA/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;
}
.post h3 {
background: url("http://icons.iconseeker.com/png/fullsize/crystal-clear-actions/star-10.png") no-repeat 3px center ;
background-size:25px 25px;
background-position:20px;
transparent;
text-align:left;
font-size: 18px;
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: 90px;
-webkit-border-radius: 90px;
border-radius: 90px;
-moz-box-shadow: 0 1px 2px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
-webkit-box-shadow: 0 1px 2px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
box-shadow: 0 1px 2px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
margin: 15px 3px;
text-transform: uppercase;
line-height: 1.3;
}
.post h3 a, #content h1 a:visited {
color: #000;
font-size:17px;
font-family: Georgia, Times New Roman;
font-weight: normal;
margin: 0 0 2px;
padding: 4px 0 0;
}
.post h3 a:hover {
color: #000;
font-size:18px;
text-decoration: none;
}
0 Response to "How To Customize Blogger Heading And Subheading For Post"