Blogger Blogs: Whole Backgrounds, Transparent Headers, and Links in Headers

The lovely and amazing Hannah from in Neverland, who I love and whose blog I love to pieces (I'm serious, she's awesome, if you don't follow her, go right ahead!!), and I are doing like a "code swap", sort of. She's going to be doing a post about doing a sticky sidebar (and, I believe, some other things) which I'll leave a link to when she gets around to it, and then I'm going to be covering several topics for her... and for you! :)

First off, we're going to cover... WHOLE BACKGROUNDS.

Like backgrounds covering the whole background instead of having a repeating picture?

Yeah.

First off, if you're just wanting a pattern, just make a seamless pattern and enter it as a background in your template editor. Yeah, easy peasy.

But otherwise? We're going to need to go code level. Oh yeah.

*WARNING WARNING*
This background only works with Ethereal Templates. Be warned.

We're going to have two sets of directions: 1. how to make the background and 2. how to apply it.

How to make your background:

I use Gimp, which is the easiest way. If you don't have GIMP installed, no sweat. Just find a picture that's around 1600x1100. I'll do a little mini tutorial for if you DO have GIMP. ;)

1. Click on the GIMP icon. (the silly little dog...)
2. Click on "file".
3. Click "new".
4. A window will pop up. Make the width "1600" and the height "1100".
5. Click the "advanced options" arrow.
6. Instead of "background color", switch it to "transparency".
7. Click "OK".
8. You'll have your transparent window pop up. This is where you're going to paste your background. Find a background, or make it, via anything you can, and bring it up on GIMP. Then copy it (on the "edit" tab) and paste it onto the transparent window.
9. Save your masterpiece.
10. Viola! Your background is done.

Now we get into the codes. Let's start the fun.

1. Log into your account and click on the blog you want to edit.
2. Click "new post".
3. Get the background that you made on GIMP or wherever into the post.
4. Right click, then click on "Open image in new window".
5. Grab the background's URL.
6. Get out of the post until you're on your blog's mini dashboard.
7. Go to "template".
8. Click "edit HTML". (or whatever... yeah)
9. See this? --> <b:skin>...<b:skin/>  Click the little arrow by it. If it's already opened, that's good. (if it is, it will instead say "<b:skin><![CDATA[/*")
10. Scroll down to this (it should be by the top):

background: $(body.background);

11. We're going to be using this code:

url(BACKGROUND URL HERE) no-repeat center fixed #FFFFFF

12. Replace "BACKGROUND URL HERE" with the URL of your background. An example of a completed code would be: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikR31pE66q4SDKmXAFF_GaxgABCbQKdi-l553B1fzq2jhsJEl0L28cg2QrvdMSnF7bfxmSrBykPd_kMJgVge9ljzZz38zTz20rpwHOquN_RBVceKTby3Tsjjm2dWUdWH4kLo5tqfqc29TU/s1600/roses.jpg) no-repeat center fixed #FFFFFF
13. Place the completed code (as said above) in the code as follows:

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikR31pE66q4SDKmXAFF_GaxgABCbQKdi-l553B1fzq2jhsJEl0L28cg2QrvdMSnF7bfxmSrBykPd_kMJgVge9ljzZz38zTz20rpwHOquN_RBVceKTby3Tsjjm2dWUdWH4kLo5tqfqc29TU/s1600/roses.jpg) no-repeat center fixed #FFFFFF;

So you delete the "$(body.background)" and instead put the code that we made. See? Really simple. :)
13. Click the "preview template" tab to make sure that it worked. If it didn't contact me! :)
14. Viola! You're finished. :)

Now, we're going to move on to... TRANSPARENT HEADERS.

This one's kinda fun. :)

The way I get transparent is from GIMP. They let you make a transparent background for a header or whatever. So you just make it on GIMP. Yeah. Really simple. I might warn that there's some weird thing going on between GIMP and blogger that sometimes makes the transparents act up or make white backgrounds appear to be a light gray instead of white. I don't know what this is. Sometimes things work and sometimes they don't, so you just have to work with it. I've found that sometimes it'll work if I add something onto the transparent header via PicMonkey. I have no idea why. Or if I make a transparent background with nothing on it, add a few things like maybe pictures on PicMonkey, and then add text again via GIMP. It's just a confusing mess that, as designers, we have to sort through.

Moving on...

LINKS IN HEADERS.

Oh my word, love this one, I actually couldn't believe I'd figured it out! :) I actually used a code that mostly everybody else uses for something else and applied it to this.

First off, most of you know the code for getting rid of margins, say, between the post title and date header:

h3.post-title { 

margin-top: -25px !important; 

}

I simply applied this simple CSS code to an HTML gadget with your words written in it. So like this:

#HTML3 {
margin-top: -100px !important;
margin-bottom: 100px !important;
}

The reason I added margin on the bottom is that then the rest of the blog won't come up as high as the words will. If I'm wanting to put the words into the header, I'm going to want to place the HTML gadget right underneath the header, so that I only have to do up and down and some minor left and right margin tweaking.

Most of the work comes from knowing what number your HTML gadget is. All HTML/Javascript gadgets on blogger have numbers. Above I used the example of "HTML3". Some people have a lot, so this gadget of yours might be like HTML18 for all we know. How do we find out what number it is to apply it? That's really easy. We name it. Name your HTML gadget, go into the HTML, then use the blogger search that our lovely new HTML has installed, and randomly click on one of the HTML gadgets that they have there. All of them have a "name ' '" thing, but not all of them have names. If yours did, it would be like "name 'wow'". So that's how you would know what number that was.

This all sounds a little confusing, but once you get the hang of it, it won't be. If you have any questions about anything I'm saying, I'll try and help to make it more simple for you. It doesn't mean you're bad, it just means that you don't understand yet.

So, we've got our HTML gadget underneath the header, we know what number it is (let's say it's HTML1 for comfort), so how do we get it up into the header? I'll do it really easy for you.

1. Go to template.
2. Click customize.
3. Go to CSS.
4. Paste this code:

HTML1 {
margin-top: -100px !important;
margin-bottom: 100px !important;
}

5. Adjust the code as necessary. If it's not high enough, then change the numbers (100) around until the words are exactly where you want them to be.
6. Save template.
7. Viola! :)

Again, if you have any questions, just ask! :)

Until another day, until another post,
Anna

Customized Page Links

OK, so, this used to bother me a lot--how on earth did people get their pages to go italic? I mean, I already had the hover code for it, but it didn't make my pages do that. And another thing... how did people put like things like this ||Home||About||Contact|| between their pages? That just looked way awesome.

Heh... well... I definitely didn't find that on a tutorial on google. I just kind of figured it out. (I'd say God showed me, because suddenly I just thought of it.) This is how you get to do it. :)

Ready? Let's go.

1. Log into your blogger account.
2. Click on the blog you want to edit.
3. Go to "layout".
4. Click "add a gadget" wherever you're going to want this gadget at.
5. Scroll down to the "text" gadget and click it.
6. OK, first off, you're going to want this centered, right? So we get to use the really simple center code. The center code is <center> </center>, but you put whatever you want centered in between. So that it looks like this: <center>||Home||About||Contact||</center>. Get it? :)
7. So put whatever words you want, with the center code around them. (I'm going to be using my example from above.)
8. Now, these are going to be links.

See the one that looks kind of like the world?

Click on that one.
9. It'll say "enter a URL". Place the link of what those words are supposed to lead to there. (so like my "Home" would be "http://connieisarubberbootgirl.blogspot.com/")
10. Click enter.
11. You do this for the rest of the links with their various URLs.
12. Save gadget.
13. Viola! Customized pages. :)

Hope this was helpful! If you have any questions, just ask! :)

Italics When Hover on Links for Blogger Blogs

OK, so, you know that on most blogs when you hover over a link it has an underline? That used to drive my crazy. Until I found out how to get rid of it.

What we'll be covering in this tutorial:
1. No underlines on link hover.
2. Italics on link hover.

OK, so, first, how do you just plain get rid of the underline?

1. Log into your blogger account and click on the blog you want to edit.
2. Click on "template".
3. Click on "customize".
4. Go to "advanced".
5. Click on "CSS".
6. Paste this code in the box:

a:hover {
text-decoration: none;
}

7. Save template.
8. Click "back to blogger" and hover over your links to see how it worked!! :)

And then how do we apply the italics?

1. Log into your blogger account and click no the blog you want to edit.
2. Click on "template".
3. Click on "customize".
4. Go to "advanced".
5. Click on "CSS".
6. Paste this code in the box:

a:hover { color: normal; font-style: italic;
text-decoration: none; }

7. Save template.
8. Click "back to blogger" and hover over your links to see how it worked!! :)

Now, on the second code, we can edit it a little bit.

a:hover { color: normal; font-style: italic;
text-decoration: none; }

See the code in yellow? That's what we can edit. :)

So "normal". This is talking about the color when you hover over it. On "normal", it will be whatever you put on the customization. But if you put something like "black", "gray", "blue", etc., it will be that instead. You can only do stuff like "black" etc., you couldn't do like "light gray". Otherwise the code goes void. (doesn't work)

Hope this helps!! :)

~Storyteller

Customized Fonts for Blogger Blogs

Hey, guys!! :)

So, Autumn asked me how I got customized fonts on my blog. You will NOT believe how long I searched for this code on google, until I just ended up making my own code. (that was after I found out how to build it. Anyway) This code seriously needs to get out there, which is why I decided that I would make my next post (this post) about that.

First off, you're going to need to pick a font or two that you want, right? So hop on over to the Google Fonts that are offered and just pick one, for this tutorial. Got one? OK, good, let's go.

The font I'm going to pick is called Shadows Into Light.

1. See that blue button where it says "add to collection"? Click it.
2. In the right corner you'll see three buttons. Click the one that says "use".
3. Scroll down until it says "add this code to your website". Copy that code and put it somewhere safe. (sticky notes or like wordpad or something like that works amazing)
4. This is an example of the code, real quick:
<link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light' rel='stylesheet' type='text/css'>
5. Got it somewhere safe? Good. Now, you're going to add a / right before the last >, so that the code looks like this:
<link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light' rel='stylesheet' type='text/css'/>
(I put the / in red so that you would notice it better. ;))
6. Log in to your blogger account and click on the blog that you want to edit.
7. Go to "template".
8. Click "Edit HTML".
9. First off, don't freak out about going into the HTML. I understand, I was TOTALLY freaked when I first had to try this. It's no biggie. I would suggest that when you first try something like this out, get a test blog, just to make you lest wary of using your own HTML and more comfortable with it. It's highly unlikely that you're really going to hurt anything.
10. OK, see this line?
<b:skin>...<b:skin/>
(it should be like right towards the top)
Paste that code up there^ right ABOVE it.
Good job. :)
11. Now, click on the arrow beside those words.
12. Scroll down to the body where the blue words end and you again see the <b:skin/>.
13. This is what it should look like:
]]></b:skin>
What you're going to do next is RIGHT ABOVE that HTML, OK? :)
14. These are the codes that you're going to be using:

h3.post-title { font-family: 'FONT NAME HERE', cursive !important;}

.sidebar .widget h2 { font-family: 'FONT NAME HERE', cursive !important;}

Put the name of your font--in my case, Shadows Into Light, where it says "FONT NAME HERE". Don't erase any part of the code except for FONT NAME HERE (not even the ' '), because otherwise the code will go void. (that means it doesn't work) So it should look like this:

h3.post-title { font-family: 'Shadows Into Light', cursive !important;}

.sidebar .widget h2 { font-family: 'Shadows Into Light', cursive !important;}

15. Now, what do these two codes do, first off? The one that says "h3.post-title" is the one that controls the font of your post title, as it would suggest. This will change your post title to whatever font you just embedded into your template. (you know when I asked you to paste it into the code? Yup, you embedded it!) And the second code ".sidebar .widget h2"? That's talking about the widget/gadget titles.
16. Now you're going to paste both of those codes, WITH THE NAME OF THE FONT THAT YOU EMBEDDED, right above the ]]></b:skin>.
16. Now click the "preview template" button at the top.
17. You will be shown a preview of your template. If the post titles and widget/gadget titles are changed to the font that you went, it worked!
18. Viola! Your fonts are changed. :)

I'm still working on getting the right code for the date title, but I'll keep you updated. ;)

Hope this helped!

Button for Poem Girl

<div align="center" style="padding: 5px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzD4-mcxtiiDCxCkXUvBvwq27EUxRNIhTyddmKSTYglKpTNPzvatytWeSJ2C36jR_QJ3pnYVzpl3moPORF8QTXesemfxDzwQy0yQkPTjlVpZtKuHXU1b9sEtHVVUcwEo0elQNJ_DAcE0Y/s1600/theheaderchallenge.jpg"  title="The Header Challenge" alt="The Header Challenge" /></div><textarea style="background:#ffffff;border:solid 1px #cccccc; color: #000000; font-size:100%; height: 50px; margin:auto; text-align: left; padding: 2px 0 2px 5px; display: block;  width: 90%;">&lt;div align="center">&lt;a href="http://poetic-meditations.blogspot.com/" title="The Header Challenge" target="_blank"&gt;&lt;img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzD4-mcxtiiDCxCkXUvBvwq27EUxRNIhTyddmKSTYglKpTNPzvatytWeSJ2C36jR_QJ3pnYVzpl3moPORF8QTXesemfxDzwQy0yQkPTjlVpZtKuHXU1b9sEtHVVUcwEo0elQNJ_DAcE0Y/s1600/theheaderchallenge.jpg" alt="The Header Challenge" style="border:none;" /&gt;&lt;/a&gt;&lt;/div></textarea>

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

Making Post Titles Go Italic When Hovered

OK, so, somebody asked me how I make my post titles go italic when hovered over. This is the result of two things, which I will be explaining.

First off, have you see how on the Simple templates when you hover over on them, they don't have an underline, but on the Ethereal ones they do? This is something that we're going to be using to our advantage.

OK, ready? Let's go. ;)

1. Log into your account.
2. Click on the blog you want to edit.
3. Go to "template".
4. Change your blog into a Simple template if you haven't already.
5. Click "Customize".
6. Go to Advanced.
7. Click CSS.
8. Paste this in the box:

a:hover { color: black; font-style: italic;
text-decoration: none; }

9. Click "save template".
10. Go to your blog, hover, and see how it works!! :)
Note: this code will change all links on the page to go italic when you hover.

OK, so, how can you customize this code? (this is the fun part ;))

a:hover { color: black; font-style: italic;
text-decoration: none; }

All of the words that I highlighted can be customized. First, "black". This is where you change what color the font is when it's hovered over. Examples are: light gray, pink, yellow, and normal. You can use most any color. "Normal" makes it whatever you had it on before you put this code into play. The highlighted "italic" is talking about changing your hovers to italic. If you don't want it to do so, like if you have a font that doesn't do italic in a pretty way, then you can change it to "blink", so that the underline is taken off hovers. (I do this a lot...) Next, "none". This is talking about an extra style. So far, the only thing that's worked is "underline", but I mostly got this code to get RID of the underline, so I don't use it. But if you want to, go ahead.

I hope this was helpful!! If you have any questions, just ask. :)

Poem Girl...

The button. Here's the code:

<div align="center" style="padding: 5px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfgTd8Mxu5g7g2modyLkUN6QDON9vQcsrfD_BX9YkY6UBMUmuJL_0zprgOaorIcCjIWUZRj-CwBNWhNmXQz9py-B245qcF1UTIyP7b2o66T18YaOGy5WkpmX0aAcZoqW9aV_FS3bit3Lw/s1600/poeticbutton1.jpg"  title="Poetic-Meditations" alt="Poetic-Meditations" /></div><textarea style="background:#ffffff;border:solid 1px #fca9a9; color: #000000; font-size:100%; height: 50px; margin:auto; text-align: left; padding: 2px 0 2px 5px; display: block;  width: 90%;">&lt;div align="center">&lt;a href="http://poetic-meditations.blogspot.com/" title="Poetic-Meditations" target="_blank"&gt;&lt;img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfgTd8Mxu5g7g2modyLkUN6QDON9vQcsrfD_BX9YkY6UBMUmuJL_0zprgOaorIcCjIWUZRj-CwBNWhNmXQz9py-B245qcF1UTIyP7b2o66T18YaOGy5WkpmX0aAcZoqW9aV_FS3bit3Lw/s1600/poeticbutton1.jpg" alt="Poetic-Meditations" style="border:none;" /&gt;&lt;/a&gt;&lt;/div></textarea>

You can just pull this off. ;)

The header. Directions for pull off: click right on photo; click "open image in new window"; grab the picture. Hope you enjoy! :)

You can just pull this off. ;)

Header and Button for Poem Girl

The header.

<div align="center"> <a href="http://authorclubgirls.blogspot.com/" title="The Authors Club" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3ccoXQzcOI1wR0Cm51W9K-AS3ukzgKoCuFO0IItH6dtCl-Ojyuzv56zwp5HkB5HJYyiaBkfYXVtsr8_XntI0N3tcTQrAVB2StjjlGiVif9MZNzKeVe4lwJIKVMfrkYESgnfEpY62FTS0/s1600/theauthor%2527sclubbutton1.png" alt="Totally Me!" style="border:none;" /></a></div>

The button.

Oh my word!!! So so sorry. =P Here's the code you need to grab:

<div align="center" style="padding: 5px;">

<img alt="The Authors Club" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3ccoXQzcOI1wR0Cm51W9K-AS3ukzgKoCuFO0IItH6dtCl-Ojyuzv56zwp5HkB5HJYyiaBkfYXVtsr8_XntI0N3tcTQrAVB2StjjlGiVif9MZNzKeVe4lwJIKVMfrkYESgnfEpY62FTS0/s1600/theauthor%2527sclubbutton1.png" title="The Authors Club" /></div>

<textarea style="background: #ffffff; border: dotted 1px #F5A9BC; color: black; display: block; font-size: 100%; height: 50px; margin: auto; padding: 2px 0 2px 5px; text-align: left; width: 90%;"><div align="center">

<a href="http://authorclubgirls.blogspot.com/" title="The Authors Club" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3ccoXQzcOI1wR0Cm51W9K-AS3ukzgKoCuFO0IItH6dtCl-Ojyuzv56zwp5HkB5HJYyiaBkfYXVtsr8_XntI0N3tcTQrAVB2StjjlGiVif9MZNzKeVe4lwJIKVMfrkYESgnfEpY62FTS0/s1600/theauthor%2527sclubbutton1.png" alt="Totally Me!" style="border:none;" /></a></div>

</textarea>

Since all of these are free and everything and I'm not installing these by myself, you don't have to but I would appreciate it if you would mention that I made these. Thanks:)

Header for Claire

A header for Claire of hello little birdy.

Shadows and Post Titles

Hola. :)

Today, I'm going to be talking about two different CSS rules that have to do with two different types of templates: Simple and Ethereal.

On the Simple template, you will notice that all of your pictures have a sometimes rather annoying shadow. If this is there, you simply can't make a white picture blend with the rest of the template and look professional. So how do we get rid of that?

On the Ethereal template, when you hover over the post title, you'll get an underline. Some people might like that, but for me, it doesn't look professional. How do you get rid of that underline?

These are the two questions that I'm going to be answer in this post.

How to get rid of the shadow on Simple templates:
1. Log in.
2. Click on the blog you want to edit.
3. Get your blog into a Simple template or click customize if you already have.
4. Go to Advanced.
5. Scroll down and click CSS.
6. Paste this code:

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,

.BlogList .item-thumbnail img {

  padding: none !important;

  border: none !important;

  background: none !important;

  -moz-box-shadow: 0px 0px 0px transparent !important;

  -webkit-box-shadow: 0px 0px 0px transparent !important;

  box-shadow: 0px 0px 0px transparent !important;

}

7. Click return and then save template.
8. Click "back to blogger" and see how your blog looks!! :)
Note: when you're on the template editor, it will not show the effects of the CSS code. It will only show the effects once you are on your blog.

How to get ride of the underline on post titles on the Ethereal template:
1. Log in.
2. Click on the blog you want to edit.
3. Get your blog into an Ethereal template or click customize if you already have.
4. Go to Advanced.
5. Scrolls down and click CSS.
6. Paste this code:

h3.post-title a,

h3.post-title a:visited

{

text-decoration:none !important;

}

7. Click return and then save template.
8. Click "back to blogger" and see how your blog looks!! :)
Note: when you are on the template editor, you can't hover over links, so like before you'll have to go onto your blog to see the works. ;)

Hope this was helpful!! :)

Blogger Buttons

So... First off, you have probably been affected by whatever's causing everybody's buttons to go crazy. (I think it's probably the new HTML thingy that blogger did to us.... *sadness*...)

Anyway, so through a great friend, Dahlia (via Google+), of this very cool button making site. I've tried dozens of other codes to make buttons work, but they always just showed the button and an empty code box. But with this site, it works perfectly. (And I even found out how to customize it in ways that you normally wouldn't...)

So, I'm going to give you the link to the site and then show you what you can do with the code. ;)

GRAB MY BUTTON CODE GENERATOR

OK, so, I'm going to use my friend's button for this. (I made it for her. Anyway...)

This is what it looks like.

<div align="center"> <a href="http://totallygeektotallyme.blogspot.com/" title="Totally Me!" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPRErnrRc9DgawcfBQLviqLMw8UYwk3X9e1U28Ij2GrQJnZMip7u5jz5EyA-veJrxqpDeIzlLUlrlp2TRapwWZCPS8XZnWCpdBvQJg7cvFM7K_n0mYM-K_DacOSOfvj0OlbptrBE7LC6rp/s1600/tmbutton1.jpg" alt="Totally Me!" style="border:none;" /></a></div>

OK, so now I'm going to show you how to customize this. Here is the code I used:

<div align="center" style="padding: 5px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPRErnrRc9DgawcfBQLviqLMw8UYwk3X9e1U28Ij2GrQJnZMip7u5jz5EyA-veJrxqpDeIzlLUlrlp2TRapwWZCPS8XZnWCpdBvQJg7cvFM7K_n0mYM-K_DacOSOfvj0OlbptrBE7LC6rp/s1600/tmbutton1.jpg"  title="Totally Me!" alt="Totally Me!" /></div><textarea style="background:#ffffff;border:solid 1px #ff0066; color: #000000; font-size:100%; height: 50px; margin:auto; text-align: left; padding: 2px 0 2px 5px; display: block;  width: 90%;">&lt;div align="center">&lt;a href="http://totallygeektotallyme.blogspot.com/" title="Totally Me!" target="_blank"&gt;&lt;img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPRErnrRc9DgawcfBQLviqLMw8UYwk3X9e1U28Ij2GrQJnZMip7u5jz5EyA-veJrxqpDeIzlLUlrlp2TRapwWZCPS8XZnWCpdBvQJg7cvFM7K_n0mYM-K_DacOSOfvj0OlbptrBE7LC6rp/s1600/tmbutton1.jpg" alt="Totally Me!" style="border:none;" /&gt;&lt;/a&gt;&lt;/div></textarea>

See? It looks quite different then the normal code. And here's some things you can customize about it:

<div align="center" style="padding: 5px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPRErnrRc9DgawcfBQLviqLMw8UYwk3X9e1U28Ij2GrQJnZMip7u5jz5EyA-veJrxqpDeIzlLUlrlp2TRapwWZCPS8XZnWCpdBvQJg7cvFM7K_n0mYM-K_DacOSOfvj0OlbptrBE7LC6rp/s1600/tmbutton1.jpg"  title="Totally Me!" alt="Totally Me!" /></div><textarea style="background:#ffffff;border:solid 1px #ff0066; color: #000000; font-size:100%; height: 50px; margin:auto; text-align: left; padding: 2px 0 2px 5px; display: block;  width: 90%;">&lt;div align="center">&lt;a href="http://totallygeektotallyme.blogspot.com/" title="Totally Me!" target="_blank"&gt;&lt;img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPRErnrRc9DgawcfBQLviqLMw8UYwk3X9e1U28Ij2GrQJnZMip7u5jz5EyA-veJrxqpDeIzlLUlrlp2TRapwWZCPS8XZnWCpdBvQJg7cvFM7K_n0mYM-K_DacOSOfvj0OlbptrBE7LC6rp/s1600/tmbutton1.jpg" alt="Totally Me!" style="border:none;" /&gt;&lt;/a&gt;&lt;/div></textarea>

(The other things you can already customize on the site.)

OK, so what do these things mean?

On the first thing I highlighted, the word before it is:  border:. This is talking about the border of your code box. The word I highlighted is "solid". This means that the border of your code box is solid. You can change this to these two things: dashed and dotted. This is what they both look like:

<div align="center"> <a href="http://totallygeektotallyme.blogspot.com/" title="Totally Me!" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPRErnrRc9DgawcfBQLviqLMw8UYwk3X9e1U28Ij2GrQJnZMip7u5jz5EyA-veJrxqpDeIzlLUlrlp2TRapwWZCPS8XZnWCpdBvQJg7cvFM7K_n0mYM-K_DacOSOfvj0OlbptrBE7LC6rp/s1600/tmbutton1.jpg" alt="Totally Me!" style="border:none;" /></a></div>

See? That's with the box with a dashed border. Cool, right? :) Now, let's talk about the font size. No offense, but... it looks huge. See at the beginning code where I highlighted "100%"? The word before it is "font-size:". This is, of course, talking about the font size, which is on 100%. You can play around with the percentages and found out what kind of size you want. For example, this is seventy percent:

<div align="center"> <a href="http://totallygeektotallyme.blogspot.com/" title="Totally Me!" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPRErnrRc9DgawcfBQLviqLMw8UYwk3X9e1U28Ij2GrQJnZMip7u5jz5EyA-veJrxqpDeIzlLUlrlp2TRapwWZCPS8XZnWCpdBvQJg7cvFM7K_n0mYM-K_DacOSOfvj0OlbptrBE7LC6rp/s1600/tmbutton1.jpg" alt="Totally Me!" style="border:none;" /></a></div>

A little bit small... but it's still good. :) I rather like it. :)

I hope that was helpful! Please go and check out the two blogs I mentioned. They're awesome. :)

God bless||have a great Sunday

~Storyteller

P.S. A slight edit--the fonts it in the grab it code box looked a lot bigger when I made this post...so...I'm not just crazily saying that a font that actually looks right is too big. =P But you can customize it however you want. :)

Design Information and More about Post Titles

Programs I use to design with: GIMP (safe, free download), PicMonkey, Picnik, and [sometimes] FotoFlexor

Purpose of each one:
GIMP--all around everything
PicMonkey--collages and overlays
Picnik--the fonts
FotoFlexor--the fonts

Note: It's good to have several different sites to use, to have lots of different things to choose from.

Where I get free downloaded fonts from: FontSquirrel

Have I had any problems with any of the above said programs?
GIMP--Nope, none, uh-uh
PicMonkey--sometimes slow to load
Picnik--slow to load
FotoFlexor--loading problems
FontSquirrel--some fonts are unavailable to download for my computer
NO VIRUSES FROM ANY OF THESE.

Where I find new codes: Off google and from friends. (whoopteedoo...)

I thought I would just answer those general questions. :) Now, I want to explain a code that I have already given you.

The code I have already given you is the code for centering post titles, right? So, here is the CSS code I gave you:

.PageList {text-align:center !important;}

.PageList li {display:inline !important; float:none !important;}h3.post-title { text-align:center; }

.date-header

{

text-align:center !important; 

}

See where I highlighted the letters? All of the words highlighted say "center". This is the center attribute for the code. It can be changed to left, right, or center. For left, you would have...

.PageList {text-align:left !important;}

.PageList li {display:inline !important; float:none !important;}h3.post-title { text-align:left; }

.date-header

{

text-align:left !important; 

}

Now it will be left. You can do the same for right. Here's another thought, though.

.PageList {text-align:center !important;}

.PageList li {display:inline !important; float:none !important;}h3.post-title { text-align:right; }

.date-header

{

text-align:left !important; 

}

Now look at the code. They're all changed to different things. Before I start explaining that, I should first explain what each part of the code handles.

.PageList {text-align:center !important;}

This part of the code is talking about the pages.

.PageList li {display:inline !important; float:none !important;}h3.post-title { text-align:center; }

This part of the code is talking about the post title.

.date-header

{

text-align:center !important; 

}

And, finally, this part of the code is talking about the date title.

So, in the above code that I gave you where all of them were different, my pages would be centered, my post title would be to the right, and my date title would be to the left.

Home || About || Elsewhere

May 8th

Who am I really?

Thus it looks something like that. Awesome, right? And it gives your blog a more personalized look.

I'll be back tomorrow. :)

And by the way, if there's any code you'd like to give me, I'd love to have it!! :)

learning new things+HTML=a designer's confession

I used to rely solely on CSS when designing my blogs and others. But since I redid my design blog, I have been able to dive into HTML codes like never before.

Mostly I find codes by searching Google. (good ol' google...) I usually start my search by doing "HTML codes blogger..." and then saying whatever it is that I'm wanting to know. (like... "HTML codes blogger center post titles") I have found so many different things by doing that!! It's so amazing what you can just find out by a simple internet search, isn't it?

I suppose why I'm writing this is because I've come to a conclusion. I want to help other people learn HTML and CSS codes, so that they can better their own designs and others. I don't care if they're competing with me or what. I just want to help, you know? And if you see a code that I probably don't know, I'd love to know it, too. You can call it trade-a-code. Sound cool? :) There's more yet.

I know I can't always post the most interesting things (and when I get no comments or very many rates I usually feel like a failure...), but I want to be posting like at least one HTML/CSS code a week or something, just to help you guys. Or other tips. And you guys can ask me about something. If I don't know how to do it, I'm afraid I won't be able to help you. But if I can find it by search, I'll try it out, and if it works, I'll show you guys how to do it, too.

What do you guys think about that? :) Think that's a good idea? :)

Contest Button Tutorial {just for fun}

OK, so, I've kind of covered how to make a real blog button in itself, but we all know that contest buttons are a little different. OK, a lot different. Mostly because you're going to have a lot more words on your contest button then your normal button. So how do you do that?

Well, I'm going to make three different buttons, made in three different styles, and show you three great different ways to make a contest button.

1. In this one that I'm going to show you, I've used really natural (OK, more dull) colors--black and white. There's dark and light on the photo, which is helpful, so I don't have that hard of a time choosing colors.

I also emphasized the "contest" instead of the "photography" part, going for a more graphic design look by putting "photography" on the side. (this gives it a unique look that's both pretty and elegant) All of the words are big enough to see when on somebody's sidebar, and all of the needed information is there--what the contest is, who's hosting it, what their blog is. This was made easily on PicMonkey.


2. In this one, you can see that I went for the "words fill the whole picture" look, which makes sure that the people see what they're meant to see. The red contrast against the white also makes it pop, which is also nice. Right away, you know what the contest is about. The lettering that I used gives it a kind of sophisticated and professional look, like it's a book cover or something.

The words that tell you who it is and what blog they're from is a little smaller, but you can still see it pretty well. If the person's looking for that information, they're going to easily find it. Also, when they see the red-white contrast, their eyes will be immediately drawn to it. And since the other information is right above it, that should be where their eyes go next. (I personally like this one... I mean, informational wise... you get the words bold, and in a really able-to-see color....)(I take that back, I like all of them... =D) This one was also made on PicMonkey.


3. This last one was my favorite to make, just because I thought it was pretty. =D This one is an artsy, graphic design one, that also looks professional and beautiful. I brought out the soft pink color that's close to white, but not quite that big of a paling color. You might also notice how I alternated the two different fonts. Tip: I only use (usually) at most two fonts per header/button/etc. If you have more, it tends to look more cluttered and such. Unless you're trying to make more of a crazy, random header. Then it gives it the right look. ;)

This one easily shows the information and the title, making it probably my favorite out of the three that I've shown you guys so far. It's pretty, easy to read, and professional looking. This was also made on PicMonkey.


I hope this was at least a little helpful. =D Until next time!! ;)

You Want to do what YOU Like...

Today I want to share a designing tip... (that I thought up a few days ago and forgot to post =P)

First off, I'm going to assume that at the moment you're more interested in designing your own blog then in going an designing other peoples' blogs. (if you're more interested in designing other peoples' blogs, this is still something that you probably want to know)

But if it is YOUR blog that you're doing...

I find that the designs on my blogs that I've liked the most are the ones that I just... like. You know, not like you saying, "oh, hey, that's a cool design" and trying to copy it. You have to find things that YOU, personally, like, and then make something out of it.

Like for me, I love pictures in my headers. I have no idea why, I just do. So for me, I just have to find pictures that I absolutely LOVE. And when I do, then I can compile them into a header that I LOVE LIKE CRAZY!!!!! (this has happened again. I love this header and Storyteller of Weston County's header with a passion...)

You have to find what YOU like. If you like ribbons or the scrapbook look, even if you don't know how, strive for it. Ask questions. Most designers don't like to answer them, but I love to help. (I mean, most people don't want to do it because of like designing competition. But if people like your designs, they're going to come to you anyway. And it doesn't break my heart if my designs just aren't for you. ;)) So if you have questions, ask me. Maybe I can help!! :) I'm more interested in getting you a design that you're going to love. :)

This also goes if you're designing somebody else's blog, too. Most people like to design in a certain way. I, personally, like a more simple template and then a more extravagant header and decorations on top of it, instead of the other way around. (though I did find an awesome way to do backgrounds... =D) But if somebody comes to me and asks for something that's out of my normal, I still try and strive for it. Because that's THEIR vision, and they want you to help them try and fulfill it. It's important to get as close to your customer's vision as possible. ;)

I hope this has been helpful for you.

God bless!! :)

Centering Post Footers [give away title =P]

Hola!

This is Storyteller with some more designing tips.

I do these posts so that if you're a person like me, who likes doing things themselves, you CAN do things yourself! :) But if you don't like doing things yourself, I'll do it for you. (haha *I love designing* ;)) Anyway, so today the topic's going to be....

dot.dot.dot.

(hmm, what secrets should I unleash?! mahahaha JK)

OK, got it. ;)

Have you ever wanted a more simple post footer? Like not a whole bunch of junk?

Well,  if you're like that (as you can tell by most of my footers, I'm not like that =P), then I have something that makes this look even more awesomer. ;)

It's called.....

CENTERING YOUR POST FOOTER

An interestingly strange designing post by Storyteller

who sounds more like a writer

[and is]

but amazing knows some designing things =D

OK, so this one is pretty easy. Like the others I did, it's CSS. (CSS. IS. THE. BEST.)

OK, so here's what to do:

-Log in

-Click on the blog you want to do it on

-Go to template

-Click customize

-Go to Advanced

-Click CSS

-Paste this code and press return afterwards:

.post-footer {
text-align: center;
font-family: ‘Port Lligat Sans’, sans-serif;
font-size: 18px;
padding-top: 5px;
padding-left: 0px;
padding-bottom: 2px;
border-bottom: 1px solid #c7c5c5;
}

-Save template

Easy peasy, right? ;)

It won't show you that it's done until you go and check out your blog, but it definitely works.

I hope that this is helpful!! :) If you want more like this, tell me in some way--vote on the poll, vote on the post, share this post on Google, comment... etc. ;)

HTML/CSS codes

I'm going to spill the beans.

Alright? :)

So, you know, as a designer, sometimes it's kind of like "ooh, I want to hoard all of my secrets". But I think, "hey, if people still want a blog design from me, I'm free, but otherwise, why not let them do it themselves?" You might be thinking that this is a CSS/HTML code post, and if you are... why, you're correct. =D Here are some codes that I use when I design.

1. Centering gadget titles. This is really nice if you have a template where you don't have a white background. If you don't, then it's going to be really obvious if you put the pictures with the words above it. So that's why I like this. It's also a lot easier than inserting pictures above each gadget. I still do the pictures (like on this blog) sometimes because I think they're cool, but this is something that I would suggest knowing.

Steps:
-Log into your blogger account
-Click on the blog that you're going to want to use
-Go to template
-Click customize template
-Go to Advanced
-Go to CSS
-Enter this code:

.sidebar .widget h2 {

text-align: center;

}

-Click return afterwards to see how it'll play out
-Save your template

Pretty easy, right? CSS is. It's my fave. :)

2. Centering page titles, post titles, and date titles. This is also a really good thing to do. Not only does it make it look pretty professional, but it's also a nice style. :)

Steps:
-Log into your blogger account
-Click on the blog that you're wanting to use
-Go to template
-Click customize template
-Go to Advanced
-Go to CSS
-Enter this code:

.PageList {text-align:center !important;}

.PageList li {display:inline !important; float:none !important;}h3.post-title { text-align:center; }

.date-header

{

text-align:center !important; 

}

-Click return afterwards to see how it'll play out
-Save your template

Sweet, right? :)

And, if you want to put them together, this is how you can put them all together in one:

.PageList {text-align:center !important;}

.PageList li {display:inline !important; float:none !important;}h3.post-title { text-align:center; }

.date-header

{

text-align:center !important; 

}

.sidebar .widget h2 {

text-align: center;

}

Super duper easy. ;)

3. Keep your navbar but make it disappear until you hover. I do this on ALL of my blogs, just because it makes it better. And the best part? It's like the easiest code ever. =D

Steps:
-Log into your blogger account
-Click on the blog you're wanting to use
-Go to Layout
-Click add gadget
-Get the HTML/Java Script gadget
-Put in this code:

<!-- DROPDOWN NAVBAR -->
<!-- stylesheet for FF2, Op9, IE7 (strict mode) -->
<style type="text/css">
#navbar {
display:inline;
width:100%;
position:absolute;
background-color:transparent;
top:-30px;
left:0px;
height:60px;
z-index:999999;
}
#navbar:hover{
top:0px;
height:30px;
}
</style>
<!-- stylesheet for IE6 and lower -->
<!-- (not supporting element:hover) -->
<!-- first, unhide the navbar through css -->
<!-- second, hide the navbar and mimic -->
<!-- the effect with javascript, if available -->
<!--[if lt IE 7]>
<style type="text/css">
#navbar {
height:30px;
top:0px;
}
</style>
<script type="text/javascript">
var navbar = document.getElementById('navbar');
if(navbar){
navbar.onmouseover = function(){
navbar.style.top = '0px';
navbar.style.height = '30px';
}
navbar.onmouseout = function(){
navbar.style.top = '-30px';
navbar.style.height = '60px';
}
if (navbar.captureEvents){
navbar.captureEvents(Event.MOUSEOVER);
navbar.captureEvents(Event.MOUSEOUT);
}
navbar.onmouseout();
}
</script>
<![endif]-->
<!-- end dropdown navbar -->

-Save gadget

I think that's all for now... have any more questions? Maybe I can help!! :) And if you're seriously new to blogger, I have lots of great tips on my Help page on my blog Storyteller of Weston County. :)

Picture-Perfect linkup with Britt:)

I'm doing the Picture-Picture linkup over at Encouragement for Everyday Struggles. Here's my photo (designed by me :)).

Hope you like it, Britt!! :)