Latest News

How To Customize Blogger Heading And Subheading For Post

HOW TO CUSTOMIZE BLOGGER HEADING AND SUBHEADING FOR POST

HOW TO CUSTOMIZE BLOGGER HEADING AND SUBHEADING FOR POST 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/AVvXsEh7vb1UFW27qSpEeI-RtHQpU9KRZrTwt6PoEfQL7fB80hzBOjCYl2CVqtnB34VzQR_NQfPGdO51_nDHl7nn2w6yCAAb0bTn31b5eaThMTA1os1HZjxkdXTx-9gkPjaUeeWgBIGHRpkt0ug/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/AVvXsEh7vb1UFW27qSpEeI-RtHQpU9KRZrTwt6PoEfQL7fB80hzBOjCYl2CVqtnB34VzQR_NQfPGdO51_nDHl7nn2w6yCAAb0bTn31b5eaThMTA1os1HZjxkdXTx-9gkPjaUeeWgBIGHRpkt0ug/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"

Total Pageviews