Aug 13, 2013

 Image: sit, stay. roll over.

Okay, so I'm being a little silly. But seriously, is your blog missing a little sparkle

Bling yo blog is one of my new projects to "give back" and level the blogosphere just a little. Each week I plan to bring a simple tutorial on how to make your blog outshine the rest. If you have any specific tutorials you'd like me to write, please send me a message, tweet at me, or leave a comment below and I'll try to include as many as I can.

I remember when I first started getting into web design, how hard it was to look at another blog and figure our what "magic codes" they were using to make things happen. I spent 90% of my time creeping on other's pages and then googling terms and HTML that I copied and pasted. And then read (and re-read) tutorials on how to do this or that. Some were simple, Some were not. Sometimes the result was great, and sometimes I totally botched the whole thing. (save, save!)

But making images "roll" or switch when you hover over them with your mouse is pretty straight-forward. You've probably seen rollover images most often as social media buttons. When used correctly, rollover images are key in adding a professional flourish to your blog. For example:

+=
image1 + image2 = rollover image 

The key is to put the right URLs in the correct place in the code. While it seems pretty simple, the hardest part is sometimes the copying + pasting. Its easy to find your eyes lost in a jumble of codes. While copying and pasting your codes in, read carefully, and be careful not to lose a quotation mark or two. From the example above, Image1URL is the silver glitter, image2URL being that of the gold. And here's the code:

<img onmouseout="this.src='image1URL'"
onmouseover="this.src='image2URL'"
src="image1URL" />


If you are looking to use your rollover image, the above code won't work, because it's not linking to anything. In the case you want your rollover to be a link as well, a simple code will be added.

<a href="URL of LINKPAGE">

<img onmouseout="this.src='image1URL'"
onmouseover="this.src='image2URL'"

src="image1URL" /></a>

I know that may look a little scary, but once you get a chance to mess around with the codes a little you'll quickly master the rollover. You'll be well on your way to a bling'ed out blog in no time. You don't have any programs to create social media icons? No problem. I've decided to attach 10 free icons here at the bottom of the post, free for personal use.


(Just right click on each image to copy the image URL.)

Again, if you have any questions about this tutorial, or have ideas for next week's don't hesitate to talk to me. I am, human after all. I love to hear from y'all. If you end up using these rollover buttons for your blog or making your own, send me a link, and let me check it out. I'd love to see what you lovelies create! Hope your week is off to a great start!

6 comments:

  1. Great idea! I attempt to do things with my blog but it can get very overwhelming. I like what I have done but I am by no means a pro now is my design complete. Maybe your tips will help :)

    ReplyDelete
  2. So yeah...I didn't even realize until like a month later that my nav buttons were rollovers. Slow me. I LOVE them and the little ombre effect you set up!

    ReplyDelete
  3. Yes ma'am. This is something I have been wanting to do. I've also just wanted to learn more and I look forward to all these post.

    ReplyDelete
  4. I am forever googling html codes. A little obsessively, perhaps. Hadn't thought of this before, but I love the effect!

    ReplyDelete
  5. I just did this! Worked great! I just did the top 4 social media circles. And I definitely could make it look better, but I love that I can do this now. I'm seriously so excited. Thanks so much! :)

    ReplyDelete

Whats on your mind?