How To StyleSub Headings In Blogger Using CSS

 
You must have noticed the style of sub topics in my post, it is usually surrounded by colour full dotted lines. This gives your post more professional look or makes it easy for you readers to navigate through certain topic in your post. In this tutorial i will teach you to add css code to style subheadings in blogger blog posts.

How To Add CSS Style Sub Headings ?

1. Go to Blogger > Template  > Edit HTML
2. Now search for ]]></b:skin>
3. Paste the following code above ]]></b:skin>

/*mybloggersworld.com*/
.post h3{
color:#666;
border-top:1px dotted #666;
border-bottom:1px dotted #666;
font-size: 18px;
padding-top:2px;
padding-bottom:2px;
}
 .post h4:hover{
border-top:1px dotted #0080ff;
border-bottom:1px dotted #0080ff;
/*mybloggersworld.com*/
background-color: #289728;
color:#666;
padding-top:2px;
padding-bottom:2px;
}

4. Save the template and you are done.

How To Use This CSS Style Headings In Blog Post ?

1. Open a new blog post and type your sub heading
2. Now select Minor Heading from drop down by clicking on the icon as shown below.

3. Another way to do this is to surround the text between h3 tag as shown below.

<h3> Blogger Sub Heading </h3>

How To StyleSub Headings In Blogger Using CSS

 
You must have noticed the style of sub topics in my post, it is usually surrounded by colour full dotted lines. This gives your post more professional look or makes it easy for you readers to navigate through certain topic in your post. In this tutorial i will teach you to add css code to style subheadings in blogger blog posts.

How To Add CSS Style Sub Headings ?

1. Go to Blogger > Template  > Edit HTML
2. Now search for ]]></b:skin>
3. Paste the following code above ]]></b:skin>

/*mybloggersworld.com*/
.post h3{
color:#666;
border-top:1px dotted #666;
border-bottom:1px dotted #666;
font-size: 18px;
padding-top:2px;
padding-bottom:2px;
}
 .post h4:hover{
border-top:1px dotted #0080ff;
border-bottom:1px dotted #0080ff;
/*mybloggersworld.com*/
background-color: #289728;
color:#666;
padding-top:2px;
padding-bottom:2px;
}

4. Save the template and you are done.

How To Use This CSS Style Headings In Blog Post ?

1. Open a new blog post and type your sub heading
2. Now select Minor Heading from drop down by clicking on the icon as shown below.

3. Another way to do this is to surround the text between h3 tag as shown below.

<h3> Blogger Sub Heading </h3>

5 Awsome CSS Styled Blockqoute For Your Blog

Blockquote helps you separate certain text from the main article or post. It can help you share codes to your readers or share special message or important idea. We have previously share with you guys tutorial on customizing blockquote on your bloggers blog, in this post i will share with your guys 5 awesome css styled block-quote for your blog or websites. Choose any of these 5 blockquote that you like or suit or blog.

Customizing Blockquote

Before you move on to these tutorial you need to know how to customize blockquote on blogger blog to use any of these codes. In order to learn to customize blockquote check out tutorial given below.

Blockquote Style #1

blockquote {
background: #B9DFF1;
margin: 0 10px;
padding: 20px;
color:#333;
border-radius:15px;
font: bold 0.9em  "Comic Sans MS", verdana;
/**mybloggersworld.com**/
line-height: 1.6em;
box-shadow: 4px 4px 10px #e3e3e3;
}

Blockquote Style #2

blockquote { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1KsnDm2R9zDWPHCrih6Jupj7nMUgVnxKYTKh4vUqVTOt8xL7pakqSugjKGl8j-Lkjpf4_XryCUzOefx90Ahqy2_rlSGe384ay_Zhv0nQm1jxS4jUyxm7PKC94ywmbvWdWFM6r151ouBc/s1600/paper1.png) repeat-y scroll 0 0 transparent;
/**mybloggersworld.com**/
border-radius: 5px;
margin: 10px;
padding: 20px 10px 15px 50;
line-height: 1.6em;
font-family:'Fondamento', cursive, sans-serif;
font-size:15px;
}

Blockquote Style #3

blockquote {
  font: normal Tahoma, sans-serif;
  line-height:1.6em;
  font-size:18px;
  padding:10px;
  padding-top: 24px;
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSt28E3TNeQNDeQGl8AOo5bDNtA0aG3wB-9em2fgaaui1KQzxS8ue2sfQZaZtX7MQE6Mfevcb7EI0akHADDhKcGDsApuGyA65zV4cuWUDJcEr4SMtFZ61qHU_XzXpBAPOsxp_9F8gRjX8/s1600/examplequote.gif);
 /**mybloggersworld.com**/
  background-position: top left;
  background-repeat: no-repeat;
  text-indent: 65px;
  }

Blockquote Style #4

blockquote {
background: #81c136;
margin: 0 12px;
padding: 18px;
border-radius:20px;
font: bold 1em  'Freckle Face', cursive;
/**mybloggersworld.com**/
color: #384924;
line-height: 1.6em;
box-shadow: 5px 5px 12px #e3e3e3;
}

Blockquote Style #5

blockquote {
background: white;
margin: 0 10px;
padding: 20px;
color:#999;
font-family:cursive, sans-serif;
/**mybloggersworld.com**/
line-height: 1.6em;
border-left:2px dashed #ce6100;
border-right:2px dashed #ce6100;
}

Some More Customization For Your Blog

This is one of many tutorial on customizing your blogger blog we have share. Check out below some of awesome customization you would like to implement on your blog.

5 Awsome CSS Styled Blockqoute For Your Blog

Blockquote helps you separate certain text from the main article or post. It can help you share codes to your readers or share special message or important idea. We have previously share with you guys tutorial on customizing blockquote on your bloggers blog, in this post i will share with your guys 5 awesome css styled block-quote for your blog or websites. Choose any of these 5 blockquote that you like or suit or blog.

Customizing Blockquote

Before you move on to these tutorial you need to know how to customize blockquote on blogger blog to use any of these codes. In order to learn to customize blockquote check out tutorial given below.

Blockquote Style #1

blockquote {
background: #B9DFF1;
margin: 0 10px;
padding: 20px;
color:#333;
border-radius:15px;
font: bold 0.9em  "Comic Sans MS", verdana;
/**mybloggersworld.com**/
line-height: 1.6em;
box-shadow: 4px 4px 10px #e3e3e3;
}

Blockquote Style #2

blockquote { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1KsnDm2R9zDWPHCrih6Jupj7nMUgVnxKYTKh4vUqVTOt8xL7pakqSugjKGl8j-Lkjpf4_XryCUzOefx90Ahqy2_rlSGe384ay_Zhv0nQm1jxS4jUyxm7PKC94ywmbvWdWFM6r151ouBc/s1600/paper1.png) repeat-y scroll 0 0 transparent;
/**mybloggersworld.com**/
border-radius: 5px;
margin: 10px;
padding: 20px 10px 15px 50;
line-height: 1.6em;
font-family:'Fondamento', cursive, sans-serif;
font-size:15px;
}

Blockquote Style #3

blockquote {
  font: normal Tahoma, sans-serif;
  line-height:1.6em;
  font-size:18px;
  padding:10px;
  padding-top: 24px;
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSt28E3TNeQNDeQGl8AOo5bDNtA0aG3wB-9em2fgaaui1KQzxS8ue2sfQZaZtX7MQE6Mfevcb7EI0akHADDhKcGDsApuGyA65zV4cuWUDJcEr4SMtFZ61qHU_XzXpBAPOsxp_9F8gRjX8/s1600/examplequote.gif);
 /**mybloggersworld.com**/
  background-position: top left;
  background-repeat: no-repeat;
  text-indent: 65px;
  }

Blockquote Style #4

blockquote {
background: #81c136;
margin: 0 12px;
padding: 18px;
border-radius:20px;
font: bold 1em  'Freckle Face', cursive;
/**mybloggersworld.com**/
color: #384924;
line-height: 1.6em;
box-shadow: 5px 5px 12px #e3e3e3;
}

Blockquote Style #5

blockquote {
background: white;
margin: 0 10px;
padding: 20px;
color:#999;
font-family:cursive, sans-serif;
/**mybloggersworld.com**/
line-height: 1.6em;
border-left:2px dashed #ce6100;
border-right:2px dashed #ce6100;
}

Some More Customization For Your Blog

This is one of many tutorial on customizing your blogger blog we have share. Check out below some of awesome customization you would like to implement on your blog.