Freckles in April: June 2012

Saturday, June 30, 2012

DIY Blog Design Part 12: Other Useful Stuff

Here are a few extra little tidbits you may find useful-

Constrain the size of your images

Don't you hate when you post and then you go take a look at it and your pictures are bleeding out into your sidebars? So then you have to go back in and resize your images to make them fit?

Add this little snippet into the CSS section of your template designer in order to limit the size of your images in your posts. Doesn't matter how big they are in your post editor- they'll always fit within your posting body! Change the 600 to whatever works for your blog.

.post-body img {

Make a blog grab button

Create a button that's around 125x125. You can probably go up to 150x150 but keep in mind that some people have smaller sidebars so you don't want to make it so big that it spills out and annoys them and they get rid of it.

Host your image.

Use this code:

<div align="center" style="padding: 5px;"><img src=""  title="Sumo's Sweet Stuff" alt="Sumo's Sweet Stuff" /></div><textarea style="background:#f0f0f0;border:solid 1px #666666; color: #777777; display: block; font-size: 1em; height:45px; margin:auto; padding: 10px; undefined; padding: 10px; ; width: 90%;">&lt;div align="center">&lt;a href="" title="Sumo's Sweet Stuff"&gt;&lt;img src="" alt="Sumo's Sweet Stuff" style="border:none;" /&gt;&lt;/a&gt;&lt;/div></textarea>

Your URL - plug in your blog's URL.
Alt text - Tell them where they're going.
Image URL - plug in the URL from your hosted image.

There's a lot of extra junk in this code but it works better than the fresh code I got somewhere else so I'm going with it. You can always Google "blogger grab button tutorial" or something similar to find tutorials with variations on the above code.

The above code yields this-

Sumo's Sweet Stuff

The grab box at the bottom will resize itself according to it's space (ie it'll fit in a sidebar). Readers can easily grab one of Summer's buttons to display on their blog.

Seek professional help

Google maintains a forum for Blogger. I've only ever needed to post to it once (for that dang misaligning top widget) but I got an answer really fast and the solution worked perfectly (and also saved my butt when all subsequent widgets went crazy). If you have a problem, check out the forum. Someone may have already asked your question. I find answers there all the time. If you don't see your particular issue, post it and wait for someone who knows what they're doing to help you out!

And that's all I've got! If you have any questions or anything else you'd like me to cover, let me know!

Friday, June 29, 2012

DIY Blog Design Part 11: Installation

If you're starting a new blog from scratch and built your template on your real blog then congratulations! You get to skip this part. For everyone else, read on.

Installation is, sadly, NOT an easy, quick or clean process. I suggest you do it at night when there are a minimal number of eyeballs on your blog to see it royally freak out.

This one turned out hairier than most because of that weird issue I keep running into with the padding. I know where the issue is but I can't fix it without breaking something else so I had to manually adjust every widget in the left column. Really fun! I have asked a couple smart people about it so if I get a good answer for how to avoid this issue (aside from just not having a 3 column design and using my favorite header technique in the same blog), I'll share it.

First, go to your test blog and save your template.

When you see the pop-up window click "Download full template."

Do the same thing to your current template (if you have one). Just in case. It's your insurance if something goes horribly wrong (which has never happened to me but you never know). Just set that file aside somewhere safe. You probably won't need it ever again.

Then go to your real blog and click Backup / Restore again. This time, click "Upload a template from a file on your hard drive." Browse to your new template. Take a deep breath and then upload that sucker.

It's going to look ugly. Really ugly.

I stopped taking screen shots at this point and went fast and furious trying to get her blog looking decent again.

Uploading a new template makes your sidebars go crazy. You can see above how the new template drew one of her sidebar grab buttons up above the nav bar. A bunch of her other stuff got rearranged.

To get it looking normal again- 

1. Manually upload your header in the Layout section.

2. You may also have to copy and paste your CSS from your test blog template designer into your real blog template designer. I suggest you do.

3. Manually add the HTML widget with the nav bar code in the Layout section (just like we did here).

4. Rearranged your freaked out sidebar(s).

5. Optional: If you're experiencing the same padding issue that I have been through this whole design, you have to go through and add CSS for each widget in the left sidebar in order to get it to sit where it should. I explained how to do that here. Just mess with the numbers until it looks right. I took this little snippet from Summer's CSS to show you what it will probably look like-

#HTML7 {
   margin-left: -70px;

#HTML1 {
   margin-left: -30px;

#HTML13 {
   margin-left: -30px;

#Label1 {
   margin-left: -30px;

#HTML3 {
   margin-left: -30px;

#PopularPosts1 {
   margin-left: -30px;

etc. and so on for each of her widgets in the left sidebar.

Check how your blog looks in multiple browsers. I actually should have done this before I installed know. My design looks great in Firefox-

But Internet Explorer looks a little difference-

That's a rather ugly blue box around Summer's "About" blurb. I googled "HTML remove image border" and discovered I only needed to paste BORDER=0 into the HTML image code. So now the very first part of that code looks like this-

<img src="" border=0 alt="About Me" usemap="#AboutSumo" />

(see the whole post about creating that blurb here)

And I'm done! Well, in theory. There usually ends up being one or two little bugs that pop up that I have to fix but nothing too awful.

Stay tuned for a couple other little tidbits you may find useful!

Thursday, June 28, 2012

DIY Blog Design Part 10: Favicon

You: What on earth is a favicon?

Me: Check it out-

Favicons are those bitty images up there. It's one of those fun little details that makes a custom blog design especially awesome.

As you can see, favicons are quite small (only 16x16 pixels) so you need to keep them pretty basic. Intricate details get lost in such a small area.

Here's Summer's favicon-

So little!

In theory, installation is easy.

You should only have to upload it through your layout section.

However, in my experience, that doesn't work consistently across browsers. I don't know why (Blogger bug? It's a fairly recent addition so maybe they haven't worked out all the kinks yet). A few places I've read say to just give it time but once I uploaded and then forgot about it for over a week and it never showed. So I also do this-

Go to your Dashboard > Template > Edit HTML. Click "Proceed" when you get the warning pop-up window.

Find the following code in the HTML of your blog template-


Directly below that code, paste in this code:

<link href='ImageURL' rel='shortcut icon' type='image/'/>

You're going to have to host your favicon somewhere (see here for how to host within Blogger) and then paste the image URL in where I've highlighted in blue.

Favicons can also be .png files, which means your favicon can be a fun (simple) shape! If you use a .png file, paste in this code instead:

<link href='ImageURL' rel='shortcut icon' type='image/png'/>

Save and you're done!

Wednesday, June 27, 2012

DIY Blog Design Part 9: About Blurb with Social Media

There are a whole lot of different ways to do social media buttons. Each of the navigation bar methods I've posted about are great options. I've used them all at different times.

1. Text is always the easiest option.

2. Buttons: You can create each of the buttons you need to match your design (like when I did Cable Car Couture's sidebar) or go the easy route by Google Imaging each of the individual logos you need (like I currently have going on in my own sidebar). Just copy the image location and stick it in the code. Easy! (although, you may have to resize the images. Not quite as easy)

3. If you're already doing a navigation bar with rollover effects you can easily throw in your social media as well. I did it for my last design. You can see my old nav bar here.

For Summer's social media buttons I'm going to do a simple image map. She wants an "about me" blurb in her sidebar so I combined the two.

Summer sent me a pic, a little about blurb and what social media buttons she needed and I made an image 180 x 400 px. I used the brush tool to create circles and then the gradient tool to paint them coral and purple. I did a Google image search for each of the social media logos and added them to the buttons.

Here's the code I used:

<!DOCTYPE html>

<img src="" alt="About Me" usemap="#AboutSumo" />

<map name="AboutSumo">
  <area shape="rect" coords="4,4,173,353" alt="About" href="" />
  <area shape="circle" coords="20,376,15" alt="Facebook" href="" />
  <area shape="circle" coords="55,376,15" alt="Twitter" href="!/sumossweetstuff" />
<area shape="circle" coords="90,376,15" alt="Pinterest" href="" />
<area shape="circle" coords="125,376,15" alt="Google Plus" href="" />
<area shape="circle" coords="159,376,15" alt="Email" href="" />


We've actually already done an image map before but I'll still walk you through it-

Hosted image URL. See how to host in Blogger here.
Map name. Make sure they match!
Alt text. For people who turn off images while browsing the web. It also makes it a lot easier to figure out where you are working in your own code.
Coordinates. Just like I explained in this post.
URLs. Including a mailto so that people can easily email summer.

Installation is the same as in this post except you add a widget to the side instead of the top of the blog.

And it looks like this-

Also, because of that padding issue, I had to use that code that I told you about here. In case you don't have a crazy good memory, it looked like this-

#HTML2 {
   margin-left: -30px;

I know WHY I'm having these padding issues but I can't fix it without breaking something else so I just keep having to add the CSS code to move widgets around. It's a pain but I'll survive. I'm feeling a little bad about making Summer do it though (oops). Sorry Sumo :)

Next up: favicon!

Tuesday, June 26, 2012

DIY Blog Design Part 8: Graduate Level Navigation

I am so ridiculously proud of this particular kind of nav bar. I figured it out all my own with Googling and Frankensteining code and digging into some super nerdy forums.

This tutorial is going to help you create an image map with rollover effects. Basically, an image map is an image that has clickable areas. It's a pretty easy HTML deal. The fancy part here is the rollover effects, which is when something happens when you put your mouse over the image.

My code isn't perfect and I don't know enough about coding to fix it. The one really big limitation I've run into is that you can only have one of these on a page. If you try to add another then they interfere with each other for some reason. I lack the knowledge to figure out why, though believe me I have tried.

Figure out exactly what you want in your nav bar and then commit to it because this is a lot of work and making it all the way to the end only to decide you want to add or remove's painful. I actually tell clients I will charge them if they change their mind after I've already started the nav bar. I redid this one about 4 times and was feeling sort of violent by the end (it actually looks slightly different than what you'll see here).

To begin, you need to make an image of your navigation bar.

I started with my background image. I want Summer's nav bar to match up with the background I've got going on but you don't have to do it that way. Just make sure your nav bar will fit within your main blog area.

I recommend uploading your nav bar as an image into your design just to make sure you like the look/sizing/etc. of it. It may not align properly but you will at least be able to tell if it works with the look of your blog. I ended up making the font a little smaller, spacing out the sections a bit more and cropping the whole thing so it wasn't quite so tall.

Then, figure out what you want to happen when you roll your mouse over each navigation option. I made the text turn purple and put a shape behind. Then you need to make an image for each one (including your plain old regular nav bar).

(see what I mean about Blogger making images fuzzy when you shrink them?)

Now, you're going to need to figure out the coordinates of each clickable area. This is a pain. You can do it in Photoshop but I'm going to show you how to do it in MS Paint because most of you probably have it. There are actually free online programs that do this for you but they usually turn out a little funky for me (which I'm positive is a user error, not the program) so I just do it by hand. If you want to try out a program, try Googling "image map generator" or something like that.

Click to enlarge
Open one of your nav bar images. You want to get the coordinates of the upper left and lower right corners of the box. Anywhere within that space will be linked to a specific location. You can see my red dots showing you the upper left and lower right corners of the box that will be linked to Summer's home page.

When you hover your mouse over one of those points, look at the bottom left corner of the screen. It will show you the coordinates. The coordinate for the upper left corner is 52,0 and the coordinate for the lower right corner is 155,69. Stick them together to get the coordinates for Summer's 'home' button: 52,0,155,69.

My list of coordinates

There are ways to do circles and other shapes but this tutorial will be plenty long without me describing how to do that. Google it if you need to figure out how to do the map for a different shape (it's not hard..just slightly different).

Now go host your images in blogger (see this post). Be sure to make them "original size."

And now, the code. It's kind of a beast but I'll walk you through it-

<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN"

<script language="JavaScript" type="text/javascript">

var ImgAry=['','','','','','','','','']

var MapAry=[];
 for (var zxc0=0;zxc0<ImgAry.length;zxc0++){
  MapAry[zxc0]=new Image();

function Swap(id,nu){

<img id="tst" src="" usemap="#SumoNavBar" border="0" />
<map name="SumoNavBar" >

<area shape="rect" coords="77,0,173,55" onmouseover="Swap('tst',1);"  onmouseout="Swap('tst',0);"  alt="home" href="" />

<area shape="rect" coords="174,0,283,55" onmouseover="Swap('tst',2);"  onmouseout="Swap('tst',0);"  alt="About" href="" />

<area shape="rect" coords="284,0,420,55" onmouseover="Swap('tst',3);"  onmouseout="Swap('tst',0);"  alt="Tutorials" href="" />

<area shape="rect" coords="421,0,563,55" onmouseover="Swap('tst',4);"  onmouseout="Swap('tst',0);"  alt="Featured" href="" />

<area shape="rect" coords="564,0,674,55" onmouseover="Swap('tst',5);"  onmouseout="Swap('tst',0);"  alt="Follow" href="" />

<area shape="rect" coords="675,0,766,55" onmouseover="Swap('tst',6);"  onmouseout="Swap('tst',0);"  alt="Links" href="" />

<area shape="rect" coords="767,0,900,55" onmouseover="Swap('tst',7);"  onmouseout="Swap('tst',0);"  alt="Sponsor" href="" />

<area shape="rect" coords="901,0,1031,55" onmouseover="Swap('tst',8);"  onmouseout="Swap('tst',0);"  alt="Contact" href="" />



Areas highlighted in blue are where you need to add image links. That big chunk at the beginning is where you post each image link. Enclose the links in ' marks and separate each link with a comma. Start with your regular nav bar then add each of the rollover effect images in order. If you look at the code above, I have NavBar, HomeOver, AboutOver, TutorialsOver, etc which is the order they are in within the nav bar. Below that chunk you'll see one more blue highlighted area. Add the regular nav bar image link there.

See the darker green? Name your image map. Make sure these two highlighted areas match.

Then, we have our image map. The yellow highlighted areas are the coordinates for each section. Plug in all those numbers you got earlier.

Note the numbers. This tells the code which image to pull from that big blue chunk above. It ignores that first image (your plain nav bar) and then it pulls the first image after that as 1, then 2, etc. Which is why you need to make sure those images are in the correct order! If you add more stuff to your navigation bar you'll need to make sure you put the proper numbers here.

Purple- put in your alt text.

Light green- plug in the appropriate link.

Alrighty, now put all of that in a W3 try it page and make sure it all works. Test your links.

Installation is the same as with the previous two nav bars and can be found near the end of this post. Also, you may need the CSS snippet at the end of this post if your nav bar doesn't align properly.

We're getting there! Next up I'll be talking about adding in some social media.

Monday, June 25, 2012

DIY Blog Design Part 7: 200 Level Navigation

This navigation is a little more difficult than the last one I showed you but it's not too bad. Last Thursday I showed you how to do text based HTML navigation. This is pretty much the same thing, but with images.

First, you're going to need to create images for each navigation item.

Figure out how wide your blog is. You'll recall that I made Summer's 1100 px wide. Divide that number by how many buttons you need (1100 / 8 = 137.5). You can't do half pixels and you do need to account for some padding at both ends so I'm just going to say that my buttons can't be any wider than 130 pixels (maybe even a little less so I have wiggle room).

I created a new element in Photoshop that was 130 x 50 pixels. Then I just created simple buttons with the brush and text tools. I didn't care too much about how they looked since these buttons are just for the sake of example (I ultimately plan on doing Summer's nav bar a different way, which I'll be posting about tomorrow).

I created all 8 buttons as individual .jpeg images then hosted them in blogger (see this post).

Here's the HTML for a linked image-

<a href="URL"><img src="http://blahblah.jpg" alt="Text"></a>

URL is where you put your link to the place you want the button to go to. Your homepage, contact page, etc.

img src is where you hosted your image.

Alt text is for people who set their computers to show minimal images on webpages. It makes for a less pretty browsing experience but greatly decreases load time. The end result, though, is that they can't see your images with text on them so you have to tell them what is on that image. I also like it just because it makes it easier for me to see where in the code I'm working.

So here's my HTML for Summer's nav bar with linked images-

<div align="center">

<a href=""><img src="" alt="Home"></a>

<a href=""><img src="" alt="About"></a>

<a href=""><img src="" alt="Tutorials"></a>

<a href=""><img src="" alt="Featured"></a>

<a href=""><img src="" alt="Follow"></a>

<a href=""><img src="" alt="Links"></a>

<a href=""><img src="" alt="Sponsor"></a>

<a href=""><img src="" alt="Contact"></a>


When I paste that code into the HTML section of this post, it looks like this-

Home About Tutorials Featured Follow Links Sponsor Contact
Obviously it doesn't line up all pretty since my blog posting space is smaller than Summer's full blog, but you can see that they're linked when you roll your mouse over them.

Installation for this one is the same as the text based nav bar.

Yes, the contact button is missing. I made the buttons a little too big initially and was too lazy to resize everything.

Also, if you used the same header tutorial as I did, your top widget might align funny. I've actually never had that happen until this particular blog design and it caused me a lot of grief. If your navigation bar is way off on the right, add this code to the CSS section of your template designer-

#HTML1 {
   margin-left: -70px;

HTML1 - input your widget ID.

In order to figure out your widget ID, go to your layout out and click "edit" on the widget.

You can find the widget ID at the end of the URL in the box. This particular example is HTML2.

-70 - you may need to mess with this number a bit in order to get your navigation to align properly. Smaller moves it left, larger moves it right (keep in mind that it's a negative number).

Thursday, June 21, 2012

DIY Blog Design Part 6: 100 Level Navigation

There are LOT of different ways to do your nav bar. I'm going to talk about three different options. One is really easy, one is of medium difficulty and one is quite a bit more work. The difficult and time consuming one is my fav (of course). Today I'll focus on the simple nav bar. This is a really long tutorial for something really simple, but I don't want to leave anyone in the dust by assuming you know something! Also, just because I explain how to do something one particular way doesn't mean that's the only way to do it. If you prefer a different method then that's fine!

Before you get started, you need to figure out what you want in your navigation and collect the appropriate URLs. The benefit of doing your own navigation bar (versus just having static Blogger pages listed across the top or in your sidebar) is that you can link to dynamic content via a label. For example, Summer links to her "Tutorials" tag so that clicking that button in her nav bar brings up all posts with that tag.

Summer has the following in her nav bar-

(she decided to remove "Parties" though, so I won't be including it in the examples)

The easiest way to create a navigation bar is an HTML text-based bar.

This is the HTML for linked text-

<a href="">Freckles in April</a>

When I copy and paste that code into the HTML section of this blog post it looks like this-

Summer needs her navigation across the top of her page since her sidebars are pretty full. I just took the code above, input the URLs and text then separated them with a |.

<a href="">Home</a> |
<a href="">About</a> |
<a href="">Tutorials</a> |
<a href="">Featured</a> |
<a href="">Follow</a> |
 <a href="">Links</a> |
<a href="">Sponsor</a> |
<a href="">Contact</a>

The nav bar from that code looks like this -

Home | About | Tutorials | Featured | Follow | Links | Sponsor | Contact

If I wanted list navigation in a side bar (it would look like that area I highlighted in pink up above), I would include a line break at the end of each link. The code for a line break is <br />. The HTML would look like this-

<a href="">Home</a><br />
<a href="">About</a><br />
<a href="">Tutorials</a><br />
<a href="">Parties</a><br />
<a href="">Featured</a><br />
<a href="">Follow </a><br />
<a href="">Links</a><br />
<a href="">Sponsor</a><br />
<a href="">Contact</a><br />

I always test my code in a W3 try it document (which I wrote about earlier this week). Test your links to make sure you added them correctly!

An easy (cheater! :) way to do this is in a blog post. Type our your nav bar the way you want it, link everything like you would for a normal blog post then hop over to the HTML tab to grab the code. I'm not sure how much formatting transfers, though, if you try to get fancy. I've never actually done it this way.

Then, to install-

Go to your Dashboard > Layout

Click to enlarge
Click "Add a Gadget". If you want your nav bar across the top you'll click that section. If you want it in a sidebar then you'd click the gadget over in the sidebar. Add an HTML/JavaScript widget.

Click to enlarge

Then copy and paste your code into the box.

Click to enlarge

If you are putting your text across the top, you'll probably want it centered.

Add this code at the very beginning: <div align="center">
And this code at the very end: </div>

(You can also find code to bold your text, make it bigger, etc. over at W3)

Save your widget then go take a look at your blog.

This was before I worked out some header issues.

Your nav bar is made up of links so in order to change the colors you need to change the link colors. You can can do this by going to Template > Customize > Advanced > Links. This will affect all links in your blog.

Also, I've learned this the hard way, but when you get your code the way you want it, save a copy somewhere. I keep folders for each blog design client (as well as my own blog) and individual text documents for pieces of code. It's good to keep safe somewhere!

Wednesday, June 20, 2012

Wednesday Want

Ok, I think this is one of those things that will earn me a massive eye roll from many of you. But a select few ( one?) will think this is as awesome as I did-



I'm not going all Dungeons and Dragons on you but I would totally wear this.

Looks like the Etsy shop is currently sold out but if you stalk it long enough you might get lucky.
Related Posts Plugin for WordPress, Blogger...