9/12/2013

It's magic, I tell you. Magic. Mouseover social media icons for Blogger.

When I first started looking at this week's writing prompts from:

Mama’s Losin’ It


I initially zeroed in on the first one, which is:

Something you wanted to be when you grew up.

So I sat down all anxious to write, but then as I got started I remembered that I wrote that post a few months ago, so if you're just dying to know about my long-standing, unfulfilled dreams, feel free to click on over and give it a read.

Go ahead.  I'll wait.

Ok, now that you're back, we can get this party going for realz, yo.  Too much? Yeah, probably.

Anyway, I decided to write about:

Something you learned this week.

And we don't have to go far!  Just look up - no, not at the ceiling, silly.  Look up at the very tippy top of my blog header.  See those cool social media icons?  Now take your mouse and move it ssslllllloooooowwwwwwlllllyyyyy over them.  Do you see it?  Do you?  THEY CHANGE COLORS!

It's magic! Sorcery!  Enchantment!  Voodoo!

Or, er, maybe it's just some sort of code that I FINALLY after many, many, many attempts got to work correctly.

I know it might be kinda hard to believe now, but for several years back when the internet was all new and shiny and nobody knew what was what about anything, I had a part time job as an HTML based web designer.

I wasn't particularly good at it.

Whenever clients would ask for something that was out of my experience/comfort zone (this happened often, by the way), I would adopt a serious demeanor and tell them, "Sorry, what you're asking for just isn't possible," and since I was supposedly the expert, they believed me.  Every time.  Also, design is not a skill that I possess, so there were quite a few functional but ugly blogs floating around with my name attached to them for a while.

Anyway, fast forward 15 years to when I started blogging, and I thought that surely I would be superior in the technical aspects of blogging, at least, but alas, it was not to be.  Apparently things change a lot in 15 years and everything was pretty well done for me.  Which, by the way?  Awesome.

My very limited knowledge of HTML has come in handy a time or two since I've started blogging though, and I'm not afraid to get into the HTML code of my blog and mess stuff up from time to time, so that's fun, but seriously, I have been trying to figure out this button mouseover thing for months.  And finally, FINALLY I got it working.

By the way?  I know the buttons are too big and the "balance" or whatever in my header is off.  BUT THE BUTTONS CHANGE COLORS WHEN YOU MOVE YOUR MOUSE OVER THEM AND THAT'S REALLY ALL I EVER WANTED.

Ahem.  Pardon me.  I'll calm down now.  And someday I'll get around to creating smaller buttons to replace these.  You know, or not.

Anyway, that was a huge buildup for this little bitty bit of code that I'll share with you, because once I finally figured it out, it couldn't have been easier.

Oh, and by the way, this code works for Blogger, but I don't have a clue about Wordpress.  A couple years ago I was considering switching because all the cool kids were moving to Wordpress, then I signed up for an account and hated it, so I stuck with what I know, and really, it's worked out just fine for me.

Ok, ok, I'll shut up now.  Here's what you really want to know, right?


First, you'll need to either create or download two sets of buttons, one for the standard, or resting button, and one for the hover effect button. 

After you've gotten your buttons ready to roll, you need to upload them to a online photo storage site like Photobucket.

Open your Blogger dashboard and click "Template."  Next, click on the "Add a Gadget" link where you want your buttons to go, then choose "HTML/Javascript" from the list.

When the box opens, you can either add a title - like "FOLLOW ME, Y'ALL!" or leave the title blank.

The next thing you want to do is add the following code into the main box:

<div align=A>

where A equals either left, right or center, depending on how you want your buttons aligned.

Next, copy and paste the following code:

<a href="social media URL" target="blank" title="name of social media">
<img src="direct link to resting image" border="0" onmouseover="this.src='direct link to hover image'" onmouseout="this.src='direct link to resting image'" /></a>

Now repeat that for each separate social media icon you're adding.

Close the whole thing out with

</div>

Save your gadget, then save your template.  View your blog and you should be in business! 

See? Seriously easy once I figured it out!

So that's what I learned how to do this week.  How about you?

Did you learn anything new? 

post signature

12 comments:

  1. All I want to know is how to get the save changes to work when I edit my HTML code. I've been trying to change the background color of my blog now about 10 times. I get it to show right in the preview, hit save, it says it's saving, but when I view the blog . . . same old, same old color green! Can you help me????

    ReplyDelete
    Replies
    1. Hmmm... Are you trying to edit the HTML or do it through the Customize Template option? Whichever way you are doing it, I'd try the other way. I did a quick internet search and it looks like this is an uncommon, but known problem with Blogger. Another thing I found that you could try is this:

      Dashboard > Design > Template Designer > Advanced > Add CSS - Paste the following code (see note below) - Preview before saving - if happy - Apply to Blog:

      .body, .body-fauxcolumn-outer, .body-fauxcolumn-outer .cap-top {
      background-color: #ffffff !important;
      }


      where ffffff equals the code for the color you want.

      If you want to let me know how that goes, or if you're Editing HTML or doing the Customize Template, I might be able to offer some more inexpert advice :)

      Delete
  2. Very cool! I am at sea when it comes to code. I'm still in "Look! I type on my keyboard and it comes up on the screen!" mode.

    Is the red text to be copied exactly, or replaced with actual urls? <--see what I mean?

    ReplyDelete
    Replies
    1. Yes - the red text needs to be replaced with your actual URLs. Other than that it's copy and paste!

      Delete
  3. Congrats on getting the hover over to work!!

    I have enough HTML/CSS skill to be dangerous. Now, that said I do know where to look when I need help or break things!

    I don't think that the buttons are too big though. I'd only suggest moving them to the side bar.

    ReplyDelete
    Replies
    1. Thanks for the suggestion! I had them there at one point but wanted something "different." I guess different doesn't always equal good, though, does it?

      Delete
  4. I totally need to do something with my social media icons. Currently I have what came with my blog design - just four - and I totally need to add Google+. One of my goals this week is to find and print some good instructions for making buttons. Your icons look fantastic.

    ReplyDelete
    Replies
    1. Thanks! I love the ease of a "done for you" blog design, but sometimes it's hard to customize those to fit what you really need, isn't it?

      Delete
  5. You are a show off, but I love you. How long did it take?

    ReplyDelete
    Replies
    1. Well it took me about FOREVER to figure out how to do it, then about 10 minutes to actually do it once I figured it out. :)

      Delete
  6. That is cool! Love it! I kept thinking something looked different here lol.

    ReplyDelete
    Replies
    1. Yeah, I'm constantly messing with something or another here. It probably looks different every time you come by ;)

      Delete

Pin It button on image hover