Breaking

Thursday, 18 October 2018

How To Change Sub Heading Style In Blogger


Welcome back guys in this post I will be showing you how to change or style your blog header. You must have observed style of sub heading in my blog. Here I will show you different sub header format which is more better and stylish than blogger default sub heading. I suggest you to change header style to give better and attractive look to your blog, believe me doing this is very simple. Let's Start!


How To Customize Sub Heading In Blogger

  • Go to blogger dashboard
  • Click theme >> Edit HTML
  • Now find ]]></b:skin> by pressing CTRL + F
  • Just above ]]></b:skin> copy and paste one of these code

Blogger Sub Heading Style 1


.post h3 { background-attachment: scroll; background-color: white; background-image: url(“http://4.bp.blogspot.com/-tFJEmtdTP9s/UTnAR0IbXxI/AAAAAAAAbXA/WO-NEvmKtXA/s1600/h2.png”); background-position: 0 50%; background-repeat: no-repeat no-repeat; border: 3px solid #0D7005; border-radius: 14px 14px 14px 14px; box-shadow: 3px 3px 3px #ABABAB; color: #25991C; font-family: Lobster,cursive; font-size: 26px; font-weight: normal; margin: 0 0 1em; padding: 0 1px 4px 34px; position: relative; text-shadow: 1px 1px 0 #000000; text-transform: capitalize; }

Blogger Sub Heading Style 2


.post h3{ margin-top:10px; max-width:95%; padding:6px 2px; color: #000000; padding-left:10px; margin-bottom:10px; font-size:20px; font-family:'Oswald',sans-serif; background-color:#F8FAFD; text-decoration:none; border-left:10px solid #05A8FC; box-shadow:1px 1px 2px gainsboro; transition: border-left .777s; -webkit-transition: border-left .777s; -moz-transition: border-left .777s; -o-transition: border-left .777s; -ms-transition: border-left .777s; } .post h3:hover { border-left:10px solid #FC2B2C; }

My Blogger Sub Heading Style 3


.post h3 { color:#222222; border-left:10px solid #222222; border-right:10px solid #222222; padding:3px 5px 3px 20px; border-radius:15px; -moz-border-radius:15px; box-shadow:0px 0px 13px #222222; -webkit-box-shadow:0px 0px 13px #222222; -moz-box-shadow:0px 0px 13px #222222; } .post h3:hover { color:#219DFC; border-left:10px solid #219DFC; border-right:10px solid #219DFC; box-shadow:0px 0px 13px #219DFC; -webkit-box-shadow:0px 0px 13px #32A4FC; -moz-box-shadow:0px 0px 13px #32A4FC; }

My Blogger Sub Heading Style 4


.post h3 {font-size:120%; font-weight:bold; padding-bottom: 5px; margin: 10px 0; background: #E3F0F2 url(https://2.bp.blogspot.com/-rYrj9bjhWEU/VDGo7uyJlkI/AAAAAAAAACY/ZxjX8wlLhFI/s1600/note.png) center no-repeat; border: 1px solid #6CC; background-position: 7px 50%; padding: 10px 10px 10px 50px; -moz-border-radius: 4px; -webkit-border-radius: 4px; }

My Blogger Sub Heading Style 5


.post h3{ background: #F9F9F9; font-family:'Oswald',sans-serif; font-size: 120%; padding: 6px 12px; color: #333; text-shadow: 1px 1px 1px #AAA; border-bottom: 4px solid #03DA03; -webkit-border-radius: 0 0 6px 6px; -moz-border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px; -webkit-box-shadow: 1px 1px 2px #AAA; -moz-box-shadow: 1px 1px 2px #AAA; box-shadow: 1px 1px 2px #AAA; margin: 6px 3px; text-transform: capitalize; width: 95%; line-height:1.0em; } .post h3:hover { border-bottom: 4px solid #003F80; }

My Blogger Sub Heading Style 6


.post h3 { border-bottom-right-radius: 15px; border-top-left-radius: 15px; border: 3px solid rgb(251, 10, 38); padding: 0px 1px 4px 14px; box-shadow: rgb(251, 10, 38) 3px 3px3px; color: rgb(251, 10, 38); font-family:'Oswald',sans-serif; font-size:120%; font-weight:400; margin: 0px 0px 1em; text-transform: uppercase; text-shadow: rgb(0, 0, 0) 1px 1px 0px; }

My Blogger Sub Heading Style 7


.post h3 { border: 1px dashed #C7C7C7; padding: 3px; box-shadow: 2px 2px 5px; padding-left: 10px; margin-bottom: 7px; border-radius: 10px; border-bottom-color: #000; background: rgba(218, 218, 218, 0.04); border-bottom-right-radius: 100px; }

We can also change background color and font as per your need. I hope by this tutorial you can easily add or change default sub heading style of blogger. If you need any customization help, kindly leave your comment below.



Please Do Share and Subscribe!

No comments:

Post a Comment

Please enable / Bitte aktiviere JavaScript!
Veuillez activer / Por favor activa el Javascript![ ? ]