Monday, August 15, 2016

Blogger: How to Add Advanced Font Selector for Header Description

Template Designer: Advanced: Blog Description Color Selector

I will show you how to add an Advanced Font Selector for the header description in Blogger so you can change the font type & size separate from the header title.

As shown in the screenshot above, there is only a Selector to change the Description Color in the Blogger Template Designer.

  • First go to the overview of your blog and select "Template" from the left column menu. Then select the "Edit HTML" button below the "Live on Blog" preview.

  • Next, click on the whitespace in the editor and press Ctrl+F to drop down the find bar.

  • Type "Blog Description" in the find field (without the quotes) and press enter. This should show "Blog Description" highlighted in the editor like in the screenshot below.

Finding Text in the Template Editor

  • To add a new Variable tag for the Description Font, enter following text in the editor, below the opening Blog Description Group tag.
<Variable name="description.font" description="Font" type="font" default="normal normal 16px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 16px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
  • See the image below for where to place the Description Font Variable tag.

Adding a Description Font Variable tag

  • Now type "description" in the find field (without the quotes) and press enter. This should show the ".description" CSS selector, highlighted in the editor, like in the screenshot below.


Finding Text in the Template Editor

  • Now comment out the old CSS Description block as show in the image below.

Comment the Old CSS Description Block

  • Next, add the following text to create a customized CSS section above the CSS content section.
/* Custom
----------------------------------------------- */
.Header .description {
  font: $(description.font);
  color: $(description.text.color);
}
  • See the image below for where to place the the text.

Adding the Custom CSS Section With New Description Block

  • Now click the "Save template" button and click the "Back" button.

  • At the Template page, click the "Customize" button under the "Live On Blog" view to go to the Blogger Template Designer page.

  • Select "Advanced" on the menu and then "Blog Description" and you will now see a Font Selector like in the screenshot below.

Template Designer: Advanced: Blog Description Font & Color Selector

Enjoy!

No comments:

Post a Comment