Category Archives: Blogging

A New Thumbprint

a new thumbprint: my blogger to wordpress story

apricot thumbprint cookie (marché, east nashville)

New Beginnings. July 2013 marked a few key events. First, my blog had recently and unassumingly passed it’s third birthday. Second, I moved to Nashville to start a new job. Third, I realized something unexpected had happened under my nose: my blog’s original domain (cwfrosting.com) was purchased by a domain investor in Thailand.

The third realization led me to read more about the possibility of transitioning from Google-owned Blogger to WordPress. Eventually I sought professional help and made the leap. So here I am at WordPress, making a new blogging thumbprint.

Thank you both to Andrea Whitmer at Nuts & Bolts Media and Jesse Michelsen at Splyced Hosting for seamlessly performing the migration.

Read on for the detailed story.

Continue reading

Buttons Deconstructed

Blog Design Tutorial

W 

hy don’t those icons just behave?


Awhile back, I offhandedly mentioned to self-proclaimed non-techie blogger Kim, of Today Is My Someday, that she could ask me any blog-related questions and I’d try to help.

She replied that she couldn’t get her link party icons to line up. So I helped her get them in line.

Before
After

So Kim, at long last, here is my promised explanation of how I got those icons straight.

Read on for a 12-step tutorial.

Buttons Deconstructed
How to write/edit html code for blog icons

Basics
The following instructions will take you through how I write “html code” (or text) to post a series of blog buttons, all lined up, each linked to a specific website.

I will use my blog’s button as an example.

Think of writing code like making a sandwich. Everything you write has to be sandwiched between two slices of bread, except the bread in this case is a bunch of letters. You can also have mini sandwiches within the main sandwich. Isn’t that a mouthful?

———-

1. The Main Sandwich

 Photo Source: culinary.net

Highlighted in Yellow:
The entire code for a “link” is enclosed in an ‘a sandwich’, and it looks like this:

———-

2. The Target Sandwich

Photo Source: Target

Highlighted in Yellow:
All text inside the brackets < > and after the ‘a’ tells you what will happen when someone clicks on the icon. It’s like defining the target.

———-

3. The Target Website

Photo Source: leveljam

Highlighted in Yellow:
href= means “take me to that website.”

Make note that the target website goes between a set of quotation marks.

———-

4. The Target Window
(Optional!)

Photo Source: fine art america

Highlighted in Yellow:
target=”_blank” is completely optional.

It will do different things depending on the browser your reader is using.

It means open the website in a new tab (in Firefox) or open the website in a new window (in Safari). Haven’t tried other browsers yet.

———-

5. The Picture Frame Sandwich

 Photo Source: Master Frames Inc.

Highlighted in Yellow:
img means image.

The < img > tag encloses the code for your actual icon, like a picture frame.

———-

6. The Picture Itself

 Photo Source: Webweaver

Highlighted in Yellow:
src= means “the location of your image is”.

This means your image has to be located at a website. Photobucket is one site that provides free image hosting.

Make note of the quotations surrounding the website.

———-

7. The Border Tag

 Photo Source: City Of Karis @Etsy

Highlighted in Yellow:
border= tells you how wide of a border you want around your image, in pixels.
“0” means zero pixels, or no border.

Note the quotations marks around the number of pixels.

You may specify any number of pixels. I usually prefer none because most images are already designed with or without a border.

The border is not “like the picture frame.” It IS the picture frame.

———-

8. The Size Tags

 Photo Source: Letterbox Co.

Highlighted in Yellow:
height= means height of the image in pixels.
width= means width of the image in pixels.
“100” means 100 pixels.

Note the quotations marks around the number of pixels.

You may specify any height or width you want.

What if you only specify height?
The image will be that exact height, and the width will be automatically adjusted so the image keeps it’s original height to width proportions. And vice versa if you only specify width.

———-

9. The Alternate Name Tag
(Optional!)

Photo Source: Can Stock Photo

Highlighted in Yellow:
alt= means “what you want the link to say if the picture doesn’t show up for whatever reason, for example if the site is loading too slowly”.

———-

10. The Additional Space Tag
(Optional!)

Photo Source: Acclaim Images

Highlighted in Yellow:
hspace= means add extra horizontal space around your image.
“2” means add 2 extra pixels on left & right.

So if you’re lining up a bunch of images, each with hspace=”2″, then there will be 4 pixels between each image.

Side Note:
vspace=”2″ means add extra vertical space around your image, 2 extra pixels on top & bottom.

Picture Explanation

———-

11. The Spaces

Photo Source: pocketables

Highlighted in Yellow:
Note where there are spaces between code elements.

———-

12. Stringing Multiple Buttons Together

 Photo Source: Elizabeth Embellishments

The code is repeated 3 times. Each repeat is in a different color.

“a sandwich”

For those who can’t see colors well, look for the “a sandwich” to see where each of the repeats begins and ends.

The code above produces this:
cwfrostingcwfrostingcwfrosting

———-

p.s. On ordering elements.

The elements in steps 6-10 can be re-ordered and it will not affect the way your button looks or functions. Note that ‘img’ always has to come first.

You may notice that your blog hosting service automatically re-orders some of the elements when you save the code.

Or you may want to write your code in a different order so it’s more convenient to cut and paste elements you’re repeating (instead of typing it up over and over).

———-

p.p.s. For Simplification Purposes

I usually only use the coding described above. I delete all extra code, including but not limited to “center” “align” “left” “style”.

———-

Extras: Questions to be addressed at a later date.

How do I add icons to my sidebar?
 
How do I add a text header, e.g. a day of the week?

———-

Hope you have found this useful.

Please let me know if you have additional questions. You may leave a comment below or email me.

Cheers!
Linking to some parties in the right side bar.
Visit them for great inspiration!

“W” dropcap courtesy of Jessica Hische @ Daily Dropcap