Main menu

Pages

Style sidebar widget titles with css (Sidebar h2)

In this tutorial I’’m gonna show you how to style you sidebar widget titles with CSS .. Don’t worry it’s gonna be really easy

Steps

  • First go to you blogger -> Theme -> Edit html
  • Then between
    <b:skin><![CDATA[
    and
    ]]></b:skin>
    you can put some CSS to style whatever you want in your blog
  • For now we will use this since we wanna style side bar heading

    .sidebar h2 {some code;}


  • In this portion of the code "
    some code
    " add some CSS to style headings
  • For example if you wanna add a background color:

.sidebar h2{
background:#2a3ffa;
}

Here are some CSS tags you can look up and use :

  • background: background color

  • padding : aligning in relation to surrounding

  • border: to add a border

  • color : color of the text

  • font-size : If you wanna change the size of the text

  • font-family : to choose a font

  • text-decoration : can provide underline or overline to text or even both but it’s not used here

  • text-transform:upper case; : will make the title letters uppercase

  • box-shadow : Adds a shadow to the box


For more about border CSS codes check this

Comments