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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhywYhInUayHfrtOsDPyqqB2SlVpUQ5yRRmEIYvlqLf4Ns3Kyze00ucx5Xf2eXqcU_gD-JMpEEuiiTZ6Zz2vL7beJ_exyalawh-sHRU3KTTfMHb5LUEceiOB-XKUJWwyrD41bmyuW04OmA/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhywYhInUayHfrtOsDPyqqB2SlVpUQ5yRRmEIYvlqLf4Ns3Kyze00ucx5Xf2eXqcU_gD-JMpEEuiiTZ6Zz2vL7beJ_exyalawh-sHRU3KTTfMHb5LUEceiOB-XKUJWwyrD41bmyuW04OmA/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;
}

19 comments:

  1. unable to integrate this code to my blogger

    ReplyDelete
  2. 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.

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

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

    ReplyDelete
  5. 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.

    ReplyDelete
  6. 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

    ReplyDelete
  7. 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.

    ReplyDelete
  8. It is a great sharing me...I am very much pleased with the contents you have mentioned. I wanted to thank you for this great article. I enjoyed every little bit part of it.Web Design Sydney | Logo Design Sydney

    ReplyDelete
  9. Web Designing is the ever green technology in the current IT world. Thanks a lot to a admin who have shared such an interesting news about the web designing. Your way of expressing points was awesome. As you said it is one of the technologies which have more scope in future.
    Regards:
    Best web designing course in chennai
    web designing course

    ReplyDelete
  10. This comment has been removed by the author.

    ReplyDelete
  11. SAMA TECHNICAL SERVICE is the Dishwasher repair Dubai Abu Dhabi company that gives you full details of your dishwasher repairing like how much will cost repair or how much time and which parts change. We have highly educated teams who are very skillful in dishwasher repairing and maintenance. For further information call us.
    Dishwasher repair Dubai
    Dishwasher repair Abu Dhabi

    ReplyDelete
  12. Do you want to quickly service for Washing Machine repair Al Baraha Dubai? We are ready to offer them fast service for Washing Machine repair Al Baraha at very reasonable prices that you can afford.

    ReplyDelete
  13. Thanks for sharing,RR Technosoft is the best azure devopsTraining institute in Hyderabad and it provides Class room & Online Training by real time faculty with course material and Lab Facility.


    ReplyDelete

  14. Big data hadoop training in Hyderabad.Instaskill Training Institute provides a big data course in Hyderabad Kondapur,by real-time faculty.

    ReplyDelete