A Really Big Tutorial Post

Hey, ya'll!! :)

So, Silent Reader asked me how I did the cool (well, I think they're cool) social media icons and how I made them kind of hover all around the round picture. Well, it's really simple, actually. I used mapping--having one picture with multiple links. This also makes it so that I could put all of the links close together with no gaps. And, a feature that I really love, a new window doesn't open up. (it really drives me nuts when it does that... unless I'm clicking on a blog button. Then I want a new window.)

Anyway, so I'd been searching for awhile (a month, maybe?) for how to do mapping. (because I'd looked it up and found out what it was named and how you "should" do it, but it wasn't working) And then I finally found this site that does it for you. (glory hallelujah!) I believe it is perfectly harmless (though I've only been using it for a little while...) but just to be safe, for spam issues and such, I didn't upload my photos, I gave the URL of them.

And what is this awesome site?

(just a sec while I get a new window and grab the link...)

Image Map Tool.

Oh yeah.

It's that cool.

Jjjjjjjjjjjjust kidding. =D

Anyway, so there's^ the link up there. All you do is...

1. Give the link to your photo. (talk to me how to do this...) Or you can upload. Your choice.
2. You'll be sent to another window that shows your photo uploaded and a countdown going on. Don't freak out. They're just loading the next page. Click "continue" when it's ready.
3. Read the instructions. What you're going to end up doing is clicking the rectangle thing and making little boxes around what you want to be links. You'll give the link to where you want it to go, and name the link. What naming it will do is, when you hover over it, you know those little words that pop up? Bingo. That'll be it.
4. When you get it all done, click "grab code." (err... somethin' like that)
5. This was the page where I got confused the first time. Towards the top you'll see a whole bunch of tabs. Click the HTML one and grab the code.
6. Log into blogger and click on the blog you want to edit.
7. Go to layout.
8. Click "new gadget."
9. Get the HTML/Java Script gadget and paste the good.
10. Viola! :)

Really easy, right? Most of the process is just trying to get the right photo to map. =P At least for me, anyway... I think I went through at least three before I found the one that I liked and one that matched with the rest of this design...

Also, Silent Reader wanted to know some websites that I use for designing.

HelpBlogger and Google.

That's it, folks.

I have looked up so many codes, spent so much time trying out things, figuring how to do stuff... man, it's tough being a designer. =P

Oh yeah, I almost forgot. I have minorly used the code site Code it Pretty for some importing fonts and stuff like that. (also I learned about selectors and stuff there...) Anyway, if you're more advanced, you might want to go and check out some of the stuff she has there. :)

Also, just to say, if you have a question for the Code it Pretty lady, don't be afraid to ask. She's been really helpful to me. ;)

Anyway, but what's a good way to search for codes on google? I start out with "HTML code blogger..." because, first off, you want HTML codes. (this will include CSS codes in the search) And sometimes codes come up for like Wordpress, which..... isn't helpful. So starting out with that and then asking whatever your question is really helps.

Also, Silent Reader wanted to know some tips for designing.

First off, and I can hardly stress this point enough, if you want your design to look nice, professional, real, or pretty (or all the above), and I cannot stress this point enough, GET RID OF THE CLUTTER. It's fine to have your friend's buttons and some cute little sayings and such, but you don't want to have "useless" gadgets or too much of something. Some gadgets that mostly just clutter up your design: blogroll, pageview gadget, the feeding the fishes thing, etc. Even sometimes the label gadget. You have to decide for yourself how much clutter you want. And sometimes it doesn't look so hot to have like basically NOTHING on your sidebar. That can get old, too. So you just have to decide what you like. :)

I'm just going to say it right now... CSS saves my life. I used to think that CSS was kind of like baby designing and that I was just kind of like the amateur at everything. And I'm still kind of amateur in some ways. There are still things that I don't know and am still trying to find out. But first off, to clear the myth--CSS ISN'T BABY.

Let me describe it this way--HTML is embedding it into your code. CSS is applying it and using it. So HTML is the raw material, and CSS is the tool that you craft with. Once you find out the names of things in the HTML and their code names and such, then you can pretty much do anything with them with CSS.

Which... gets me onto my next topic.

Guys, I've been making my own codes.

*gasp*

It's true.

And let me tell you... it's sweet! I mean, seriously! There are some really annoying things that I can't find on the internet. And then... I just... made them. It... was an awesome moment. To say the least.

Let's see... what are some of the codes that I made? Well, I made one for making the post title go lowercase when hovered over. Oh my word, that was one of the awesomest moments... EVAH. Then let's see... I made a code for centering part of the comment form. And how to just get the post's font to change into one font, instead of changing the post title, too. And... hm... oh yeah. I made one to change the date titles into what I want. And... I made my own code for doing stuff with the post, like a border.

I mean, it's just awesome! Look^ at all I could make, just by making my own code! And you can do that, too. I know you can. :)

If there's ever any code that you want, or something that you want to happen but you're not sure how, just talk to me. I'm so willing to give you whatever you want! I don't care if you want to start a design business. I don't care if you want to crush my business into the dirt. I just don't care, you know? I just want to help other designers learn the stuff that I had to learn by spending hours on Google easily just by reading my posts.

I just ask one thing--please don't act like you're all better then me, even if you do know more codes then me. But it's especially annoying if you don't, and you just found out one that I hadn't even thought to look up. It's the most annoying thing ever. We're all friends here. I just want everybody to get better. I love looking at an amazing blog design. It's just so... beautiful. I love that, and I want that for everybody.

Which is way I'm going to give you the codes that I created.

For free.

Yup.

How to make all post titles go lowercase when hovered:

h3:hover {

text-transform: lowercase !important;

}

Centering part of the comment form:

.comment-form {

text-align: center;

}

These are the two easiest. The one about changing just the post font I'm going to have to save for another post all by itself. The same goes for the one about changing the date title--it's going to need a pretty big explanation to explain everything and how you can customize it for you own. :)

Hope this helpful. <3