TpT School: HTML Dingbats

This is a follow on tutorial / tips post from the Note to Followers, and Product Description tutorials. This week I'll provide you with all the HTML codes you will need to vamp your product descriptions and Note to Followers, as well as a Dingbat visual cheat sheet.



When looking around and shopping on TPT, you may have come across little icons in other sellers custom categories, product descriptions, and / or note to followers. These are called HTML Dingbats.

I've read about how these dingbats may or may not affect your custom categories, and can sometimes cause your products to 'untag' from the categories after adding dingbats, so I won't be going over how to add these as I haven't tried it since reading bad experiences from previous sellers that have used dingbats in their custom categories. If you use them and see no problem, please let me know below and I can trial it out so I can add to this post.

Adding dingbats to your product description and note to followers, surprisingly, requires different approaches.

The differences

- for dingbats to appear in your Notes to Followers, you need to use the codes found in the word document that I've included in the download below. You can copy the codes into a draft WordPress post, using the ‘HTML’ mode, then switching to ‘VISUAL’ mode, and copying and pasting the dingbat to the Note to Followers editor - you can find a more in-depth tutorial regarding WordPress and Note to Followers here.

Example / Practice: when drafting a post in WordPress (or Blogger), switch to the HTML mode (WordPress - it is in the right corner, Blogger - you'll find it in the right corner).

Add the HTML code for the dingbat that you'd like to use - for this example, I have chosen a filled star, and the HTML code for this is:


After adding the code into the HTML section, switch to VISUAL mode and check the code has worked and that it's the correct dingbat:

- for dingbats to appear in your product descriptions, you need to use the codes found in the word doc in the download below by copying them straight into your product description text box.

You can check that they have worked by looking at your product after submitting.

I have tested all of the HTML codes found in the attached word document in product descriptions, and in the Note to Followers, so I know they all work in both - you're welcome! ;)

Also, I've created a painstaking dingbat cheat sheet that shows you the dingbat and the code, so you can use this as a reference, available in the download below as a PDF. (This involved adding the code to WordPress in HTML, screenshotting, cropping, changing to VISUAL mode, screenshotting, cropping, lining up to the correct code... at least it took my mind of buying more clipart or stationery (for an hour or two... :P).

Here's a little preview of the dingbat cheat sheet (page 1):



Enjoy adding dingbats! Here is the link to the tutorial download in my TPT store (also includes MS Word document of all the codes so you can copy and paste, and a PDF cheat sheet):



2 comments

  1. Thanks for these tips! I love how you use "dingbats" instead of dummies! Your blog is looking good, too! We have the same Sophie template, but our blogs look totally unique!

    ReplyDelete
  2. Once you've created a hyperlink, when someone clicks on the linked text or picture, they will be taken to the webpage you've entered as the destination.Global Programming Forums

    ReplyDelete

Back to Top