How to Make a Tumblr Design Tutorial

To make an original design for your Tumblr blog, customize one of the site's many existing themes. This process involves and builds two major skills. One is that of Web design, and the other is knowledge of the HTML and CSS codes needed to create your design. Key parts of the first skill, design, is knowing what you want to communicate with your design, and knowing what visual elements can produce that communication. To learn what HTML and CSS codes can render these elements, read the page's existing codes, then begin making small changes to them.

Instructions

1. Type your username and password on Tumblr's home page to log into your account. Click the gear icon in the upper right corner of the screen to move to the Preferences page. Click the "Customize" button to move to a screen that lets you change your blog's theme.

2. Click the "Themes" button in the left pane. Tumblr will display a list of categories whose names characterize theme designs. Click the "Free themes" item to display a list a list of themes you don't have to pay to use and customize.

3. Click a theme's thumbnail icon to load a preview of the theme in the right pane, then click the "Use" button in the left pane to apply the theme to your blog. Click under the "Description" heading in the left pane to enter the text box for adding a description to your blog posts. Type the description, then click the left panes save button to update the preview window in the right pane with your revised description.

4. Click one of the color swatches under the Appearance heading to display a color selection pop-up box. Click a color from the box, then click the box's "X" icon to close the box and install the new color in the preview window.

5. Click the button labeled "Edit HTML" in the left pane to display the page's HTML statements, which let you make detailed customizations to the page. Click one of the numeric or string values in the right column under the "H1" heading. For example, click the value to the right of the "font-family" label. This value may be "Helvetica," "Times New Roman," "Arial," or another font name.

6. Type a new CSS value to replace the one you clicked. For the "font-family" example, you could type the name of a different font, such as "Verdana," or "Symbol." Click the "Update preview" button in the left pane to make the preview pane show your changes.

7. Click the left pane's "Appearance" button to end your editing session and commit to your design changes.

References

• W3 Schools: CSS Font Family
• Tumblr: Creating a custom HTML theme