Custom CSS for Labels on Blogger (Codes) (Tutorials) (Blogger)

 Tutorial by Warren Woodhouse

1. Backup your Theme beforehand
2. Open Theme Editor
3. Jump to Blog1 widget
4. Find the code below

<b:includable id='post' var='post'>

5. Add the codes below the line at Step 4 (shown above)

<b:loop values='data:post.labels' var='label'>

  <b:class expr:name='&quot; label-yourlabelname&quot; + data:label.name' />

</b:loop>

6. Click Save Theme

The above code adds a unique class name with a reference .label-yourlabelname for you to custom set with styles in the CSS

It works best with single words and phrases but not long phrases

7. Now add the next part in the CSS

.label-yourlabelname {

  background-color: red;

  color: white;

}

8. Now save the Theme
9. Now add the next line to a new widget in the Layout section

<b:'class cond='data:view.search.label == "yourlabelname" name=' label-yourlabelname' />

Example in Use

Submit an Article Form Widget (Widgets) (Codes)

Blogger Widget by Warren Woodhouse

Useful for imitating the Submit Content form on Tumblr, minus the ability to upload files in the form. The form is built using Blogger API and includes an additional section for adding categories/labels/tags.

CLICK HERE to see the code for the widget.