9 pleasing Sub-heading Styles for Blogger Blogs!

Hello Everyone Today we are back with new tutorial which is 9 New & pleasing Sub-heading CSS Styles for Blogger Blogs!. Header Tags like H1, H2, H3 are most used by bloggers in their posts. So When we use them without styling it looks ugly with bold and large text. So The visitors get bad impressions from your posts and site as it does not look professional so to achieve SEO We need Everything from Optimized and Responsive sites to Beautiful Designs. So This Post is About Decorating H3 Tag. So That When you use it in your blogger post it should look Good and attracting to Visitors. H3 are Mostly used for Important One Line Heading or Questions. So We are sharing many Designs For Subheadings which is H3.

What is 9 New & pleasing Sub-heading CSS Styles?

9 New & pleasing Sub-heading CSS Styles for Blogger Blogs! See We are writing this tutorial for webmasters who want their Sub-heading to be more appealing and beautiful for visitors it is Styled by using CSS. Just Few lines of code and your heading 3 or h3 tags are ready to use. So that when you use Subheading from the post editor it will display the new styled Heading So is this not Good?

Why To Use New & pleasing Sub-heading CSS Styles?

Top New & pleasing Sub-heading CSS Styles have many features:
  • More Than 9 Designs Available choose your favorite design.
  • Pure CSS Code is used in styling H3 Tags So That This does not effect on the Loading Speed of the Site.
  • Most Advanced way of animating which is by Using CSS Have been used to create this widget
  • This Styling is Very Flexible and Can Be Customize easily according to your theme or Template.

What is new 9 New & pleasing Sub-heading CSS Styles?

What we have done new is We have not used Fon't-awesome for some Styles Because when you write more words in a sentence the heading will break if we use font awesome instead of that we have use optimized icons to decorate the headings. and for some we have used Font awesome.

Let Start! How To Add  9 New & pleasing Sub-heading CSS Styles in Blogs or sites:

Steps To Add Top 6 cute social follow buttons Widget:


STEP 1:  Go To Template Section As Shown in The Image Below
Template

This is Optional Step You must have font-awesome installed in your template for the widget to work.if you have already added this below script then skip this step.

STEP 2: After Clicking on Edit HTML Search for 
<head>
STEP 3:  Copy This Below Code after </head>
 <link href='//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css' rel='stylesheet'/>
Now After Installing the script or if you have added the script already you may skip the above step. Now Comes The Important Steps:

Now Adding The Widget Where you want it to be located

STEP 1: Log in to your Blogger account and Go to your Blogger Dashboard

Template

STEP 2: In The Left Side Bar You will find Template Section as highlighted in the image above Click on Template.

STEP 3: Click On Edit HTML.

STEP 4:  After Clicking on Edit HTML Search for
]]></b:skin>

STEP 5:  Copy This Below Code Before ]]></b:skin>

First Design: ( Hover Effect )

See the Pen QNQGxK by MD M Nauman (@mmnauman) on CodePen.

/* http://www.trendingwidgets.com  */
.post h3 {text-align:left;font-size:120%; font-family:'Roboto Condensed',Helvetica,Arial,sans-serif;color:#666666;padding:15px 5px 10px 0;margin-bottom:10px;position:relative;text-transform:capitalize;border-bottom:2px solid rgba(0,0,0,0.2); word-wrap: break-word;}

.post h3:before{height:2px;position:absolute;top:100%;background-color:#05A8FC;display:block;width:18%;content:"";left:0;z-index:1; transition: width 0.8s linear 0s}

.post h3:hover:before{
width:100%;
background-color:#05A8FC;
}

Second Design: Hover Effect 2




/* http://www.trendingwidgets.com  */
.post h3 {box-sizing: border-box; text-align:left;font-size:120%; font-family:'Roboto Condensed',Helvetica,Arial,sans-serif;color:#666666;padding:15px 5px 10px 5.8%;margin-bottom:10px;position:relative;text-transform:capitalize;border:2px solid rgba(255, 133, 68, 0.7); word-wrap: break-word; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_p2Yhc8qoSiKWxLaw63GP3UHIi0tekPcG_KjetkAogzx0vIPH1UpZzF-ZnqTU2Ez5ngb45Mem88LNiYDl-2vXe1fbTg8Rq8eh_3evY0JF0BR4GXf72LWu0CJgmbS-1nl6YfLDabow2zM/s400/tick+mark+new+icon.png) 4px 50% no-repeat,url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb9fzFfCEhTH_1kzjq1nsPjVhvyor8Ybb-t5RifzvSaLcJsC06UJxI7LBVDnOJXDKDvDadi6rJ-67uwXU7boGXMWo4hrvcCnl7aA62FcVSlavhxO9aDIP7BehrpqL7_3vS_pyUwrp40OE/s400/Rectangle+Border.png) 0px 50% no-repeat; background-size: 4.5% 100%, 5.5% 200%; border-radius: 5px; transition: border 1s linear, box-shadow 0.5s linear; box-shadow: 0px 0px 1px 2px #FEBD17 inset; background-color: rgba(255,255,255,0.2);}

.post h3:hover{
border: 2px solid #05A8FC;
box-shadow: 0px 0px 1px 2px #05A8FC inset;
}
/* http://www.trendingwidgets.com  */

Third Design: Border Hover Effect





/* http://www.trendingwidgets.com  */
.post h3{
background: #F9F9F9;
font-family:'Oswald',sans-serif;
font-size: 120%;
padding: 10px 12px;
color: #333;
text-shadow: 1px 1px 1px #AAA;
border-bottom: 4px solid #05A8FC;
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 6px;
-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.5);
-moz-box-shadow:0 2px 4px rgba(0,0,0,0.5);
 box-shadow:0 2px 4px rgba(0,0,0,0.5);
margin: 6px 3px;
text-transform: capitalize;
width: 95%;
line-height:1.0em;
-webkit-transition: border .777s;
-moz-transition: border .777s;
-o-transition: border .777s;
-ms-transition: border .777s;
transition: border .777s;

}
.post h3:hover {
border-bottom: 4px solid #03DA03;
}
/* http://www.trendingwidgets.com  */

Fourth Design: Font-awesome Question Mark



/* http://www.trendingwidgets.com  */
.post h3{padding:12px 45px!important; display:block!important;margin: 10px 0px;color: rgb(52,52,52);border-radius: 4px 4px 0 0; position: relative;font:100% 'Oswald',Sans-Serif;text-align:left;font-weight: bold;text-transform: capitalize;text-shadow: 0px 1px 0px rgb(204, 204, 204);box-shadow: 0px 0px 3px 1px rgb(198, 198, 198) inset;overflow:hidden;}

.post h3:before {content: "\f059";color: #FFFFFF;border-radius: 2px; left: 0px;position: absolute;font: 200% fontAwesome;background: orange;padding:5px; top: 0px; display:inline-block;}
/* http://www.trendingwidgets.com  */


Fifth Design: Simple Hover Effect








/* http://www.trendingwidgets.com  */
.post h3 {
border-radius: 6px;
border: 1px solid rgb(40, 109, 164);
color: #2e6886;
font-family:'Oswald',sans-serif;
font-size: 16px;
letter-spacing: -1px;
line-height: 22px;
margin: 0px 0px 5px;
padding: 8px 8px;
box-shadow: 0px 0px 1px 2px #2e6886 inset;
text-transform: capitalize;
font-size: 120%;
-webkit-transition: border .777s;
-moz-transition: border .777s;
-o-transition: border .777s;
-ms-transition: border .777s;
transition: border .777s;
animation: trendingwidgets 2s linear 0s infinite alternate;
}

.post h3:hover{
border: 1px solid rgba(46, 198, 255, 0.5);
box-shadow: 0px 0px 1px 2px rgba(46, 198, 255, 0.5) inset;
animation-play-state:paused;
}
/* http://www.trendingwidgets.com  */

Sixth Design: Icons With Hover Effects




/* http://www.trendingwidgets.com  */
.post h3 {
border: 2px solid rgba(0,0,0,0.8);
padding: 15px 2px 15px 7%;
border-radius: 19px;
}

.post h3 {
background: #F1F1F1;
border-radius: 25px 10px 10px 25px;
}

.post h3{
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjGZd-wzJk79p0Ys_Nqg2cn9Hf22e9XiCfgoOJXFT6zuNe4ZPcHceLJiR-Dp9JQ4BMpQcHSr8Vyh526UDXgd7RASEEWdPhkxC-1suifZz6Rzq9oR7hxLQ_qoPEPHUmyCCvm428obUxXns/s400/info+icon.png') 15px 50% no-repeat ,url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYoiEze5a7ToDnTVsZ_sle3BZrE4TX6ZFpSQ3npz76AaWanB0BAYx_0R09leqhDxITgaM7pmE_Qvwb3O0IJHPC3rBCkXMvhOdGJ2_MCb6IoK2vkUVh-T0SrfvafJlKCtoet9a6svU497Y/s400/border+box.png) 0px 0px no-repeat ;
background-size: 2% 65%, 6% 100%;
z-index:999;
position:relative;
transition: border 1s, box-shadow 1s, background 2s, transform 2s;
}

.post h3:hover{
max-width: 95%;
width:100%;
border:none;
border-top: 2px solid black;
border-bottom: 2px solid black;
display:inline-block;
background: #B3E1F8;
transform: rotate(1deg);
}
/* http://www.trendingwidgets.com  */

Seventh Design: Warning Effect Responsive



/* http://www.trendingwidgets.com  */
.post h3 {
border: 2px solid rgba(0,0,0,0.8);
padding: 15px 2px 15px 7%;
}

.post h3{
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGFfRfL5gLWFYDGunFQn6tq95Caq_Z1lXyJzMP7mNAL01eWLwaJufOohExXBEmLVX1Os823b4GZ9IR5rES3F824dC0l7vZ4Zgjp3huZkwJTxz0ms1_nLAQXU15x-ncNrT6UW175YaC-hw/s400/Warning+Notification.png') 2px 50% no-repeat;
background-size: 6% 100%, 6% 100%;
z-index:999;
position:relative;
border: 2px solid rgba(0,0,0,0.8);
padding: 15px 2px 15px 6.2%;
border-radius: 5px;
font-family:'Oswald',Sans-Serif;
text-transform: capitalize;
color:red;
transition: border 1s, box-shadow 1s, background 2s, transform 2s;
}

.post h3:hover{
max-width: 95%;
width:100%;
border:none;
border-top: 2px solid black;
border-bottom: 2px solid black;
display:inline-block;
background: red;
color:black;
transform: rotate(1deg);
}
/* http://www.trendingwidgets.com  */

Eight Design: Responsive Transition Effect




/* http://www.trendingwidgets.com  */
.post h3{
margin-top:10px;
    max-width:95%;
    padding:7px 2px;
    color: #000000;
    padding-left:15px;
    margin-bottom:10px;
    font-size:20px;
    font-family:'Oswald',sans-serif;
    text-decoration:none;
    box-shadow:1px 1px 2px gainsboro;
transition: border 2s;
position:relative;
z-index:11;
}

.post h3:before{
content: "";
background: #05A8FC;
width: 10px;
height: 30px;
left: 0px;
top: 0px;
z-index:-444;
position:absolute;
height:100%;
transition: all 2s;
}
.post h3:hover:before{
width:100%;
border: 2px solid black;
border-radius: 2px;

}
/* http://www.trendingwidgets.com  */

Ninth Design: Simple Transition Responsive




/* http://www.trendingwidgets.com  */
.post h3 {
  text-shadow: -2px -1px 1px #060606;
  box-shadow: -3px 2px 3px 1px #303030, 2px -3px 3px 1px #303030;
  margin-bottom: 5px 0;
  background: #303030;
  color: #F7F7F7;
  position:relative;
  padding: 8px 10px;
  font-family:'Oswald',Sans-Serif;
}
.post h3:before {
  font-family: FontAwesome;
  position: relative;
  content: '\f054';
  font-size: 17px;
  padding-right: 10px;
  transition: all 1s, transform 2s;
}

.post h3:hover:before {
color:#05A8FC;
}
.post h3:hover {
transform: scale(1,1.5);
-webkit-transform: scale(1,1.5);
}
/* http://www.trendingwidgets.com  */

Customization:

  • You Can Customize The Colors of Sub-heading.
  • You Can Change the Font-size and Family Which suits your Blog.
  • You Can Change Hover Effects or hover Colors According to your desire
  • You can Change Transition duration and animation effects.
    STEP 6:  All Done Save Your Template and Check it in your site.

    How to use customized Subheading in our Blog Posts?

    It is very easy to use pleasing Sub-heading in our blogger posts Just Select the text or start new line and then select Subheading from the drop down select menu inside the editor as show in the image below:


    That's It Thanks For Following our Tutorial '9 New & pleasing Sub-heading CSS Styles for Blogger Blogs! '' Along With us If you found any difficulty Please Comment and Share Your Valuable Opinion. And Stay tuned for More Tutorials Like This and Share this with your friends.

    No comments:

    Post a Comment