Tuesday, July 16, 2013

HOW TO CUSTOMIZE BLOGGER HEADING AND SUBHEADING FOR POST

HOW TO CUSTOMIZE BLOGGER HEADING AND SUBHEADING FOR POST

CUSTOM HEADING BLOGGER



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 http://dailybloggiingtips.blogspot.com/ */
.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 http://dailybloggiingtips.blogspot.com */
.post h2 {
background: url("http://3.bp.blogspot.com/-gLnHp4LoL-Q/T-hYlORTm3I/AAAAAAAAA0s/IN1bvxW-hwg/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 http://dailybloggiingtips.blogspot.com */ 
.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 http://dailybloggiingtips.blogspot.com */ 
.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("http://3.bp.blogspot.com/-gLnHp4LoL-Q/T-hYlORTm3I/AAAAAAAAA0s/IN1bvxW-hwg/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;
}

8 comments:

unable to integrate this code to my blogger

I have one question without Custom web development page how we can implement headings and sub headings on my blogger. Please give me answer on my question.

Truly an amazing page. I like what you've got in here. thanks for the share. Totally interesting indeed. thanks!
Website Designing Company Bangalore

Just I Want to know,how to add the sub menus to a blogger?Can you explain in detail?
Web Design Company Bangalore

ADMIN its not working with me can u help me i cant find post h2 post h3 and h4 then i use the second method but still not working can u help me.

Hi Admin i have a website full version forever and i have try to add these code but unfortunately not work properly so can you have any solution for my latest full version forever software website

Information is very good. I am not finding h3, h4, h5 terms related to my heading, subheading and minor heading in my blog https://sharmasblogs.blogspot.in/# . Kindly suggest.

Post a Comment