Widget Demos
Themes Demos
TumblrSite Demos

How To’s

Whatever you need help with, we’ve got your blog covered.

See helpful how to’s below.

 

Getting Started

How to install your new theme or widget

  • Copy your new code.
  • Then visit www.tumblr.com/customize/domain.
  • Click on Theme and then Use custom HTML.
  • Click within the HTML code and then go to Edit > Select all in your browser’s options.
select-all-tumblr
  • Press Delete on your keyboard to delete the content of the window.
  • Go to Edit > Paste to paste your new code.
theme-html-tumblr
  • Click on Appearance and then the Reset defaults link.
tumblr-reset-defaults
  • Click Ok on the pop-up alert.
tumblr-popup
  • Go through the Appearance fields and fill in your background color, Facebook URL and more.
tumblr-appearance-fields
  • When you’re done filling in all the fields, click Save and you’re done!
save-tumblr-theme

How to add content such as your address, hours of operation etc

  • Click “Appearance” in the Customize toolbar.
  • Scroll down and fill in the Business Name, Business Address and other fields.
  • If you leave any of the fields blank the section on the website will be removed for optimized layout
  • Note: The address you fill in will be used to automatically populate your Google map at the bottom of the page.

How to edit the call-to-action button (upper right-hand column)

  • Click “Appearance” in the Customize toolbar.
  • Scroll down to “Call to Action text” and type in what you want the button to say. (For example, “Join our mailing list” or “Make a reservation.”)
  • Next, go to “Call to action link” and type in the URL you want the user taken to.
  • Note: This can be an external page URL or a link to a page you’ve added to your Tumblr. See “Add a page to your Tumblr” for more info.

How to add your business photo (right-hand column)

  • Click “Appearance” in the Customize toolbar.
  • Upload your business’s photo.
  • Note: photos that are 290x190pixels work best.

How to add Google Analytics

  • First set up a Google Analytics account if you do not already have one (www.google.com/analytics).
  • Next, enter your UA number into the Google Analytics field in the Customization toolbar. For example, if your UA number is “UA-20845199-1,” you would enter “20845199-1.”
  • Note: If you do not wish to set up Google Analytics, empty out the field under Customization toolbar

How to add your social media links

  • Click “Appearance” in the Customize toolbar.
  • Scroll down to the social media fields and copy & paste your entire Facebook, Twitter, Yelp, Youtube and LinkedIn profile URLs into the fields. (Ex. Addwater would copy & paste http://www.facebook.com/addwatermarketing)
  • Note: If you leave any fields empty the social media icons will disappear from your blog.

How to add your “Terms and Conditions” link

  • Click “Appearance” in the Customize toolbar.
  • If you already have Terms & Conditions on an external site you can simply copy & paste the URL into the T&C field.
  • If you wish to create a new Terms & Conditions page, first add a Page to your blog. (We’ll explain how to do this in the next section.)
  • Choose a Page URL such as.tumblr.com/terms, and enter your Terms & Conditions into the Body.
  • Next, click “Appearance” in the Customize toolbar and scroll down to “Terms and conditions URL.” Copy & paste your new Terms & Conditions URL into the field.

How to add a page to your Tumblelog

  • Click “Pages” in the Customize toolbar, and then select “Add a page.”
  • In the “Page URL” field, add the name of your page to the end of the URL.
  • For example, if you’re adding a Specials page, add the word “specials” to the end of “.tumblr.com”
  • Choose a Page URL such as.tumblr.com/terms, and enter your Terms & Conditions into the Body.
  • Next, type in the name of your page in the “Page Title” field and fill the page with content in the “Body” field. Here, you can add a photo and format the text however you like.
  • Make sure to check the “Show a link to this page” box so your readers can find the page. Then click “Create page.”

What if you…

  • Don’t want to fill in all the data fields (Ex. You don’t have a Twitter account): Simply empty the field and leave it blank.
  • Have a question or encounter a problem: Contact us! We’re here to help you, so please don’t hesitate to shoot us an email or give us a call. http://addwater.com

Flickr widget

The Flickr widget requires your Flickr user ID, which is sometimes different than your Flickr Username.
  • To find your Flickr user ID, visit http://idgettr.com
  • Enter your Flickr’s photostream – typically found at http://www.flickr.com/photos/YOURUSERNAME/ – and click “Find.”
  • Copy the ID reported.
  • From your blog, go to Dashboard > Customize appearance > Appearance > “Flickr” and paste in your user ID.

How to add the Twitter widget (Premium & Lite)

  • Go to your Customize toolbar and click the Appearance tab. Then copy & paste your new code in the “Use Custom HTML” text box.
  • After copying & pasting your new code, click Appearance. Here you can your Twitter account URL.
  • Note: With with premium widget, you can also add a Twitter profile image and name your Twitter widget whatever you like.
  • Next, click Save + Close in the Customize bar.
  • From your Dashboard, click Settings and scroll down to the Twitter section.
  • After copying & pasting your new code, click Appearance. Here you can your Twitter account URL.
  • Check the “Send my Tumblr posts to Twitter” box and then click “Sign in with Twitter.” Enter your Username/Email and password and click “Authorize app.”
  • In Settings, scroll to the bottom and click “Save Preferences.”
  • Give Twitter a minute to sync everything and then check your blog for your Twitter widget!

Facebook Fan Page widget

  • From your Dashboard, click “Customize appearance.”
  • In a separate tab, open your Facebook Fan Page and copy the URL.
  • In the Customize toolbar, scroll down to “Facebook URL” and paste in your copied Facebook Fan Page URL.
  • Click Save and then give Tumblr a moment to recognize the changes.

Disqus widget

  • First, set up a Disqus account if you haven’t already. Then copy your Disqus shortname.
  • From your Tumblr Dashboard, click “Customize appearance.”
  • In the Customize toolbar, scroll down to “Disqus shortname” and paste in your Disqus shortname.
  • Click Save and then give Tumblr a moment to recognize the changes.

Blogs I Follow widget

  • After pasting in your new code, the Blogs I Follow widget will be automatically populated.
  • If it isn’t, make sure you’re following at least 1 Tumblr blog – otherwise this widget won’t work.

Posts I Like widget

  • After pasting in your new code, the Posts I Like widget will be automatically populated with your 3 most recently liked posts.
  • If it isn’t, make sure you’ve liked some Tumblr blog posts recently – otherwise this widget won’t work.

Getting Started

How to install Tumblrsite

  • Copy your new code.
  • Then visit www.tumblr.com/customize/domain.
  • Click on Theme and then Use custom HTML.
  • Click within the HTML code and then go to Edit > Select all in your browser’s options.
select-all-tumblr
  • Press Delete on your keyboard to delete the content of the window.
  • Go to Edit > Paste to paste your new code.
theme-html-tumblr
  • Click on Appearance and then the Reset defaults link.
tumblr-reset-defaults
  • Click Ok on the pop-up alert.
tumblr-popup
  • Go through the Appearance fields and fill in your background color, Facebook URL and more. (For more tips on these steps, click the appropriate section in the left-hand column.)
tumblr-appearance-fields
  • When you’re done filling in all the fields, click Save and you’re done!
save-tumblr-theme

How to configure widgets

  • For tips on configuring widgets, select the appropriate widget in the left-hand column.

How to add a header, background image etc.

  • From your Dashboard, click “Customize appearance.”
  • Click the “Appearance” tab.
  • For background images, click “upload” and upload an image no larger than 1600px wide.
  • For business image, click click “upload” and upload an image no larger than 300px wide. Note: Images that are 290x190px work best.
  • For header image, click “upload” and upload an image no larger than 715px wide. VERY IMPORTANT!: You must also CHECK the box underneath that says “Show image in header.”

How to add a favicon and/or configure the “Ask” page

  • From your Dashboard, click “Settings” in the right-hand column.
  • To add a favicon (the tiny image that displays next to your URL in your browser) simply upload a “Portrait photo.”
  • To include an “Ask” page, check the box next to “Ask.” Here you can re-name your Ask page as well.
  • When you’re done, click “Save preferences.”

How to manage the home page slideshow

  • From your Tumblr Dashboard, create a photo blog post with a single photo, or multiple photos.
  • Photos that are at least 960px wide and 300 px tall work best and will take up the entire width of the space.
  • While creating your post, go to the Tags field in the right-hand column and add the tag “slideshow”.
  • Your photo(s) will then automatically show up in your homepage slideshow!
  • Please note that…
  • It sometimes takes up to a minute for the Tumblr servers to recognize your new slideshow post, so be patient.
  • If there are no posts with the “slideshow” tag, the default template photos will be displayed.
  • If contents are not updating automatically, try to force a hard refresh by pressing “shift” when you reload the page in your browser.
  • If you want to disable the slideshow, visit your blog’s Customize menu.

How to manage the Portfolio page

  • To change the name of your Portfolio page (to “Menu,” for example), go to your Customize menu.
  • To change the titles and descriptions for each section of your Portfolio, go to your Customize menu.
  • To add photos to your Portfolio, go to your Tumblr Dashboard and create a photo blog post with a single photo, or multiple photos.
  • While creating your post, go to the Tags field in the right-hand column and add the tag “portfolio1″ “portfolio2″ or “portfolio3″ — based on which section you want your images to show up in.
  • If you only tag posts with, say “portfolio2,” the other two sections will not show up.
  • Your photo(s) will then automatically show up on the Portfolio page!
  • Please note that…
  • It sometimes takes up to a minute for the Tumblr servers to recognize your new Portfolio posts, so be patient.
  • If there are no posts with the “portfolio” tags, the default template photos will be displayed.
  • If contents are not updating automatically, try to force a hard refresh by pressing “shift” when you reload the page in your browser.
  • If you want to disable the Portfolio page, visit your blog’s Customize menu..

Anything we’ve missed?

  • If none of these How To’s covered your specific Tumblrsite questions, please check the Theme How To’s. Most of the Theme How To’s apply to Tumblrsite, too.
  • If you still have questions, shoot us an email.