Tumblr tip: Easy way to add drop shadows to your images
I recently added this to tehdik.com as an experiment. I think it’s pretty cool. We’ll see how long it stays.
1. Customize your Tumblr theme.
2. Find your post img CSS code.
3. Add the new stuff.
Original code from Robert Nyman. I added the “border-top” and “border-left” to improve the look on my white background.
Note: I used Pastie.org to style the code.
Note 2: I changed all #000 to #666 to decrease the intensity of the shadows.
This morning I was browsing when I discovered that Josef Richter introduced a way to recreate the GMail experience with a Helvetica focus: Helvetimail. This is in addition to other developers’ work on recreating popular sites with beautiful, minimalist experiences including Helvetical, Helvetwitter, and Helvetireader.
I immediately got to work. As an avid Mailplane user I wanted to ensure I could see GMail in this new fashion. Fortunately, it worked on the first try by manually downloading Richter’s CSS file, and selecting it Mailplane’s preferences.
I also emailed Ruben Bakker, Mailplane’s developer, to let him know about my discovery. To my surprise he gave me credit for the find in his blog post. What’s even more surprising is Josef Richter has also given me credit for the discovery on the Helvetimail page.
Thoroughly cool. I love this industry.
Below is a screenshot of Helvetimail in action.
The seamless integration between iWeb and MobileMe is ideal for anyone who wants an effortless way to create and manage a blog. I used the combination for a couple years, but I always felt trapped by the simplicity. I found myself asking the question “Can I do this?” with the inevitable answer being “No”. For example, why can’t my blog automatically be updated when I upload photos to Flickr or update my Twitter? Yes, you can add HTML and Flash widgets for various sites like Flickr and Twitter, but they cannot be automatically imported as posts.
Another question I asked often was “Why can’t I update from a friend’s computer?” Unfortunately, you can only update your MobileMe blog from the one computer where you use iWeb. Perhaps Apple will eventually allow you to update from me.com, but for now you’re stuck.
Someone using iWeb for blogging and MobileMe for hosting never has to think about HTML, CSS, or Javascript coding. However, if you occasionally enjoy tinkering and experimenting like myself, there are alternatives to consider. That’s why I recently switched to Tumblr, and I’d like to share my experience with you. Tumblr is a free and easy platform for sharing pictures, videos, music, quotes, links, and, of course, text from your phone or computer. You can use an iPhone app (Tumblr, Tumble Pro, TheTumbler), email, or any web browser.
Changing your blogging routine can be stressful so I understand if you are hesitant. Fortunately, everything you do here is easily reversible. Your iWeb and MobileMe data will not be touched.
Create a Tumblr account
This includes entering your email address, a password, and your desired URL (which can be changed later).
Customize your page
After clicking Customize you will see this menu.
Info menu
The Info menu allows you to enter a title for your blog, provide a description, select an image for your blog’s favicon, change your blog’s URL, or, most importantly, set up a custom domain name. I used GoDaddy for mine, and to cut the cost I used one of Cali Lewis’ Geekbrief.tv coupons: GB1, GB2, or GB3. This is a great opportunity to learn about custom DNS settings since you need to point your domain’s A record to 72.32.231.8. After a few hours (up to 24) your Tumblr account will appear when you enter your domain name into a web browser.
The description field can also be used to enter your Google Analytics account information. If you don’t have an Analytics account I highly recommend creating one. It’s extremely cool to see how many people visit your site and where they are in the world. The Analytics code you will paste into the description field starts with <script type=”text/javascript”> and ends with </script>.
Theme menu
There is a variety of themes provided by Tumblr to choose from. However, you can use the “Use custom HTML” button to import themes from sites like tumblrthemes.com and customthemes.tumblr.com. Once you find a theme you like, locate the HTML code, copy it, and paste it into Tumblr. Click “Update preview” and check out a preview of your blog. The custom HTML feature is where your tinkering habits can take control.
Appearance menu
Some themes provide the ability to change text color, link color, background color, etc. With this menu you can choose a popular theme, but still adjust it to your liking.
Feeds menu
The Feeds menu allows you to import your current blog’s RSS feed, and your accounts from lots of websites. Tumblr will automatically update your account about every hour. Some accounts are updated within minutes; some are updated every hour. If you choose to link your Twitter account there’s a cool option on the Preferences page that makes Tumblr automatically tweet when you update your Tumblr account. This does not include items imported by the Feeds menu.
Note: If you choose to import your Flickr account, choose RSS feed as photos and enter your photostream RSS feed URL.
Advanced menu
The Advanced menu includes a short list of options that are self-explanatory. For example, timezone, enable high-res photos, use descriptive url’s, allow search engines to index your tumbelog, promote me on tumblr, and location.
Create a new post
Update iWeb. Update Twitter. Update Flickr. This will add some meat to your new Tumblr account so you can see how your theme looks with different kinds of posts.
Add comments using Disqus
If you choose to use a custom HTML theme on Tumblr, you can enter some clever code to allow visitors to your blog to comment on each post. Disqus provides the ability for visitors to leave comments as guests, Disqus users, Facebook users, or Twitter users. This makes it easy for visitors to keep track of their comments on the web, and automatically repost them to the listed services. If you’re nervous about code, don’t worry; Disqus shows you exactly where to paste their code in.
Decide
These instructions are only the beginning. If you’re comfortable with CSS and HTML you can go way beyond. I consider the theme to be lifting off point. It’s up to you to make it unique. Tumblr has some great built-in tools for extending your basic blog into a powerful site. Visit tehdik.com to see how I personally extended a theme. I used a theme with a built-in sidebar so I could provide basic information about myself, some links, a search field, and my Twitter data. That leaves my main content area for Flickr pictures, videos, and text updates.
I am an extremely satisfied Tumblr user. iWeb + MobileMe was easy, but it just wasn’t enough. If you have any questions please feel free to leave a comment.
Important note:
Aaron convinced me to switch to Tumblr, and he answered my somewhat complicated CSS questions.
