IntroductionWelcome| 00:04 | Hi! I'm Justin Seeley, and I want to
welcome you to Up and Running with Tumblr.
| | 00:08 | In this course, we'll look at the
basics of using tumblr.com to quickly and
| | 00:12 | easily share your content across the Web.
| | 00:14 | I'll start off by showing you how to
register for, and set up your Tumblr account.
| | 00:19 | This includes filling out your profile, naming
your blog, and setting up some key preferences.
| | 00:25 | Next we'll dive into the Tumblr blocks,
so that you're familiar with all of the
| | 00:29 | different types of content
that Tumblr has to offer.
| | 00:31 | We'll see how to create and work with
pages inside of Tumblr as well, and I'll
| | 00:34 | even show you how to create
your own page templates on the fly.
| | 00:37 | We'll be covering all of these features,
plus plenty of other tips and tricks to
| | 00:42 | help get you up and running
with Tumblr as quickly as possible.
| | 00:45 | Now let's get started.
| | Collapse this transcript |
| Using the exercise files| 00:00 | If you're a premium member of Lynda.
com's Online Training Library, or if you're
| | 00:03 | watching this tutorial on a DVD, you'll
have access to the exercise files used
| | 00:07 | throughout this title.
| | 00:08 | I've included the exercise files
inside of a folder marked Assets.
| | 00:12 | Here you'll find all of the audio, photos,
and videos that I use throughout the course.
| | 00:17 | We'll use these for creating various
posts inside of Tumblr, as well as creating
| | 00:20 | a dynamic slideshow as well.
| | 00:22 | If you're a monthly member, or annual
member of Lynda.com, you don't have access
| | 00:26 | to the exercise files, but you can
follow along with me from scratch with your
| | 00:29 | own set of exercise files.
| | 00:31 | Now let's go ahead and get started.
| | Collapse this transcript |
| What is Tumblr?| 00:00 | Before we get going with Tumblr, you
may want to know exactly what Tumblr is,
| | 00:04 | what it does, and why you would want to use it.
| | 00:07 | In this movie, we'll be exploring tumblr.
com, and exactly how it can help you get
| | 00:11 | yourself on the Web quickly and easily.
| | 00:13 | When you access tumblr.com for the first time,
you'll be brought here to the home screen.
| | 00:17 | On the home screen, you're able to sign up
for a new account, or explore a little bit.
| | 00:21 | Let's take a moment to explore.
| | 00:23 | Here towards the bottom, you'll see
something that's called 30 reasons
| | 00:25 | you'll love Tumblr.
| | 00:26 | By clicking this, the Web site shifts,
and allows you to see various parts and
| | 00:30 | pieces of tumblr.com that
make it a unique experience.
| | 00:34 | First of all, Tumblr does come with
themes, so much like other CMS systems, like
| | 00:38 | WordPress, or Drupal, you can instantly
change the look and feel of your Tumblr
| | 00:42 | site by adding a new theme.
| | 00:44 | Tumblr also allows you to post on the go with
their mobile apps for tablets and smartphones.
| | 00:48 | This is pretty cool, because Tumblr acts
almost like a real-time log of your life;
| | 00:53 | you can post anything to Tumblr,
from text, quotes, images, videos, URLs;
| | 00:58 | anything you see in life that you think
is cool, you can post it to Tumblr, and
| | 01:02 | Tumblr logs it for you.
| | 01:03 | That's the cool part about it.
| | 01:05 | It's also a great way to get
yourself online as quick as possible, and
| | 01:08 | start producing content.
| | 01:10 | It might not be Pulitzer Prize
winning material, like you'd post to a WordPress
| | 01:13 | blog, but Tumblr is fun, it's social,
and it's not meant to be a full-blown CMS.
| | 01:19 | You'll also notice, towards the bottom here,
that you can create things like Photosets.
| | 01:23 | Photosets allow you to create
almost like a pseudo-gallery type thing
| | 01:26 | here inside of Tumblr.
| | 01:27 | I'll explore the Photoset feature in a
future movie, but just know, this is a
| | 01:31 | great way to showcase photography,
design work, or anything else that you might
| | 01:34 | be wanting to showcase.
| | 01:35 | You can also see that they've included
stuff like Bookmarklets, Google optimized
| | 01:40 | pages, analytics, and of course,
the ever popular automatic tweet.
| | 01:44 | So now that we have a better
understanding of exactly what tumblr.com is, and
| | 01:49 | what it does for us here on the Web,
we're ready to start taking a look at who
| | 01:52 | is using it, and some of the creative
ways that they're making Tumblr integrate
| | 01:56 | with their online presences.
| | Collapse this transcript |
| Who uses Tumblr?| 00:00 | Tumblr is definitely the new kid on the
block, but it's slowly becoming one of
| | 00:04 | the fastest growing online platforms
available today, and several big names are
| | 00:09 | using Tumblr, and several really
creative folks are using Tumblr in some
| | 00:12 | awesome ways as well.
| | 00:14 | Let's take a look, in this movie, at
some of the cool sites that are being
| | 00:17 | built on Tumblr today.
| | 00:18 | The first that we're going
to look at is Sesame Street.
| | 00:21 | It's one of my favorite shows growing up as a
kid, and they actually have a Tumblr account.
| | 00:25 | Sesame Street uses this platform to
deliver short concise messages, videos, and
| | 00:30 | pictures to their audiences.
| | 00:32 | This is a great way, so that they avoid
having to do the traditional blog post,
| | 00:36 | and all that kind of stuff.
| | 00:37 | This is more of just a really short and
simple way to get content out to people.
| | 00:42 | As you can see here at the top,
they've got a video with a short description.
| | 00:45 | Nothing big going on here;
just really short, really simple.
| | 00:48 | They just wanted to show
the clip, and they did it.
| | 00:50 | The second one that we're going
to take a look at is foursquare.
| | 00:53 | This is probably one of the most popular
mobile applications that's ever hit the market.
| | 00:57 | Everyone that you know has checked in
somewhere on foursquare, and foursquare
| | 01:01 | actually uses Tumblr to power their blog.
| | 01:04 | Their official blog runs on the Tumblr software.
| | 01:07 | You'll notice in the address bar that
the URL is actually blog.foursquare.com,
| | 01:12 | indicating that it might
not be hosted at Tumblr.
| | 01:14 | Basically, they're using the custom
domain feature of Tumblr to cloak their
| | 01:18 | original Tumblr URL.
| | 01:19 | I'll show you how to do this
yourself in a future movie.
| | 01:22 | As you can see, foursquare has put
in a lot of effort here to create an
| | 01:25 | interesting look by
creating a custom Tumblr theme.
| | 01:29 | You're able to do the exact same
thing, with a little HTML and CSS magic.
| | 01:34 | foursquare uses this as their main news
platform to tell users what's going on
| | 01:38 | with the service, or any new
promotions that they might be using.
| | 01:42 | The final blog that we'll take a
look at is the Twitter status blog.
| | 01:45 | This is where people come to see
exactly why they're seeing the fail whale.
| | 01:50 | On the status.twitter.com blog, you're
able to see everything there is to know
| | 01:54 | about the current status of Twitter;
whether or not it's been up, whether or not
| | 01:57 | it's been down, what
they've done to fix it, and so on.
| | 02:00 | Twitter uses this just as a way to
get short, concise messages out to their
| | 02:04 | users to let them know exactly
what's going on with the service. It's not
| | 02:08 | necessarily content to be consumed,
like videos, or photos, but it is pertinent
| | 02:12 | information for people who make use of
this tool; social media strategists,
| | 02:16 | and all that kind of stuff.
| | 02:18 | This is a great use for Tumblr.
| | 02:20 | There are a ton of other people
that are using Tumblr as well;
| | 02:22 | everything from photographers, to
designers, to videographers, anybody wanting to
| | 02:27 | showcase short pieces of content that
are easily distributed via mobile, your
| | 02:32 | computer, or wherever it might be
that you're delivering the content from.
| | 02:36 | Tumblr is a great way to get out these
short chunks of content to your audience,
| | 02:39 | without the hassle of having to
learn a complicated CMS system.
| | 02:42 | Now that we've seen some of the
creative ways that other people are using
| | 02:45 | Tumblr, let's see how we can
use Tumblr to benefit ourselves.
| | 02:49 | In the next movie, we'll explore how to
sign up for a new account here on Tumblr,
| | 02:52 | and get started posting things right away.
| | Collapse this transcript |
| Creating a Tumblr account| 00:00 | Now we're ready to actually start using
Tumblr by creating our Tumblr account.
| | 00:04 | Creating a Tumblr account is super easy;
| | 00:07 | when you log on to tumblr.com,
you're going to three field:
| | 00:11 | an Email address, a Password field,
and a URL, the first of which, you just
| | 00:15 | enter in your e-mail address.
| | 00:22 | Once you have your e-mail address
entered, go ahead and type out a password.
| | 00:25 | It's a good idea to type out
something that's relatively secure, unlike the
| | 00:28 | short, easy one that I've typed out here.
| | 00:30 | Once you've typed out your password,
it's time to determine your Tumblr URL.
| | 00:35 | This is pretty important, because if
you're going to be using the Tumblr system,
| | 00:39 | and not your own custom domain, this
is going to be where people access your
| | 00:43 | Web page from here on out,
| | 00:44 | so you want to be really careful
with exactly what you type here.
| | 00:47 | In this case, I'm just going to type out
my last name, and my first initial, just
| | 00:52 | to make it easy, so seeleyj.tumblr.com.
| | 00:55 | Once I have that done, I'll click Start posting.
| | 00:58 | If everything checks out in all these fields,
Tumblr will allow me to create my account.
| | 01:03 | If somebody already has registered my
Tumblr URL, then it will warn me somebody
| | 01:07 | has already taken that, and it will
actually ask me to reenter a new Tumblr URL.
| | 01:12 | If I click Start posting now, it's
automatically going to take me to the
| | 01:16 | Register screen, where I have to
type out the caption information.
| | 01:19 | Then you have to click, I'm human.
| | 01:22 | Once you've done that, you're
going to notice that you're logged in
| | 01:25 | automatically to the Tumblr dashboard,
which means you're on Tumblr; you're online.
| | 01:29 | That's how quick and how easy it is
to sign up for an account here.
| | 01:33 | So remember, go to tumblr.com, type out
your e-mail address, determine a password,
| | 01:39 | and then pick your Tumblr
URL: something.tumblr.com.
| | 01:42 | Once you fill out that information,
and prove that you're human, you're
| | 01:45 | online, and ready to go.
| | Collapse this transcript |
|
|
1. Getting to Know TumblrTouring the Tumblr interface| 00:00 | Now that you've created your account
on tumblr.com, it's time to explore the
| | 00:04 | Tumblr interface, and get used to everything.
| | 00:07 | After all, it's a new service, so we need to
know exactly what's going on inside of here.
| | 00:11 | You'll notice across the top that you have
several different links, the first of
| | 00:14 | which is on the left;
| | 00:15 | it's the Tumblr logo.
| | 00:16 | That takes you automatically back to tumblr.com.
| | 00:19 | You'll notice when I hover over it, down
in the bottom left corner of my screen,
| | 00:22 | it actually says that it
takes me back to the Dashboard.
| | 00:24 | So any time you get somewhere, and
you don't know how to get back to the
| | 00:27 | Dashboard, just click the Tumblr
link, and it'll take you right back here.
| | 00:30 | You can also utilize the Dashboard link,
right here on the right-hand side; that
| | 00:34 | will take you back here as well.
| | 00:36 | Here on the right, you'll notice
that I have something called Untitled.
| | 00:39 | This is because I haven't given the
title to my blog yet, therefore it just
| | 00:43 | references Untitled.
| | 00:44 | Once I title my blog, it'll say my
blog name right there, and it will allow me
| | 00:48 | to take myself back to
my blog at any given time.
| | 00:50 | There is also a link to the Help
section right here, and then finally, a Log
| | 00:54 | Out button, which is like a little power icon;
that will log you out of the Tumblr system.
| | 00:59 | On the left-hand side, you're
going to notice a generic picture.
| | 01:01 | This picture will remain generic until
you've uploaded an avatar, which I'll show
| | 01:05 | you how to do momentarily.
| | 01:07 | Directly underneath the avatar, you'll
notice there's a link with a plus sign
| | 01:10 | that says Pick avatar.
| | 01:12 | If you click that, it automatically allows
you to upload an avatar to the Tumblr system.
| | 01:16 | The avatar is just like your profile
picture on any other network you've ever joined.
| | 01:21 | Here in the middle, you're going to
see links to Text, Photos, Quotes, Links,
| | 01:25 | Chats, Audio, and Video.
| | 01:27 | These are all of the different blocks
that are available to you inside of Tumblr.
| | 01:32 | We'll explore these
individually in a future movie.
| | 01:35 | At the bottom, you're going to
notice this sort of U.S. mail looking icon
| | 01:39 | down here at the bottom.
| | 01:40 | This is a welcome message, telling you
that there are four important things that
| | 01:44 | you need to do before you
get started with Tumblr.
| | 01:47 | It tells you to post a picture of yourself;
that's the avatar in the top-left corner.
| | 01:51 | Pick a theme, which just means what your
blog looks like, and then also determine
| | 01:55 | a title for your blog; that's the
untitled part that we talked about up here in
| | 01:59 | the top right corner.
| | 02:00 | It also tells you to
follow at least five people.
| | 02:03 | We're going to talk about understanding
followers a little bit later on in the
| | 02:07 | series, but for now, just know that
Tumblr acts almost like Facebook, and Twitter,
| | 02:11 | in the fact that you can
have friends and/or followers.
| | 02:14 | And then finally it says, Change your avatar.
| | 02:17 | The avatar is what you're
recognized as here in Tumblr.
| | 02:19 | There is a big difference between
posting a picture of yourself, and
| | 02:22 | changing your avatar;
| | 02:24 | we'll talk about both of those as we get going.
| | 02:26 | You'll notice as I hover over Change
our avatar, the Settings button highlights
| | 02:30 | on the right-hand side of my screen,
indicating that that's where I need to go
| | 02:33 | in order to do that.
| | 02:35 | We'll talk about that in another movie as well.
| | 02:37 | Finally, over here on the right-hand side,
you'll notice that I can open my blog
| | 02:41 | directly, and I can also
customize the appearance of my blog.
| | 02:45 | If you go into Customize appearance
section of your blog, you'll be brought
| | 02:48 | to a section where you can edit the HTML
and CSS, as well as edit various options
| | 02:52 | that are available to you,
depending on the theme that you pick.
| | 02:55 | You can also pick your
custom theme from here as well.
| | 02:57 | Alright; now that we're familiar with
Tumblr, and everything that's going on here
| | 03:01 | inside of the Dashboard, let's explore
this a little bit further, and show you
| | 03:05 | how to adjust all of the various
preferences, and set up your account.
| | Collapse this transcript |
| Setting up your profile and preferences| 00:00 | Now that we're familiar with the
Tumblr Dashboard, it's time to get down to
| | 00:03 | business, and start setting up our
Tumblr account, and our Tumblr blog.
| | 00:07 | The first thing I'm going to do is set up my
avatar here inside of the Tumblr Dashboard.
| | 00:11 | If you remember, if you go over to the
left-hand side, and choose Pick avatar,
| | 00:15 | that's automatically going to allow you
to get into your system, whether it
| | 00:19 | be Mac or PC, and find a photo of yourself.
| | 00:22 | In this case, I have a
headshot, and I'll just open that up.
| | 00:25 | It will automatically upload that for
me into the Tumblr system, and once it's
| | 00:29 | uploaded, it will appear there on
the left-hand side; pretty easy.
| | 00:32 | You'll notice when I hover over it,
it says Untitled. That's because I still
| | 00:35 | haven't set up the name of my blog.
| | 00:38 | So let's go down here.
| | 00:38 | You will notice in the Welcome to
Tumblr section, it tells me to either post a
| | 00:42 | picture of myself, pick a theme,
follow people, change my avatar;
| | 00:46 | well I've posted a picture
of myself, and changed my avatar,
| | 00:50 | so I'm good to go there.
| | 00:51 | But you'll notice when I hover over
some of these, it automatically highlights
| | 00:55 | the Settings button.
| | 00:56 | That indicates that's where I need to go next.
| | 00:57 | So let's go ahead and do that now.
| | 00:59 | Once I get into the Settings section,
you'll notice a lot of these options
| | 01:02 | correspond to the same options
that you saw on the other page.
| | 01:05 | For instance, I can upload a new portrait photo.
| | 01:08 | I can change my Tumblr URL.
| | 01:10 | So let's say, for instance, that you
didn't like the Tumblr URL you have.
| | 01:14 | You can change it from here.
| | 01:16 | Changing it, you'll have to update all
of your links that you've given to people
| | 01:19 | though, so you have to be very careful of that.
| | 01:21 | So if people know me as seeleyj.tumblr.com,
if I change that to something else,
| | 01:26 | people aren't going to
necessarily know the new address.
| | 01:29 | So this is a big deal.
| | 01:29 | That's why I suggest you
get it right on the first time.
| | 01:32 | You can also use a custom domain here on Tumblr.
| | 01:35 | Now if you're not sure what that means,
we're going to cover that in depth in a
| | 01:37 | future movie, so don't
worry about that right now.
| | 01:40 | Underneath here, you're going to see
several different options that you're able
| | 01:43 | to click and apply.
| | 01:44 | First of all is the Reply section.
| | 01:46 | Do you allow replies
from people that you follow?
| | 01:49 | That means, when you post something on
Tumblr, do you allow people to reply to it?
| | 01:53 | If you follow these people -- which we'll
discuss following in a future movie -- you
| | 01:57 | can allow them to post
replies to the things that you post.
| | 02:00 | You can also allow replies from people
following you for more than two weeks.
| | 02:05 | I think this is a really cool way of allowing
people to create a discussion here on Tumblr.
| | 02:10 | It also make sure that you have a
relationship with these people at the same time.
| | 02:13 | It doesn't just allow the public to
come in and just say, no, I don't like this,
| | 02:17 | or yes, I do like this.
| | 02:18 | It's from your inner circle of
people that you follow, or that follow you.
| | 02:22 | Ask; do you let people ask you questions?
| | 02:24 | We're going to go over questions in a
future movie, but basically this allows
| | 02:28 | people to post questions
to your Tumblr blog for you.
| | 02:31 | This is a great way --
| | 02:33 | let's say you're a tutorial person;
| | 02:34 | you're posting tutorials on Tumblr,
| | 02:36 | and somebody has a question about that tutorial.
| | 02:38 | Do you allow them to post a question
to you, and then you can answer it back?
| | 02:42 | That's totally up to you, but it's a
great way to generate conversation.
| | 02:45 | It's also a great social layer that's
added to the Tumblr system, and in today's
| | 02:49 | social world, that's very important.
| | 02:52 | Submissions; this is one that I don't
necessarily like, but I understand why it's there.
| | 02:57 | Submissions basically allow other
people to submit posts to your Tumblr blog.
| | 03:02 | If this is like a community project,
or something that you're aggregating
| | 03:05 | information into, I get why this is there.
| | 03:08 | But this is my Tumblr blog; why am I
going to let other people submit posts to it?
| | 03:12 | I don't really know, but if you wanted to,
you could allow others to submit posts.
| | 03:17 | Directly underneath here, you're going to
see two options for Facebook and Twitter.
| | 03:20 | I'm going to discuss both Facebook and
Twitter in their own specific movie, so
| | 03:25 | that we can understand the integration
between these two services, and Tumblr.
| | 03:28 | Towards the bottom, you're going
to see some pretty cool options.
| | 03:31 | Post by Email is one of my favorites.
| | 03:33 | You can actually send posts to
Tumblr directly from your e-mail address.
| | 03:38 | All you have to do is send a
message to this e-mail address.
| | 03:41 | Once you send an e-mail to this e-mail
address, you can post text, photos,
| | 03:45 | MP3s, videos; whatever it might be, it will
automatically be posted to your Tumblr blog.
| | 03:51 | Now, it should be noted that this
address will be different for each Tumblr
| | 03:54 | account, so everybody has
their own unique Tumblr URL here.
| | 03:58 | If you want more information about
how to post by e-mail, I would suggest
| | 04:01 | clicking on the Learn more link.
| | 04:02 | This will take you to a Help
document that allows you to view all of the
| | 04:06 | information about e-mail publishing.
| | 04:08 | RSS Feeds; these are options
pertaining to how your RSS Feed is digested by
| | 04:13 | various RSS readers.
| | 04:14 | For instance, if you want to truncate the
RSS feed, it explains exactly what this means.
| | 04:19 | This shortens the post in your RSS feed,
so that subscribers need to visit your
| | 04:24 | blog to read them in full.
| | 04:25 | Basically, this is like if you've ever
used an RSS reader, and you haven't been
| | 04:29 | able to view that full article that
you're trying to read; you actually had to
| | 04:32 | click through and go to the
Web site. That's what this controls.
| | 04:35 | It's a great way to make sure people
actually land on your page, and they're not
| | 04:39 | just getting it from other sources.
| | 04:41 | So I would recommend turning that on;
| | 04:42 | it's a great way to kind of
tease the content as well.
| | 04:45 | You can also redirect this
blog's RSS feed to a Feed Burner URL.
| | 04:50 | If you're not familiar
with Feed Burner, that's okay.
| | 04:52 | We're going to cover Feed Burner, and
Google Analytics, in a future movie.
| | 04:56 | Language; if you're using Tumblr in any
other language other than English, you
| | 05:00 | can determine that from right here.
| | 05:01 | So you see, you had the option
between English, German, French, Italian,
| | 05:05 | Japanese, Turkish, Russian,
Polish, and Portuguese.
| | 05:09 | So if you speak any of those languages,
or you'd like to start posting in those
| | 05:12 | languages, that's exactly where you change that.
| | 05:15 | Timezone; if you wish to change your
time zone in the Tumblr system so that it's
| | 05:19 | more accurate when you post
things, you can do that from here.
| | 05:23 | You have all the different
time zones, all across the world.
| | 05:26 | All you have to do is find the one
that corresponds to where you are, and then
| | 05:29 | change it; pretty simple.
| | 05:30 | So as of right now, I'm in Pacific Time,
| | 05:33 | so I'll go ahead and change that right now.
| | 05:35 | Once you've changed that,
you can continue working.
| | 05:38 | Directory; do you allow
search engines to index your blog?
| | 05:42 | If you enable this, that means Google,
Bing, and so forth will be able to find
| | 05:46 | you through a Web search.
| | 05:48 | You can also say whether or not your
particular Tumblr blog contains NSFW
| | 05:53 | content, or not safe for work content.
| | 05:55 | This explains to you that by checking
this box, you're telling Tumblr that your
| | 05:59 | site contains explicit material, or
other content that could be considered
| | 06:03 | inappropriate in a typical workplace.
| | 06:05 | So if you're posting things that might
not be appropriate for work, go ahead
| | 06:08 | and check that here.
| | 06:09 | This includes all of those college humor videos.
| | 06:12 | Finally, at the bottom, you have
the option to delete your account.
| | 06:15 | If you get into Tumblr, and you think it's
really not for you, you can just go ahead
| | 06:18 | and delete it right from
here. It's that simple.
| | 06:21 | If you've changed something inside of
these options, and you want to save that,
| | 06:24 | you can come right down here to the
bottom left, and click on the Save button, or
| | 06:28 | you can go to the right-hand
side, and click Cancel.
| | 06:30 | In this case, I'm happy with my options,
so I'm going to go ahead and click Save.
| | 06:34 | After I've clicked Save, all of
those options are then saved to my Tumblr
| | 06:38 | account, and I can continue working.
| | 06:40 | Once I'm back inside the Settings
section, it's time to finish up, and add a few
| | 06:44 | more things to my Tumblr account.
| | 06:45 | I'm going to go over here into
the Customize appearance section.
| | 06:50 | Once I get into the Customize
appearance section, I'm only worried about one
| | 06:54 | specific area for now.
| | 06:55 | We'll cover all of these options that
are in here in a future movie, but for
| | 06:59 | now, I want to go right over here to
the left-hand side, and check out the Title,
| | 07:03 | and the Description panel.
| | 07:05 | Inside of the Title section,
this is where I name my blog.
| | 07:09 | Right now it's called
Untitled, which is very generic.
| | 07:11 | Let's go ahead and change that to
something a little bit more fun.
| | 07:17 | Let's change this to Tumblin' With Justin.
| | 07:19 | Once you do that, you're going to
notice it updates in real-time right there.
| | 07:23 | The great part about Tumblr is most of
the themes showcase your blog title as
| | 07:27 | part of the logo element in the
top left-hand side of the screen.
| | 07:30 | They are stylized through Web fonts,
which means whatever you put in here is
| | 07:33 | automatically changed on the screen; no
need for images, which is really cool.
| | 07:37 | Once I'm done with that, I can click
Save, and now Tumblin' With Justin is
| | 07:42 | the title of my blog.
| | 07:44 | If I click the Close button, that's going
to take me back to the Tumblr dashboard,
| | 07:48 | and you'll notice, once I get back to the
Dashboard, that Tumblin' With Justin has
| | 07:52 | now replaced the Untitled section, and
if I click that and open it up, it takes
| | 07:57 | me directly to my Tumblr blog.
| | 07:59 | In this case, I haven't posted any
content, so it's still showing me the generic
| | 08:03 | Tumblr welcome message.
| | 08:05 | Once I start posting things, that will
all go away, and you'll see nothing but my
| | 08:08 | Tumblr content here inside this page.
| | 08:10 | Hopefully by now you have a better
understanding of how to set up your
| | 08:13 | Tumblr account here at tumblr.com,
and how to change the various options in
| | 08:17 | your blog to fit your needs.
| | 08:19 | Now that we've got everything set up,
we're ready to go forward, and start
| | 08:23 | looking at other ways that we can
customize, and get up and running with Tumblr.
| | Collapse this transcript |
| Learning the Tumblr blocks| 00:00 | As you start to use tumblr.com, you are
going to notice that there are several
| | 00:04 | different pieces that make up the
content that is delivered through the system.
| | 00:08 | These are known as the Tumblr blocks,
and there's actually quite a few of them
| | 00:12 | that are available to you.
| | 00:13 | In this movie, I will be exploring the
Tumblr blocks, and exactly what each one
| | 00:16 | of them is, and what it does here on Tumblr.
| | 00:19 | So for instance, here at the top, you
are going to notice that you have icons
| | 00:22 | with links to all of the different
blocks that you're able to create: Text,
| | 00:26 | Photos, Quotes, Links, Chats, Audio, and Video.
| | 00:31 | These are the basic blocks that
make up the Tumblr content gamut.
| | 00:36 | It's pretty easy to
start producing this content.
| | 00:38 | All you have to do is click the icon
of the type of content you want to
| | 00:41 | create, fill out the
information, and you're off and running.
| | 00:44 | I'm going to cover how to create each one
of these individually in a future movie,
| | 00:48 | but I wanted to give you an overview of
each one of them, so you understand them
| | 00:51 | before we get going, because these are
the foundations of everything that you're
| | 00:55 | going to be doing here inside of Tumblr.
| | 00:57 | The first one is a text post.
| | 01:00 | This is just like any other
blog post that you've created.
| | 01:03 | It has a title, it has content; that's it.
| | 01:06 | As you can see, you get a rich text
editor, and you can just go plug away like
| | 01:09 | you would any other blog post.
| | 01:11 | Tumblr is not much on long blog posts,
though. Not a lot of people use it for
| | 01:15 | that type of thing.
| | 01:16 | Tumblr is more for short, concise chunks of
content, so keep that in mind as you create.
| | 01:22 | Photos; you can actually create
photo posts inside of Tumblr easy.
| | 01:26 | You can either take a photo with your
webcam, or upload a photo from your hard
| | 01:29 | drive, or you can also use a photo that's
already on the Internet by entering in the URL.
| | 01:35 | Then you simply add a
caption, and you're ready to go.
| | 01:38 | Quotes; these are things that you might
hear, or read in a book, or that you just
| | 01:42 | know off the top of your head, that
you think might be inspirational, or
| | 01:45 | informational for your audience.
| | 01:47 | You type out the quote, you define the
source, boom; you are done. Very simple; very easy.
| | 01:52 | Links; anytime you find a useful link on the
Internet, use Tumblr to share it with people.
| | 01:57 | This type of post creates a stylized
section in your Tumblr blog that showcases
| | 02:03 | the URL title, and also the URL itself,
so that people can click the link, and
| | 02:07 | access the URL that you're discussing.
| | 02:10 | Chat posts; this is where you can actually
input different chat dialogs that you might have.
| | 02:16 | This could come from an instant messenger,
this could come from an e-mail; it doesn't matter.
| | 02:20 | This is for a conversation on Tumblr.
| | 02:22 | So you add a title, and you add some
dialogue, and then you create the post.
| | 02:27 | This is something that is useful
on sites like clientsfromhell.net;
| | 02:30 | one of the funniest sites
for any graphic designer.
| | 02:33 | Go check it out if you haven't already.
| | 02:35 | Audio; any time you have a useful MP3,
or anything that you want to showcase
| | 02:39 | that's audio driven, you can use that here.
| | 02:42 | As you can see, there are some rules
to the audio upload, but as long as you
| | 02:45 | follow those, you should be okay.
| | 02:47 | You can also search for audio,
and use an external source as well.
| | 02:51 | Finally, there is video.
| | 02:53 | This is probably the most common form
of media that's shared online today.
| | 02:57 | From YouTube, to Vimeo, or any other type
of video that you want to share, you can
| | 03:02 | do that directly from here on Tumblr.
| | 03:04 | You can embed a video that exists already
online, or you can upload your own video.
| | 03:09 | When we discuss the blocks individually
later on, I'll show you how to embed a
| | 03:13 | video, and also how to upload your own.
| | 03:15 | It's really simple once you know how to do it.
| | 03:17 | So there you have it;
| | 03:19 | all of the different blocks that make
up the Tumblr ecosystem: Text, Photos,
| | 03:24 | Quotes, Links, Chats, Audio, and Video.
| | 03:28 | All of these combine to create the
Tumblr experience, which if you scroll down
| | 03:32 | through any Tumblr blog, you'll see the
various types of posts showcased as you go.
| | 03:38 | Each one of these is unique, and creates
its own specific look and feel inside of
| | 03:42 | a Tumblr blog, based on the theme that you use.
| | 03:45 | So, as you create your content,
determine what type of block that you want to
| | 03:49 | use, insert the appropriate
content, and start posting.
| | 03:52 | It's that easy.
| | Collapse this transcript |
| Using a custom domain on Tumblr| 00:00 | As you continue to customize your Tumblr
blog, you may want to take advantage of
| | 00:04 | using a custom domain on your site, so
that you can control the branding and
| | 00:08 | message a little bit better.
| | 00:09 | By utilizing a custom domain, you
abandon the standard Tumblr URL format.
| | 00:13 | In this case, it's seeleyj.tumblr.com.
| | 00:17 | And so what I want to do is just
have something like my name .com, or
| | 00:21 | my company's name .com.
| | 00:23 | In order to do that, I'm going to
click this box right here that says, Use
| | 00:26 | a custom domain name.
| | 00:28 | Once I do that, I can plug in the domain
name that I want. Once I have my domain
| | 00:34 | name typed out, I can click Test my domain.
| | 00:38 | If my domain is not currently
pointing to the correct A-record, you'll see
| | 00:43 | this error message here.
| | 00:44 | It gives me where my domain is
currently pointing, and tells me I need to change
| | 00:48 | my domain name's A-record, to the following IP.
| | 00:52 | It also notes at the bottom that you
only need to change the A-record for your
| | 00:55 | domain; not the name servers.
| | 00:58 | If you're unsure what this means, you
can click the link that says, Need more
| | 01:01 | help, and it will take you to this page,
where it explains in detail how to set
| | 01:06 | up a custom domain with your Tumblr blog.
| | 01:09 | If you don't already have a domain name,
you can register one using any one of
| | 01:13 | the links that are provided here,
or simply use a company like Hover, or
| | 01:16 | GoDaddy to do that as well.
| | 01:18 | The cost for a domain is anywhere between 10
and 50 dollars per year, depending on the domain
| | 01:22 | extension that you get,
| | 01:23 | and there are a ton of
different ones that you can buy.
| | 01:25 | Once you have your domain registered
and purchased, you can then point it, using
| | 01:30 | the A-record, to the Tumblr system.
| | 01:33 | Once that's all set up, go back into
your Tumblr settings, check the domain,
| | 01:37 | and make sure that it's working, and then you
can point users to that domain going forward.
| | 01:42 | So that way, you have control of
the branding, and the message on your
| | 01:45 | Tumblr site at all times.
| | Collapse this transcript |
| Understanding Tumblr followers| 00:00 | One of the things that makes Tumblr
such a unique system is, it's not only a
| | 00:03 | publishing platform, but it's also, in
it's own way, a social network of sorts,
| | 00:08 | and that's where the follows come in.
| | 00:10 | In this movie, I will be discussing
the Tumblr follower system, and how you
| | 00:13 | can use it to both grow your audience, and
get more content for you to consume as well.
| | 00:18 | When you're logged in to Tumblr, and
you're viewing the Dashboard, you are
| | 00:20 | automatically going to see the
people that you follow in your stream.
| | 00:24 | This is just the same that you would
see in like a Twitter stream, or a Facebook
| | 00:27 | News Feed, or whatever it might be.
| | 00:29 | When you are a new user logged in to
the Tumblr Dashboard, you are going to see
| | 00:32 | this welcome message here at the top,
and it's going to tell you that you should
| | 00:35 | follow atleast five people.
| | 00:37 | They give you this suggestion so that
you have different bits of content to pick
| | 00:40 | from as you scroll through your stream.
| | 00:42 | In this case, you are already subscribed
to the Tumblr staff, but you might want
| | 00:47 | to follow some other people, right?
| | 00:49 | So if you click on Follow atleast 5
people, it takes you to the Tumblr Spotlight,
| | 00:53 | and inside of the Tumblr Spotlight,
it's going to give you various people in
| | 00:56 | different categories that
you can choose to follow.
| | 00:59 | If you choose to follow these people,
you will automatically see that content
| | 01:03 | pop up in your stream.
| | 01:04 | You can also go to People you know.
| | 01:06 | When you click on People you know,
you can search for contacts on Yahoo,
| | 01:10 | Hotmail, AOL, or MSN.
| | 01:12 | When you look up the contacts, it'll
show you if any of those people have a
| | 01:15 | Tumblr account, and then you can follow them.
| | 01:18 | You can also see who you
are currently following.
| | 01:20 | In this case, you can see I'm
following the Tumblr staff, and that's it.
| | 01:24 | If I want to unfollow them, I can click that minus
sign, and I'm no longer going to follow then.
| | 01:29 | This means that their information will
no longer show up in the stream that I
| | 01:33 | view inside of my Dashboard.
| | 01:34 | Now let's go back up here to some
of the sites I showed you earlier.
| | 01:37 | Sesame Street, for instance;
let's say I find this interesting.
| | 01:41 | I'll go ahead and click Follow.
| | 01:43 | When I follow them, I'm automatically
adding their content to my stream. Same
| | 01:48 | way with Twitter status.
| | 01:49 | Let's say that I want to stay
apprised of everything that's happening with
| | 01:52 | the Twitter service.
| | 01:53 | After all, I am a Twitter addict.
| | 01:54 | So let's go ahead and hit Follow.
| | 01:57 | Once I do that, I'm now following the
Twitter Status blog. Same thing for Foursquare.
| | 02:01 | Let's say I want to know when the next
time I'm going to get a discount on pizza
| | 02:05 | will be, if I check in somewhere,
| | 02:07 | then I want to follow Foursquare.
| | 02:09 | Here's the problem with this though.
| | 02:11 | On Foursquare, there's no Follow button.
| | 02:14 | So how do I get around that?
| | 02:15 | Well, I can go back to the Tumblr
Dashboard, and I can search for a URL.
| | 02:22 | So in this case, I want
to do blog.foursquare.com,
| | 02:31 | and I have now added foursquare
to the list of sites that I follow.
| | 02:34 | If I click on this link, it
takes me right to that blog.
| | 02:37 | So even though they don't give me the
option to follow directly from their site
| | 02:40 | as some of the others do, I can
always follow them by entering in the URL.
| | 02:45 | So anytime you see somebody that you
think is using Tumblr, enter in their URL,
| | 02:49 | and see if you're able to follow them.
| | 02:50 | If you're not, Tumblr simply
won't let you add them to your list.
| | 02:53 | Let's go back now to Tumblr, and if
you look in my stream, depending on who's
| | 02:59 | been posting content recently -- there's
Sesame Street, Tumblr staff, Sesame
| | 03:04 | Street again, so you see it's kind of varied
up the different things that I see in my stream.
| | 03:11 | The more people I follow, the
more content will be displayed here.
| | 03:14 | In this case, I am only following like
four people, so there's not going to be a
| | 03:18 | whole lot of content there,
| | 03:19 | but if you start following 10, 20, 30
people like you do on any other network,
| | 03:23 | you're going to see some
really cool stuff pop in here.
| | 03:25 | It's a great way to keep up with news,
events, or different photos that your
| | 03:29 | friends might be posting; things like that.
| | 03:31 | It adds a really nice social layer to
Tumblr, and it's a great way to get access
| | 03:36 | to new information as well.
| | 03:37 | Here's a little side tip; any time you
are tired of seeing this message, you can
| | 03:41 | click this little X right here.
| | 03:42 | That will automatically fade it away,
and you won't have to see it anymore.
| | 03:46 | So if you are you're not exactly new
to Tumblr, you might want to go ahead
| | 03:48 | and get rid of that.
| | 03:50 | Now, the great thing about your
Tumblr blog is the fact that it can gain
| | 03:53 | followers, just like you
can follow everybody else.
| | 03:55 | This is a great way to track
exactly how much traction you're getting
| | 03:59 | with your audience.
| | 04:00 | If people start to follow you, chances are,
you're providing content that they like.
| | 04:04 | The more followers you have, the more
people are seeing your message that you
| | 04:07 | are spreading here,
| | 04:08 | and that's what being on Internet is
all about: telling stories, and spreading
| | 04:11 | messages. And that's what we want;
| | 04:13 | we want to grow our audience
through various mediums like this.
| | 04:16 | So start using the
following system here on tumblr.com.
| | 04:19 | It's a great way, as I said, to
improve the social layer that's included in
| | 04:23 | Tumblr, and also a great way to make
sure that your message is being spread
| | 04:26 | as far as possible.
| | Collapse this transcript |
| Understanding Tumblr likes, reblogs, and notes| 00:00 | As Web sites like Facebook and Twitter
become more popular, the terms like, and
| | 00:06 | tweet, and things like that have
become synonymous with the social space.
| | 00:10 | And so Tumblr has actually adopted
certain things like this to integrate
| | 00:14 | into its system as well.
| | 00:16 | In this movie, we are going to be
exploring the likes, the reblogs, and also the
| | 00:21 | note system here inside of Tumblr.
| | 00:23 | Likes and reblogs; you can think of this as
likes and retweets on Facebook and Twitter.
| | 00:30 | So in essence, when you like something
on Tumblr, you are just adding your stamp
| | 00:33 | of approval to something.
| | 00:35 | As you can see, when I scroll through
the different pieces of content that are
| | 00:38 | in my stream here, at the top you are
going to notice a count of how many notes
| | 00:42 | there are on a particular post.
| | 00:44 | Notes are nothing more than an
aggregate that count everything from reblogs and
| | 00:48 | likes that are applied to
each one of these posts.
| | 00:51 | So if I open up the notes on any one of
these post, you are going to see all of
| | 00:55 | the different reblogs and
likes that have been added to it.
| | 00:59 | So let's go ahead and click notes right here.
| | 01:00 | When I click it, the bottom part expands
down to show all of these different things.
| | 01:06 | So in this case, I see that this user
liked this post, this user reblogged it,
| | 01:12 | this user reblogged it as well;
other users have liked it.
| | 01:16 | I can go up to the top, and I can
reblog it, or I can like it myself as well.
| | 01:21 | This adds my stamp of approval,
or re-shares it on my Tumblr blog.
| | 01:25 | Unlike traditional content management
systems, like WordPress or Drupal, you
| | 01:29 | are not going to have the ability to add
comments, necessarily, to any one of these posts.
| | 01:34 | In a future movie, I'll show you how
to get around that, to add a comments
| | 01:38 | section to your Tumblr blog, but in
this case, just know that the notes section
| | 01:42 | isn't really a comments section, per se.
| | 01:44 | As I said before, it's just an
aggregate of things, like when people like it, or
| | 01:48 | when people reblog it.
| | 01:49 | Now, you will in some cases see,
after a reblog, that someone has added
| | 01:54 | something to the reblog.
| | 01:55 | This means they have added a comment,
as well as shared that information.
| | 02:00 | So if I close this up -- and I can do
that by clicking on the notes again --
| | 02:03 | by the way, you can access notes also
by clicking the little page curl on the
| | 02:07 | top right of any post.
| | 02:09 | Let's scroll down here to
this post from Sesame Street.
| | 02:12 | You can see that I have 363 notes.
| | 02:14 | If I click that to open
it up, it expands it down.
| | 02:18 | You can see all of the different people
that have liked and reblogged it, as we
| | 02:20 | talked about before.
| | 02:22 | But in this case, you can see here that
someone reblogged it, and also added a comment to it.
| | 02:27 | This is a way around the basic
comment limitations inside of Tumblr.
| | 02:32 | Now as I said, I am going to show you
a really good cheat later on, but this
| | 02:36 | is the basic cheat.
| | 02:38 | You can just reblog something, and add
your own little snippet on top of it.
| | 02:42 | This is a great way to kind of add
your own flair to what somebody else
| | 02:45 | has already shared.
| | 02:46 | If at any time I want to do this on any
post, I just scroll up to the top, hit
| | 02:52 | reblog, it automatically
takes me to the Reblog section;
| | 02:56 | I am reblogging as myself, so I am good.
| | 02:59 | Here, I can change the caption;
| | 03:01 | this is like adding a comment to it.
| | 03:03 | And then I can reblog the post.
| | 03:06 | I can also add publish options, like
whether or not I want to publish it now,
| | 03:10 | specify a post date, change the content
source where I got it from, or also tag it as well.
| | 03:16 | We will discuss tags a little bit later.
| | 03:18 | Once I'm ready, I hit Reblog post, and
it automatically adds that to my stream.
| | 03:25 | You can see that I have reblogged
this post from Sesame Street.
| | 03:30 | If I go to my Tumblin' With Justin site,
you will notice it's the only post in my list.
| | 03:37 | I haven't even created any content on
my own yet, but just simply by reblogging
| | 03:41 | someone else's content,
I've added content to my site.
| | 03:45 | That's the beauty part of Tumblr.
| | 03:47 | You can actually piggyback
off other people's content,
| | 03:49 | meaning you don't have to be
creative at all; pretty cool.
| | 03:52 | Once we close this up, it takes me
back into the Tumblr Dashboard, and I
| | 03:55 | can continue working.
| | 03:57 | So again, pay attention to the top
right corner of every post in your stream.
| | 04:00 | Click on the notes to expand them down,
and see all of the different interactions
| | 04:04 | that have happened with that post.
| | 04:05 | This is a great way to track audience
participation, as well as the popularity of
| | 04:09 | any of the posts that you create.
| | 04:11 | You can then like or reblog a post at
any given time, and add it to your stream.
| | 04:16 | So now that we have a better
understanding of how to utilize the notes
| | 04:19 | section, and exactly what likes and
reblogs are, hopefully you'll be able to
| | 04:24 | add that little bit of social
interactivity to your posts, as well as start
| | 04:28 | sharing posts from others.
| | Collapse this transcript |
| Blocking and unblocking users| 00:00 | As you create content here on Tumblr,
you may find that some people just aren't
| | 00:04 | playing by the rules, or
they are not being very nice,
| | 00:07 | and in that case, you may need to
block or unblock somebody from your stream.
| | 00:12 | This is kind of a little extreme in some
cases, so you might want to try working
| | 00:15 | it out with them first.
| | 00:16 | But if it comes down to it, you can
block somebody on Tumblr, just like you can
| | 00:21 | on any other social network.
| | 00:22 | The easy way to block somebody is to
expand the notes section of a post.
| | 00:26 | So I will expand out the notes section of
this post, and show you the users below.
| | 00:31 | Hovering over each one of these, you will
notice that I get something that says block.
| | 00:34 | If you click block, it automatically
warns you, you're about to block this user
| | 00:38 | from appearing on your Dashboard, or your blog.
| | 00:41 | In this case, I am going to hit Cancel,
| | 00:42 | because I don't necessarily know this
person, and I don't want to block them.
| | 00:46 | Well let's say that I do want to block
somebody. I will go up to the top, and I
| | 00:50 | can go to Add or remove.
| | 00:52 | From here, if you access your Following
section on the right-hand side, there is
| | 00:57 | a little blue tab that says, if you need
to, you can block users from appearing.
| | 01:02 | So I will click block users.
| | 01:05 | This is where you can actually specify
somebody by URL, or username to block.
| | 01:09 | So in this case, I am going to block
myself. I actually have a separate Tumblr
| | 01:15 | account that I am going to
use for demonstration purposes.
| | 01:17 | I will click the Block link.
| | 01:20 | So now the user justinseeley is blocked.
| | 01:23 | As you can see, that user has been added
to the list down here at the bottom, and
| | 01:26 | I can also report them for spam or harassment.
| | 01:29 | But I don't think I am going
to do that to myself right now.
| | 01:31 | If I return to the Dashboard, any posts
by that user will no longer be visible on
| | 01:36 | any of the posts here, nor will they be
able to comment any further on any post
| | 01:40 | I create from here on out.
| | 01:41 | If I want to unblock this user, I go
back to Add and remove, click on the
| | 01:46 | Following section, and then I can go
to the block users section again.
| | 01:50 | Inside of block users, you'll notice I
am listed here. If I click Unblock, the
| | 01:54 | user is removed, and they can instantly
start interacting with me on Tumblr once again.
| | 01:59 | So remember, go into the Block section
of your tumblelog, enter in the username
| | 02:04 | or URL of the user that you wish to
block, click the Block button, and they
| | 02:08 | should be added to your list.
| | 02:09 | You can also report them for spam or harassment.
| | 02:11 | If you want to remove them from your
block list, simply come back to this
| | 02:15 | area, find them in the list of blocked
users, hit Unblock, and they are right
| | 02:18 | back where they started.
| | 02:19 | From here, you simply access the
Dashboard, and then check the post to make sure
| | 02:24 | that the people that you want blocked
are no longer there, and the people that
| | 02:27 | you don't want blocked are
showing up as they should.
| | 02:29 | As I said at the beginning, this should
probably be a last resort for somebody
| | 02:32 | that's seriously causing trouble,
| | 02:34 | but it's a great added layer of
security that you can use to protect your
| | 02:37 | content here on Tumblr.
| | Collapse this transcript |
|
|
2. Customizing Your BlogChoosing a Tumblr theme| 00:00 | One of the basic elements that makes
your Tumblr site unique from any other
| | 00:04 | Tumblr site is the theme.
| | 00:06 | This is the same thing that makes WordPress
blogs and Drupal sites unique from one another.
| | 00:11 | A theme is basically a new set of
clothes for your blog, so think of the blocks
| | 00:16 | inside of Tumblr as the bones, or the
skeleton of what you're creating, and the
| | 00:21 | theme as the clothing that
you put on over that skeleton.
| | 00:24 | And so each time you change your theme,
you're essentially just changing your
| | 00:28 | clothes; the bones remain the same.
| | 00:30 | The photos are still there, the videos
are still there, the text posts; everything
| | 00:33 | is still there, except the look and
feel of the site is instantly changed.
| | 00:38 | In this movie, I'm going to walk you
through choosing a new theme for your Tumblr site.
| | 00:43 | In order to do that, you're going to
need to be logged into your Tumblr
| | 00:46 | Dashboard, and then click on the name
of your site. In this case, mine says
| | 00:49 | Tumblin' With Justin.
| | 00:51 | Once you get inside of this section,
you're going to notice on the right-hand
| | 00:54 | side there is a little icon with a
wrench that says, Customize appearance.
| | 00:58 | Once you click on Customize appearance, it
takes you here, to the Tumblr customize section.
| | 01:04 | On the right-hand side, you're
going to see a mockup of your site.
| | 01:07 | This is not your content, necessarily,
but it's just a mockup to show you exactly
| | 01:10 | what your site would look
like with this theme applied.
| | 01:13 | You'll notice, as I scroll through here,
it has examples of each one of the blocks,
| | 01:17 | like photos, links, chats, audio, text
posts; everything that you'd ever want to
| | 01:24 | see is displayed here.
| | 01:26 | Let's scroll back up to the top.
| | 01:28 | In order to change your theme, there are
two ways to do it. You can actually pick
| | 01:32 | a new theme from the Tumblr theme
garden or you can edit the HTML and CSS
| | 01:36 | yourself of your existing theme.
| | 01:38 | I'm going to cover how to modify
the CSS and HTML in separate movies.
| | 01:42 | In this case, I'm just going to show you how
to apply a new theme from the theme garden.
| | 01:47 | So simply go over here to this
little icon that says Themes.
| | 01:51 | Once you click that, it takes you to a
list of all the different themes that
| | 01:54 | are available to you.
| | 01:56 | By default, Redux is applied to your site.
| | 01:59 | You can filter the themes by Premium,
Free, Single Column, Two Column, Three
| | 02:05 | Column, Grid, Textual, Minimalistic,
Vintage, Super Customizable, and Hi-Res. All
| | 02:11 | of these will give you different results.
| | 02:13 | The main ones you need to know
about, though, are Premium versus Free.
| | 02:17 | I'm going to discuss how to upgrade to a
premium theme in the next movie, but in
| | 02:20 | this case, I just want to see all the
freebies, so I'll click on Free, and all of the
| | 02:24 | free themes are then filtered out.
| | 02:26 | If you want to see a theme applied
to your site, click on it, and Tumblr
| | 02:30 | automatically gives you a live preview
of your site with that theme applied.
| | 02:35 | Now again, this is not your content,
but an example of what your content would
| | 02:39 | look like with this theme applied.
| | 02:41 | So here you can see an example of a quote,
a photo, a link, a chat, an audio post,
| | 02:48 | a text post, and more.
| | 02:50 | If you want to load more posts, you
click that button down there at the bottom.
| | 02:54 | Scroll back up to the top.
| | 02:56 | If you like this theme, you can click Use at
the top. If you don't, you can find another one.
| | 03:02 | One of my favorite themes inside of
this directory is The Minimalist theme.
| | 03:07 | I'll click on that now, and you can see
that it's very clean, very simple, has
| | 03:11 | nice typography, and it just
makes very good use of white space.
| | 03:15 | So here you've got a quote, you've
got a photo post, a link, a chat;
| | 03:20 | they're basically the same content
types as you saw before. They are
| | 03:23 | just stylized different.
| | 03:24 | So remember, I said the bones stay the same;
the clothes are the only thing that's changed.
| | 03:28 | Let's click on one more before we commit to one.
| | 03:31 | I'll click on Plaid, and as you can
see, a quote, a photo, a Web site; a chat.
| | 03:38 | Everything is exactly the same, but you're
changing it instantly by selecting a new theme.
| | 03:43 | This doesn't even look like the same
Web site necessarily, but it is, just with
| | 03:47 | a different look, and they are
doing this through HTML and CSS.
| | 03:50 | Now I'm going to choose The Minimalist
theme, and once I select that, I'll click Use.
| | 03:57 | Once I select that, it automatically
brings me back to this section, and you can
| | 04:01 | see Minimalist is the
current theme that I'm using.
| | 04:03 | If I want to save my theme, I hit Save. It's
automatically saved, and then I can hit Close.
| | 04:11 | Once I click Close, it takes me
back to the Tumblr Dashboard.
| | 04:14 | If I want to make sure that my theme
has been applied, I'll open up my site.
| | 04:18 | So I'll open up my site here, and there
you see my Tumblin' With Justin site now
| | 04:29 | has that new theme applied to it. All of
the posts -- which is just the one -- are still
| | 04:34 | the same, but they are completely
styled different, and the Web site looks
| | 04:39 | completely different than it did
before, simply by making that one switch.
| | 04:43 | So take the time, and go through each one
of those Tumblr themes, and find the one
| | 04:46 | that's right for you.
| | 04:47 | You can even upgrade to a premium theme
if you wish, and that's what we're going
| | 04:50 | to take a look at next.
| | Collapse this transcript |
| Upgrading to a premium theme| 00:00 | In some cases, you might find that the
free templates here on tumblr.com just
| | 00:03 | don't suit your needs.
| | 00:05 | So you may want to upgrade your site to
a paid theme, or a premium theme, and in
| | 00:09 | this movie, that's exactly what we're
going to talk about: how to upgrade your
| | 00:12 | site to a paid or premium theme.
| | 00:15 | So the first thing you have to do is go
back to the section where you adjust the
| | 00:18 | appearance of your Web site.
| | 00:20 | So from the Dashboard, I'll click on
my blog name, I'll choose Customize
| | 00:25 | appearance, and then I'll navigate to
the themes directory by clicking Themes
| | 00:30 | here in the top left corner.
| | 00:33 | Once I do that, I'm going to go to the
Themes filter menu, and choose Premium
| | 00:37 | Themes. And once I choose Premium
Themes, that means only the premium themes, or
| | 00:43 | the paid themes, are the
ones that I'm going to see.
| | 00:44 | I'll start at the top of the list here.
| | 00:46 | As you can see, I click on these, and
I get to preview them, just like any
| | 00:50 | other theme.
| | 00:51 | The difference with these themes is,
you'll notice in the top right-hand corner,
| | 00:54 | there is a yellow tag on a premium
theme that denotes how much it costs.
| | 00:59 | So in this case, the Nautical theme is
actually $49; same way with the Photofolio
| | 01:06 | theme, which kind of turns your
site into a makeshift portfolio site.
| | 01:11 | Pretty neat!
| | 01:12 | There are more expensive ones, and
cheaper ones, depending on the needs that you
| | 01:16 | have, and the style that you like.
| | 01:18 | It just depends on which one you find.
| | 01:20 | For instance, this one here
called Notebook; it's only $19.
| | 01:24 | It transforms your site almost
into like a notepad-like experience.
| | 01:28 | They all have different features and
different things about them that make
| | 01:31 | them unique.
| | 01:32 | My suggestion is to read the content
descriptions that come with these, and also
| | 01:37 | read some of the things on their
archive pages, and the sidebars as well.
| | 01:41 | A lot of times they will give you an
indication as to exactly what comes with
| | 01:44 | the theme: if options come with the
theme, if Twitter integration is a part of
| | 01:48 | it, Facebook integration, Flickr
integration; that kind of thing.
| | 01:51 | Each theme is going to be unique in its
offerings, and the different things that
| | 01:55 | it's able to give you.
| | 01:56 | For instance here, Nova, on the icon,
it actually says that it has infinite
| | 02:00 | scroll, it has HD mode, it has Typekit
integration, and if I click on it, you'll
| | 02:07 | see that indeed it does have lots
of Web fonts that it's using, so it's
| | 02:10 | powered by Typekit.
| | 02:11 | It's also got infinite scroll, so that
you continue to scroll, no matter how much
| | 02:16 | content you have, there is no paging,
no archiving, or anything like that.
| | 02:19 | It's got Twitter integration; it's got
a lot of things for social networks here
| | 02:23 | on the side. So you just have to go
through, and find the one that works for you.
| | 02:27 | Now, what happens if you find one,
and you're ready to start applying it?
| | 02:30 | Well, you select it, and then you hit Use.
| | 02:35 | Once you hit Use, it takes you to this
section, just like it normally would
| | 02:38 | with any theme.
| | 02:39 | However, one noticeable change is present here.
| | 02:43 | Instead of Save at the top, we
now have the Purchase option.
| | 02:47 | If I click Purchase, it's
automatically going to launch a payment gateway.
| | 02:50 | I can enter in my credit card information,
expiration date, and hit Next. Or if
| | 02:56 | you prefer, you can Use PayPal.
| | 02:58 | Once you've checked out, you'll be able
to apply this, just like you would any
| | 03:02 | other theme.
| | 03:03 | For now, I'm going to click Cancel.
| | 03:04 | So as you can see, there are a ton of
themes available to you here inside of the
| | 03:08 | Tumblr theme garden.
| | 03:09 | There are also many different
places across the Web that you can find --
| | 03:12 | quote, unquote -- premium themes for Tumblr.
| | 03:15 | In a future movie, I'll talk about some
of those marketplaces where you can find
| | 03:18 | some themes that might suit you best,
but for now, just know that you can use
| | 03:22 | Tumblr's built-in theme garden to
select a premium theme, purchase it, and then
| | 03:26 | apply it to your Web site, making you
just a little bit different from the others
| | 03:30 | who are just using the freebies.
| | 03:31 | From here, I'm just simply going to click Close.
| | 03:36 | I'll choose to leave this
page, and go back to my Dashboard.
| | 03:40 | Once I'm back in my Dashboard, it has
forgotten those settings, because I didn't
| | 03:43 | save it, and didn't purchase it. And if I
go back to my site, you'll notice that I
| | 03:47 | still have the Minimalistic theme
applied, and the premium theme has not been
| | 03:51 | purchased or applied at all.
| | 03:52 | So now you have seen how to apply a
premium theme here inside of Tumblr.
| | 03:56 | Take some time, and go
through the entire theme directory.
| | 03:59 | If you find one you like, purchase
it, and apply it. Otherwise, just use the
| | 04:03 | built-in freebies, and
adjust them to fit your needs.
| | Collapse this transcript |
| Adjusting basic appearance settings| 00:00 | Now that we've selected a custom
theme here inside of Tumblr, it's time to
| | 00:03 | adjust the appearance settings, so
that we can make it a little bit more
| | 00:06 | customized to our needs.
| | 00:08 | So I'm going to start off by closing
up my Web site here, and going back into
| | 00:11 | the Tumblr Dashboard.
| | 00:12 | From the Tumblr Dashboard, you want to go
to Tumblin' With Justin, or whatever the
| | 00:16 | name of your blog might be.
| | 00:18 | Find the Customize appearance section
on the right-hand side, and then once you
| | 00:23 | get inside of there, you're going to see several
different areas that you're able to customize.
| | 00:28 | If I scroll up to the top, you'll
notice we have the theme; we've already
| | 00:32 | seen how to edit that.
| | 00:33 | We have a title, which is Tumblin'
With Justin. We also have a description.
| | 00:39 | So in this case, let's go ahead and
add the description of our Web site.
| | 00:41 | I'll say this is Justin's Tumblr...
| | 00:45 | A place to share photos, text, and other
cool stuff. You'll notice that based on
| | 00:49 | my theme, I automatically get
that description added to my Web site.
| | 00:53 | Now in this case, I don't like
that it breaks to the next line,
| | 00:57 | so I'll just go ahead and revise that
to say, a place to share cool stuff, just
| | 01:02 | like that. That's what I really love
about Tumblr, is the fact that I get
| | 01:05 | real-time feedback right here in
this window as to what I'm changing.
| | 01:09 | I can see it, I can see what it looks
like inside the theme, I can see what
| | 01:12 | the text looks like, see how it's laid out,
see how the lines break, and all that good stuff.
| | 01:16 | I love this WYSIWYG, what you see is what
you get type of interface that Tumblr has.
| | 01:21 | It's very easy for people to utilize
this, versus having to edit code, or anything
| | 01:25 | like that. So that's what I love about
Tumblr; it's so easy for the end-user.
| | 01:29 | Now, if you happen to add a long
description, and you run out of space, each one
| | 01:32 | of these boxes is expandable, so you
can just click and drag by utilizing the
| | 01:36 | corner handle, like so.
| | 01:37 | Let's keep going down to the bottom here.
| | 01:41 | Directly underneath here, you have a
few more appearance options that you have
| | 01:43 | the ability to control.
| | 01:45 | The first one is Show description.
| | 01:47 | Toggling this off will hide the
description from view. Turning it back on
| | 01:50 | automatically adds the
description back to your Web page.
| | 01:53 | You also have the ability to control
whether or not search is being shown.
| | 01:57 | In this case, my theme doesn't
showcase the search feature, necessarily, but
| | 02:00 | some of them actually show the search field
in a sidebar, or at the top of your screen.
| | 02:05 | In this case, in order to access search,
I actually have to click a search link
| | 02:09 | right here on the page, but if I chose
not to show that, the search field would
| | 02:12 | be disabled. In this case, I want
people to be able to search my blog, so I'm
| | 02:16 | going to go ahead and leave that checked.
| | 02:18 | You can also add things like your
Twitter name, you Disqus Shortname, and your
| | 02:22 | Google Analytics ID.
| | 02:24 | Twitter name is going to be used in
themes that incorporate Twitter; things that
| | 02:28 | show your recent tweets, and stuff like that.
| | 02:30 | If you want to add your
Twitter name, just add it in here.
| | 02:32 | This is separate from the Twitter
integration that works on the Tumblr backend;
| | 02:36 | we'll discuss that in a future movie.
| | 02:38 | Your Disqus Shortname; if you're using
the Disqus plug-in for comments, this is
| | 02:43 | where you add that in.
| | 02:44 | We're going to discuss adding comments
with the Disqus plug-in a little bit later.
| | 02:48 | Finally, your Google Analytics ID.
| | 02:50 | If your theme supports Google Analytics
tracking, you'll be able to input that ID
| | 02:53 | right here. You can find your Google
Analytics ID by accessing the Google
| | 02:57 | Analytics Dashboard.
| | 02:59 | Once you have that ID, simply plug in
the number here, and you're automatically
| | 03:02 | receiving tracking updates from the site.
| | 03:05 | In some cases, themes will also
support pages, and other advanced options.
| | 03:09 | We'll discuss pages, and advanced
options in their own separate movies later.
| | 03:13 | Once you have all of your basic
appearance options ready to go, all you have
| | 03:17 | to do is click Save.
| | 03:20 | Once you save it, you can close it.
| | 03:23 | Closing it takes you back to the Dashboard.
| | 03:25 | If you want to make sure that everything is
in place, simply visit your Tumblr site again.
| | 03:30 | As you can see, the description that I
added is now right there at the top, and if
| | 03:35 | I choose Search, the search field
appears, because I did not disable it. Let's
| | 03:38 | close that up, and go back to my Dashboard.
| | 03:40 | So now you've seen just how easy it
can be to adjust the basic appearance
| | 03:44 | settings of a Tumblr site.
| | 03:45 | Now you have what it takes to go in and
add that little bit of personal touch to
| | 03:49 | your Web site or blog.
| | Collapse this transcript |
| Modifying the CSS of a theme| 00:00 | One of the questions that I often get
about Tumblr is whether or not you can
| | 00:04 | actually customize the HTML or CSS elements
of a theme, and the answer is yes, you can.
| | 00:10 | There is a built-in way to edit
CSS and HTML inside of Tumblr.
| | 00:14 | I am going to show you how
to do that in this movie.
| | 00:17 | Let's go up here to the blog link.
| | 00:18 | In this case, it's Tumblin' With Justin.
| | 00:19 | I'll go to the Customize
appearance section.
| | 00:22 | When you get into the Customize
appearance section, it's not obvious where you
| | 00:26 | would go to edit the CSS or HTML, but
if you go right here to this little Edit
| | 00:31 | button, where it says Edit HTML, you'll
find most of the CSS is actually inside
| | 00:38 | of the HTML document that controls the theme.
| | 00:40 | As a matter of fact, most Tumblr themes
contain all of the CSS right here at the
| | 00:45 | top, where you can go in and edit it.
| | 00:47 | Then following the CSS is all of the HTML.
| | 00:50 | I'll show you how to edit that in just
a minute, but let's say that I wanted to
| | 00:53 | change something inside of this CSS.
| | 00:56 | Well, I simply find that element that
I want to change, make the corrections,
| | 00:59 | and hit Update Preview.
| | 01:01 | So in this case, I want to
change, let's say, the title.
| | 01:05 | So since I'm working in Chrome, I can go
down, and right-click, and choose Inspect Element.
| | 01:12 | I can go in and find exactly what
class is being applied to this particular
| | 01:17 | portion of my theme.
| | 01:19 | In this case, I see the h1 class is
equal to cufon, which means they're using
| | 01:22 | cufon Web fonts in order to
display this particular font.
| | 01:26 | If I want to go in and override that, I'll
have to change that both in the CSS, and the HTML.
| | 01:30 | So what I'm going to do is first go in and
edit the h1, or the first heading, in the CSS.
| | 01:37 | So I'll close this up, and I'll
just find h1 inside of my list.
| | 01:44 | So in this case, h1 has a font size of
50 pixels, a line height of 50 pixels.
| | 01:50 | I want to change the font size.
| | 01:52 | Let's change this, blow it up really big; 72.
| | 01:56 | Update the preview. You'll
notice it gets a lot bigger.
| | 01:58 | If I think it's too big, because I don't like
the line break right there, I can back it off.
| | 02:02 | Let's do 64; backs it up a
little bit, but not too much.
| | 02:07 | Let's change that to about 58; update it.
| | 02:12 | I'll just have to live with the
line break for now, because I really want
| | 02:14 | that text to be big.
| | 02:16 | I can always edit the name of the site;
| | 02:17 | Tumblin' With Justin is a little long anyway.
| | 02:21 | If I wanted to add something to this,
like a font family, I can just create a
| | 02:25 | line of space, and start typing out my CSS.
| | 02:31 | As you can see, you have a full code
editor right here inside of the Tumblr window.
| | 02:35 | If I hit Update Preview,
you're not going to see any changes.
| | 02:39 | Why? Because currently, in the HTML, this
is being controlled by cufon Web fonts.
| | 02:44 | So I'm going to have to actually go in
and edit the HTML in order to make this
| | 02:49 | change, and we're going to cover how to
edit your HTML in the very next movie.
| | Collapse this transcript |
| Modifying the HTML of a theme| 00:00 | In the previous movie, we were
discussing how to make changes to your
| | 00:03 | Tumblr theme via CSS.
| | 00:05 | However, we ran into somewhat of a
hurdle when I changed the h1 font family,
| | 00:10 | and nothing happened. Well in this case,
| | 00:13 | it's being controlled by cufon Web
fonts, so what I'm going to have to do is
| | 00:16 | remove that from the HTML itself.
| | 00:19 | So I'll scroll down in my document,
and inside of my document, what I'm
| | 00:25 | looking for is the JavaScript that's
controlling cufon, which in this case is on line 470.
| | 00:31 | The great thing about Tumblr's code
editing interface is the fact that they
| | 00:34 | provide line numbers on the left-hand
side, just like any other code editing
| | 00:37 | application, like Dreamweaver, or Coda, or
anything else that you might be used to.
| | 00:41 | This is a great way for code geeks like
myself to easily find things they are looking for.
| | 00:46 | So on line 470, all I have to do is
remove this line that's replacing the h1
| | 00:51 | with the cufon font. So I'll remove
that, just like so, and I also need to go
| | 00:57 | down to line 512 in this case, and
remove the h1 class of cufon, and turn it
| | 01:01 | into a regular h1 tag.
| | 01:04 | After you've made any change here inside
of the Appearance window, you can click
| | 01:07 | Update Preview to get an updated preview
of exactly what it's going to look like
| | 01:10 | on your Tumblr site.
| | 01:12 | If you're ready to commit to these
changes, you can go back to the appearance
| | 01:15 | section, and click the Save button.
| | 01:17 | Once you've clicked Save, those changes
are now in place, so if you access your
| | 01:21 | Web site, this should be exactly what you see.
| | 01:24 | You'll also notice that underneath there,
that it has changed from the theme that
| | 01:27 | you were using to something that says
Custom theme, indicating that you have
| | 01:32 | made a change to the HTML
or CSS of this theme.
| | 01:36 | If you want to get back to the original
theme, you can simply go back to Themes,
| | 01:40 | find the theme that you were
using, and select it again.
| | 01:43 | In this case, I'll choose Free Themes,
scroll down, and select Minimalist, you'll
| | 01:48 | notice everything goes
to normal, and I'll hit Use.
| | 01:52 | Once I hit Use, I can then click Save. All
of those changes I just made were overridden.
| | 01:57 | So if you happen to find yourself
making a mistake inside of the HTML or CSS,
| | 02:01 | don't worry about anything; you can
always get back to the default by doing
| | 02:05 | exactly what I just did there.
| | 02:06 | But if you're familiar with HTML and
CSS, take the time to go through the code
| | 02:11 | editor, make the changes that you want,
and customize your Tumblr theme to fit you
| | 02:15 | best. You'll be glad you did.
| | Collapse this transcript |
| Adding your logo to your site| 00:00 | If you're going to be using Tumblr as a
brand, or a business, chances are, you're
| | 00:04 | going to want your logo somewhere on the site.
| | 00:07 | Unfortunately, one of the limitations of
Tumblr is the fact that they don't make
| | 00:10 | use of images for the
logo element of their themes.
| | 00:14 | So if I go here to my blog, and go to
the Customize appearance section, you'll
| | 00:19 | notice here that Tumblin' With
Justin obviously is not an image.
| | 00:23 | So how do I then get an
image in place of this?
| | 00:25 | If I look over here on the left,
there's no real upload logo section.
| | 00:29 | Now, in some custom Tumblr themes that
you purchase online, or premium themes that
| | 00:33 | you purchase online, you will have the
option to upload your image for a logo.
| | 00:38 | But with the ones that are provided on Tumblr.com,
unfortunately, that's just not the case.
| | 00:42 | So we have to manually
add in our image right here.
| | 00:46 | In order to do that, we're
going to do that through HTML.
| | 00:49 | Now, you're also going to need
a place to house your image.
| | 00:53 | This could be something like a free
service like Dropbox, or CloudApp, or
| | 00:58 | something like that, where you store the
image remotely, and then link back to it.
| | 01:01 | So you're going to have to have an
image that lives somewhere on the Internet,
| | 01:05 | and then a way to link to it,
| | 01:06 | and that's what we're going to do right now.
| | 01:08 | So I'll go into Edit HTML, and I'll
scroll down inside of the HTML until I find
| | 01:14 | that h1 element right there.
| | 01:18 | Once I find the h1 element,
I can then put in my image.
| | 01:22 | If I replace the h1 line right here
with an image tag, and put in my image like
| | 01:30 | so, and then hit Update preview,
you see that the image pops right in.
| | 01:36 | So any time that you need to put your
logo inside of one of these prebuilt
| | 01:41 | Tumblr themes, this is
unfortunately how you have to do it.
| | 01:45 | Now, if you happen to purchase a
Tumblr theme that includes an image uploader
| | 01:47 | for logo purposes, that's great.
| | 01:50 | You can just upload your
logo, and there it will be.
| | 01:52 | But in any other case, where they are
utilizing text, versus an image, you're
| | 01:56 | going to have to manually
come in and add the image tag.
| | 01:59 | So if you're unsure how to do that, you just
start the tag, img src= then a Quotation
| | 02:06 | Mark, then you'll paste in
the address of the image itself.
| | 02:10 | This is where it lives online.
| | 02:12 | You'll close the quotes, and finish the tag.
| | 02:14 | Now, you can also add things like Alt
attributes, descriptions, and all that good stuff.
| | 02:19 | But in this case, I'm just
going to leave it like so.
| | 02:21 | Once you've updated the preview,
you'll see it, then you can go back to
| | 02:24 | Appearance, and you can Save it.
| | 02:27 | Once you save it, you'll notice that it
now says again that I'm using a Custom theme.
| | 02:31 | And remember, if we want to get rid
of that, we go back into Themes, and
| | 02:35 | choose the theme again.
| | 02:36 | But in this case, I'm happy
with the logo being on top,
| | 02:39 | so I'll just go ahead and click Close.
| | 02:43 | If I want to make sure it's there, I
visit my Tumblog, and there it is right
| | 02:47 | there: the logo that I put in via the HTML.
| | 02:50 | Now I'll close this up,
and return to my Dashboard.
| | 02:53 | So as you can see, it's relatively
easy to put in a logo, versus the title
| | 02:57 | element inside of a Tumblr theme.
| | 02:59 | But unless you know how to utilize
the HTML features, it's not that easy.
| | 03:04 | So my suggestion would be to take some
time, learn the basic HTML tags that you
| | 03:08 | need, find a place to store your
images, and then start adding them to your
| | 03:12 | Tumblr themes accordingly.
| | Collapse this transcript |
| Adding Twitter and Facebook integration| 00:00 | Even though Tumblr has its own social
aspect to it, there may still be some
| | 00:04 | need for integrating other social networks,
like Facebook, and Twitter into your Tumblr site.
| | 00:10 | Luckily, Tumblr adds these
options in there for you.
| | 00:13 | In this movie, I'll be exploring how
to add Twitter and Facebook integration
| | 00:16 | into your Tumblr site.
| | 00:18 | So from the Dashboard, I need to find my
blog link up here: Tumblin' With Justin.
| | 00:24 | Once I click on that, I'm going to go
into the Settings section over here on
| | 00:27 | the right-hand side.
| | 00:28 | Once I'm inside the Settings section,
I'll scroll down, and you'll notice there
| | 00:31 | are two options: one for
Facebook, and one for Twitter.
| | 00:35 | The first one, if you turn it on,
it automatically asks you to
| | 00:39 | authorize Facebook.
| | 00:42 | All you have to do here is enter in
your Facebook e-mail address, and password,
| | 00:46 | and then click Log In.
| | 00:47 | Once you log in, you'll be asked to
grant access to the Tumblr application.
| | 00:51 | Once you've accepted that, it'll take
you back to the Tumblr interface, and
| | 00:55 | you'll see a checkmark next to where it
says Share your Tumblr posts in your News Feed.
| | 01:00 | Basically what this does; it
enables Tumblr to talk to Facebook.
| | 01:04 | So every time you post something to
Tumblr, whether it's a quote, a link, a
| | 01:07 | video, a photo, it doesn't matter,
| | 01:09 | it automatically sends out a new post
to your Facebook News Feed, letting every
| | 01:13 | one of your Facebook friends
see it in their News Feed as well.
| | 01:17 | So if you share a photo, it
goes into your Facebook Timeline.
| | 01:20 | If you share a video, it also
goes into your Facebook Timeline.
| | 01:23 | It's an easy way to basically crosspost
between Facebook and Tumblr.
| | 01:28 | Twitter works much the same way, except
for with Twitter, you actually have the
| | 01:32 | ability to sign in right here with this button.
| | 01:34 | Why they don't do a Sign In
button for Facebook, I'm not real sure.
| | 01:37 | It seems like an inconsistent UI to
me, but again, you just sign in with
| | 01:41 | Twitter right here.
| | 01:43 | Once you do that, it takes you to twitter.com,
and you will have to authorize the
| | 01:47 | Tumblr application to be used via Twitter.
| | 01:50 | Type in your username, and
password, and click Authorize app.
| | 01:54 | Once you authorize the app, it will
automatically return you back to your Tumblr
| | 01:58 | Dashboard, and then you have the ability
to control whether or not you send your
| | 02:01 | Tumblr posts to Twitter.
| | 02:03 | Basically, this allows Tumblr
to speak to Twitter as well.
| | 02:06 | So if you have both of these checked,
it will automatically post that same
| | 02:10 | content to both Facebook and Twitter.
| | 02:12 | And if you have a large network on
either one of those sites, it's a great way
| | 02:16 | to get more eyeballs on your content.
| | 02:19 | Now, you can also integrate things like
Facebook Like buttons, and Tweet buttons
| | 02:23 | into your theme as well.
| | 02:25 | In order to do that, you just go to
Facebook, or Twitter, and go to their
| | 02:28 | Developers section, and you will be
able to copy the code for a Tweet button,
| | 02:31 | or for a Like button.
| | 02:32 | Then you take that code, and paste it
right into wherever you want that to appear
| | 02:36 | on your Tumblr blog.
| | 02:38 | The final part of integration occurs
inside of the options that are available to
| | 02:42 | you in various themes.
| | 02:43 | For instance, if I go into Customize
appearance, and scroll down on the left-hand
| | 02:48 | side, you're going to notice that
this theme asked me for my Twitter name.
| | 02:51 | If I type that in, I can go ahead and
click Save, and you'll notice here that it
| | 02:56 | adds a link that says Twitter.
| | 02:58 | Let's close this up, after I've saved
my changes, and go and visit my Tumblog.
| | 03:04 | Once I do that, I'll find the link
that says Twitter, click it, and it takes
| | 03:09 | me to my Twitter page.
| | 03:10 | In many other themes, adding in your
Twitter name will automatically add a
| | 03:13 | stream of your recent tweets.
| | 03:15 | You'll have to find a theme that
supports that, though; not all of them do.
| | 03:18 | As you could see, on the theme that
I'm using, it didn't support that.
| | 03:21 | All it does is add a link to my
Twitter profile, which is fine.
| | 03:25 | So whether you have a Facebook page,
Facebook profile, or a Twitter profile, you
| | 03:29 | can integrate those into your Tumblog
very quickly, and very easily, using the
| | 03:34 | built-in preferences, and also some
of the theme customization options.
| | 03:38 | So take the time to fill out your
information, and start crossposting, and
| | 03:42 | gaining more of an audience today.
| | Collapse this transcript |
| Working with advanced options| 00:00 | One of the sections that we saw for a
moment earlier in this series, that I kind
| | 00:05 | of glazed over, was the Advanced Options
section inside of the Tumblr Appearance.
| | 00:09 | So what we're going to do now is
explore the Advanced Options section of your
| | 00:12 | Tumblr Appearance panel.
| | 00:14 | In order to access that, you have to
be logged in to your Tumblr Dashboard,
| | 00:17 | click on your blog name, go under
Customize appearance, and inside of Customize
| | 00:23 | appearance, towards the bottom of the left-
hand side, you'll see an Advanced section.
| | 00:27 | Now, don't be scared by the word advanced.
| | 00:30 | This is actually misused in my opinion.
| | 00:32 | These are not advanced options,
necessarily, but if you don't understand them,
| | 00:36 | they might seem a little daunting at first.
| | 00:38 | First of all, how many posts
per page do you want to display?
| | 00:41 | This means on your homepage, when
someone accesses your site, how many pieces of
| | 00:46 | content do you want them to view
before they have to go to another page.
| | 00:50 | So if you want them to see 10, change it to 10.
| | 00:53 | By default, it is set to 10.
| | 00:55 | But if you want them to see
15, you could do it that way.
| | 00:58 | By changing this, that affects how many
posts are displayed on the one single page.
| | 01:04 | If you shorten that number, they will most
likely have to page through multiple pages.
| | 01:08 | A lot of people don't like to do that,
because they feel like they're making
| | 01:11 | their users have unnecessary clicks.
| | 01:14 | So in this case, I'll keep mine at 15.
| | 01:17 | Open links in a new window;
| | 01:19 | there's a big debate on whether or
not this should be allowed, or even used
| | 01:22 | at all on Web sites.
| | 01:24 | It doesn't really bother me, necessarily,
but I get why people don't like it so much.
| | 01:29 | If you choose this, that means any link
that you post is automatically going to
| | 01:33 | be opened in a new
window or tab in your browser.
| | 01:36 | By checking this box,
that turns that behavior on.
| | 01:39 | Unchecking it ensures that when
someone clicks a link on your blog, that they
| | 01:43 | stay inside the same window or
tab that they're currently on.
| | 01:46 | I'll leave that unchecked for convenience.
| | 01:48 | Use optimized mobile layout;
| | 01:52 | this is a great option if people are
visiting your Tumblr site from a tablet
| | 01:55 | device, or a smartphone.
| | 01:57 | Basically this overrides your
current theme with a special layout that's
| | 02:00 | designed by Tumblr for
browsing on mobile devices.
| | 02:04 | So basically, if someone comes to you
on an iPad, or an iPhone, or an Android
| | 02:07 | tablet, or whatever it might be, they get
a special, optimized Web site for viewing
| | 02:12 | in a tablet or smartphone environment.
| | 02:14 | That makes it a little bit easier to
view the content, click on the content, and
| | 02:17 | even interact with various parts of your site.
| | 02:20 | I recommend turning this on for sure.
| | 02:22 | It's on by default,
| | 02:23 | so as long as you haven't
unchecked it, you should be okay.
| | 02:27 | Use descriptive URLs;
| | 02:29 | basically, this adds a text
summary to the end of your URLs.
| | 02:33 | So you can see here, the
example given, the URL would be
| | 02:36 | post/123456/driving-home.
| | 02:40 | So basically, they take the title of
your post, and make that the end of the URL.
| | 02:45 | It's sort of like the permalink
structure inside of a WordPress site.
| | 02:48 | If you want to use the
descriptive URLs, check that box.
| | 02:51 | If not, uncheck it.
| | 02:53 | By unchecking it, you just ensure that it
says post/123456; not very descriptive.
| | 02:58 | It doesn't give the reader an indication
of exactly what they're viewing, if they
| | 03:02 | happen to look in the
address bar. Promote Tumblr!
| | 03:05 | If you want to show a follow button to
non-Tumblr users on your site, basically
| | 03:10 | this lets people know, hey,
I'm running a Tumblr site.
| | 03:14 | If you click on this, you're
probably going to be taken to tumblr.com.
| | 03:17 | This is a promotional thing for Tumblr.
| | 03:19 | It's how they spread the
word about their service.
| | 03:22 | If you want to include this, go ahead,
but you don't necessarily have to.
| | 03:26 | The final advanced option, we're going
to cover in its own movie coming up next.
| | 03:30 | This is where you add your
own custom CSS to your theme.
| | 03:35 | This is outside the scope of the CSS
and HTML that are contained within the
| | 03:39 | theme, and this is also CSS that can be
saved, and used in conjunction with the
| | 03:44 | current theme, without
switching to a custom theme.
| | 03:48 | Once you've selected all of these
options, and have everything like you like it,
| | 03:51 | click the Save button.
| | 03:53 | Then you can click Close to return
yourself to the Tumblr Dashboard.
| | 03:57 | If you want to make sure that all of
your options stuck, go back and visit
| | 04:01 | your Tumblr site again.
| | 04:02 | If not, you can continue
working here from the Dashboard.
| | 04:05 | So there you have it: the
advanced options inside of Tumblr.
| | 04:08 | They're not exactly advanced, but
unless you know specifically what they mean,
| | 04:12 | they might be a little confusing.
| | 04:14 | So hopefully by now you have a better
understanding of what they are, and how
| | 04:17 | they can help you customize your
Tumblr site a little bit better.
| | Collapse this transcript |
| Adding your own CSS| 00:00 | One of the final pieces of customization that
you can add to your Tumblr blog is your own CSS.
| | 00:06 | Now, we've covered how to edit the CSS
inside of an existing Tumblr theme, but
| | 00:09 | what if you wanted to add your
own CSS on top of that custom theme?
| | 00:14 | In this movie, I'll show you how to do that.
| | 00:16 | Let's go up and click on the blog
link, and select Customize appearance.
| | 00:21 | Once we're inside of the Customize
appearance section, remember, before we went
| | 00:25 | into Edit HTML. That's where we added
in the CSS, or edited the CSS before, and
| | 00:30 | that actually changed the theme
we were using to a custom theme.
| | 00:33 | But in this case, I want to
maintain this theme, and add my own CSS.
| | 00:39 | So I am going to go down to
Advanced, and click right here inside of the
| | 00:44 | Add custom CSS box.
| | 00:46 | Basically here, you write out your own
CSS, and it's instantly applied to your
| | 00:50 | design over on the right-hand side.
| | 00:52 | So if I wanted to, I could define
something about this particular document, and
| | 00:57 | change it right here inside this window.
| | 00:59 | So for instance, let's say that I wanted
to change something about the title element.
| | 01:05 | So in this case, I will right-click
on it, and inspect the element.
| | 01:09 | Click on h1, and let's take a look at
some of the attributes that it has.
| | 01:13 | So it's got font size of 50; line height of 50.
| | 01:15 | I am not going to change any of the font
family, or anything like that, but I am
| | 01:20 | going to add, let's say,
some padding to the bottom.
| | 01:23 | So I will close this up, type out h1,
and I will type out padding-bottom, and
| | 01:32 | let's add something
really dramatic, like 30 pixels.
| | 01:35 | You notice that automatically
updates as I'm typing.
| | 01:37 | Let me complete this first.
| | 01:39 | Let's change this to
something else, like 90 pixels;
| | 01:43 | see how much space is then added
underneath there? And you'll notice here at
| | 01:47 | the top, it's still The Minimalist
theme, but I've added that custom CSS
| | 01:52 | element towards the bottom.
| | 01:54 | Let's remove this, and
you'll see it goes back to normal.
| | 01:59 | Let's say that my picture here: I
want a little bit more space beneath it.
| | 02:04 | Inspect the element; you'll notice here
that it's got a bottom margin of 15 pixels.
| | 02:10 | Maybe I also want to add some padding to that.
| | 02:12 | So I notice this is article image.
| | 02:15 | So I will just take this, and I'll copy it.
| | 02:18 | So I'll add some padding to the bottom.
| | 02:27 | I will define this as something big, like
90 pixels, close that up, and there you
| | 02:33 | can see I have added a significant
amount of space underneath that image.
| | 02:37 | And again, if I want to remove that,
remove it, scroll down, and it is removed.
| | 02:44 | So let's complete this by
adding one more thing here.
| | 02:46 | I will just define the h1 again.
| | 02:48 | I will add padding-bottom:15px.
| | 02:54 | See, it add a little bit of space, and I
will close the tag. I will hit Save.
| | 02:59 | When I hit Save, you'll notice the theme
still remains the same; nothing custom,
| | 03:03 | and then I can close it.
| | 03:05 | If I access my site, it now has that
15 pixel padding underneath the heading.
| | 03:12 | Close that up, and it
returns me back to the dashboard.
| | 03:15 | So now you see just how easy it is
to add a little layer of customization
| | 03:19 | by adding in your own CSS via the Advanced
Options panel inside of the Tumblr dashboard.
| | 03:25 | So take the time, find some elements
that you want to tweak, and you'll be well
| | 03:29 | on your way to having a very
unique and interesting Tumblr blog.
| | Collapse this transcript |
|
|
3. Publishing with TumblrCreating simple text posts| 00:00 | Now it's time to actually start
publishing stuff here on Tumblr.
| | 00:03 | In order to do that, we're going to
utilize the Tumblr blocks that we discussed
| | 00:06 | earlier in the series.
| | 00:08 | The first block that we're
going to cover is the text block.
| | 00:11 | So I am going to show you how to create
a simple text post using the text block
| | 00:14 | here inside of Tumblr.
| | 00:16 | In order to do that, you have to be
logged into your Tumblr dashboard, and then
| | 00:19 | simply click the icon labeled text right here.
| | 00:23 | Once you click on that, it takes
you to a simple posting screen.
| | 00:25 | You'll be able to name your post here
with the title element, and then enter in
| | 00:30 | all of the post information here.
| | 00:32 | This is just like a word processor.
| | 00:33 | You can type, free range,
anything you want in here.
| | 00:36 | You have the ability to stylize it with
tools like bold, italic, strikethrough,
| | 00:41 | bulleted list, numbered list, quotes;
| | 00:45 | you can even add photos, links,
spellcheck, and more tags as well.
| | 00:51 | At the very end, there's a
little link that says HTML.
| | 00:54 | If you click this, you'll be taken out of
the rich editor, and into the HTML editor.
| | 00:58 | This is for more advanced users that
know how to write their own HTML code.
| | 01:02 | If you're not familiar with HTML, my
suggestion is just to simply ignore
| | 01:05 | that button altogether.
| | 01:07 | Let's go ahead and start off
by adding a title to the post.
| | 01:09 | So I will just call this Sample Post.
| | 01:13 | I've already got some filler text
copied to my clipboard, and I am simply
| | 01:17 | going to paste that in.
| | 01:19 | You can paste in text from Microsoft
Word, TextEdit, or even InDesign; any text
| | 01:23 | editing application will work, and it will
paste directly into the Post editing window.
| | 01:28 | Once you have your text in here, you
can make any edits that you see fit.
| | 01:31 | So for instance, if I wanted the first
sentence to be in bold, I simply select
| | 01:35 | it, and then click the B to make it bold.
| | 01:39 | If I need something to be italicized,
I make a selection, and make it italic.
| | 01:46 | If I need to strike through
something, select it; strikethrough.
| | 01:51 | I can even add bulleted or numbered lists.
| | 01:54 | Let's see how to do that.
| | 01:55 | I'll hit Return here to create some space.
| | 01:57 | Then I will click the bulleted list button.
| | 01:59 | I can type out List Item 1,
List Item 2, List Item 3.
| | 02:10 | If I hit Return twice, it
cancels out of that list format.
| | 02:14 | To apply a numbered list, simply click
here, and start typing. It's that simple.
| | 02:20 | Now let's move down, and let's add a quotation.
| | 02:23 | I will find this bit of text here,
put my cursor at the beginning of the
| | 02:28 | paragraph, and click the quote icon.
| | 02:30 | You see there that it moves the text in,
and indicates that it's now a block quote.
| | 02:34 | If you want to add a photograph to
your post, you simply put your cursor
| | 02:37 | wherever you want that photo to
appear, for instance here, and you can click
| | 02:42 | the Upload icon right here, or simply hit
Upload a photo from the top right-hand corner.
| | 02:48 | In this case, if I click this button,
it asks for the Image URL, Image
| | 02:52 | description, and Alignment options.
| | 02:55 | This indicates that there's already
a photo somewhere on the Internet.
| | 02:58 | So in this case, I have a photo on
my Desktop, so I need to upload it.
| | 03:01 | So I will cancel this, and go right here.
| | 03:04 | I will go into my Exercise Files
folder, to my Assets, and the pics folder.
| | 03:12 | Inside of pics, I will find one of the
images -- in this case, I will use a photo
| | 03:15 | of my dog, Tank -- and I will open that up.
| | 03:20 | It's automatically going to insert that for me.
| | 03:23 | If I click on the image,
you'll notice that it highlights.
| | 03:26 | By selecting this icon here, I can
change the attributes for the image.
| | 03:31 | Let's set this to be aligned to the left, and
let's set the Dimensions to be 300 pixels wide.
| | 03:37 | There you see it automatically changed
that photo for me to be left aligned, so
| | 03:42 | the text wraps around it, and it's
now 300 pixels wide. Pretty simple!
| | 03:46 | Let's go down and add a link.
| | 03:48 | Select this right here, click on the link
button, Link URL; set that to lynda.com.
| | 03:57 | I can change the target to open in
the same window, or in a new window.
| | 04:00 | In this case, I will say new window.
| | 04:03 | Then I will click Insert.
| | 04:10 | Once I have clicked Insert, you will
notice that it's highlighted blue, and
| | 04:13 | underlined, indicating that it's now a link.
| | 04:15 | The appearance of the link on the actual
Web page will be determined by the theme's CSS.
| | 04:20 | Now let's take a look at how we can
utilize something called the more tag, or
| | 04:23 | the read more break, in this case.
| | 04:25 | I will scroll up to the top,
to the first paragraph.
| | 04:30 | After the first paragraph, I will hit
Return, and then click the read more break.
| | 04:37 | Basically what this does is
teases this post on the homepage.
| | 04:41 | So if the user is reading this, they
will see the first paragraph, and then a
| | 04:44 | read more link, indicating that they
need to click through to the actual post
| | 04:47 | page to view the entire post.
| | 04:49 | It's just a way of giving them a little
bit, and making sure they stay on your
| | 04:52 | Web page a little bit longer.
| | 04:53 | Finally, let's check the spelling.
| | 04:56 | If I go into my spellcheck here, I
can check based on different languages.
| | 05:02 | Once I pick the language I want, I
simply hit the checkmark, it goes through my
| | 05:06 | document, and finds any
errors that there might be.
| | 05:08 | You'll notice that an error is
indicated with a red squiggly line.
| | 05:13 | When you click on an item that has a red
squiggly line, it gives you suggestions
| | 05:16 | about what to change it to.
| | 05:18 | You can then choose to ignore the word,
or ignore all, or change it to one of the
| | 05:22 | options that you see here.
| | 05:23 | I will click away from that to cancel,
and let's focus on the right-hand side now.
| | 05:27 | When I'm ready to publish my post, I have
several different options that I can set.
| | 05:31 | I can choose to publish now, add it to
a queue, publish on a certain date, save
| | 05:36 | it as a draft, or mark it as private.
| | 05:39 | In this case, I want to publish it now.
| | 05:40 | So I will select that option.
| | 05:42 | I can also change the post date.
| | 05:44 | Now is selected by default.
| | 05:46 | I could also enter in a date as well.
| | 05:49 | Content source; if I click on this, you
will see that it tells me that this is
| | 05:52 | the page where the content quoted
in the post was originally published.
| | 05:55 | So if you've borrowed from someone, and
posted it into this post, you can quote them here.
| | 06:01 | You can also add post tags.
| | 06:03 | So in this case, there's a lot of stuff
about meat and bacon in this particular
| | 06:07 | post, because I've got it from baconipsum.com.
| | 06:09 | So I will just add a few tags.
| | 06:13 | As you can see, each and every time
I add a tag, followed by a comma, it
| | 06:17 | automatically adds it as a tag in the green box.
| | 06:20 | Finally, I can set a custom post URL.
| | 06:24 | If you already have the option set for
descriptive URLs, you don't necessarily
| | 06:27 | have to put anything here,
because Tumblr will do that for you.
| | 06:30 | But if you want to be descriptive on
your own, you can certainly click, and add
| | 06:34 | your own descriptive URL if you want to.
| | 06:36 | Once you're ready to create your post,
come down to the bottom left-hand corner,
| | 06:40 | and either click Create post, or Preview.
| | 06:43 | In this case, I will preview it first.
| | 06:45 | Clicking Preview opens the new
post up in a new window or tab.
| | 06:49 | Once you do that, you can scroll through
and see everything in your post, and how
| | 06:51 | it looks inside your theme.
| | 06:53 | There's the bold text, my italicized
text is right here, my struck through text
| | 06:58 | is right here at the bottom, there are
my list items, my block quote immediately
| | 07:03 | above the photo of Tank, which is left-
aligned, and 300 pixels wide, and then
| | 07:08 | finally, my link down here at the bottom.
| | 07:11 | Everything seems to be in
place, so I am ready to go.
| | 07:13 | I will close up the preview, and inside of
the Post window, I will click Create post.
| | 07:18 | Once the post is created, you'll be
taken back to your Dashboard, and the post
| | 07:24 | will show here inside of the Dashboard stream.
| | 07:27 | If you want to check and see that
the post made it onto your homepage,
| | 07:31 | visit your Tumblr site.
| | 07:33 | You'll notice here that this post
doesn't have the teaser, read more, that I added.
| | 07:37 | This is controlled by the theme.
| | 07:39 | So this theme doesn't necessarily support
this, so there's nothing I can do about it.
| | 07:43 | It showcases the full post on the page.
| | 07:47 | Any time you want to access a post by
itself, you can click on the title element,
| | 07:51 | and it takes you to that single post page.
| | 07:53 | I will close this up, and
return back to my Dashboard.
| | 07:59 | Now that we've seen how to easily
create text posts here inside of Tumblr, it's
| | 08:02 | time to expand on that, and see some of
the other creative block types that we
| | 08:05 | have available to us.
| | Collapse this transcript |
| Creating photo and photoset posts| 00:00 | One of the most popular post types
for any Tumblr blog are the photo posts.
| | 00:04 | People love to share their photos,
whether it's coming from their digital camera,
| | 00:07 | their cell phone, or just
something funny they found online.
| | 00:10 | People love sharing photos.
| | 00:12 | It's a great way to chronicle
anything you're doing through visual images.
| | 00:15 | Tumblr has a great photo post setup.
| | 00:18 | Let's go ahead and click the photo
post block right here, and get in to
| | 00:22 | start adding some photos.
| | 00:24 | The first post, we are just going to create
a single photo, and that's real easy to do.
| | 00:28 | All you have to do is upload
a photo, as it says right here.
| | 00:30 | You choose the file on your computer,
or you can utilize a URL instead.
| | 00:34 | In this case, I am going to upload my own photo.
| | 00:36 | So I will hit Choose File, go into my
Assets folder, select the pics folder, and
| | 00:42 | in this case I am just going to grab gazebo.jpg.
| | 00:45 | I will hit Open, and that's
automatically going to put that as an upload.
| | 00:50 | It's not going to upload it yet, but
it will automatically add it as soon as
| | 00:54 | I publish the post.
| | 00:55 | I can also add a caption to this.
| | 00:57 | So in this case, this is a picture
of a gazebo taken in Kentucky Lake.
| | 01:00 | So I will type out Kentucky Lake Gazebo.
| | 01:06 | You can also Set a click-through
link for this as well.
| | 01:08 | So if you wanted this photo to be a
link to a Web page, or even a bigger
| | 01:12 | photograph, or something else,
you could set a click-through link.
| | 01:14 | You just simply click this, type
out the URL, and you're ready to go.
| | 01:18 | In this case, I am not
going to do that though,
| | 01:20 | so I just won't put anything in there.
| | 01:22 | I also have the ability to change the
publishing options, like publish now, add
| | 01:26 | to queue, publish on a certain date,
save it as a draft, or mark it as private.
| | 01:31 | In this case, I will just publish it now.
| | 01:33 | As with the text post, you can also
change the post date, add a content source;
| | 01:38 | I will add some tags to this as well.
| | 01:40 | So I will type out KY, for Kentucky,
comma to add the tag, Lakes, Gazebos,
| | 01:48 | Landscapes, Photography.
| | 01:53 | Each time I type out a tag, I am
careful to type out a comma afterwards, so that
| | 01:57 | it completes it as a tag, like you see here.
| | 02:00 | I can also set a custom post URL.
| | 02:02 | Again, if you have descriptive URL turned on
in your settings, there's no need to do this,
| | 02:06 | but if you wanted to, you could go
ahead and type that out yourself.
| | 02:09 | You can also let people photo reply.
| | 02:12 | Allowing people to photo reply means
when they reply to this particular post,
| | 02:16 | they're able to post a photograph as well.
| | 02:18 | So you may post a photo, and say how
would you change it? How would you crop it
| | 02:22 | differently? What adjustments would you
make in Photoshop, or some other editing
| | 02:26 | software? And you can let people photo
reply with their version of the photo.
| | 02:29 | It's a pretty cool way to get a
conversation going with images.
| | 02:32 | Once I've set everything up
in here, I will click Preview.
| | 02:38 | Clicking Preview is automatically
going to open the post in a new window, and
| | 02:41 | allow me to view it.
| | 02:42 | As you can see, it uploads the photo
for me, and puts the caption underneath it.
| | 02:47 | If I happen to click on the photo, it
doesn't take me anywhere. Let's go back.
| | 02:52 | The reason it doesn't take me
anywhere is because I didn't add a URL.
| | 02:56 | So let's go back into the Tumblr
window here, and I'll add a URL.
| | 03:00 | In this case, I will just type
out the URL to my Tumblr blog.
| | 03:05 | Let's close the original
preview, and hit Preview again.
| | 03:11 | This time, when I mouse over the photo,
you'll see that it links to my Tumblr blog.
| | 03:15 | When I click on it, it
takes me right to the homepage.
| | 03:17 | Let's close this up, and go back to the post.
| | 03:19 | I will go ahead and click Create post.
| | 03:23 | You notice when I clicked Create post,
it automatically starts to upload the
| | 03:25 | photo, and then adds it to
my stream in my dashboard.
| | 03:29 | So there you have it; one single photo post.
| | 03:32 | But there were some other options inside of
that photo post window that we didn't explore,
| | 03:36 | so let's go back and take a look at that now.
| | 03:37 | I will click Photo, and
let's upload a couple of photos.
| | 03:42 | I will choose the file, go back into
my Assets folder, select pics, and this
| | 03:48 | time I will grab shoe_tree; open it up.
| | 03:51 | Notice over here on the right I
have two options: Take a photo,
| | 03:54 | or Add another photo.
| | 03:56 | Take a photo allows you to take a
photograph with your webcam, or adding another
| | 04:00 | photo allows you to add a
photo from your Desktop.
| | 04:02 | I will add another photo, and then
you can choose the layout of how these
| | 04:06 | photos will be laid out.
| | 04:08 | This is called a photo set post.
| | 04:10 | In this case, I am going to choose for them
to be laid one on top of the other.
| | 04:13 | Then I will click Choose File, go
back into my pics; select sunrise_charge.
| | 04:21 | Let's add another one.
| | 04:26 | Choose, back into same folder; sunrise_rocks.
| | 04:32 | Now that I have these three
files in place, I can add captions.
| | 04:36 | In this case, I will just add one caption. So I
will say, These are my photos... Pretty cool, huh?
| | 04:46 | You will notice that once I typed a
question mark in the caption box, there's
| | 04:50 | a new option that appears over here
on the right-hand side that says, Let
| | 04:53 | people answer this.
| | 04:54 | Tumblr automatically recognizes when
you type questions, and allows you to add
| | 04:59 | in almost like a poll type
question over here on the right-hand side.
| | 05:02 | So let's say, for instance, you
had said, which photo do you like best?
| | 05:06 | You could let people answer that
question by enabling this option.
| | 05:09 | If you don't want to start that kind of
conversation, just leave the box unchecked.
| | 05:13 | Once you've finished adding everything inside
the post box, go ahead and click Create post.
| | 05:19 | It may take a little longer if you have
multiple photographs, because it has to
| | 05:22 | upload each and every one of them.
| | 05:24 | But once all the photos are
uploaded, you'll see your new photo set.
| | 05:27 | There's my photo set right there.
| | 05:30 | If I go out to my Tumblr site,
you'll see that they're all here.
| | 05:35 | If I click on one of the photos, it
jumps into almost like a slideshow mode.
| | 05:39 | I can click to cycle through each one,
and then click in between, or hit the
| | 05:47 | Escape key to return back.
| | 05:49 | That is a really powerful feature,
and an awesome way for photographers or
| | 05:53 | designers to show off their work.
| | 05:55 | So the next time you want to showcase
something in a slideshow, or anything like
| | 05:58 | that, utilize the photo set
feature here inside of Tumblr.
| | 06:02 | It's a great way to showcase
anything that you've been doing.
| | 06:05 | So again, from your Dashboard, simply
click Photo, choose your first file, and
| | 06:11 | then select Add another photo.
| | 06:13 | You'll then be able to pick the format
of your photos, upload as many as you
| | 06:17 | want, add captions individually, or
just a blanket statement underneath, then
| | 06:21 | you will be able to create your post,
and when you view it, to launch the
| | 06:25 | slideshow, simply click any
one of the photos in the set.
| | 06:29 | To page through, click,
and you're off and running.
| | 06:33 | To cancel out, simply hit Escape.
| | 06:36 | It's that simple to create
dynamic slideshow elements using Tumblr.
| | 06:40 | So now that we've seen how to create
photos, and photo set posts here inside of
| | 06:44 | Tumblr, let's take a different
approach, and take a look at how we can create
| | 06:48 | some quotation posts inside of Tumblr.
| | Collapse this transcript |
| Creating quote posts| 00:00 | What makes Tumblr so unique is the
fact you have all these different content
| | 00:03 | types that you're able to add to it.
| | 00:05 | Some of them are really in-depth, and
really rich, like photos, and video, and
| | 00:09 | audio, but some of them are unique, like
quotations, and that's what we are going
| | 00:13 | to be covering in this movie: the quote feature.
| | 00:16 | In order to access that from your
Dashboard, simply click the Quote block.
| | 00:21 | Once you do that, you will see that the
publishing interface for quotes is very, very simple.
| | 00:25 | You add the quote, you add the source, and
then you create the post; pretty simple.
| | 00:30 | You'll notice that on the quote
itself, you don't get any styling options.
| | 00:34 | That's because the quotes are
styled based upon the theme's appearance.
| | 00:38 | So based upon what theme you have, your
quote will look different each and every time.
| | 00:42 | Underneath, the source: you can style
that, just like you can a regular text post.
| | 00:46 | So in this case, I will type out my
quote, and then I will type out my source.
| | 00:50 | So for the top part here, I will
type out: Stay hungry, Stay foolish.
| | 00:58 | This is, of course, a
famous quote from Steve Jobs.
| | 01:03 | Once I've added in my source, I
can then make changes to that.
| | 01:06 | So if I wanted to bold his name,
I can do so, just like that.
| | 01:10 | On the right-hand side, you have the same
publishing options as you do in any other post.
| | 01:14 | You can choose the time to publish: now,
add to queue, publish on a date, save
| | 01:19 | as draft, or private.
| | 01:21 | You can choose the post date, select a
content source, and add tags as well.
| | 01:29 | Once I've set my tags -- remember, each
tag is separated by comma -- I can also
| | 01:33 | set my post URL, and then
finally, I can Let people photo reply.
| | 01:37 | If I don't want to do that, I
simply leave the box unchecked.
| | 01:40 | If I want to preview my post before
publishing it, I will click the Preview
| | 01:43 | button, and the Preview
button opens it up like this.
| | 01:47 | You will see here that that quotes
usually work best if they are longer, because
| | 01:51 | this short quote kind of runs
together, especially in this theme.
| | 01:54 | But in a lot of themes, quotes are
differentiated by either big quotations, or
| | 01:58 | graphics, or something like that.
| | 02:00 | So only for this theme does it need to be
a little bit longer to kind of stand out,
| | 02:03 | but it still works.
| | 02:05 | I can close this up, and click Create post.
| | 02:11 | Once I create the post, you will
see it pops up here in my stream.
| | 02:14 | Stay hungry, Stay foolish,
and there's my source.
| | 02:17 | My tags show up underneath, just
like they do in any other post.
| | 02:20 | It should be noted that you can click
on any one of these tags at any time to
| | 02:24 | access all of the posts that have
been tagged with that specific tag.
| | 02:27 | I haven't used any tags more than once,
so clicking on these will only show
| | 02:31 | each individual post,
| | 02:32 | but as I start to create more posts,
they will accumulate more tags that are the
| | 02:36 | same, and I will be able to see a list of
all of the posts with that specific tag.
| | 02:40 | Once you've finish adding your quote, you
can access your Tumblr blog to make sure
| | 02:45 | that it shows up properly.
| | 02:47 | As you can see, it looks a little bit
better when it's on the actual site,
| | 02:50 | because it's got some space above and below.
| | 02:53 | So the next time you hear somebody say
something cool, or you know of a specific
| | 02:57 | quote that you want to share with the
world, use the quote feature inside of
| | 03:00 | Tumblr to share it stylishly with the world.
| | Collapse this transcript |
| Creating link posts| 00:00 | Another cool post type
inside of Tumblr are links.
| | 00:03 | You can actually share any type of link
that you want, utilizing the Tumblr link block.
| | 00:08 | In order to do that from your
Dashboard, click on this little icon
| | 00:11 | here, indicated by a www.
| | 00:15 | Once you do that, you'll see that this
interface is even simpler than the quotation one.
| | 00:19 | You get a Title, and a URL field.
| | 00:21 | So in this case, I can add the
title, Let's Google Something. The
| | 00:26 | URL: http://google.com.
| | 00:29 | I can also add a description if I want to.
| | 00:32 | Let's preview it without the description first.
| | 00:36 | When I do that, you'll see it's just
this right here: a text link that says
| | 00:41 | whatever you put in the
Title field; pretty simple.
| | 00:44 | So let's close this, and add a description.
| | 00:50 | In this case, I'll say that This link will
allow you to search for anything on the Web.
| | 00:54 | If I preview it now, you'll
see that it gives the description
| | 00:58 | directly underneath it.
| | 00:59 | This can be a great way to actually
tell somebody where this link is going to
| | 01:03 | take them, because Let's Google
Something isn't exactly descriptive.
| | 01:07 | So giving a description underneath it
is going to help you in the long run,
| | 01:10 | because a lot of people aren't just going
to click on a link; they might not
| | 01:13 | even know that this is a link right off the bat.
| | 01:15 | So giving them a description indicating
what they're supposed to do, or what this
| | 01:19 | is going to do for them, will really be helpful.
| | 01:22 | Let's close this up, and go back.
| | 01:25 | You'll notice here that you get some of
the editing options that you get in the
| | 01:27 | text post window for your description.
| | 01:30 | As a matter of fact, this could be a
full text post underneath this link.
| | 01:34 | So if you wanted to add a link to a
Web site, and then give a review of that
| | 01:37 | Web site underneath in a full blog
post, you could do so; pretty easy.
| | 01:41 | On the right, you have the same publishing
options that we've seen in each of the screens so far.
| | 01:45 | You can publish now, add to queue, publish on
a date, save as draft, or mark it as private.
| | 01:52 | You can choose the post date, set a
content source, add tags, and also
| | 01:57 | set custom post URLs.
| | 02:00 | Let's go ahead and add a few tags here.
| | 02:01 | URL, Google, Links, Search;
| | 02:09 | notice that Search doesn't turn
into a tag until I add the comma.
| | 02:13 | Once I'm finished, I'll hit Create post,
it returns me back to my Dashboard, and
| | 02:19 | my link appears right here, the
description underneath, and the tags underneath.
| | 02:24 | If I access my site, you'll notice that
the link is the first post right here.
| | 02:31 | Clicking on this takes me to google.com.
| | 02:34 | Now let's close this up, and return back.
| | 02:39 | So as you can see, links aren't
exactly the most exciting post type inside of
| | 02:43 | Tumblr, but they are useful.
| | 02:45 | You could actually use this as your own
private bookmarking service if you wanted to;
| | 02:48 | there is no limit to how you can
use Tumblr, or the ways that you can
| | 02:52 | distribute your content.
| | 02:54 | So take some time, and learn about
the link feature. Use it in any way you
| | 02:58 | see fit.
| | Collapse this transcript |
| Creating chat posts| 00:00 | One format of post that's becoming
increasingly popular on Tumblr is the chat log.
| | 00:05 | Everybody's had that chat with
somebody, where it's just been absolutely
| | 00:09 | hilarious, and you want to
share it with the world,
| | 00:11 | and the chat posts here inside
of Tumblr makes that a reality.
| | 00:14 | If you've ever seen a site like
clientsfromhell.net, this is the place where
| | 00:18 | they showcase awesome chat logs between
designers and clients, and they use the
| | 00:22 | chat posting format of Tumblr to do this.
| | 00:25 | Let's explore that now in this movie.
| | 00:27 | I'll click on the Chat block right here,
and that takes me to Add a Chat Post.
| | 00:33 | I can add a Title, though it's optional, and
then underneath, I get to add the Dialogue.
| | 00:38 | So in this case, I'll just call
this A Funny Chat, and then I can add
| | 00:44 | dialog underneath it.
| | 00:46 | So I can say, Client:
| | 00:50 | Do you create Web pages? Designer:
| | 00:56 | Yes, do you need one? Client:
| | 01:02 | Sure do, but I need it to run in the cloud.
| | 01:08 | This is something a lot of people
ask for; I don't know why. Designer:
| | 01:12 | Sure, no problem. Client:
| | 01:16 | Oh, and can you do that for free?
| | 01:24 | So there you go. You can either copy
and paste a dialogue directly in here, or
| | 01:28 | create one, just like this.
| | 01:29 | Once you've created your dialogue, you
can preview it, and it looks like this.
| | 01:34 | You'll notice that Tumblr automatically
separates it out, bolding the Client and
| | 01:39 | the Designer each and every time.
| | 01:41 | It does this by seeing the
first word, and a colon,
| | 01:45 | and then determining what you say after it.
| | 01:47 | The title element goes at the top, and
then everything is separated underneath.
| | 01:51 | Pretty quick, and pretty easy.
| | 01:52 | I'll close this up.
| | 01:54 | You'll notice you don't get any
formatting options here; that's because the
| | 01:57 | formatting options are
completely controlled by the theme.
| | 02:00 | Publishing options on the right remain
the same: add to queue, publish on, save
| | 02:05 | as draft, private, post date,
content source, and tags.
| | 02:13 | Remember, each tag separated by a comma.
| | 02:16 | I'll actually add another tag that
I've already used before: Awesomeness.
| | 02:22 | Now I'll click Create post.
| | 02:25 | Once I've created the post, you'll
notice that the chat shows up in my stream.
| | 02:29 | The title element is at the top, the
conversation is in the middle, and the
| | 02:33 | tags are at the bottom.
| | 02:34 | Remember, I said earlier that I was
using a tag that I had already used before;
| | 02:38 | in this case, it's Awesomeness.
| | 02:40 | If I were to click on this tag, it
would automatically take me to an aggregate
| | 02:43 | page, showing all of the posts that
have been tagged with Awesomeness.
| | 02:47 | The interesting part about this is,
Tumblr aggregates all of the posts that
| | 02:51 | are tagged with the word Awesomeness,
not just the ones that I've created.
| | 02:54 | So if I happen to click on this, and
somebody else has used that tag before, I'm
| | 02:58 | going to see their posts as well,
| | 02:59 | but it's a cool way to see exactly
where your content fits in among other tags.
| | 03:04 | So the next time that you have a funny
conversation, or you just want showcase
| | 03:08 | a conversation that you've had with
somebody to create a record of it,
| | 03:11 | utilize the Chat block here inside
of Tumblr, and create your own unique
| | 03:14 | conversational showcase.
| | Collapse this transcript |
| Creating audio posts| 00:00 | Now we are getting into more of the rich
media post that exists inside of Tumblr.
| | 00:04 | In this movie, I'll be exploring how
to create audio posts inside of Tumblr.
| | 00:08 | This is a great way to share anything
from sound clips, to songs, MP3s; anything
| | 00:13 | like that that you want to showcase
on your Web site that is audio based.
| | 00:16 | In order to create one of these, you
have to click on the Audio icon right here,
| | 00:21 | and it takes you to create an audio post.
| | 00:23 | You will notice when you get to the
audio post box that you have three different
| | 00:26 | options for adding audio to your post.
| | 00:28 | The first one is Upload, and this is
the one that we are going to use, because
| | 00:31 | you get to upload an audio file directly
from your Desktop to Tumblr, and Tumblr
| | 00:35 | will actually host this for you.
| | 00:37 | You can also search for an MP3 on the Web.
| | 00:40 | This is powered by SoundCloud, and if
you have never used the SoundCloud service,
| | 00:43 | it's a great way to find
different sound files that you might need.
| | 00:47 | If you click on this link here, it
will take you to the SoundCloud Web site.
| | 00:50 | Searching for an MP3 here just returns
some results that you can in use in your post.
| | 00:55 | You can also utilize an external source.
| | 00:57 | This URL must point directly to
an MP3 file, or a SoundCloud URL.
| | 01:02 | The MP3 file must be hosted somewhere else;
| | 01:04 | it cannot be hosted by Tumblr
simply by entering in a URL.
| | 01:08 | So therefore, the MP3 file that you name here
will be streamed from whatever URL you have.
| | 01:13 | So if you are using it on your own
hosting service, make sure you have got some
| | 01:16 | bandwidth there, so that
people won't have delays.
| | 01:19 | You will notice here that they tell
you this is great for podcasts, and it is.
| | 01:22 | If you use some sort of podcast
hosting service that has great bandwidth for
| | 01:26 | downloads, put it in here.
| | 01:27 | You can even directly link to a file that's
uploaded to SoundCloud, or on Amazon S3 as well.
| | 01:33 | Let's go back to the Upload section, and
let's choose a file. I will go into my
| | 01:39 | Assets folder, and I will chose this MP3
file called Easy For You, and hit Open.
| | 01:47 | Once I hit open, it's added here, and it
will be uploaded as soon as I publish the post.
| | 01:52 | The Description is just like anything else:
| | 01:54 | it's a text post. You get to write a
full blog post, or just a simple description,
| | 01:58 | depending on your needs.
| | 02:00 | In this case, I am just going to
call this, A really cool audio file.
| | 02:05 | You have the same editing options
that you do for any text blog post here.
| | 02:10 | Underneath, you will have to check this
box indicating that you have permission
| | 02:13 | to let Tumblr use this
under their Terms of Service.
| | 02:16 | If you are not sure, go ahead and
click on the Terms of Service, and that will
| | 02:20 | open those for you so you can read all
about the different types of audio files
| | 02:24 | that are acceptable, and the
usage guidelines that Tumblr uses.
| | 02:28 | In this case, I am
pretty sure I have permission,
| | 02:30 | so I will go ahead and click. It
turns green, and I am ready to go.
| | 02:34 | There is no preview for this.
| | 02:36 | You have to create the post
in order for this to work,
| | 02:39 | but I still have a couple of
options I need to nail down first.
| | 02:41 | When do I want to publish it?
| | 02:43 | In this case, I will select publish now.
| | 02:45 | I could also add it to the queue,
publish on a date, save it as a draft, or
| | 02:50 | mark it as private. My post date: now.
| | 02:55 | Content source; if I got this from
somewhere else, I can go ahead and add that
| | 02:58 | as a source there. And then tags;
| | 03:00 | I will add this in: audio, MP3, media.
| | 03:06 | Remember, separate your tags with commas.
| | 03:10 | You can also set a custom post URL. I
won't do that in this case though, and then
| | 03:14 | I will click Create post.
| | 03:17 | Once I have clicked Create post, it will
automatically upload the file for me. It
| | 03:20 | will also grab any type of media
that's associated with the audio file, like
| | 03:24 | album artwork, and display it there as well.
| | 03:27 | Depending on your theme, it may or
may not show this image, and it may also
| | 03:31 | display it in different ways.
| | 03:33 | Again, that's totally dependent on the theme.
| | 03:35 | If I go to my site, you'll notice here that
the audio file is present; the album art is not.
| | 03:41 | If I click the Play button, (Music Playing)
| | 03:51 | the audio file plays.
| | 03:53 | Remember, this has to be an MP3 file
in order for it to work, or it has to be
| | 03:57 | hosted by SoundCloud, or on your own server.
| | 04:00 | Once I have got that, I can close it
up, and return back to my Dashboard.
| | 04:03 | Once I am back in the Dashboard, I
can choose to either play the audio file
| | 04:07 | again, edit it, delete it, or
anything else that I need to do.
| | 04:11 | Now that you have a better idea of how
to start working with rich media like
| | 04:15 | audio, let's take that one step
further, and go even deeper with video posts.
| | Collapse this transcript |
| Creating video posts| 00:00 | The last post type that we are going to cover
in this Tumblr series is the video post type.
| | 00:04 | I have saved the best for
last. I am a video guy.
| | 00:07 | This is what I do.
| | 00:08 | It's what I love.
| | 00:09 | And Tumblr has a great system
for showcasing and sharing video.
| | 00:12 | From your Tumblr Dashboard, simply
access the video icon here on the right-hand
| | 00:17 | side to access the video block feature.
| | 00:19 | Once you get inside of this section, you
will see that it tells you to add a video.
| | 00:22 | You have two options for adding
a video here inside of Tumblr.
| | 00:26 | You can embed a video, utilizing a URL
from a site like YouTube, or Vimeo. You can
| | 00:31 | also upload a video.
| | 00:33 | Let's go ahead and take a look
at how to embed a video first.
| | 00:36 | Let's go back over to YouTube, and on
the YouTube page, a lot of folks will go
| | 00:40 | and try to get the embed
code for a YouTube video.
| | 00:43 | That's not necessary with Tumblr.
| | 00:44 | All you need once you have accessed
the YouTube video itself is this URL.
| | 00:50 | You can copy that to your clipboard, and go
back over to Tumblr, and simply paste it in.
| | 00:55 | Once you paste it in, you are ready to go.
| | 00:58 | Now, go back over, and I will just
grab the name of the video, and I will put
| | 01:04 | that in as a caption.
| | 01:06 | You notice it copied over the style as well.
| | 01:10 | Once I have got that pasted in,
I can set my publishing options.
| | 01:13 | I will select to publish it
now; post date set to now.
| | 01:17 | There is no content source --
| | 01:19 | well, it's from YouTube, so I could
technically go back, and copy this, and paste
| | 01:26 | it in here as the source URL.
| | 01:27 | I will add some tags: video,
California, podcast, YouTube.
| | 01:39 | I can preview it, and when I preview it,
I can play the video. (Video Playing)
| | 01:51 | You will see there that my video
caption is right underneath it.
| | 01:56 | If I think everything looks
good, I can close that up.
| | 01:59 | Let's say I wanted to change
the description a little bit.
| | 02:02 | Come back over that, just like that.
| | 02:07 | If I want to make any changes to the
format, I can select that, and change the
| | 02:11 | formatting options here.
| | 02:12 | Now I am ready to complete the post,
| | 02:14 | so I will hit Create post.
| | 02:19 | Now you can see that I have my video
post here, my description here, and all
| | 02:24 | my tags underneath.
| | 02:26 | If I access my Tumblr site, there is
the video in all of its glory right
| | 02:32 | there on the homepage.
| | 02:34 | You will also see that
the source is youtube.com.
| | 02:37 | Clicking this takes you directly to the page
where the video is housed. (Video Playing)
| | 02:44 | Let's close this up.
| | 02:45 | We can also close up YouTube, and now
let's take a look at how we can upload our
| | 02:50 | own videos to Tumblr.
| | 02:52 | I will go back to video.
| | 02:56 | In this case, instead of
embedding a video, I will click Upload.
| | 03:00 | Once you have chosen to upload your own
video, there are a couple of things you
| | 03:03 | need to pay attention to.
| | 03:04 | First of all, you are only able to
upload five minutes of video per day.
| | 03:08 | That's not a lot, but at least it's something.
| | 03:10 | You will also be limited
to 100 megabytes per file,
| | 03:15 | so any video that you upload
has to be under 100 megabytes.
| | 03:19 | In order to upload your
own video, click Choose File.
| | 03:21 | I will navigate to my Exercise Files, find my
Assets, and I will find this intro video here.
| | 03:29 | Once I hit Open, it's going to add the video.
| | 03:34 | I can add a caption.
| | 03:36 | This is my video project.
| | 03:38 | Then I have to tell Tumblr that
I have permission to upload this.
| | 03:42 | I set all of my options over here on
the right: publish now, post date is
| | 03:46 | now, my content source, I don't have
one for this one, so I will leave that
| | 03:50 | blank. And now tags;
| | 03:53 | I'll have flowers, video, and awesomeness.
| | 03:56 | Now I am ready to create the post.
| | 04:00 | Once I create the post,
it's going to upload the video.
| | 04:03 | It may take a while, depending on your
internet connection, and how big your file is.
| | 04:08 | Once the file has been uploaded, you will be
taken here, to the processing video screen.
| | 04:12 | This indicates that Tumblr is now
processing the video, and putting it into a
| | 04:16 | format that is able to be displayed on the Web.
| | 04:20 | Once your video is finished processing, you
will be taken back here to your Dashboard.
| | 04:24 | On the Dashboard, you will see the
video that you have uploaded in a
| | 04:26 | Web friendly format.
| | 04:28 | You can then play the video directly from here;
| | 04:30 | also view your
description, and your tags beneath.
| | 04:33 | If you want to see this video on
your Tumblr site, simply type in the
| | 04:37 | address, and access it.
| | 04:38 | It should be right there on the homepage.
| | 04:41 | Clicking the Play button
automatically plays it. (Video Playing)
| | 04:52 | Clicking it again stops the video.
| | 04:55 | You can see that it's a progressive download,
so it's not streaming from Tumblr service,
| | 04:58 | so everyone will have to download this
each and every time they want to watch it.
| | 05:03 | Once you're finished viewing your video, you
can close that, and return back to your Dashboard.
| | 05:08 | So as you can see, it's a little bit
easier to just embed a video from YouTube,
| | 05:12 | or Vimeo, or some other site, but if you
don't have that option available to you,
| | 05:16 | or you just have the raw video sitting
on your Desktop, you can also upload it
| | 05:19 | directly to Tumblr as well.
| | 05:21 | It's a great way to showcase any type of
video project that you might be working
| | 05:24 | on, or to showcase that dancing cat
video that you found to be hilarious.
| | 05:29 | It's all up to you, but Tumblr
makes it very easy to accomplish.
| | Collapse this transcript |
| Saving posts as drafts| 00:00 | There may come a time, as you start to
work inside of Tumblr, where you find
| | 00:03 | yourself in either a production
environment, or you're sharing the duties of
| | 00:06 | publishing things with someone else.
| | 00:08 | In any case, there may come a time
when you need to save something as a draft
| | 00:12 | to have it reviewed by an editor, or simply to
save it for later to publish at a later date.
| | 00:17 | In this case, you are going to utilize
something called saving a post as a draft.
| | 00:21 | It's pretty easy to do, and I am
going to show you how to do it right now.
| | 00:24 | So the first thing I am going to do
is go over to text post, just to create
| | 00:28 | a simple blog post.
| | 00:29 | In this case, I will call it My Saved Draft.
| | 00:33 | Once I do that, I can then add some
text underneath it. I will go grab some
| | 00:37 | filler text from Bacon Ipsum. Just
select this text, copy it, and paste it in.
| | 00:48 | Pretty simple. As I said before, you
can paste this in from Microsoft Word,
| | 00:52 | InDesign, or any text editor that you might have.
| | 00:56 | Once I'm done, I can make any
changes to the text post that I need to.
| | 00:59 | But the only thing I'm worried about
is right up here at the top right corner.
| | 01:03 | Instead of saying publish now, as I've
been doing throughout this series, I am
| | 01:06 | going to choose save as draft.
| | 01:10 | I can also add a status message if I want to.
| | 01:13 | In this case, I'll say Waiting for Review.
| | 01:15 | I can add tags to it, or anything else I
need to, but for now, I'm not going to
| | 01:20 | do any of that. I'll just click Save draft.
| | 01:27 | Once I click Save draft, you are
going to notice that it doesn't show up in
| | 01:30 | my stream. That's because it's been saved
as a draf,t and not published to my timeline.
| | 01:36 | If I go up here to my blog link, I
can go down to where it says Drafts on the
| | 01:42 | right-hand side, and there is my draft.
| | 01:45 | If I want to publish it, I can hit Publish,
put it in the queue, edit it, or delete it.
| | 01:52 | In this case, I'll edit the post,
change it to My Cool Post, set it to publish
| | 02:02 | now, and hit Save post.
| | 02:07 | Once I do that, I have no more drafts.
| | 02:09 | If I go back to my Dashboard, there is
My Cool Post, right there in my stream.
| | 02:15 | So the next time you have something
that you're not sure whether or not you
| | 02:18 | should publish, or if you're having to
save it, so that your boss can review it,
| | 02:22 | or something like that, utilize the save
as draft feature here inside of Tumblr
| | 02:26 | to make it that much easier.
| | Collapse this transcript |
| Working with queued posts| 00:00 | Another way of putting posts into sort
of a holding pattern inside of Tumblr is
| | 00:04 | to utilize the queued post feature.
| | 00:07 | That's what we are going to
be exploring in this movie.
| | 00:09 | So I will go ahead and create a new post.
| | 00:11 | In this case, I will create a photo post.
| | 00:12 | I will choose a file to upload.
| | 00:15 | I am going to my Assets
folder, select the pics folder,
| | 00:19 | and in this case, I'm just going to
go ahead and pick the photo of my dog,
| | 00:22 | Tank, and hit Open.
| | 00:24 | Once I have got that in, type out a caption:
| | 00:28 | This is Tank... He's a good boy. And he is.
| | 00:31 | Up here in the top right-hand corner, I
am going to select to add it to the queue.
| | 00:36 | Then I am going to go in and do tags.
| | 00:40 | So I will add in dog.
| | 00:45 | I can also set a click-through link.
| | 00:46 | I won't do that in this case,
but now I can queue the post.
| | 00:51 | Once I queue the post, it's
automatically going to upload the photo for me.
| | 00:54 | When it returns me back to the Dashboard,
you will notice that the post does not
| | 00:58 | show up in my stream.
| | 00:59 | That's because it's specific to my blog,
and it has been queued, which means it's
| | 01:04 | not able to be published yet.
| | 01:06 | So let's go back to my blog link.
| | 01:08 | You will notice when I click on that, I
get my new sidebar over here, and in the
| | 01:13 | Queue, there is 1 post.
| | 01:16 | If I click on that, I can set
the different queue options.
| | 01:21 | So in this case, the queue lets you stagger
posts over a period of hours or days.
| | 01:25 | So basically, what you can do is create
several different posts at one time, and
| | 01:30 | then queue them to be
released at different times.
| | 01:32 | That way, it looks like you are
publishing all the time, when in fact you have
| | 01:35 | only been in the publishing window
once this week, or something like that.
| | 01:38 | It's a great way to make sure that you
have constant content coming out of your
| | 01:42 | site with minimal effort.
| | 01:44 | So in this case, it's set to automatically
publish a queued post two times a day,
| | 01:49 | between 12 am and 12 am.
| | 01:52 | So it will stagger any posts
I have in here accordingly.
| | 01:55 | I can change this to say, automatically
publish a queued post 4 times daily,
| | 02:02 | between the hours of 8 am and,
let's say, 9 pm.
| | 02:08 | Any time I make changes to this,
I can hit Save.
| | 02:12 | Now it's up to Tumblr to
make these posts active.
| | 02:15 | You can see here that this is going
to be released on Tuesday at 1:12 pm.
| | 02:20 | Let's go ahead and add another post to the
queue, and see when that's going to be released.
| | 02:23 | In this case, I will do another photo post.
| | 02:28 | Choose my file, set it up;
do the shoe_tree again.
| | 02:40 | Say, This is a photo of the Shoe Tree.
| | 02:44 | I'm going to add it to the queue.
| | 02:46 | If I want to set some
tags, I can. I won't now;
| | 02:48 | I will just go ahead and hit Queue post.
| | 02:50 | It's going to upload the photo,
and add the post to my queue.
| | 02:54 | You will see here, I now
have 2 posts in my queue.
| | 02:57 | If I click on that, you will see here,
this is to be released Tuesday at 1:12;
| | 03:03 | this is to be released Tuesday at 3:48 pm.
| | 03:06 | So as I add things to this, it
automatically staggers them to be released at
| | 03:11 | certain times, and certain days.
| | 03:14 | If you look right here on this little
arrow, when I mouse over it, it turns
| | 03:17 | into a little crosshair.
| | 03:18 | Clicking and dragging this post
makes it the one to be first published.
| | 03:23 | Clicking and dragging it beneath the other
post makes sure it's the second one published.
| | 03:28 | So you can actually rearrange the
different posts, and their orders, simply by
| | 03:32 | clicking and dragging them here.
| | 03:34 | You can also come in and just
publish them any time you want.
| | 03:38 | You can also edit them, and delete them.
| | 03:40 | But as long as you have these posts
queued, there will be a constant stream of
| | 03:43 | content coming out of your Tumblr site,
even when you are not even logged in.
| | 03:48 | That's the power of utilizing the
queued post system here inside of Tumblr.
| | 03:52 | So if you want to make sure that your
site looks active, even when you are not,
| | 03:56 | check this feature out.
| | 03:57 | You'll be glad you did.
| | Collapse this transcript |
| Editing multiple posts at once| 00:00 | There may come a time as you start
working in Tumblr that you find yourself
| | 00:03 | needing to make an
adjustment to multiple posts at once.
| | 00:06 | In this movie, I am going to show you
exactly how to do that, using the multiple
| | 00:10 | post editing system.
| | 00:12 | The first thing you will need to do is
to be logged into your Dashboard, and then
| | 00:14 | go to the blog link over
here on the top right corner.
| | 00:18 | Once you do that, you'll be able to go
down to the bottom, and there will be an
| | 00:21 | icon that says Launch Mass Post Editor.
| | 00:24 | Once you click on that, it's going to
launch a completely different looking system.
| | 00:28 | This is going to show you each and
every post that you've published so far.
| | 00:32 | You can select a post by clicking on it.
| | 00:36 | Once you have your posts selected, you can do
things like add tags, edit tags, or delete them.
| | 00:43 | There is not a whole lot else you
can do in here, simply because all of
| | 00:46 | these different post types don't allow for
the specific editing of things like content.
| | 00:50 | But in this case, if I wanted to add
tags to all of these, I could do so.
| | 00:54 | I can also unselect them.
| | 00:56 | So let's say I wanted to make
a change to the photo posts,
| | 01:00 | so this post here, and this post here.
| | 01:02 | I will click the Add Tags
button to add some tags to them.
| | 01:07 | So in this case, I know they were both taken
in my hometown, so I will type out hometown.
| | 01:13 | I know they were both taken around
dusk or sunset, so I will type out sunset,
| | 01:18 | and I know they were both taken in the winter.
| | 01:20 | Once I have that done, I'll click Add Tags.
| | 01:25 | It adds those tags to both of those posts.
| | 01:27 | Now you can see this one has 8 tags, as
opposed to the 5 it had before, and this
| | 01:32 | one now has 3, which before it had none.
| | 01:34 | I can unselect them like this, and then I
can select any other posts that I want.
| | 01:38 | Let's say that I want to delete some posts.
| | 01:40 | For instance, maybe I want to delete My
Cool Post, as well as Let's Google Something.
| | 01:46 | If I click the Delete button, it comes
up and asks me if I'm sure that I want to
| | 01:51 | delete these selected posts.
| | 01:52 | Hitting OK will remove them permanently
from the system. Hitting Cancel returns
| | 01:57 | me right back to the system.
| | 01:58 | I will hit unselect.
| | 02:00 | Now, if you've been using Tumblr for
quite a while, you may need to use this
| | 02:03 | menu on the top right corner.
| | 02:05 | This allows you to jump to different
months that you've been publishing in.
| | 02:08 | So you can go to February, March, April,
May; any month that you had published
| | 02:12 | post in, it will be highlighted,
and you will be able to click on it.
| | 02:15 | In this case, I have got
a brand new Tumblr site,
| | 02:17 | so I have only got this one
month able to be highlighted here.
| | 02:21 | If you want to close this box,
simply click away from it.
| | 02:24 | Any time you want to exit this system,
simply click on the blog link right here,
| | 02:29 | and it takes you right
back to your Dashboard.
| | 02:31 | So now you see how easy it is to edit
multiple posts at a time in the Tumblr
| | 02:36 | system, utilizing the Mass Post Editing System.
| | 02:39 | So the next time you have multiple
photos that you need to edit, multiple
| | 02:43 | blog posts, or anything else, you can
do that inside of that system quickly
| | 02:47 | and easily, without having to
launch each individual post, making the
| | 02:50 | changes, and saving them.
| | 02:52 | This is a great way to save
yourself some serious time going forward.
| | Collapse this transcript |
| Publishing remotely via email| 00:00 | One of the greatest things about
Tumblr is the ability to post to the system
| | 00:04 | via a remote location, whether that be
through an application, or even through e-mail.
| | 00:09 | In this movie, we'll be exploring how to
post directly to Tumblr from your e-mail account.
| | 00:13 | It's really easy.
| | 00:15 | First thing I'm going to do is be logged
into my Dashboard, and click on the blog
| | 00:18 | link right here: Tumblin' With Justin.
| | 00:21 | Once I click on that, I'll go into my
Settings, here on the right-hand side.
| | 00:26 | Inside of the Settings, I'll scroll down
until I find a section called Post by Email.
| | 00:32 | Inside of the Post by Email section,
you'll see a unique e-mail address that's
| | 00:36 | specific to your Tumblr site.
| | 00:39 | All you have to do is select this, and
copy it, and then add that to your contacts
| | 00:42 | on your laptop, your phone,
your tablet; whatever it might be.
| | 00:47 | Once you have this e-mail address
stored, you can then send an e-mail to this
| | 00:51 | address any time containing
text, photos, MP3s, or videos.
| | 00:56 | When you send an e-mail to that address,
it automatically determines what type of
| | 01:00 | post it is, and posts it to your Tumblr site.
| | 01:03 | If you click this Learn More link right
here, it automatically loads the Mobile
| | 01:06 | + Email Publishing documentation.
| | 01:09 | You can see here that it tells you, you
can format your posts using Markdown when
| | 01:12 | you're e-mailing them.
| | 01:13 | If you don't know what Markdown is,
click this link, and it will take you to an
| | 01:17 | explanation of exactly how to use it
to format various things in your blog.
| | 01:21 | You can also see information on
troubleshooting your e-mail publishing if
| | 01:24 | something doesn't work correctly.
| | 01:26 | But basically, here's how you set it up.
| | 01:28 | You send an e-mail to the e-mail
address I told you about before. Specify a
| | 01:33 | subject; that's your title element, and
then anything underneath that in the body
| | 01:37 | of e-mail becomes the post.
| | 01:39 | So for text posts, you add a title in
the Subject line, and anything that goes
| | 01:43 | beneath it is part of the content.
| | 01:46 | For photo posts, your subject is your
title or your caption, and the photo goes
| | 01:51 | directly into the body of the e-mail.
| | 01:53 | Photosets; you simply add a caption,
and then insert multiple photographs into
| | 01:59 | the body of the e-mail.
| | 02:01 | Link posts; same thing applies.
| | 02:03 | The Subject is your title, and the
link goes into the body of the e-mail.
| | 02:07 | Quotes; there's no Subject line here.
| | 02:10 | You simply add the quote with quotation
marks around it, and then add a dash,
| | 02:14 | and the source underneath.
| | 02:17 | Chat posts; very simple.
| | 02:19 | Add your Subject line for your title,
and then format it the exact same way you
| | 02:23 | do any other chat post.
| | 02:24 | The name, colon, whatever they
said, the person replying, colon,
| | 02:29 | and whatever they said.
| | 02:32 | Audio posts; the title goes in the
Subject line, and then you simply attach the MP3.
| | 02:38 | A post with tags; you simply do the post
however you want it to be, and then
| | 02:45 | underneath it, you add in the
hashtags, just like you would on Twitter.
| | 02:50 | Finally, at the bottom,
there's a Troubleshooting section.
| | 02:52 | If you find that you're having trouble
publishing via e-mail, make sure you read
| | 02:56 | all of this information, as well
as studying the post types above.
| | 03:00 | Once you finish reading about that, you
can go back, set up this e-mail address,
| | 03:04 | and start posting anywhere,
anytime you want, via any device you want.
| | 03:09 | That's the beauty of utilizing
e-mail publishing here inside of Tumblr.
| | Collapse this transcript |
| Publishing on a mobile device| 00:00 | There's no doubt that Tumblr is an
awesome Desktop application, but you can also
| | 00:04 | utilize Tumblr when you're on the go.
| | 00:06 | As we've already discussed, you can
publish directly to Tumblr via your e-mail,
| | 00:09 | but what you may not know is that
you can also publish to Tumblr via your
| | 00:13 | smartphone, or tablet device as well.
| | 00:15 | Tumblr is optimized for mobile
publishing, by going to tumblr.com on your
| | 00:20 | smartphone or tablet device.
| | 00:22 | You simply enter in the e-mail address
and password that you registered with,
| | 00:29 | click Log in, and it automatically
logs you in to your Tumblr Dashboard.
| | 00:35 | From here, you're able to create full pieces
of content to post directly to your Tumblr site.
| | 00:39 | For instance, if I come up here and select
New Post, I can add a Title, and the Body text.
| | 00:51 | I can also change the options, such as my
publish settings, whether or not I want
| | 01:07 | to add it to the queue,
save it as a draft, etcetera.
| | 01:10 | I can also add a content
source, and add tags as well.
| | 01:17 | Once I'm ready, I'll click Post.
| | 01:22 | This will automatically publish this
to my Tumblr site, and if I go back to
| | 01:25 | the internet, you'll see that my mobile
post now shows up right there on my blog site;
| | 01:30 | pretty quick, and pretty easy.
| | 01:32 | If you're using a smartphone, such as an
iPhone, BlackBerry, or Android device,
| | 01:37 | you can actually go to www.tumblr.com/
goodies, and find the links for individual
| | 01:43 | applications for those respective platforms.
| | 01:45 | So you can post directly from iOS,
BlackBerry OS, and Android as well.
| | 01:50 | These are special apps that link
directly to your Tumblr account, and allow you
| | 01:54 | to publish on the go.
| | 01:55 | There's a lot of stuff here on the Goodies page.
| | 01:58 | You can see here that there's a Backup
section for downloading a backup of your
| | 02:01 | Tumblr blog to your Desktop.
| | 02:02 | There's also a Facebook application, and
a Publish to Twitter application as well.
| | 02:08 | Any time you want to add a little bit
of something extra, go check out the
| | 02:11 | Goodies page here on Tumblr.
| | 02:12 | But the main focus of this page, of
course, are the mobile applications.
| | 02:16 | So if you find yourself on the go, and
needing to post something to your Tumblr
| | 02:19 | site, utilize any one of these
applications on your smartphone or tablet device,
| | 02:23 | or simply access the Tumblr
Web site via your mobile browser.
| | 02:27 | It's the quickest and easiest way to
share your content, no matter where you are.
| | Collapse this transcript |
|
|
4. Working with PagesTumblr pages explained| 00:00 | When I first started using Tumblr
several years ago, one of the things that
| | 00:03 | I found extremely limiting was the
fact that you couldn't create your own
| | 00:07 | pages inside of Tumblr.
| | 00:09 | You could create posts all day long, but
you couldn't have something like an about
| | 00:12 | me page, or a portfolio page, or a contact page.
| | 00:15 | It just simply wasn't available to you.
| | 00:17 | Now you actually have the ability,
although somewhat limited, to create your own
| | 00:21 | pages inside of Tumblr,
| | 00:23 | and in this movie, I'm going to
explain to you exactly how you go about doing
| | 00:27 | that, and exactly what these
things are, and how they function.
| | 00:31 | So what we're looking at right here
is a sample page that I've created.
| | 00:34 | As you can see, pages adopt the overall
look and feel of a post inside of Tumblr.
| | 00:40 | There's nothing special about them, unless
the theme dictates that they look different.
| | 00:45 | In this theme, there is no
specific template for pages.
| | 00:48 | It just kind of follows the
overall look and feel of the theme.
| | 00:51 | And that's fine,
depending on what you need to do.
| | 00:54 | But if you wanted to get outside the
box a little bit, you're going to have to
| | 00:56 | know some serious stuff, like HTML and CSS.
| | 00:59 | I'll cover that a little bit later, though.
| | 01:01 | Let's close this up, and
look at this other one.
| | 01:03 | This is an about me page that just
contains my short little bio here.
| | 01:07 | And so this is the exact
same layout as the other page.
| | 01:11 | It doesn't look quite as nice,
because there's not as much content here.
| | 01:13 | It would be nice, to me, if I could fix
this, where the content maybe was on one
| | 01:17 | side, the heading on the other, maybe a
picture, maybe a contact form, a space to
| | 01:21 | put social media icons; anything but this.
| | 01:25 | It's a little bit limiting in my opinion.
| | 01:28 | So let's take a look at how we can
actually create one of these pages.
| | 01:33 | From your Tumblr Dashboard, it's a
little bit of a roundabout to find exactly
| | 01:37 | where the pages are.
| | 01:38 | You have to go up and click on the
blog link; in this case, Tumblin' with
| | 01:41 | Justin. You go down to Customize appearance.
| | 01:44 | Once you're inside of the Customize
appearance box, it looks as if you're going
| | 01:48 | to change your theme, but in fact,
you're going to scroll down on the left-hand
| | 01:52 | side until you see the little
tab at the bottom that says Pages.
| | 01:55 | When you expand this out, you're
going to see a list of any pages that are
| | 01:59 | currently a part of your theme.
| | 02:00 | In this case, I have an
about me page, and a sample page.
| | 02:04 | Any time you want to get rid of a page
here, you simply click the X next to it,
| | 02:08 | it'll come up with a warning saying,
are you sure you want to delete this?
| | 02:12 | Hit OK to commit; Cancel to escape.
| | 02:14 | You can also utilize these little
icons here to reorder the pages.
| | 02:19 | This determines the order in which they're
lined up in the navigation menu in your theme.
| | 02:25 | In this case, I'll leave them just like
this: about me on top; sample on the bottom.
| | 02:30 | If I want to edit a page, I
click the Edit button right here.
| | 02:33 | Clicking Edit opens up the page, where
I can change the URL, the page title, I can
| | 02:38 | choose whether or not to show the
link to this page, and I can also add or
| | 02:42 | subtract content from here.
| | 02:44 | Let's cancel out of this,
and create our own page.
| | 02:47 | At the bottom, there's a
link that says Add a page.
| | 02:49 | When I click this, it
automatically launches the new page window.
| | 02:52 | I'll move this over, so you can see it.
| | 02:55 | You have the option at the top to
choose between Standard Layout, Custom
| | 02:58 | Layout, or Redirect.
| | 03:00 | Standard Layout is just going to
follow the standard layout of your theme.
| | 03:03 | If your theme supports multiple
page types, they'll be listed here.
| | 03:06 | If not, you'll only get these three options.
| | 03:09 | If you choose Custom Layout, you get a
blank slate, basically allowing you to
| | 03:13 | dictate, via HTML and CSS,
exactly what your page looks like.
| | 03:18 | If you choose Redirect, basically what
you're going to do here is redirect this
| | 03:22 | page URL to another URL.
| | 03:24 | You can also show the link to that page.
| | 03:26 | You can see that redirects make it
possible to maintain your legacy URLs when
| | 03:30 | moving a domain name to Tumblr.
Let me give you examples here.
| | 03:34 | So for instance, if you wanted to
utilize something like something.com/book, and
| | 03:39 | have it point to an Amazon
URL, you could utilize that.
| | 03:43 | In this case, I'm going
to choose Standard Layout.
| | 03:46 | My Page URL: so this is whatever my
Tumblr Web site address is, Slash something.
| | 03:53 | So in this case, let's say I want
to create a page called contact.
| | 03:57 | Page Title is Contact Me.
| | 03:59 | Do I want to show a link
to this page? You bet I do.
| | 04:03 | Now I can just enter in some information here.
| | 04:06 | So I can enter in my name, my
theoretical address, and any other type of
| | 04:18 | information that I want to put in here.
| | 04:20 | Now, I'm not limited to just text.
| | 04:22 | I can insert images, I can
insert HTML, I can even use links, and
| | 04:28 | formatting options as well.
| | 04:30 | In this case, I just want this basic
layout here, and I'll click Create page.
| | 04:34 | When I click Create page, you'll
notice that it appears over here on
| | 04:36 | the left-hand side.
| | 04:37 | If I close this window, I can get back
and make changes to any of the pages.
| | 04:42 | So for instance, if I want contact to be
right after about me, I just add it in like that.
| | 04:47 | Once I do that, I can save my options,
and then go and visit my Tumblr site.
| | 04:54 | Once I visit my Tumblr site, you'll see
here in my navigation, I have About Me,
| | 04:58 | Contact Me, and Sample Page.
| | 05:00 | Sample Page is to the right of Contact
Me, because I changed the stacking order
| | 05:04 | inside of the page alignment tab.
| | 05:06 | If I click on Contact Me, you'll see
all the information I entered: Justin
| | 05:10 | Seely, 1234 Main Street, Awesometown USA.
| | 05:14 | Any time I want to make a change to this,
I have to go back into the Customize
| | 05:17 | section of Tumblr, find the page,
click Edit, and then make any necessary
| | 05:23 | changes that I might need to make.
| | 05:25 | So as you can see, pages are a
different animal when it comes to Tumblr.
| | 05:28 | They're not necessarily a piece
of content that is easily created.
| | 05:32 | As a matter of fact, you have to
hunt just to find it in the interface.
| | 05:35 | But once you find it, you can create some
really useful stuff utilizing the pages.
| | 05:40 | And if you're able to find a theme that
supports multiple page templates, that's
| | 05:43 | even better, and that's what we'll
be exploring in the very next movie.
| | Collapse this transcript |
| Finding themes with page templates| 00:00 | One of the most frustrating things when
you are looking for themes here inside
| | 00:03 | of Tumblr is finding a
theme that supports pages.
| | 00:06 | Now, as I said before in a previous movie,
you can create pages relatively easily
| | 00:10 | here inside of Tumblr, but the theme
that you've chosen may or may not actually
| | 00:14 | support a page type, or a page template.
| | 00:17 | In order for a page to be differentiated
from the homepage, the theme actually
| | 00:22 | has to support a page type, or through
HTML and CSS, have a different way of
| | 00:26 | displaying the page's content.
| | 00:27 | If I take a look at this theme that
I've applied to my blog right here, you can
| | 00:31 | see the homepage is kind of out there.
| | 00:33 | This is the Organ theme by samurai.
| | 00:35 | Here on the home page, I
have this really unique design.
| | 00:38 | When I click on one of the pages, though,
they have a completely separate design,
| | 00:41 | all their own, and unique, which
differentiates them from the homepage.
| | 00:45 | Unlike The Minimalistic theme we
were using earlier, where you couldn't
| | 00:48 | really tell the difference between a
post and a page, this design presents a
| | 00:52 | nice, clean, different layout for
both pages and the post. Pretty cool!
| | 00:58 | As I said, there are a number of free
themes that support pages inside of Tumblr.
| | 01:02 | You will want to go through the
directory, and find one that works for you. Or you
| | 01:05 | can go out to other Web sites, like
theme marketplaces, which will allow you to
| | 01:09 | purchase custom Tumblr themes, most of
which that support custom page types.
| | 01:14 | If you take a look at these examples that I
have for you here, like the Rapture Theme,
| | 01:18 | here on the home page, it has a
completely different layout, complete with a
| | 01:22 | slider, informational
sidebars, and all kinds of stuff.
| | 01:26 | Looking at the About page, it's
very simple, very clean; just a content
| | 01:29 | window, and a sidebar.
| | 01:32 | On the Shift Tumblr theme,
the same thing applies.
| | 01:36 | The homepage looks very different.
| | 01:38 | They've got informational boxes,
sliders; all different types of stuff.
| | 01:44 | On the About page, it's nothing but pure
content, and a very simple sidebar on the right.
| | 01:50 | Finally, the Perception theme.
| | 01:52 | This is probably one of favorites,
simply because it's got a nice grid layout,
| | 01:55 | almost like a portfolio on the front
page, and the page template is a nice
| | 02:00 | simple, clean element showcasing the
typography very nice, and a very simple
| | 02:04 | sidebar on the right.
| | 02:05 | So you have to find the themes
that support these different things.
| | 02:09 | It's kind of difficult, because they
don't really advertise, hey, I have page
| | 02:12 | templates attached to me, but if you
go in and start looking at the demos of
| | 02:16 | these, they will be easier to find.
| | 02:18 | In a later movie, I will discuss the
best places, like theme marketplaces, to
| | 02:22 | find these types of themes, to make it easier on
you to find a theme that best fits your needs.
| | 02:27 | But for now, if you're sticking with
the basic Tumblr themes that are available
| | 02:31 | on tumblr.com, just go back to your
Dashboard, click on your blog link, go into
| | 02:37 | Customize appearance, and then start
browsing the themes in the Theme directory.
| | 02:41 | Each time you switch your theme, go
back your Web site, and refresh it, and then
| | 02:45 | click on your pages to see
if the look changes at all.
| | 02:47 | If you get a nice, differentiated
look, you've got a page template.
| | 02:51 | If it looks just like the
homepage, you probably don't.
| | 02:56 | Unfortunately, it's all a
matter of finding the right theme.
| | 03:00 | As you get more comfortable with HTML
and CSS, you can also create your own
| | 03:04 | page templates here inside of Tumblr,
and that's what we'll be talking about in
| | 03:07 | the very next movie.
| | Collapse this transcript |
| Creating your own page templates| 00:00 | As you continue to work with pages here
inside of Tumblr, you may feel the need
| | 00:04 | to create your own custom page template.
| | 00:07 | Inside of Tumblr, that's a little difficult
if your theme doesn't already support it.
| | 00:10 | But if you know a little HTML
and CSS, you can certainly do it.
| | 00:13 | In this movie, I'll show you how to
create your own pseudo-page template
| | 00:17 | using some HTML and CSS.
| | 00:19 | The first thing I need to do
is actually write out some CSS.
| | 00:22 | So I am going to jump over
into a code editing application.
| | 00:25 | You could do this in any
application though, Text Edit, Notepad,
| | 00:27 | Dreamweaver; doesn't matter.
| | 00:29 | As long as you know how to
write CSS, you're good to go.
| | 00:32 | As you can see, I've defined
a new class called pagebg.
| | 00:35 | This class just defines a background
color, and a border that's going to surround
| | 00:40 | the content of the page.
| | 00:41 | I've also defined a new paragraph
style, which changes the typeface from
| | 00:45 | serif to sans serif.
| | 00:47 | All I have to do is take this
CSS, and copy it to my clipboard.
| | 00:50 | Then I'll move back into the Tumblr
editing window, and I'll scroll down to the
| | 00:54 | bottom, and choose the Advanced tab.
| | 00:56 | Then I'll scroll down, and I'll simply
paste in the new CSS into the custom CSS box.
| | 01:02 | Once I do that, I can click Save.
| | 01:05 | Clicking Save automatically adds that CSS to my
theme, and I can now implement it, utilizing HTML.
| | 01:10 | So let's jump back over to my code
editor, and take a look at the untitled
| | 01:14 | document that I have here.
| | 01:16 | As you can see, I call out the div class,
pagebg, I have two paragraphs, and then
| | 01:20 | I close the div tag.
| | 01:22 | So theoretically, when I implement
this, I'll have the background element
| | 01:25 | surrounding these two paragraphs, which
will both have the san serif typeface.
| | 01:31 | Let's select this, and copy it.
| | 01:32 | Then I will go back to
Tumblr, and click on the Pages tab.
| | 01:37 | Now I will go down, and click Add a page.
| | 01:39 | I will name this page custom;
| | 01:42 | I'll change the Page Title to My Custom Page.
| | 01:46 | I'm not going to show a link,
since this is just a proof of concept.
| | 01:50 | Then at the bottom, for the body, I am
going to come over here to the right-hand
| | 01:53 | side, and click HTML.
| | 01:56 | That launches my HTML window, and I can
then paste my HTML code that I wrote out.
| | 02:01 | I will now click update.
| | 02:02 | You're not going to see any
visual change here in this window.
| | 02:05 | Then you will click Create page.
| | 02:08 | Once I do that, I will click Save page
to make sure everything is taken care of.
| | 02:12 | You now see my new page, custom, is in the list.
| | 02:15 | If I go out to my site, and access the
custom page, you'll notice here, my title
| | 02:25 | is up top, same as it always is, but my
page content has a light gray background,
| | 02:30 | with a border around the outside of it.
| | 02:32 | You can also see that the typeface
being used for the body copy is now a sans
| | 02:36 | serif font, as opposed to the
serif font that we had before.
| | 02:39 | Now, this is just a basic customization.
| | 02:41 | You could go crazy on this, using
Web fonts, all different types of CSS
| | 02:45 | effects; it doesn't matter.
| | 02:47 | It's totally up to you.
| | 02:48 | You could even add in a sidebar, or an
image, or anything else that you wanted to
| | 02:51 | add in to this page, and you can control
that all through the custom CSS and HTML
| | 02:56 | options available to you inside of Tumblr.
| | 02:58 | So if you're familiar with this type
of coding, take some time, adjust your
| | 03:01 | settings, write out some awesome CSS
and HTML, and have your pages looking
| | 03:06 | better than ever before.
| | Collapse this transcript |
| Linking to pages in Tumblr| 00:00 | As you continue to work with pages here
inside of Tumblr, you may find the need
| | 00:03 | to link to those pages on various
parts and pieces of your Tumblr site.
| | 00:07 | In this movie, I am going to explore the
various ways that you have the ability
| | 00:10 | to link to things, like pages,
inside of your Tumblr blog.
| | 00:13 | I'm going to start by going up to the
blog link here that says Tumblin' With
| | 00:16 | Justin, and I will go into the
Customize appearance section.
| | 00:20 | Once I go into the Customize appearance
section, I will scroll down to the pages.
| | 00:24 | When we first created our pages,
you saw a screen like this.
| | 00:30 | Inside of the pages screen, you have
the option to show a link to this page.
| | 00:34 | This controls whether or not this page
link is being shown in the navigation.
| | 00:40 | If you check this box, you will
get that link in your navigation bar.
| | 00:43 | You can also specify
exactly what that navigation says.
| | 00:47 | So in this case, it says About.
| | 00:48 | If I want to change that to something like About
Me, I can make that switch, and hit Save page.
| | 00:54 | Once I've saved it, I can then go
to my blog site, and view it, and see
| | 00:57 | the changes update.
| | 00:58 | Let's change this back to About.
| | 01:03 | Now, what if I wanted to add something
to the navigation here, like a link to
| | 01:07 | Google, or a link to another page
that might not exist on Tumblr?
| | 01:10 | In order to do that, or to add any
navigational element, you have to go into
| | 01:14 | the HTML of the file.
| | 01:16 | So let's go up here and click Edit HTML.
| | 01:17 | I am going to scroll down, and basically
what I'm looking for is a line of code
| | 01:24 | that defines where the pages are.
| | 01:26 | So in this case, it starts on or about line 520.
| | 01:30 | As you can see, all of the different elements
that pertain to these list items are listed here.
| | 01:35 | I've actually added a custom link
already right here that links to Google, and
| | 01:40 | you can see it right there: Google Me.
| | 01:43 | If I want to change that, or add something else
to it, I can add a new list item with a link.
| | 01:50 | Once I've completed my tags
like so, I can hit Update preview.
| | 01:54 | As you can see, my new
link pops up right there.
| | 01:57 | I can go back to the appearance panel,
hit Save, and then go back to my blog
| | 02:02 | site, and refresh it.
| | 02:05 | You'll see that my new link, Bing
Me, now appears in my navigation.
| | 02:09 | So as you can see, it's not that easy
to gain control over the navigational
| | 02:13 | portions of your pages, but you can do
it if you know how to add it in via HTML.
| | 02:18 | Now, if you want to add a direct link to
any one of your pages inside of a blog
| | 02:23 | post, or something like that,
that's very easy to do.
| | 02:26 | Let's go right here to the About page.
| | 02:28 | As you can see, it's
my domain.tumblr.com/aboutme.
| | 02:33 | I can simply right-click, and choose
Copy Link Address, and then I will go back
| | 02:37 | in the Tumblr, and click Close.
| | 02:39 | I will scroll down to one
of my posts, and hit Edit.
| | 02:47 | At the end of this post, I will
create some space, and I will type out, View
| | 02:54 | More Info About Me.
| | 02:55 | I will select this, and
click on the Link button.
| | 02:58 | The Link URL: my name.tumblr.com/aboutme.
| | 03:04 | The Title: More About Me.
| | 03:06 | I will open it in the
same window, and click Insert.
| | 03:09 | Once I am done with that, I can
scroll down, and hit Save changes.
| | 03:15 | Now if I go back to my Tumblr site, refresh;
I get a new link that says, View More About Me.
| | 03:25 | If I click on it, it
takes me to the About Me page.
| | 03:29 | As you can see, there's no easy way to
manage links to existing content inside
| | 03:32 | of your Tumblr blog, but as long as you
copy the link URL, and then paste it in
| | 03:36 | manually, everything should be fine.
| | 03:38 | There is also no easy way to do menu
management inside of Tumblr, but as long as
| | 03:42 | you know a few HTML tricks, it should
be no problem whatsoever to start adding
| | 03:46 | custom navigational links to any
post or pages that you see fit.
| | Collapse this transcript |
| Inserting video and images into pages| 00:00 | As you are creating pages inside of
Tumblr, you may find the need to insert rich
| | 00:04 | media, like photos, or video, into those pages.
| | 00:07 | Unfortunately, it's not as easy to post
a photo or video inside of a page as it
| | 00:12 | is to post it inside of a
normal post here on Tumblr,
| | 00:15 | but with a little trickery, you can do it.
| | 00:17 | So let's take a look at how to do it now.
| | 00:19 | I will go right up here to my blog link,
I will go into Customize appearance, and
| | 00:25 | I will go down here to my pages.
| | 00:28 | In the Pages, I am going to work
on the Sample Page, so I'll hit Edit.
| | 00:31 | I will maximize this window, so
you can see exactly what's going on.
| | 00:37 | Once I get is open, I am going to insert
picture here at the top; that's the easy part.
| | 00:41 | I'll create some space by hitting
Return, and I will choose Upload a photo.
| | 00:46 | I will go into my Assets folder,
select pics, and in this case, I'll
| | 00:51 | choose sunrise_rocks.
| | 00:52 | I will open it up, it will upload
the photo, and it automatically puts it in.
| | 00:56 | I will select it, and then click
the photo icon to make a change.
| | 01:01 | I'm not going to change the Alignment,
because I want it on its own line by
| | 01:04 | itself. I will give it a
description: Sunrise at the Lake.
| | 01:10 | The Dimensions; I know I want it to be
500 pixels wide, because that's about as
| | 01:14 | wide as my theme allows.
| | 01:16 | Then I will hit Insert.
| | 01:19 | It automatically resizes itself to fit in
the window, and now I'll click Save Page.
| | 01:25 | Once I do that, I can then go back,
click on the Sample Page, and there's my
| | 01:30 | photo, 500 pixels wide, and right at the top.
| | 01:34 | Now, inserting video is a little tricky.
| | 01:36 | I am going to go back to YouTube,
and find the video that I want to use.
| | 01:41 | Underneath the video on YouTube, I
am going to click the Share button.
| | 01:44 | Once I click on Share, I want to
move down here to the embed code.
| | 01:48 | Since my theme only supports about a 500
pixel wide window, I need to come down
| | 01:52 | and customize the size of the embed.
| | 01:54 | I will choose 500 pixels, and it
automatically updates that right here.
| | 01:59 | All I have to do is copy this code, and go
back into my customize section of Tumblr.
| | 02:05 | To add this to a page, I'll click Edit
next to the page I want to insert it on.
| | 02:09 | Then I will find the area of the page
where I want to insert the video, in this
| | 02:15 | case, I will put it at the bottom,
and I am going to switch to HTML View.
| | 02:19 | When I do that, it's going to
open up with the HTML editor.
| | 02:24 | All I have to do is create some space
where I want it to go, and paste it in.
| | 02:28 | I will hit Update, and Save Page. Once I do
that, I'll go back to the page, and refresh.
| | 02:34 | If I scroll towards the bottom, there
is my YouTube video, 500 pixels wide,
| | 02:41 | exactly as it should be.
| | 02:42 | And if I click the Play button, it will
automatically play the video in place.
| | 02:46 | So now that you have seen how easy it is
to insert photos and video into Tumblr
| | 02:51 | once you know the secret, you should
be well on your way to creating more
| | 02:54 | dynamic pages in your Tumblr site
| | Collapse this transcript |
|
|
5. Taking the Next StepFinding theme marketplaces| 00:01 | As you continue to go deeper down the
rabbit hole of customizing your Tumblr
| | 00:04 | site, you may find that the themes here
on the tumblr.com are little limited in
| | 00:08 | their customization, or stylistic options,
| | 00:10 | so you may want to venture out onto the
Web, and find some places to purchase and
| | 00:15 | download some premium Tumblr themes.
| | 00:17 | In this movie, I will explore couple of
the places that I use when looking for
| | 00:21 | premium Tumblr themes,
| | 00:23 | the first of which is called MOJO Themes.
| | 00:26 | You can access this site
from www.mojo-themes.com.
| | 00:32 | Once you land at the MOJO Themes
homepage, you will be able to access the
| | 00:36 | categories, and go into Tumblr.
| | 00:38 | Here on this top navigation bar, if
you go over to the More link, there is
| | 00:41 | Tumblr right at the top.
| | 00:43 | Once you click on that, you'll be
brought to this page here that showcases all
| | 00:46 | of the different Premium Tumblr Themes.
| | 00:49 | They range in price from anywhere
from $10 to almost $50, depending on the
| | 00:54 | customization options that
are included with the theme.
| | 00:57 | If you want to see one of
these themes, simply click on it.
| | 01:01 | Once you click on it, it takes
you to the theme page itself.
| | 01:04 | You get a big preview here, and you
can also click the Live Demo button.
| | 01:10 | Once you click on Live Demo, it takes
you here to a Live Demo of the theme.
| | 01:15 | You can scroll through to see all of
the different post types, and see exactly
| | 01:20 | what you're getting before you purchase it.
| | 01:23 | And then you can come back and either
purchase the theme, or continue to look.
| | 01:28 | The second marketplace I recommend is
ThemeForest, and ThemeForest is probably
| | 01:33 | the largest marketplace for any type of
theme, not just Tumblr, but they do have
| | 01:37 | a great selection of Tumblr themes as well.
| | 01:40 | Same thing applies here.
| | 01:41 | You will have to search for Tumblr themes,
| | 01:43 | so you can just do a search right up
there for Tumblr. Once you do that, the
| | 01:47 | results will be returned
to you, like you see here.
| | 01:51 | Prices here are a little cheaper than
other places, and the themes are just as good.
| | 01:54 | ThemeForest is one of my favorites.
| | 01:57 | Once you find a theme that you are
looking for, or one that you think might be
| | 02:00 | interesting, click on it.
| | 02:03 | You will be brought to the theme page,
like you see here, and then you can click
| | 02:06 | on Live Preview to see the theme in action,
and view all of the different post types.
| | 02:15 | If you like this theme, you can go
right up here to the top and buy it.
| | 02:19 | If you find this black bar
distracting, click Remove Frame.
| | 02:22 | That will give you a better idea of
exactly what the theme looks like.
| | 02:27 | Once you've figured out if it's for you,
you can close it, go back to the theme
| | 02:31 | page, and either purchase it,
or continue looking.
| | 02:34 | So if you find the options on tumblr.com
to be just a little bit limiting, go
| | 02:37 | out to these marketplaces, and find a
theme that fits your needs, or one that
| | 02:42 | would be easily customized to fit your needs.
| | 02:44 | The options are endless when
it comes to these marketplaces,
| | 02:47 | so take the time, find the one that's right
for you, buy it, and put it to good use.
| | Collapse this transcript |
| Installing a premium theme| 00:00 | Once you've purchased a premium theme for
your Tumblr site, it's not exactly obvious
| | 00:05 | how you get that theme from
the download to your Tumblr site.
| | 00:09 | There is, after all, no install option
inside of Tumblr itself, unlike WordPress,
| | 00:13 | which you just have to click a button.
| | 00:15 | So in Tumblr, how exactly do we install
these premium themes that we purchase?
| | 00:18 | In this movie, I'm going to
explore exactly how to do that.
| | 00:22 | The first thing you will need to do is
log in to your Tumblr Dashboard. Make sure
| | 00:24 | you click your blog link. In this case,
it's Tumblin' With Justin, and then once
| | 00:28 | you see this sidebar appear over here
on the right, click Customize appearance.
| | 00:33 | Once you click Customize appearance,
you'll notice here that on the left-hand
| | 00:36 | side you have your themes.
| | 00:38 | Currently, I have made some changes to
this theme, so it's showcasing that I have
| | 00:41 | a custom theme installed.
| | 00:42 | It's actually just the minimalistic theme,
with a few HTML and CSS tweaks being applied.
| | 00:47 | But what if I have a theme that I've downloaded,
that I want to install into my Tumblr system?
| | 00:52 | Well, as you can see, there
is no install button in here.
| | 00:55 | So what I have to do is kind of tricky.
| | 00:57 | I go to the Edit HTML button. Once I
go to the Edit HTML button, I take all of
| | 01:03 | this content here, use Command+A or Control+A on
my keyboard to select it all, and press Delete.
| | 01:08 | Now that probably scared a few of
you, and understandably so; you just
| | 01:12 | deleted your theme.
| | 01:13 | The good news is, by clicking
Appearance again, you get out of this window, and
| | 01:17 | all the changes you just
made go away. So don't fear.
| | 01:20 | Now let's go over here.
| | 01:21 | This is a code editing application called Coda.
| | 01:24 | You can open up your custom theme in any
text editing application, like TextEdit,
| | 01:28 | Notepad, Dreamweaver, Coda;
| | 01:30 | any of those things can
open these custom themes.
| | 01:33 | The custom theme is most likely a .html page,
and the HTML page contains both the HTML,
| | 01:38 | and the CSS, that determine
how the theme looks and behaves.
| | 01:42 | In this case, I've customized an
existing theme that comes free on tumblr.com.
| | 01:47 | As you can see, it's called Prologue,
and you can visit prologuetheme.tumblr.com
| | 01:52 | to see this theme in action.
| | 01:53 | What I'm going to do is simply copy all
of this to my clipboard with Command+A
| | 01:59 | or Control+A, and then Command+C or
Control+C. Once I've copied all this to the
| | 02:02 | clipboard, I'll move back
over to my Tumblr site.
| | 02:05 | In the Appearance window, I'm simply
going to paste with Command+V or Control+V.
| | 02:10 | Once I do that, everything goes back into
place as it should, and if I hit Update
| | 02:15 | preview, watch over here
on the right-hand side.
| | 02:18 | My site instantly transforms
to look totally different.
| | 02:21 | As you can see, Tumblin' With Justin is
right there, all of my post types look
| | 02:25 | different, I've got a new header across
the top, I've also got some social media
| | 02:29 | buttons integrated at the top as well.
| | 02:31 | I did all of this by adding some CSS to
the existing Prologue theme. That's it.
| | 02:37 | That's all done through CSS,
and maybe one or two images.
| | 02:40 | So if you know HTML and CSS, you could
actually do a custom theme just like this,
| | 02:44 | with a little effort.
| | 02:45 | Once I'm finished with this, I'll
click back on Appearance, and choose Save.
| | 02:50 | Once I've saved it, I'll close it.
| | 02:54 | Closing it takes me back to my Dashboard.
| | 02:57 | Now if I go to Tumblin' With Justin again,
and then click on the Open link right
| | 03:03 | here on the right, it opens up my site,
and there is my completely customized
| | 03:10 | theme here on Tumblr.
| | 03:12 | As you can see, the links work.
| | 03:13 | If I scroll down through the content types
you can see all the post that I've made,
| | 03:18 | and at the bottom, I have a footer
that overlaps with my copyright notice.
| | 03:22 | And again, this was all done through
custom HTML and CSS, on top of the existing
| | 03:27 | Prologue theme that's
available free at tumblr.com.
| | 03:30 | Let me close this, and go back to my Dashboard.
| | 03:33 | So the next time you download a
premium theme from a marketplace, or if you
| | 03:36 | decide to get really crazy, and
develop your own custom theme by following the
| | 03:40 | Tumblr theme guidelines, you can easily
install it, simply by copying and pasting
| | 03:45 | directly into the customize window
inside of the Tumblr HTML editor.
| | 03:49 | Once you do that, you'll have
your own unique, awesome Tumblr site.
| | Collapse this transcript |
| Editing posts using HTML| 00:01 | If you're a more advanced user, you
may want to utilize your HTML skills
| | 00:05 | here inside of Tumblr.
| | 00:07 | Lucky for you, Tumblr gives
you a way to do just that.
| | 00:10 | You can actually edit your posts
using nothing but HTML if you choose to.
| | 00:15 | In this movie, I'll show you how to
set that up, and how to start using it.
| | 00:19 | The first thing you need to do is be
logged into your Dashboard, and then go
| | 00:22 | right up here to this little gear.
| | 00:24 | When you find the gear,
that'll take you to the Preferences.
| | 00:28 | Once you click on the Preferences,
it takes you to this screen here.
| | 00:31 | When you scroll down just below your
user name and password fields, you'll
| | 00:35 | see Edit posts using.
| | 00:38 | By default, the rich text editor is checked.
| | 00:41 | That's that editor that we've seen
earlier in this series, where we had the
| | 00:44 | ability to change things like bold,
italicized, and all that kind of stuff, with
| | 00:48 | a point-and-click interface.
| | 00:50 | But if we are more advanced, and we know
how to utilize HTML and CSS, chances are,
| | 00:55 | we're going to want to use this one
right here in the middle: plain text/HTML.
| | 00:59 | If you're a code guy like myself, you're
more comfortable working inside of just
| | 01:03 | a plain text window, where you can add
in your own CSS, HTML, or whatever code
| | 01:08 | you want, and this is the way you do it.
| | 01:10 | So once you enable that right there, you
scroll down to the bottom, and choose Save.
| | 01:17 | Once you click Save, it takes you right
back to the Dashboard, and you're ready
| | 01:20 | to continue working.
| | 01:22 | If I go in to create a new post,
you'll notice that I don't have any of the
| | 01:27 | options I used to have here,
| | 01:29 | like alignment options,
adding in photos, etcetera.
| | 01:32 | I have some basic controls, like bold,
italic, and strikethrough, as well as a
| | 01:36 | link, but all the rest of it is
completely gone, and I'm on my own.
| | 01:39 | You'll see over here on the
right, HTML has been enabled.
| | 01:43 | I can still upload a photo, but it's
up to me to know how to put it in there.
| | 01:47 | So in this case, let's create an HTML
post, and then I'm going to go out, and
| | 01:56 | grab some filler text.
| | 01:57 | I'll just grab one paragraph of filler text.
| | 02:02 | This comes from the awesome
site tunaipsum.com.
| | 02:08 | When I get back in here, I'll start off
by typing out a paragraph tag, paste that
| | 02:15 | in, and I'll close the paragraph tag.
| | 02:18 | If I want to add another paragraph, type out
another paragraph tag, paste, and close the tag.
| | 02:29 | Now, I can also use some of the built-in
controls, like the bold, and italics.
| | 02:34 | So I will select this; as you can
see, it adds in the B tag for bold.
| | 02:39 | If I select this paragraph down here, let's
just make the whole thing italic. There we go;
| | 02:46 | it adds in the little i. And if I want
to add a link, I'll add that right here
| | 02:54 | to the end of this first paragraph,
and once I've added in that link, you'll
| | 03:05 | notice there is the link tag, and the
completion of the link tag right there.
| | 03:10 | So if you're a code person, this all
makes sense to you, sort of like you're
| | 03:14 | looking at the code in the matrix.
| | 03:16 | If you're not a code person, this
probably looks a little foreign, and that's okay.
| | 03:21 | You can always go back and turn this off.
| | 03:23 | But if you're comfortable using your own
HTML, this is definitely the way to go.
| | 03:27 | If I scroll down to the
bottom now, I can preview this.
| | 03:32 | When I preview it, you can see there's
my bold text right there at the top,
| | 03:36 | my first paragraph, my second paragraph, which
is all italics, and then my link right there.
| | 03:43 | So I've done the exact same thing that
I do with the WYSIWYG editor, or What You
| | 03:47 | See Is What You Get editor, but I've done it
through the code, which is a lot easier for me.
| | 03:52 | I don't like to click buttons.
| | 03:54 | I'm really fast at writing the code.
| | 03:55 | So I just do it myself.
| | 03:57 | Once you get yourself to that
position, you'll be able to do it too.
| | 04:01 | Let's close this up, and now I'll just simply
create the post by clicking Create post.
| | 04:08 | So like I said, this isn't for everybody.
| | 04:10 | It's only for the people that really
know what they're doing with HTML and CSS,
| | 04:13 | but if you're one of those folks, this
is definitely a great way to get a lot
| | 04:17 | more control over how your posts
are displayed here inside of Tumblr.
| | Collapse this transcript |
| Editing posts using Markdown| 00:00 | In addition to utilizing HTML to edit
your posts here inside of Tumblr, you can
| | 00:04 | also use something known as Markdown.
| | 00:07 | Now, if you're familiar with Markdown,
chances are you love it; everybody I
| | 00:11 | know that uses it does.
| | 00:12 | If you're not familiar with it, it
might be something you want to look into to
| | 00:16 | edit your post in Tumblr.
| | 00:17 | It just depends on how you like to
work, and whether or not you're comfortable
| | 00:20 | enough to utilize it.
| | 00:22 | In order to turn Markdown on here
inside of Tumblr, you have to go right up here
| | 00:27 | to this little gear, and launch your Preferences.
| | 00:29 | Once I get into the Preferences, I'll scroll
down, and find where it says Edit posts using.
| | 00:34 | Now, we've already turned on plain
text and HTML, but if I want to enable
| | 00:38 | Markdown, I simply click right here.
| | 00:41 | If you're not sure what Markdown is, or
if you just need a refresher on how to
| | 00:45 | use it, you can click
this little question mark
| | 00:47 | here, and it'll launch the Daring
Fireball Web site, where you'll be able to
| | 00:51 | learn all about Markdown.
| | 00:53 | Basically, Markdown is a text to
HTML conversion tool for Web writers.
| | 00:57 | As you can see here, they say that
Markdown allows you to write using an
| | 01:00 | easy to read, easy to write, plain text format.
| | 01:03 | In other words, it's code for people
who like code, but don't necessarily
| | 01:07 | want to write code.
| | 01:08 | It's kind of a strange thing, actually, but it
is really helpful if you know how to use it.
| | 01:13 | Going to the Basics tab gives you a
decent rundown of exactly how to start using
| | 01:17 | Markdown for things like
paragraphs, headers, and block quotes.
| | 01:20 | As you can see, this is Markdown; First
Level Header, Second Level Header, etcetera.
| | 01:26 | You can also see how they define block
quotes, paragraphs, and other elements as well.
| | 01:32 | If you go to the Syntax page, you'll get
an overview of every single element that
| | 01:37 | you're able to control using Markdown.
| | 01:40 | You can go through this, and learn each
individual one, and it'll really help
| | 01:43 | you in the long run.
| | 01:45 | Finally, you can also check out the
License, to let you know exactly where
| | 01:50 | you're able to use it.
| | 01:51 | Markdown is free, and it's available under
the terms of BSD-style, open-source license.
| | 01:57 | So it's open-source software,
meaning, use it.
| | 02:00 | Let's close this up, and go back into Tumblr.
| | 02:04 | Now any time I want to use Markdown,
all I have to do is click Save, and I'm now
| | 02:11 | ready to use Markdown in any of my posts.
| | 02:14 | So once you've mastered the Markdown
syntax, come back into Tumblr, and start
| | 02:18 | stylizing your posts, utilizing
that new, awesome markup language.
| | Collapse this transcript |
| Tracking blog traffic with FeedBurner and Google Analytics| 00:01 | One of the most important things with any
Web site is tracking the traffic that comes to it.
| | 00:06 | In this movie, I'll show you how to
keep track of your traffic utilizing Google
| | 00:09 | Analytics, and FeedBurner.
| | 00:12 | The first one we are going to
talk about is Google Analytics.
| | 00:15 | So let's go up here to my blog link,
and then choose Customize appearance.
| | 00:21 | In order to integrate Google Analytics into
your Tumblr Web site, there are two ways to do it.
| | 00:27 | First is to insert the JavaScript yourself,
and you can do that by going into Edit HTML.
| | 00:32 | When you go into Edit HTML, you simply
paste in the JavaScript code given to you
| | 00:37 | by Google Analytics, and you're off and running.
| | 00:40 | However, there are some themes in the Tumblr
marketplace that allow you to do it so much easier.
| | 00:46 | Let's switch themes here, because
this one doesn't currently support it.
| | 00:49 | So I will switch back to my Themes,
and I will go find The Minimalist theme.
| | 00:59 | Once I click Use, and scroll down, you'll
notice here that I get Google Analytics ID.
| | 01:06 | All I have to do is type
out my Google Analytics ID.
| | 01:10 | This is given to me when I first sign
up for Google Analytics, and you can view
| | 01:14 | it on your Google Analytics Dashboard.
| | 01:17 | Once you paste it in, hit Save.
| | 01:19 | As long you have set up this domain
correctly with Google Analytics, you're now
| | 01:25 | tracking the traffic that comes to your Web site.
| | 01:27 | It might take a while for your reports
to start coming in, but once they do, you
| | 01:30 | will be able to track
everything that's going on.
| | 01:33 | Now what about FeedBurner?
| | 01:35 | FeedBurner was a great service
that was standalone for many years.
| | 01:38 | Now it's actually under the
Google umbrella, though. That's right.
| | 01:42 | FeedBurner is a Google service.
| | 01:43 | So you can go to feedburner.com, sign
in using your Google ID, and you can
| | 01:48 | actually burn a feed that allows users to
subscribe to it very quickly, and very easily.
| | 01:54 | They also have some great analytics
tools to see exactly how many people are
| | 01:58 | subscribed, what they're clicking on,
if they are downloading anything, and
| | 02:01 | tons of other stuff.
| | 02:02 | So how do you integrate FeedBurner with Tumblr?
| | 02:06 | Once you have saved this, go ahead and close
it up, and then move back into your Dashboard.
| | 02:11 | Once you're in your Dashboard, go
back to your blog, go to Settings on the
| | 02:17 | right-hand side, and then scroll down
in the settings until you find RSS Feeds.
| | 02:24 | When you set up a FeedBurner account,
you'll automatically have to enter in a
| | 02:28 | name for the feed that you are burning.
| | 02:31 | So in this case, I could set up
TumblingwithJustin.FeedBurner.com, or whatever I
| | 02:36 | wanted to put it as.
| | 02:38 | Then I click right here, redirect
this blogs RSS to a FeedBurner URL.
| | 02:44 | Once I enter in that address, any time
someone tries to subscribe to this via
| | 02:48 | RSS, they will automatically be
redirected to the FeedBurner feed URL, and they
| | 02:53 | will be able to subscribe to it, and
then I can track it after the fact.
| | 02:58 | This is a great way to keep track of
everything that's going on on your blog.
| | 03:01 | Like I said, tracking everything from clicks, to
downloads, to whatever it is you want to track.
| | 03:06 | Let's go over to FeedBurner
really quick, and burn this feed.
| | 03:08 | I'm going to go over here into my FeedBurner
account, and you will notice, when I login
| | 03:13 | in, it tells me that I can
burn a feed right this instant.
| | 03:16 | So it says, type your blog
or feed address here.
| | 03:19 | In this case, I will just
type out my Tumblr address.
| | 03:23 | If I am a podcaster, or I am going to be
producing any type of media that I want
| | 03:26 | to track the downloads of, I can
click right here, saying I'm a podcaster.
| | 03:30 | In this case I don't, so I
am just going to click Next.
| | 03:34 | Once I have clicked Next, it takes me
here, and allows me to determine the Feed
| | 03:37 | Title, and also the Feed Address, so
I will keep Tumblin' With Justin, and
| | 03:41 | TumblinWithJustin as my
Feed Address, and click Next.
| | 03:47 | From here, it gives me my new feed address.
| | 03:51 | I can simply right-click on this, and
choose Copy Link Address, or select it, and
| | 03:54 | copy it to my clipboard.
| | 03:56 | From here, I can go through any
other options I want, or skip directly to
| | 04:00 | the feed management.
| | 04:01 | I don't need to do anything else to this
right now, so I will just skip directly
| | 04:04 | to the feed management.
| | 04:05 | Here it gives you instructions on how
to integrate it with various services.
| | 04:08 | Tumblr unfortunately is not
listed here, but it's very easy to do.
| | 04:13 | So with that address that I copied, I
can close this up, go right back in, and
| | 04:18 | simply paste in the new address.
| | 04:20 | Once I do that, I'll click Save.
| | 04:23 | Now anytime someone tries to subscribe
to my RSS feed using the standard Tumblr
| | 04:28 | RSS, they will be automatically be
redirected to my FeedBurner URL, they'll
| | 04:32 | subscribe to it, and I'll be able to track it.
| | 04:34 | So between this, and Google Analytics,
I've pretty much got myself covered.
| | 04:38 | So take some time and set up your
Google Analytics profile, as well as a
| | 04:41 | FeedBurner account, and you will be well
on your way to tracking every aspect of
| | 04:45 | your blog, and all of the
traffic coming in and out of it.
| | Collapse this transcript |
| Adding comments with Disqus| 00:00 | Although Tumbler is one of the more
sociable blogging platforms, it still lacks
| | 00:04 | in its ability to create a
discussion, or conversation.
| | 00:08 | Now, I know that you can add likes, and
reblogs, and even add comments to a reblog,
| | 00:12 | but I want to be able to generate a
full on conversation, like I can with Drupal,
| | 00:16 | or WordPress, or any other CMS.
| | 00:18 | In order to accomplish this inside
of Tumblr, we have to use a third-party
| | 00:21 | service, like Disqus.
| | 00:23 | You can navigate to disqus.com, and sign
up for a free account that you can then
| | 00:29 | integrate into your blog.
| | 00:31 | Once you've signed up for an account,
and registered it with your domain, you'll
| | 00:34 | be given what's called a Disqus Shortname.
| | 00:37 | In this case, mine is
tumblinwithjustin; all one word.
| | 00:41 | Once I find my Shortname, it's
relatively easy to integrate it into Tumblr.
| | 00:44 | As a matter of fact, they give you step
by step instructions on how to do so
| | 00:49 | here inside of Disqus.
| | 00:51 | As you can see, it tells you to log into
your Tumblr site, and go the customize section.
| | 00:55 | Then you're going to look on the left-
hand side to see if your theme supports
| | 00:58 | the Disqus Shortname property.
| | 01:01 | If your theme supports this, all you
have to do is put your name in right here,
| | 01:04 | hit Save, and you're off and running.
| | 01:06 | If your theme doesn't support it, they
also give you step by step instructions
| | 01:10 | on how to manually insert the
Disqus elements into your theme.
| | 01:14 | Let's go back over to Tumblr, choose my
blog link, go to Customize appearance.
| | 01:20 | In this case, I'll use the exact same
theme that they used in their demo.
| | 01:24 | I'll go back to Themes, and I'll
scroll down, and find the Atlantic theme.
| | 01:36 | Once I find the Atlantic theme, I'll
click on it to enable it, and I'll hit Use.
| | 01:42 | I'll scroll down in the Atlantic
options on the left-hand side, find the Disqus
| | 01:46 | Shortname, and paste in tumblinwithjustin.
| | 01:49 | When I do that, you'll notice that a View
comments link is automatically added to the page.
| | 01:54 | Once I hit Save, I can then
visit my blog, and scroll down.
| | 02:02 | You'll notice here that there's a comments link.
| | 02:04 | If I click it, Disqus loads, and I'm able
to then add full comments to my blog site.
| | 02:11 | The best part about Disqus is people
can register using Twitter, Facebook, or
| | 02:15 | even their Google login, and then
comment on your site using that.
| | 02:19 | That way you'll get an interaction
from them, as well as be able to see their
| | 02:22 | avatar, and a link to their
Facebook, or Twitter profile.
| | 02:25 | It just adds the conversation, and adds
another layer of social interactivity.
| | 02:29 | Another great thing about
Disqus is the Like or Dislike button.
| | 02:33 | This helps you track the
popularity of your posts as well.
| | 02:35 | Let's close this back up, and remember,
all you have to do is go to disqus.com,
| | 02:40 | sign up for a free account, and then
follow the easy step by step instructions
| | 02:44 | on how to integrate it with your Tumblr site.
| | 02:47 | If your Tumblr theme already supports
the Disqus Shortname property, simply
| | 02:50 | paste it in, and you're off and running.
| | 02:52 | If your theme doesn't support it, and
you would like it to, just follow those
| | 02:55 | step by step instructions to manually
install it, and you'll have a full-fledged
| | 02:59 | commenting system on
your Tumblr blog in no time.
| | Collapse this transcript |
| Creating multiple Tumblr blogs| 00:00 | One of the cool features of Tumblr is
the ability to create multiple blogs
| | 00:04 | inside of your one account.
| | 00:06 | This is great if you have multiple sites
that you need to have different focuses on.
| | 00:09 | Maybe you have one that's pertaining to
shopping, another one that's pertaining
| | 00:13 | to electronics, or something like that.
| | 00:15 | This is a great feature inside of
Tumblr, and it's really easy to use.
| | 00:18 | So let's take a look at how we can
create multiple Tumblr blogs in this movie.
| | 00:22 | The first thing I need to do is be
logged in to my Tumblr Dashboard. Once I am
| | 00:26 | logged in, I simply locate this little
button at the top right corner; it looks
| | 00:29 | like a Plus sign inside of a little circle.
| | 00:31 | When I click it, it asks
me to create a new blog.
| | 00:34 | It also states that this will create a full-
featured blog, with the special ability
| | 00:38 | to manage multiple authors.
| | 00:40 | So in this case, I will name my new blog,
My 2nd blog. Then I have to give it a
| | 00:46 | Tumblr name, so in this case, I will
just call it, seeleyj2.tumblr.com.
| | 00:51 | I can also password protect the blog if I
only want it to be viewable by certain people.
| | 00:55 | In this case, I will just click Create Blog.
| | 01:00 | You will notice when I do that, at the
top, I now have a link to my Tumblin' With
| | 01:03 | Justin blog, as well as My 2nd Blog, and
now I can start to create Text, Photos,
| | 01:09 | Quotes, Links, Chats, Audio, and
Video on a completely separate site.
| | 01:15 | If I launch the seeley2 blog, you
will notice, it's just plain and simple.
| | 01:20 | If I go back to Tumblin' With
Justin, and launch that one, there is my
| | 01:24 | Tumblin' With Justin blog.
| | 01:25 | So these are technically controlled
by the same account, yet they are two
| | 01:28 | totally separate Web sites.
| | 01:30 | Let's close these up
and go back to My 2nd Blog.
| | 01:34 | You will notice over here on the right-hand
side, I have a section called Members.
| | 01:40 | In this section, I can actually invite
multiple people to be a part of this blog.
| | 01:44 | So if I have multiple authors that I
want to contribute content to the site,
| | 01:48 | I can invite them via e-mail by
entering in their e-mail address, and hitting
| | 01:52 | Invite to this blog.
| | 01:53 | Once I get a list of people going,
I can even leave this blog myself,
| | 01:57 | meaning I don't have to even pay
attention to it anymore if I don't want to.
| | 02:00 | It will only be associated with them.
| | 02:02 | It tells you here that this blog will
automatically be deleted if all of the members leave.
| | 02:06 | So you have to have at
least one member in the list.
| | 02:09 | So if you are trying to build a Tumblr
blog empire, or you simply have multiple
| | 02:14 | Web sites with different focuses,
creating multiple Tumblr blog is really quick,
| | 02:18 | and really easy, and with the ability to
add multiple people, you can ensure that
| | 02:23 | you have a team of folks that's ready
to help you keep pumping out the content
| | 02:26 | for as long as you need to.
| | Collapse this transcript |
|
|
ConclusionGoodbye| 00:00 | Hopefully by now you have a better
understanding of tumblr.com, and how it can
| | 00:03 | help you get yourself on
the Web quickly and easily.
| | 00:06 | If you're ready to start taking the
next step in customizing your Tumblr site, I
| | 00:10 | suggest watching the CSS Fundamentals,
and XHTML and HTML Essential Training in
| | 00:15 | the Lynda.com Online Training Library.
| | 00:17 | For more information on tumblr.com,
including how to build your own custom theme,
| | 00:21 | check out tumblr.com/help.
| | 00:22 | This is a surefire way to help you take
your skills to the next level, and make
| | 00:28 | your Tumblr site stand out above all the rest.
| | 00:31 | Once again, thank you for watching.
| | 00:33 | My name is Justin Seeley, and
I hope to see you again soon.
| | Collapse this transcript |
|
|
