How to Backup Your Blogger Template (Technical Tuesday - Special)

I enjoy reading Nathan Hale's blog. He's an incredible artist/illustrator and often tells stories, a page at a time, on his blog. He shares tips, advice, and events from his life. He also runs some really fun contests. You should follow him.

A couple months back he re-designed his blog. That sounds boring, but he allowed his readers to see each step and even participate in the decisions. He'd  post some new artwork and get feedback, then we'd see the blog change. Sometimes the changes didn't work out the first time and he'd try again. It was a lot of fun and I learned from it, too.

I hope that this journey will also be entertaining and educational. I don't think I can compete with Nathan's illustrations, but I'll do the best I can.

With that high bar to clear, let's get started.

Step Numero Uno

The first step on our Dynamic Views journey is to create a backup. I've put a lot of work into my current setup and I don't want to lose it. Also, if I don't like my changes I want an easy way out. In this post, I'll walk you through creating a backup of your Blogger template.

Official Backup

Blogger provides a way to download a file with all your template information. You have to be using the updated version of the Blogger Dashboard, because the backup option doesn't appear to be in the old interface.

1. Go to your Blogger Dashboard.
2. If you see a link near the top of the screen that says "Try the updated blogger interface" then click it. If not, you're good.
3. Go to the Template section of the Dashboard.
4. Click the "Backup/Restore" button on the top-right.
5. Then click "Download full template" and save the file to your computer.

Fail-Safe

One of my rules for backups is that I need to be able to understand them. The file Blogger creates is nice and easy, but I like to have a fail-safe--something that I can understand without a lot of technology. In this case, I'm mostly interested in recording how my blog looks, so a screenshot will do the trick.

The backup file Blogger creates is an XML file. I work with these all the time, so I could probably recreate everything from that if I had to, but a little more insurance is a good thing. Especially when it won't cost that much.

I took four screenshots of my blog to get the header, sidebar, and footer information. I also copied the text and html out of a few of my sidebar widgets and pasted them into a text document for safe keeping.

I saved all the files in a single directory.

Simple Test

We're done, right? Wrong.

This is the step people skip. They think, "I've got a backup, now I'm safe." But you don't know that until you try it.

1. Go back to your Dashboard -> Templates.
2. Click on "Backup/Restore" again.
3. This time Choose your backup file and Upload it.
4. Now, check out your blog and make sure everything still looks good.

If everything worked, nothing will change on your blog. It should look exactly like it did before. If there is a problem, then you can either use the screenshots (our fail-safe) to put everything back. Or you can keep moving ahead with the knowledge that you don't have a good backup. It's up to you.

Full Test

My next test was to switch my blog over to a Dynamic View and then restore it back again. I wanted to make double-sure I could go back if I needed to. This may seem like overkill, but I would rather know that I'm working without a safety net instead of believing that there is a safety net protecting me.

Note: Please read all the steps before trying this. I ran into problems part way through this test.

1. Go back to your Dashboard -> Templates.
2. Select one of the Dynamic Views and Apply it on your blog.
3. Visit your blog and make sure the new view works.
4. Go back to your Dashboard -> Templates.

I know what you're thinking, "Just click on Backup/Restore and upload the backup file." Well, I tried that and it didn't work. Agh! It appeared to work , but my blog never changed.

See? This is why it's good to test each piece as you go.

I did discover a work-around. You're mileage may vary.

5. I chose one of the "Simple" templates and applied it to my blog.
6. Then I was able to click on Backup/Restore and Upload my file.

My blog looked the same, so the backup worked. Hooray!

I suspect there is a bug that doesn't allow the older templates to be uploaded when a Dynamic View is active. If Blogger fixes this then you won't need the work around.

Now that we have a backup and we know it works, we're ready to embark on the Dynamic Views journey.

Thanks for hanging in there with me. I know this post was a bit dry. I felt it was important to cover--not only for this journey, but also for any time you want to make big changes to your Blogger template. I hope you find it useful.

Tomorrow, I switch to using a Dynamic View. Which one do you think I should try first?

* They don't make night deposit boxes like that anymore. This photo by Mira Hartford can be found on Flickr.

Blogger Dynamic Views (Technical Tuesday - Special)

Blogger just announced a new template feature called Dynamic Views. They change the way your readers can see and use your blog in some dramatic ways. Here's a video trailer Blogger put together that gives you a quick introduction:

Over the next few days, I'm going to try out each of the views and give you my thoughts. I'll also post the steps I used to get each one working.

I'm sure some of the views won't be right for this style of blog, but I'm going to try them anyway--for science. Okay, maybe not for science, but it should be fun.

Try It Out Now

Blogger has a way to try out the new views without changing anything on your blog. You can go right ahead and see what yours will look like if you switched. I don't know if it's completely accurate, but it's worth a shot.

Just type the URL of your blog (or anyone else's) and click Preview to see.

.blogspot.com

A Quick Warning

If you use a custom template (like Cutest Blog on the Block or Hot Bliggety Blog) then you might have some problems. I tried previewing couple blogs and they mostly worked, but some of the views had problems. I don't know if this is because of the custom template or because of stray codes in their posts.

The new views won't have any of your cool themes (background, colors, etc). I'll be researching how to make that happen.

Why It's  Cool

Before I get into the technical pieces over the next several posts, I thought I'd share a couple points that I think make these new views cool.

First, "Infinite Scrolling". This is what Blogger is calling it, but it means that your readers will be able to keep scrolling through your posts without having to click a "See previous posts" link. Your visitor can scroll all the way back to your first post if they want to.

When I find a blog I like, I typically scan through until I get to the bottom of the page then move on. Now, I could keep scrolling and scrolling. This will allow me to see a lot more content before I visit someone else. Cool.

Second, "More Content". The new views allow for more of your posts to be accessible faster. Currently, blogs fill the front screen with the latest post. You might see the top of the next post if the first one is short.

With the new views more of your posts will be visible "above the fold". I hope this leads to visitors clicking on more than one post. It can also lead to your popular posts getting more visits. Cool.

Why It May Not Be Cool

It's not all singing birds and happy elves. I can think of a couple problems with the new layouts.

First, "Where's the sidebar and gadgets?" A standard feature of many blogs is the sidebar. Some blogs have multiple sidebars that go on and on and on. But I don't see that feature with the new templates. Maybe it's there. I'll have to let you know when I try them out.

Second, "Pictures, pictures, pictures". Many of the new views put a heavy emphasis on the images you include in your posts. If you don't have a lot of images, or your images are low quality, this could adversely affect your visitors. The new views will even pull images out of old posts to show, so if you have a bunch of old, blurry images it might not be pretty.

Aaaaand We're Off

Stay tuned for my experiments with the different views, and if you have any questions put them in the comments and I'll work them into my research.

Use Multiple Browsers (Technical Tuesday)

The web is a marvel. It changed our society in so many ways. And like most marvels it does a great job of working even if you don't understand how. Think of your car, or your air conditioner, or your refrigerator. You may know some about how they work, but mostly you just let them do their job.

Today I'm going to teach you a teensy bit more about how the web works. Don't worry, it won't get complicated, and having this knowledge will help you if you have your own website or blog. It may also help you if you've ever visited a site that didn't work.

We're going to talk about browsers and why you should have more than one.

Ice-breaker

Back in high school I worked as a summer camp counselor. Before camp began they held a series of training meetings. At the first one we usually played an icebreaker game. You know the drill--they force you to interact with all the strangers in the room?

One game involved picking a person out of the group and showing them a simple line drawing. The person described the drawing while everyone else drew what they understood. In the end, we'd all show our drawings. Often the results were--how should I put this--awful. Then they'd pick someone else to be publicly embarrassed It.

How this game was supposed to help us get along better, I'm still not sure. But it is a great example of how the web works.

Browser-breaker

Quick Definition:
Browser: Short for "Internet Browser" or "Web Browser". This is the program you use to access the web. The most common browsers are Internet Explorer, Firefox, Chrome, Safari, Opera, and Mobile Devices.

Any time you go to a website it sends a stream of letters and images to your computer. Your browser receives these data and displays it to you. Using our icebreaker game, imagine that the website is the person describing the picture and your browser is the one trying to draw it.

Browsers have been playing this "game" for a long time. They're pretty good at getting things right, but there are still small differences (and sometimes major differences) between the browsers.

Have you ever gone to a blog and seen all the wonderful comments, but it won't let you leave one? Or have you visited a website and everything looked all messed up? Has anyone ever told you that YOUR blog or website was messed up, but it looks just fine to you? Many times, these are symptoms of the different browsers "drawing different pictures".

This is why, as a provider of web content, you need to test out your product in all the major browsers. You'll be surprised how different each one looks, and you may even discover why some of your users complain that they can't see your stuff.

Get the Browsers

All the major browsers are freely available to download and install. I recommend installing Internet Explorer, Firefox, and Chrome. This will cover over 80% of your potential readers. If you have a big following using Macs you'll also want to install Safari.

Click on the following links to download and install. If you already have a browser you don't need to install it again.

• Internet Explorer
• Firefox
• Chrome
• Safari

Quick Tour

Each of these browsers approaches the web a little differently. Don't let that worry you. You don't have to spend a lot of time with them. You're just using them when you need to. Here and there.

All of the browsers will allow you to type (or copy) in a web address and press Enter to visit a page. All of them will let you scroll through your page and click on links. And that's it. There's a lot more to learn about each browser, but you don't need to know all that just to test your site.

To Browse or Not to Browse

First, when someone complains that your site or blog doesn't work right, make sure to check it out in each of  the different browsers. Odds are, one of them will have the problem. If that happens, then do a search specific to that browser such as "Internet Explorer won't allow Blogger comments". You might find your answer.

Second, any time you make big changes to your blog or site, test it with the browsers--especially if you're changing your theme. There have been numerous times I've visited a blog to find the titles overwriting the comments link, or jutting out into the sidebar, or have the posts all jumbled with strange colors. This is usually caused by the theme not supporting all the browsers. Sometimes you can report this to the theme creator and they'll fix it. Sometimes you'll have to choose another theme.

Diversity

Having different browsers can be a pain sometimes. It means a bit of extra work for us bloggers and website creators, and it might be tempting to complain about that. Don't.

Having different browsers forces them to compete. Which means they're doing new things. Some of those new things are what makes the web so awesome today, and they will make it even more awesome in the future.

Now instead of feeling helpless when your browser or a site doesn't work, you can be proactive. Jump to another browser and see if that works.

Happy Browsing.

Question: Which browser do you use most often? What do you love/hate about it?

* The cool ice picture (pun most definitely intended) was taken by BuildArk and can be found on Flickr.

** Browser statistics are based on August 2011 data.

Scrabble: Howard Taylor & Dan Wells Style

I was manning the help desk at a writers conference last year when I saw two of my favorite writers, Howard Taylor and Dan Wells, playing a game. It looked like Scrabble, but they were having fun.

I'll admit, I don't like Scrabble. That may sound strange coming from someone who enjoys words and stories and writing, but it's true. I just can't get into it.

Curious, I walked over after my shift, and got my first introduction to Speed Scrabble. That may sound like an oxymoron, but it's actually a very descriptive name. I didn't get to play with them, but I did jot down some notes.

The game itself is small (it requires no board). Games last less than 10 minutes. It works with many age levels (you don't get prodigious advantages for comprehending erudite lexicon).

Here are the rules:

• Put all the tiles in a bag or upside-down in a pile on the table.
• Everyone draws seven tiles.
• When the game begins everyone attempts to make word(s) with their letters. You can make as many or few words as you want as long as they all connect, crossword-style.
• As soon as someone uses all their letters they call, "Draw."
• When "Draw" is called, everyone must draw one tile. You draw a tile even if you haven't used up all your letters.
• Play continues until there are no more letters left to draw.

Scoring:

• We play that the person who calls Draw when the tiles run out is the winner. It's easy.
• You can also tally up the score for each tile used and subtract your unused tiles. The winner also gets to add everyone's unused tiles to their score.
• You can give bonus points for longer words.

And a couple quick notes:

• The letter Q can be used as "Qu".
• Blanks are wild (just like in Scrabble).
• You can rearrange your tiles at any time. This means you can break up existing words and recombine them to form different ones.
• Draw different amounts. Try a game where you draw two or three tiles at a time. I, personally, like drawing a single tile because it forces you to rearrange your words more often, but drawing more tiles will make the game go faster.
• There are other sets of rules online. Just search for "Speed Scrabble."

If you're looking for a fun game that you probably already have in your home, then you might like Speed Scrabble. It's also portable, so you can take it to your next writers conference. If you see me there, I'll play a round with you.

* Oh, man! What I wouldn't give for all those vowels in the photo. It was taken by janetgalore and can be found on Flickr.

Lastpass (Technical Tuesday)

As a computer programmer I feel that I should apologize to the world for a big problem my profession created. There's no way to measure the number of lost hours or the amount of frustration.

In our defense, we didn't mean for things to get this bad. Every step of the way, we were just trying to make things better--safer. And now, even programmers are caught in the quagmire.

I'm talking about passwords. They're a necessary problem, but a problem nonetheless.

As I see it, there are two things that cause us the most grief:

1. Passwords are too complex (and getting worse all the time).
2. There are too many of them.

History in a Nutshell

It all started out simple enough. Huge machines were easy to secure--lock the door. Then computers got smaller.

Smaller computers were more public and had more users. Those users wanted security, so in came the password. Back then passwords could actually be real words. Then computers got faster.

See there are only about 250,000 words in the English language. That may seem like a lot, but my computer can count to 250K in about 1 one-hundredth of a second. So guessing a word is trivial.

We started requiring rules for passwords like they couldn't be words, they had to be eight characters long, they had to have uppercase and lowercase letters, they had to contain numbers and symbols. I'm sure you're all familiar with these.

Today people have to choose a mishmash of letters and numbers, and we're not built to remember things like that. Sure we can remember one or two. More than that and it's a lost cause, so we take shortcuts.

We use our name. Either your own name, the name(s) of your children, spouse, parents, or even a nickname. Then we tack a number on the end. For example, "Thomas11".  If we don't use the number 1 then we use a number that is important to us--our birthday, anniversary, graduation or phone number like "MyName1990" or "MySpouse1996".

We use a simple word we can remember like "password" or "letmein". Sometimes we get sneaky and replace letters with numbers: "P4ssw0rd" and "L3tM3In". Again, we'll tack a single number on the end until it's long enough usually the number 1.

We also like series of numbers or patterns on the keyboard: "12345678", "Qwertyui", "Asdfghkj"

Have I come close to guessing your password yet? Most likely.

The worst part is this. Even if you do have a very secure, hard-to-guess password, odds are that you use the same one or two of them on almost every site you sign up for. Because you can't remember dozens of different ones.

A Horror Story

I don't want to dwell on this sad story, but there's a lot to learn in it. By the way, I've changed the names and details of the story, but the heart of it is the same.

I have a friend who ran an online business. He reviewed items on Amazon, and people used his affiliate link to buy things. He wasn't making a fortune, but the couple hundred dollars each month helped a lot.

One day, he was surfing the net and found a cool site where he could track his exercise. He signed up with them so he could get access to training schedules and a weekly reminder email.

A few months later, the exercise site was hacked. The hackers got away with everyone's username, password, and email address, but they were sneaky and the site owner didn't know. The first thing the hackers did was write a program to access everyone's email address using the password they stole from the exercise site. They were able to get into my friend's online email account.

Once they had access to his email, they changed his password. Then they did a few searches through his mail and found out the name of his bank, his paypal username, and his Amazon ID. They went out to those sites and tried the same password, but it didn't work. A friend had told him to use a different password for his business affairs, and he took their advice.

That didn't bother the hackers. They clicked on the "Forgot Password" link, and changed the passwords using the hacked email account. They then proceeded to buy stuff with his credit card on Amazon, they wrote offensive reviews for products, they sent rude emails to clients and customers, they sent money through PayPal to random people, and turned off his automatic bill pay.

It took many, many months to recover. He never did start up his business again. His reputation was tarnished and his motivation was in shambles.

Don't let this happen to you.

LastPass

Here is one thing you can do to keep yourself safer. Use a program called LastPass for all your sites (except your primary email and financial sites).

This program installs in your browser (on your computer and on your phone) and fills in password prompts for you. It will even help you generate passwords when you're signing up for sites. By using this program, you can use a unique, random password for every site. That way, even if hackers strike they won't get access to everything.

As the video explains, passwords are encrypted and stored using a master password--your "Last Password". It is encrypted in a way that even the company couldn't access your information without spending years breaking the code. Lesson: Don't lose your master password.

Personally, I don't put my email or financial passwords into LastPass, so that means I have to remember four passwords: my bank, my PayPal, my email, and my master password. That's not so bad. LastPass remembers everything else for me. Besides, if LastPass completely tanks, I can still use the "Forgot Password" link on any of the sites to access my accounts.

What to Do

This is Technical Tuesday, so here are some steps for you to follow to get setup with LastPass.

1. Visit https://lastpass.com/ and learn more about the program. They have several good videos and FAQs.
2. Download and install LastPass on your computer. Follow the steps to setup a new account. Use their recommendations to choose a secure-but-memorable master password.
3. Change your password on your email and financial accounts. Pick a password you haven't used anywhere else. You can let LastPass remember these for you, or not. It's up to you.
4. That's it. Now, as you surf the internet and login to your sites change your password using LastPass. Also, when you sign up for new sites use LastPass to generate the passwords.
5. If you like the product, buy something from them. This is what keeps the free version free, and what pays their paychecks to create more great products.

Soon, you'll only need to remember a few secure passwords and LastPass can remember the rest.

Note: Today's post wasn't an answer to anyone's question, but I felt this was an important topic to cover.

* I'm always impressed when someone can use a simple, common object and take a great photo. tehusagent did just that with the key photo. You can see the full-sized image on Flickr. I especially like the little strand of pocket lint clinging to the side.

Castle Miranda Pictures

"A picture is worth a thousand words."

That's not true; Some pictures are worth more than others.

It takes a good photographer to capture more than the light--to capture the feeling, the motion, the story of the picture.

When I saw these pictures taken by David Herreman whole stories formed in my head. The Miranda Castle has a lot of history, and David's images captured so much of it. They're awesome!

I immediately emailed him and got permission to post a few for you. I hope you find as much inspiration in them as I did. (Click through the image to see the full-sized version on David's website.)

---

The castle is in ruin today, but its stately arches and elegant lines still struggle to show through.

Can't you imagine royalty gliding down this stairway?

Servants in full uniform bustling through the halls

Foreign dignitaries heading to an important meeting?

---

The castle was used as an orphanage during World War II. That's an old black board on the wall.

This reminded me that castles were large, multi-function buildings. During hard times, these structures were remodeled to handle many needs. If you're writing about a castle, it is good to remember this. How often have you read a story where the characters visit the area in the castle where the tutors worked?

I also loved the peeling paint and the mildew working through the walls.

---

This is my favorite. It's so creepy.

The floor tiles were either removed by the owners or looters.

Again, you can see the beauty of this hall with it's graceful curves and majestic doorways even after suffering such degradation. Imagine what it must have looked like in its prime?

The inherent beauty just adds to the creepiness. That was a good lesson to me. When I write about creepy places, I need to let the former glory and beauty show through the grime.

---

There are more pictures of this amazing location on his website and Flickr stream.

Go check them out.

---

If you liked the castle, David has pictures of other old buildings on his Flickr photostream. Check out his Belgium collection for more incredible castles and abbeys.

If castle's aren't your thing, he also has stunning photos of landscapes, seascapes, and nature.

Where do you find inspiration?

* All images in this post belong to the awesome David Herreman. Used with permission. (Thanks, David, for allowing me to share these.)

How to Create an Image Button (Technical Tuesday)

Today, I'm going to teach you how to turn a book cover into a clickable button you can give to your fellow bloggerites blogarians your posse. Don't worry if you don't have a book cover. You can use these steps to create any kind of clickable image for an award or special giveaway.

Rebecca Talley asked, "How can I make a button with an image of my book that others can put on their blogs?"

Quick Steps

I've created a tool to help you. Just fill in the form on the left and click Generate. You can preview your button in the middle section. If it looks good, copy the HTML code from the right and paste it into your website or blog. Done. By the way, you can make changes to the form and regenerate as many times as you want, so go ahead and play around.

(Note: This form may not work in an RSS reader. You'll have to visit the blog to use it.)

---

Settings Image URL Link URL Message Options: Show Message Show Copy Text Box	Preview	Code
Enter the details for your button.	Preview your button. Be careful when clicking on the button, it will take you away from this page (just like your real button will).	Copy and paste the code into your blog or website. Enjoy.

---

Longer Steps

If the tool didn't work for you (or you want more information), don't worry--I got your back. I'm going to cover all the steps you need to do to make your button.

Find Your Image

First, you're going to need an image. Follow the instructions on my previous post to find and re-size your image. Your final image should probably be between 125 pixels and 175 pixels wide. If you are unsure what size you need, try 150 pixels.

Since Rebecca asked the question we're going to use the book cover of her latest release The Upside of Down. Here it is:

Post Your Image Online

Your image needs to be publicly available online.

The very best place for it is hosted with your website, but different companies have different ways to get files on the internet. If you know how to do this, then do it and skip the rest of this section.

If you don't know how (or don't want) to upload your file to your website, I've got the next-best thing. We're going to upload it to Google Photos. (This used to be called Picasa Web Albums. Google is in the process of changing the name, so you'll still see it called both.) If you have a Google account or a Blogger blog then you're good. If not, you could create one, or you could use any number of other photo hosting sites.

Visit Google Photos and login if you need to. Click to "Upload" your image, then find the file on your computer and upload it. When you upload an image you can choose what album it is placed in. I chose to create a new album called "Public Album", but you can call yours whatever you want (or put the image in an existing album). Then click OK.

Now that the image is online, we need to make it publicly available. If you tried to make your button right now it would work for you because you have access to see the image, but everyone else in the world will just see a missing picture. That's not good.

In Google Photos, you should be viewing the album you just created. If not, navigate to it now. Select Actions, then Album Properties. This will bring up a window with the details of your album. The only thing you need to change is the Visibility setting. Change it to "Public on the Web". This means that anyone can view the pictures in the album without needing to login. They will also show up when people search.

There's one last step, you need to find the URL of your image. In Google Photos, click on your picture to view it. In the right sidebar click on "Link to this Photo". This will open up a couple text boxes and some settings. Make sure that you Select the Size of "Original Size". Then check the option "Image Only (no link)". Now, the information you're looking for is in the "Embed Image" field. Copy the text from that field, and paste it into notepad or Word for safe keeping during these steps.)

The Link for our example image is: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDpTseUZRqsSVUHh2VKE2-HTSYvU5aLvYmhQdmgtMmHT8cI3ypHGaF7qd0WcP1Qv4bckuozQTpHLgLZiZe_2uJyEQ8RK8trh3lixMSB8FBi_tDospNlVFddhySZAQutXY5SMwy97NOvTc/s800/upside%252520of%252520down.jpg

Wow! That's ugly and long, but it works and the people who view your site won't have to see that link. They'll just see your awesome image.

Decide Where You Want the Button to Go

When someone clicks your button, where do you want them to go? Open up an internet browser and go to the page. Then copy the full text out of the address bar. Again, paste this into the notepad or Word doc you used in the last step.

For our example, we have several options.

• Her writing blog.
• Her website.
• Her book blog.
• The sample prologue or chapter.
• The amazon purchase link.
• A link to the teaser trailer on YouTube.

We're going to use the link to her book blog, but there is no wrong answer. Here is the URL: http://theupsideofdown2.blogspot.com/.

Use the Tool

You now have the information you need to use the tool. Just copy and paste the information from your notepad or Word document into the tool. Put the image URL (from Google Photos) into the Image URL field. Put your destination URL (the blog address) into the Link URL field. Make sure these links include the full address that means it has to have the "http://" part.

Click Generate and see what it looks like. That's nice.

<a href="http://theupsideofdown2.blogspot.com/"><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDpTseUZRqsSVUHh2VKE2-HTSYvU5aLvYmhQdmgtMmHT8cI3ypHGaF7qd0WcP1Qv4bckuozQTpHLgLZiZe_2uJyEQ8RK8trh3lixMSB8FBi_tDospNlVFddhySZAQutXY5SMwy97NOvTc/s800/upside%252520of%252520down.jpg" /></a>

Extra Options

The tool has some other options you can try.

If you enter a Message and check Show Message then it will display the message under the image. You can use this for short blurbs like "Buy Today", or "Ends Sept 24th", or "Available in Oct".

If you check "Show Copy Text Box" then a text box will be created under the image with the code people need to copy and paste to get your button on their site. This is useful when you post your button on your own site. Anyone who wants to grab your button can copy the code and use it.

Go ahead, play around with the options and see what works best for you.

There you go, a quick tool for creating image buttons for blogs and websites. If you use the tool let me know in the comments. And if you have any other technical questions, send them over.

Go With the Flow

Some days, everything just works. I sit down to write and the words flow effortlessly onto the page. When I edit, I can see the problems and know how to fix them. Psychologists call this Flow. It feels great. I'm a writing god.

Other days, not so much. I struggle to put two words together, and when I do I wrestle the impulse to delete one of them. The scene in my head is clear; the scene on paper should be taken out back and shot, then doused in gasoline, and . . . *blech*--it's not even worth burning, just throw it away. But I don't throw it away. I soldier on. Because when you find yourself going through hell, it's a bad idea to stop and setup camp.

Everyone I know experiences both these states: some Fight more than Flow; others Flow more than Fight.

I find I produce my best work when . . . I'm writing. Sometimes I go back and read a scene that Flowed, and it's awful. Other times, I dread reading a scene because I fought with that piece for hours or days, and it works with only minor tweaks. Of course, the opposite is true as well.

So whether you feel like doing something or not, roll up your sleeves and get to work. Some days you'll enjoy going with the flow. Other times you'll struggle against it.

Come heaven or hell, as long as you keep putting words together and working scene after scene you're going to make it.

* I totally need four or five of those Works in Progress cones to put around my desk while I'm writing. The picture was taken by koalazymonkey and can be found on Flickr.

Re-sizing Images (Technical Tuesday)

Thanks to all the awesome people who submitted technical questions. There were so many interesting topics. Several of you asked questions related to working with images, so today I'm going to cover one of them.

Canda asked how to re-size images to fit on her blog.

There are two parts to this question. First, I'll explain how to re-size images. Then, I'll cover how to find out what size the images need to be.

Re-sizing Images: Quick Steps

1. Find the nicest image you can.
2. Choose which way to re-size.
3. Option A: Use length and width attributes.
4. Option B: Use an image editor.
5. Test it out.

Find the Nicest Image You Can

You need to start with a nice, clean image. Make sure all the text is crisp and easy to read; the colors are good; and nothing is blurry (unless it's supposed to be blurry).

While it is possible to increase the size of images using the methods I'm going to cover, doing that will increase the blurriness. Be warned, if you make an image a lot bigger things will look blocky. But, if you just need it a smidge bigger, then try it out and see. Otherwise, find a larger image.

Choose Wisely

I'm going to show you two ways to re-size your images. Before I jump into the details I'll talk a bit about how each of the ways work. There are reasons to use both, but if you're in a hurry just jump down to the second option. That will work for you most of the time.

Way #1: Make it Look Smaller

This way takes advantage of HTML code to make an image appear to be any size you want. It's fast and simple to do, but it comes with some significant disadvantages. 

First, if the image is big the user is going to download that big image. For example, imagine your neighbor calls up and asks to borrow a cup of milk, so you get out your moving dolly, load your refrigerator into the back of your car, drive over to your friends house, and pour a cup of milk for them. That's a lot of wasted time and effort.

Have you ever visited a site and waited a long time for all the images to load? Even though the images looked small? This is probably why. The images were actually big but were changed to only appear small.

Let me show you what I mean.

That's a nice image and a good size, but if you click on it you'll see how big it actually is. That's lots of wasted bandwidth.

Second, browsers aren't as good at re-sizing images as a real image editing program. They do their best and all, but if Internet Explorer ever gets better than Photoshop something is wrong.

So, why even use this way? Let's say you really do want a big image with lots of details. For example, you get back from an AWESOME writers conference and you have a great picture with 50 of your new closest friends, but when you make it fit on your blog everyone looks like little smudges. You can use this technique and when a reader clicks to see the full image they will see it immediately (because it is already loaded) instead of waiting for it to load.

Here's how you do it. After inserting your image in Blogger, click on it. You will see options for changing the size to Small, Medium, Large, etc. Choose one of those options. (Click the screenshot to see a larger view.)

Did you see what I did there? Screenshots are a great reason to use this re-sizing option because the reader can click to get a bigger, clearer view.

Advanced Tip:

After you select a size, change to the "Edit HTML" view and find your image. It should look something like this:

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD0w2oByOlBlWerltbaR2wlm9aeXLD_ZfWbVfeRZ3w8hLWAPleEyYsZdp6CaI8q324nXVEnApknI5C20nd2sN-3_e8VljmGAqYMH0zXHZJEXxiuCoe0TV3O_vkqlHacrWLHG0uXBmUyyY/s1600/Blogger-resize.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="185" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD0w2oByOlBlWerltbaR2wlm9aeXLD_ZfWbVfeRZ3w8hLWAPleEyYsZdp6CaI8q324nXVEnApknI5C20nd2sN-3_e8VljmGAqYMH0zXHZJEXxiuCoe0TV3O_vkqlHacrWLHG0uXBmUyyY/s200/Blogger-resize.png" width="200" /></a>

The "img" tag means this is an image. The height and width attributes are used to control the appearance of the image on the page. You can edit these by hand if you want, just make sure to keep the height and width ratios the same otherwise you will end up with images looking like this:

Way #2: Make it Actually Smaller

This way will change the actual image to be the exact size you want. You'll have to use another program to do this, but it's not that difficult. It takes a bit extra work, but the end results are best for your readers. They don't download any extra bits and the images appear exactly how you want them.

I don't know what image editor you use, so I'm going to use one that's online and free. It's called Picnik. The first step is to go to their site and choose to "Get Started Now".

Once you're in, choose to "Upload a Photo". Then find the file on your computer and upload it. You will see your image on the screen.

There are several things you can do with your image. The one we want is Resize. Click it. Then enter the width or height you want. No matter which value you changed, the other one will be automatically changed to keep the proportions the same. Once you have the right size, click Apply.

Quick Tip:
For most blog sidebars you'll want a width around 150 pixels. For images in your main articles, you'll want to keep it less than 600 pixels. For your blog header, try something around 800 pixels. We'll get into this in more detail below.

To Border or Not To Border

Small detour, here. I hope you don't mind.

While we're in Picnik you should think about putting a border around your image. Some images will fade away when put on dark or light backgrounds. Sometimes this is what you want (like for our example image). Sometimes this is NOT what you want (like with your book cover or blog award). I can't count the number of times I've seen a mostly-white book cover sitting in a blog post on a white background and it's hard to see. This can be solved by putting a simple border around your image.

In Picnik click on Frames. You can find it in the menu near the top of the page. The frame I suggest is simply called "Border".

Play around with different thicknesses. I suggest using an Inner Thickness of 0 and the Outer Thickness of 1. You can also experiment with colors. I suggest either black or white. Remember, subtle is your friend here. You want the border to give a frame for YOUR image not to draw attention to itself.

If you're a graphic artist, feel free to ignore my advice and use the thickness and colors that best accentuate the overall affect of the image in the intended setting. Then again, if you're a graphic artist you don't need to learn any of this. For the rest of you, think simple and subtle--thin border, black or white.

Then click Apply.

Back to Way #2: We're Almost Done

Now that our image is sized correctly and may have a border, we're ready to save it. Choose "Save & Share" in the tabs across the top. Type in a name for your file. Then click on "Save Photo", and wait for it to download to your computer.

Here's the final file re-sized to 170 pixels wide. Which should be the right size for Canda's Blog.

Test It Out

Load the new image to your blog like you usually do. If it's still not the right size you may need to try again, but that's what learning is about. Once you go through this a few times, you'll be a pro and will shrink an image and get it on your blog in no time.

What Size Do I Need?

This question doesn't have an easy answer. For some shoot-from-the-hip sizes check out the Quick Tips section above.

Often there are other images on your blog that are the right size. If so, you can find out their size and copy them. Here's how to do it in the different browsers. (I apologize, I don't own a Mac so these instructions are Windows-centric.)

Chrome: Right-click on the image, select "Inspect element". In the bottom-right-hand pane find the "Metrics" section. The size of your image will be listed in the box as "Width x Height".
Firefox: Right-click on the image, select "Inspect element". In the bottom-right-hand pane choose the tab for "Layout". The size of your image will be listed in the box as "Width x Height".
Internet Explorer: Right-click on the image, select "Properties". The dimensions are listed in the window that pops up as "Width x Height".

Let me know if these instructions are helpful. I'm still trying to find a good voice and length for these articles. Do you think this one is too long? Or too short? Let me know. What other technical topics would you like to learn about?

* The BlogMouse image was used on Canda's blog. I found it in hundreds of places across the internet. If you own the copyright and want me to take this down just let me know.