Download Wiley Tackling Tumblr: Web Publishing Made Simple

NUMERICS
CSS code for, 214
e-mailing, 154
HTML code for, 200
101 theme, 79–80
1000 Suns theme, 74
AL
Index
A record, 31–32
About page, 139
accent font, theme, 64
Account menu, 25
account setup, 20–27
administrator, site, 99
{AlbumArtURL}, 224
{Alt}, 223
alt class, 200
Amazon Wish List, widgets from, 151
Android Tumblr app, 151, 152
animated GIFs, 101
anonymous visitors, allowing for Ask, 95–96
{Answer}, 226
Appearance tab, theme options, 63
apps for mobile devices, 151
Arment, Marco (Tumblr founder), 8
artist portfolio, 140
artistic work, 10–11
arts and illustration meme, 101
Ask feature
adding to theme code, 183–184
comments compared to, 122–123
CSS code for, 214–215
for family sites, 141
HTML code for, 201–202
options for, 95–98
{Asker}, 226
{AskerPortraitURL-24}, 226
Atonement theme, 74
audio files, 13, 57
Audio post
album art in, 65
calling in, 154–155
creating, 56–57
B
TE
D
MA
b HTML tag, 173
Backburner theme, 84
background color, theme, 64
background image, theme, 65, 191
bacon meme, 101
Blackberry Tumblr app, 151
{block:AlbumArt}, 224
{block:Answer}, 219–220, 226–227
{block:Audio}, 219, 224–225
{block:Caption}, 224
{block:Chat}, 219, 223–224
{block:Date}, 220
{block:Description}, 222, 228
{block:ExternalAudio}, 224
{block:HasPages}, 228
{block:IfDisqusShortname}, 237,
240–241
{block:IfHeaderImage}, 173
{block:IfNotHeaderImage}, 173
{block:IndexPage}, 185–186
{block:Label}, 223
{block:Lines}, 223
{block:Link}, 219, 222–223
{block:Navigation}, 227
{block:NoteCount}, 220, 233
{block:Pages}, 228
{block:Pagination}, 176–177
{block:PermalinkPage}, 186, 237
{block:Photo}, 218–219, 221
{block:PostNotes}, 232–233
{block:Posts}, 182, 218
{block:Quote}, 219, 221–222
blocks, Tumblr tag type, 164, 166
GH
RI
PY
CO
TE
A
RI
{AudioPlayerWhite}, 224
avatar, 21, 216, 226
252
T A C K L I N G T U M B L R {block:Source}, 221
{block:Text}, 217–218, 220
{block:Title}, 220
{block:TrackName}, 224
{block:Video}, 219, 225–226
Blogger.com, 15, 16, 117
blogs
creating multiple, 27–30
identifying selected, 29
overview, 6, 10
{Body}, 220
body font, theme, 64
bookmarklet, 152–153
brand or product website, 11–12
branding, domain name as tumblog name, 31
C
caller ID for calling in posts, 155
calling in audio posts, 154–155
{Caption}, 224
Carbon theme, 84
Carte Blanche theme, 85
Cascading Style Sheet. See CSS
Chat post
creating, 55–56
CSS code for, 213–214
e-mailing, 154
HTML code for, 199–200
Tumblr tag for, 219, 223–224
Chunky theme, 72, 73
click-through link, setting for Photo post, 52
coComment, 125
Coda text editor, 162, 163
code files for themes. See themes
code snippets (widgets), 144–151
color and typography, your original theme,
206–208
{color:Background}, 217, 229–230
commenting the code, 163, 249
comments. See also Disqus
Ask feature compared to, 122–123
Facebook, 125
hosted comment solutions, 124–134
pros and cons of, 123–124
replies, 134–135
company website on Tumblr, 12–13
conditional Tumblr tags, 167, 173, 237, 240–241
contact page, 139
content of Tumblr pages, coding for, 172, 197,
217–227
content source field for posts, 36
Creative Commons license for images, 53
CSS (Cascading Style Sheet)
best practice tips, 249
custom CSS capability, 181, 242–243
designing your original theme
color and typography, 206–208
positioning, 205
post type icons, 210–211
post type styles, 211–215
reset, 206
spacing, 208–210
style tag, 204
Disqus, 183, 238–242
editing theme code, 180–181
li notes, 235
navigation links, 209–210
ol notes, 235
overwriting limits, 172
resources for building, 163,
249–250
in Tumblr theme code, 170–171
custom CSS capability, 181, 242–243
custom domain name setup, 31–32
custom HTML for theme, 70–71, 132–134,
148–150
Custom Layout page type, 143
custom post URLs, 37
{CustomCSS}, 171
D
Daring Fireball, 26
Dashboard, 24, 26
date, setting for posts, 36
declaration, HTML document, 168
DEFAULT VARIABLES in theme, analyzing, 169
deleting account button, 26
Del.icio.us, importing to Tumblr, 116
{Description}, 185, 222, 228
DIGG, importing to Tumblr, 117
INDEX
Disqus
adding to theme, 132–134, 181–183, 236–242
enabling, 130–132
getting started, 126–130
overview, 125
website, 125
div tags
avoiding overuse, 248
as navigation guides to code hierarchy, 173
div.audio-content CSS tag, 214
div#content, 197
div#disqus_thread, 183
div#disqus_thread, 239
div#footer-wrap, 196
div#header, 173
div#header-wrap, 196
div.meta, 179
div.postmeta, 198–199
div#sidebar, 202, 228
div#title, 172–173
domain name, using your own, 30–32
Doodling in Class theme, 74, 75
Dropbox, 244
Drupal, 17
dummy site for testing theme changes, 160, 163
E
Echo, 125
Effector Theme, 76, 77, 78
e-mail
Preferences settings, 25
sending posts via, 153–154
subscribing to Tumblr feed via, 113
Email notifications preferences settings, 26
embedded video, 13, 58–59
embedding Tumblr site on website, 140
Esquire theme, 78
even class, 214
Explore page, 7, 100
{ExternalAudioURL}, 224
F
Facebook, 106–109, 125, 128, 145–150, 173–181
family site, 140
{Favicon}, 216
feed of content to/from Tumblr, 92, 106,
111–116
FeedBurner, 111–115
Flickr, widgets from, 150
Fluid 2 theme, 85
following/followers, 23, 90–92
fonts, 64, 207–208
footer, HTML code for, 203
for.screen theme, 79
free themes (websites), 64, 72–80
f***yeah sites, 100–101
G
GIF file format, 192
The Gimp, 195
github.com, 244
Glacial Simplicity theme, 76
Google FeedBurner, 111–115
Google Friend Connect, widgets from, 151
Google Reader, 106
Google Talk, widgets from, 150
graphic elements in theme, 167–168, 191–193.
See also images
group notebook, 141
Gruber, John (writer), 26
H
Habari, 17
harassment from comments, 124
head section, 168, 185, 216–217
header image, theme, 64, 173
heading tags, 186, 248
Hedengren, Thord (author)
Smashing WordPress: Beyond the Blog, 17
Smashing WordPress Themes: Making
WordPress Beautiful, 17
Help page, 25
hosted website solutions, 14–17
HTML code. See also themes
custom HTML for theme, 70–71, 132–134,
148–150
declaration, 168
learning sources, 163, 249–250
structure for your original theme
footer, 203
main structure, 195–197
navigation links, 202
posts, 197–202
sidebar column, 202–203, 227–229
253
254
T A C K L I N G T U M B L R HTML code (continued)
using your own editor, 26, 162, 163, 164
validating, 187, 248
L
I
language preferences settings, 26
Last.fm, widgets from, 150
li notes, 235
licensing of images, 53
“liking” other tumblogs, 7, 92–93
{Line}, 223
line class, 214
Link post
creating, 54–55
e-mailing, 153
HTML code for, 198–199
Tumblr tags, 219, 222–223
{LinkCloseTag}, 221
LinkedIn, widgets from, 150
LinkedWithin, widgets from, 151
{LinkOpenTag}, 221
links
navigation, 202, 209–210, 227
setting up for pages, 143
LiveJournal, 15–16, 117
local team site, 141
Log out link, 25
Look up feature, 23
icons, 210–211, 230
IDs compared to classes, use of, 249
iframe code snippet, 147
{image:Background}, 191
{image:Header}, 173
{image:Logo}, 191
images
background, 65, 191
editing, 44
graphic elements in theme, 167–168, 191–
193
header, 64, 173
hosting options, 191–192
portrait photo (avatar), 21, 216, 226
in posts, 42–44, 49–53
in themes, 64–65, 191–192, 245, 249
uploading, 165
importing other content to Tumblr, 115–117
Info tab, 22
Inkhorn theme, 74
inline styles, avoiding, 248
IntenseDebate, 125
International considerations for calling in posts,
154
Internet Explorer, HTML tags for, 171
Internet meme, 100
IP address for pointing custom domain names,
31, 32
iPhone Tumblr app, 151, 152
iPod Touch Tumblr app, 151
J
JavaScript (XFBML) code snippet, 147
JavaScript libraries, best practice tips, 249
journaling, 10
JPG (JPEG) file format, 192
jump pagination, 65
K
Karp, Scott (Tumblr founder), 8
{Label}, 223
{lang:Download}, 224
{lang:Search}, 228
M
MagTheme theme, 85, 86
Manuscript Neue theme, 174–181
Markdown markup language, 26
marketing, using Tumblr for, 139–140
Mars theme, 84
Meebo, widgets from, 150
Melody, 17
menus, unordered lists for creating, 248
Messages, Ask questions in, 96
meta tags, adding to, 185
Meyer, Eric (web designer), 206
microblogging, 6
mobile devices, apps for, 151–152
moderators, comment, Disqus, 129
Mojo Themes, 245
Movable Type, 17
MP3 audio files, 57
INDEX
multiple blogs, 27–30
My Corner theme, 82, 83
N
{Name}, 219, 222–223
name=” “ part of HTML tag, 169
Nautical theme, 86
navigation links, code for, 202, 209–210, 227
networking. See social networking
news site, 14, 141
no comments, implications of, 124
{NoteCount}, 220, 233
{NoteCountWithLabel}, 233
notes, adding to theme, 231–236
The Noun Project, 195
Nova theme, 84
NSFW (Not Safe For Work), 101–102
O
Obox, 245
odd class, 214
oEmbed, 58
ol notes, 235
101 theme, 79–80
1000 Suns theme, 74
Organ theme, 76, 77
P
pages, working with, 138–144, 185–186, 228
Panda Classics Recycled theme, 74
Papercut theme, 76
password, 25
personal site, 140
Photo post
creating, 49–53
e-mailing, 153
HTML code for, 197–198
Tumblr tag for, 218–219, 221
{PhotoAlt}, 221
photos. See images
Photoshop, 195
{PhotoURL-500}, 221
Pink touch 2 theme, 68–69, 78
Pixelmator, 195
plain text/HTML editor, 26, 162, 163, 164
PNG file format, 192, 193
podcasts, 13, 113
pornography, 102
portrait photo (avatar), 21, 216, 226
post class, 197, 208
Postage theme, 74
Posterous, 17
postmeta section, Disqus comment count,
240–241
postmeta-like, 209
postmeta-time, 209
{PostNotes}, 232–234
posts
Audio. See Audio post
Chat. See Chat post
comments for, 122–135
CSS code for, 210–215
custom URLs, 37
date setting for, 36
editing preferences, 26
e-mailing, 153–154
HTML code for, 197–202
images in, 42–44, 49–53
liking, 7, 92–93
Link, 54–55, 153, 198–199, 219, 222–223
Photo, 49–53, 153, 197–198, 218–219, 221
Quote. See Quote post
reblogging, 7, 94–95, 122, 234
settings for, 35–38
Text. See Text post
Tumblr tags, 182, 218
types of, 9, 34
Video, 58–60, 200–201, 219, 225–226
writing text in, 38–48
{PostSummary}, 185
{PostTitle}, 185
Preferences, 25–27
premium themes (websites), 64, 80–86
Preview button for theme, 70
private option for posts, 36
publish now option for posts, 35
publish on option for posts, 35
Q
{Question}, 226
queue option for posts, 35, 37–38
{Quote}, 221
255
256
T A C K L I N G T U M B L R Quote post
creating, 53–54
CSS code for, 213
e-mailing, 154
HTML code for, 198
Tumblr tags, 219, 221–222
R
Rank & File theme, 81–82
read more option for post, 41–42
reblog class, 234
reblogging, 7, 94–95, 122, 234
Redirect page type, 143
Redux theme, 63, 168
registrar, domain name, 30, 31
replies to comments, 134–135
Reply feature, 47, 122, 123, 134
rich text editor, 26
Royal Cameleon theme, 78
Royal Ribbon theme, 74
RSS (Really Simple Syndication) feed, 92, 106,
112, 116
Rubber Cement theme, 74, 75
S
save as draft option for posts, 35
Scaffold theme, 84
scheduled posts compared to queue feature,
37–38
screenshots of theme ideas, taking, 168
{SearchQuery}, 228
selling your theme, 245–246
SEO (search engine optimization)
enhancements, 184–187
ShareThis, widgets from, 150
Show Album Art on Audio Posts, themes, 65
Show People I Follow option, themes, 65
Show Tags option, themes, 65
sidebar column, 202–203, 227–229
signature, e-mail, removing, 154
signing up for new account, 20
Silo theme, 79
Simplefolio theme, 81
sitemap, 187
Skype, widgets from, 150
small business pages, 138–139
Smashing WordPress: Beyond the Blog
(Hedengren), 17
Smashing WordPress Themes: Making WordPress
Beautiful (Hedengren), 17
Smushit, 193
Snap Photo button, 50–51
social networking
animated GIFs, 101
arts, illustration, and photography, 101
Ask. See Ask feature
bacon orientation, 101
Facebook, 106–109, 125, 128, 145–150,
173–181
following/followers, 23, 90–92
f***yeah sites, 100–101
liking posts, 7, 92–93
members, 98–99
NSFW, 101–102
overview, 7
reblogging posts, 7, 94–95, 122, 234
trends for Tumblr, 99–100
Tumblr community, 15, 90
Twitter, 110–111, 117, 128, 150
Solaris theme, 81
Sonic theme, 82, 83
{Source}, 221
SourceForge, 244
Southern Afternoon theme, 82
spam from comments, 124
span.postmeta-disqus, 241
staff blog, Tumblr, 24
staff page, 139
Standard layout page type, 143
Stationary theme, 76
Strict theme, 72, 73
style type, 170–171
subdomain in Tumblr domain names, 30
T
{Tag}, 185
tags. See also individual tag names
adding Tumblr tags to theme, 165–167
e-mail posts, 154
HTML. See HTML code
in posts, 36–37, 46
theme settings, 65
INDEX
Tumblr. See Tumblr tags
usefulness in group sites, 141
{Target}, 222
text class, 197
Text post
e-mailing, 153
example, 40–48
formatting, 39–40
introduction, 38–39
Tumblr tags, 217–218, 220
text:Disqus shortname, 236–237
{text:Disqus shortname}, 237–238
Theme Garden, 67–68, 167, 243–244
ThemeForest, 245
themes
creating original
code structure, 195–204
CSS design, 204–216
custom CSS capability, 181, 242–243
Disqus support, 236–242
getting started, 190–191
graphic elements, 191–193
hosting outside of Theme Garden, 244–245
notes, adding, 231–236
rendering the results, 229–231
selling your theme, 245–246
sketch and mockup, 194–195
Theme Garden submission, 243–244
tips, 248–250
Tumblr tags, adding, 216–229
customizing, 66–71
defined, 62
Disqus support from, 131
documentation, 167
editing
Ask box, adding, 183–184
code file properties, 163–165
commenting the code, 163
Disqus, adding, 181–183
dummy site for testing, 160, 163
environment for, 160–162
local copy, 163
navigating the code, 168–173
practice exercises, 173–181
previewing, 161, 162
selecting theme for, 167–168
SEO enhancements, 184–187
tags, 165–167
using your own editor, 26, 162, 163, 164
free compared to premium, 71
options, 62–65
post types, relationship to, 34
selection of, 72–86
{TimeAgo}, 220
title
blog, 21, 64
post, 172–173, 185, 220
title, 185
{TrackName}, 224
transparency, image, 192, 193
Tumbledesk theme, 72
Tumblr. See also specific topics
applications of, 9–14
bookmarklet, 152
competitors for, 14–17
component overview, 6–8
history, 8–9
introduction, 1–2
mobile apps for, 151–152
Preferences, 25–27
Tumblr Directory, 90, 91
Tumblr tags
conditional, 167, 173, 237, 240–241
content, 217–227
head section, 216–217
navigation links, 227
sidebar, 227–229
types of, 164–166
website, 165
Tumbltape, widgets from, 150
Twitter, 110–111, 117, 128, 150
U
{URL}, 222
URL slugs for post names, 187
URLs
custom post names, 37
tumblr subdomain system, 20
usage ticker for Tumblr, 8
257
258
T A C K L I N G T U M B L R V
validating HTML code, 187, 248
variables, Tumblr tag type, 164
Vertigo theme, 78
video, embedded, 13, 58–59
Video post
creating, 58–60
HTML code for, 200–201
Tumblr tags, 219, 225–226
Vimeo, 13, 58, 117
viral impact of content on Tumblr, 140
marketing, 139–140
moving existing site to Tumblr, 118
news site, 141
pages, working with, 138–144, 185–186, 228
personal site, 140
widgets, 144–151
widgets, 144–151
with_commentary class, 234
without_commentary class, 234
WordPress.com, 14–15, 117, 144
WordPress.org, 17
W
X
web browsers
inspecting code elements, 175
testing original themes in, 249
webcam photo, 50
website, using Tumblr for
artist portfolio, 140
family site, 140
group notebook, 141
local team site, 141
XFBML (JavaScript) code snippet, 147
Y
YouTube, 13, 58, 117
Z
Zurich theme, 85