Create Tutorial using the Knowledge Base Popup Tutorial Template

This article is no longer maintained, so its content might be out of date.

This slide deck is built in Webmaker Thimble, essentially a what-you-see-is-what-you-get editor that will also host your make. To begin you need a Webmaker account.

  1. Click here to make an account if you do not have one already.
  2. Once you have an account copy and paste this make https://binab.makes.org/thimble/knowledge-base-take-8 in a new browser window.
  3. Click the Remix button to create your own make.

You should now have a window with a text editor full of code on the left and the slides on the right.

Thimble Window

There are different types of slides each individual slide is marked with <--! and a note about what kind of slide it is.

  • Image Slide w/ text - has a main image, text can be above or below
  • Large Font - All caps, large font
  • Video/iFrame - Insert a video or iFrame, 370 by 208 pixels is a nice size.
  • Text Slide - Small text you can use strong tags to create small headers
  • Text with Header Slide - Use h2 tags to create al caps headers.
  • List Slides - Numbered (ol) and bullet lists (ul)

Cut and paste and edit each slide to fit your criteria.

Images: You will need a public folder or source for any images you want to display. I chose DropBox you can use any source, flicker etc.

Once your slide deck is complete you will move onto inserting it into the button code and then you can put your button anywhere!

In the upper right corner of yout Thimble is a "Publish" button. Click that and follow the instructions to save your make. At the end you will be given a link to copy. Copy the link.

With that link on your clipboard then open this Thimble make for the button https://binab.makes.org/thimble/button Paste your link over the exisitng one on line 16. You should be able to click the new button in the WYSIWYG window on the right.

Change the name of the button to your desired text on line 16 by editing "Become a Tech Writing Ninja".

You can now select the code between lines 9 and 42 and paste them wherever you would like your button to appear.

Thanks!

These fine people helped write this article:

Illustration of hands

Volunteer

Grow and share your expertise with others. Answer questions and improve our knowledge base.

Learn More