Tuesday, October 7, 2008

DIY Blog Design Pointer: Interactive Link Lists (for blog rolls etc...)

I'm new at explaining this techie stuff; (I'm certainly no computer pro) but thought I'd attempt to share a do-it-yourself blog design tip, in case anyone wants one...

I was worried that I was just being annoying by posting that whole bunch of link lists (Blog Roll, challenges etc... which meant they went out to fill up your email in updates) but apparently they were welcome to some. :O) SO, I thought I'd post a bit about the blog design attempt that led to 'em in case it's useful. Here's what they look like:

Linked-photo buttons for blog rolls etc...

I don't know if "Linked-Photo buttons" is what you'd call them, but.... I made 'em because my sidebar was a jumbled mess (remember the land of a thousand links?) Anywho, while tidying that messy sidebar, I discovered that you can make "buttons" that lead to posts in your blog (like pages of a website that are linked on the home page.) Old news to many, I'll bet, but...

The neat thing is that you can make it easy on yourself by just copying your blog roll/link lists from your blog's sidebar & then pasting them into blog posts (and it still preserves the links to the urls.)

Not sure what on earth I'm rambling about? You can test it out in my sidebar. The pics (that look like the one up there and say "click to go to.." above them) will take you to lists of schtuff like: Blog Roll, Challenges, Nifty Shopping etc...

Basic I know, but really neato because when you're posting link lists in posts (instead of just sidebarring them in your layout) they become interactive instead of static. By that I mean people can get your link list posts in email updates--and what's even kewler (!)--they can add their favourite links to your lists in the comment section! Kind of nifty hey?

Other stuff i really like about these buttons:

1) Less visual clutter on your main blog page

2) Gives readers easy to find buttons (that can be perty looking)

3) You can choose big fonts for the buttons (good for those whose eyes are goin' a little, like moi)

4) Adds visual repetition to your blog design (which i like the look of)

5) It lets you subdivide lists into sections of stuff (like Canadian/American shopping... Click the "Nifty Shopping photo-button above to see what I mean.)

6) Gives you way more room to write out stuff (instead of the 220 pixel wide line of your sidebar--or whatever px width your template has.)

7) You can format lists with coloured text & stuff (You can number 'em so people can refer to an item in your list easily & my fave: Spellcheck 'em!)

8) You can add a Google Reader thingy in a post like Allison & Susanna (who are WAY too brilliant for me!)

9) You can add pictures to the post (like thumbnails with links; I'll be blabbing more on that soon) One idea: if you add the same picture to your post as you had in your "linked-photo button" in your sidebar button, then that lets people know they're in the right spot when they click through.)

One drawback: after pasting your links over from the sidebar, you have to alphabetize additions to the list yourself (BUT you can alphabetize some and not some others, me likey that.)

Other uses for these linked-photo buttons in your sidebar:

1) Headers for sections of your blog (like "About me" "Design Teams" "Blog Categories")

2) Linked-photos of your work categories (that can link to the tag url with all the posts that have a certain tag: like all projects with a certain company or all 3D projects.)

3) Photo-button Links to other sites (like your business or your scs gallery)

The Visuals:

I wondered if anyone might be interested in a basic tutorial for how I created the visual (the flower design in the "Challenges" picture above) & set it up as a linked-photo ? (It's really quite easy if you have Photoshop or another way of writing on top of images.)

If you'd like to see how-to do this, lemme know & I'll type a tutorial up for ya. :O)

P.S. This wannabe-geek rambling may very well may have been as clear as mud,
so if there's anything you'd like me to explain, please just let me know. :O)


Katie Burke said...

I would love a tutorial on the graphics! Thanks, Mel! You are an inspiration!


kathleenh said...

This was very helpful to me. I am not the least bit a techie and muddle through so any tips are very welcome!

Elena said...

That is a very good information! I just had that problem with creating a side bar. The format is so small and you can't put what you want! Thank you for very good tips and advices!

Chrystal said...

A tutorial would be great! I am so new to all this stuff.

Jessica Diedrich said...

I am overwhelmed by your creativity, I swear! I'd love a tutorial, bc I designed my banner on top and would love to have some uniform "buttons" to go alogn with it. Email me if you do, please, just so I don't miss it??? thanks Mel! You rock! So glad I "met" you through LPS!!!

Robin L Greenslade said...

Nice, warm hearted, creative and technical??? You are one amazingly wonderful, well rounded person!

Thanks for inviting us into your mind and heart.

I can wait to have the time to play with your techie advice!

Happy Tuesday!

Risa said...

Hey there Mel,
I noticed the changes on your blog and I think your idea is a great one!!
I'm not all that great at this computer stuff, but I will make an attempt though:)
Thanks for all of your inspiration and have a super great day Mel!

Eve said...

Thanks for all the blogging tips!
They are very useful.
LOVE your work!

Janine said...


mudmaven said...

Oh my - a tutorial would be totally outstanding! I just love how you have set things up. ~chris

Annapurna said...

Great job organizing your blog. You are the queen of organization. I wonder if you can make your background have image and color with the color having a sort of transparency to show the image through. That would add more contrast between background and the main and make the main pop more. You agree?

While writing this I came up with the idea. Take your background image into photoshop. Then add a layer of the color you like on the top. Change the transparency of the color layer. Flatten the image and save and voila you have a colored background with your current image. Wphew. Did you get all that? LOL!

Maria said...

Thanks for sharing the tip, Mel! I do have to clean up my side bar among the million other things I gotta do! LOL! I wish there were more hours in a day to do EVERYTHING I want to do.

I will tackle my side bar someday! Love how you organized yours!!


Deb Neerman said...

Okay. Whhaaaaaaaaaaattttt???????

I'm lost in a sea of goneness ... but who cares ... 'cuz I'm happy!

Okay. I'll take one from column 'a,' two from column 'b,' and nothing from column 'c,' okeedokee?!?

Oh. And I'd like it in Kiwi Kiss, Pacific whateverthenewbluecoloris, and Chocolate Chip. Oh. And a cookie, too. Please.

Lori said...

Another wanna-be geek here--I'd love a tutorial so I can give it a try on my blog.

Heidi Kimmerly said...

Mel - I swear if I ever meet you I am going to give you a BIG hug!!!! You are truly inspirational. I am definitely going to try your tip. I love your blog and your creations..

Donna Baker said...

YES! I want a tutorial, I've been thinking about doing this for a while. You're the BEST Melissa!!

Clandy said...

Yes! I would very much appreciate a graphics tutorial. I am a newbie in the blogging world (believe it) and though I have created a blog I haven't made it public yet... I really would like to learn how to create my own headers and buttons and all that really awesome graphic stuff! Thanks for the inspiration!


Melanie said...

thumbs up on the buttons! I need some!! :)

milesavery2 said...

I am just now thinking about doing my own blog. I need all the help I can get! I would love any tutorials. I just had back surgery so recovering at home here.

Sasa Kreativ Blog said...

Very nice blog. Thank you!

With best regards from Germany