FYI: Posts will be sparse around here until I replace my laptop.... Coming back to work after Christmas break apparently was too hard and it quit on me!

Tuesday's Tips

In response to all your questions about how I designed my blog I will answer them with my blogging tips. =D

I'm no expert, but I'm glad to share what I do know. ;)

Each Tuesday I'll post about something relating to blogging that would have helped me when I first started blogging. Whether that be a html/design tutorial, content advisement, or blogger help this is meant to help others out there in the blogging world.

I'm always open to suggestions--in fact many of my tutorials are here because some of you asked. =) So ask away!

Looking for a specific topic?  Check to see if I've already covered it...
For starters... (a guide to help you start designing)
Accordion Menu
Menu Bar
Imagemap 
Rotating Header
Image Flip on Rollover
Changing the Width of Your Blog
Blog Button and Grab Box 
Scrolling Button Widget
Post Signature --the easy way
Post Signature --the harder way
Blockquotes
Hiding the Blogger Navbar
Remove Label State Box
Friend Connect
Formating Comments
Comment Form Message
Scroll to Top Floating Button
Hiding the Video Part of Embedded YouTube Videos
Adding Snow to Your Blog 
A Note on Links
A Resource
CSS Basics -Borders
CSS Basics -Text
CSS Basics -Backgrounds
CSS Basics -Padding & Margins
Numbering Comments
Customizing Link Appearance
Customizing the Comment Link
Customizing Post Title Format
Customizing Post Date Format
Customizing Gadget Heading
Customizing Comment Author Avatar Image
Lowerbar
Creating a Design Credit Link


29 comments:

Godsgirlz1

Do these tips work with wordpress too?
~Godsgirlz1~
http://godsgirlz1.wordpress.com

Emily Grace

You could try it, but I've never used wordpress so I don't know.

Oriana

hey! thanks for these tips-they help me a lot.
i was wondering if you know how/could do a tutorial of how to create a post separator(?). like, the lines that are in between of both posts. am i making sense? lol

Emily Grace

Oriana - Yes, I know what you mean. I've added that to my list of topics to cover. :)

Anonymous

How did you make the Font for your header?

-Morgan

Emily Grace

Morgan - I used the fonts Before the Rain and Arial in my current header.

marcia

I was wondering if you could tell me how to adjust the width of my post?
Thanks so much, your tutorials are very helpful! :D

Emily Grace

Marcia - Search for #main-wrapper. More info here. Does that help? :)

marcia

Yes, that helped a lot! thanks so much!

Unknown

I was wondering where you got the little bird in your header? It's so cute, I just couldn't help but wonder. =D Hope you don't mind me asking. :)

Hannah

http://hannahherself.com/

Emily Grace

Hannah Elise - I don't mind at all, I actually just used a stamp I have from stampin up! ;)

Ruby J. Plank

Hi, Emily, do you know how you do a label thing that is a picture with text? Example: http://discovercaptivating.blogspot.com/ look at the right sidebar of her blog down a bit. And do you know how to do your about me page with just the photo and when you click on it it goes to the "About me" page?

Emily Grace

Ruby - Yes, create the code the same way you would a blog button. Instead of putting the link to your blog, you would put the label link(click on the label you want at the bottom of your post). Same thing with the "About me" button, just put the link to your about page instead of the blog link or label link. Make sense? =)

Ruby J. Plank

Thank you! I will do this!

Emily Boyd

I created a blog to try out a new design. If i want to put it on another blog, is there a way to just upload the entire design instead of going through and changing everything individually? I tried to copy and paste but Blogger wouldn't let me.

Emily Grace

Emily Ruth - Yes, there is another way. :) Go to your template tab, then in the upper right hand corner there is a button that says 'Backup/Restore.' Use that tool to download the full template from your test blog. Then upload that template to your other blog using the restore option. Make sense?

Emily Boyd

Thanks, Emily! I knew there must be some way...

Emma

Thank you so much! I am not good at HTML stuff at all and this REALLY helped! I now have a scrolling blog widget on all 3 of my active blogs! Thanks!

Morgan

Could you please tell me how to put tabs above my header?

Thanks Morgan

Emily Grace

Emily Ruth & EJ - You're so very welcome!

Morgan - Sure. Go to your dashboard and then to your 'layout' tab. Drag the box titled 'pages' to above the one titled 'header.' Pretty simple! Feel free to let me know if you have any other questions. =)

marcia

Hey, Emily! I am designing a blog for my friend, and I am having problems with the header. It doesn't center. I know if I make it smaller it will center, but I don't want to change the size. Can you help me with this?
the link is fried rice

marcia

and I have another problem... :P
my post title is having issues..I want my post title to be all the way left. I can't figure out what the problem is, but something is conflicting in my post date/ post title. Here is my code: thank you so much!
[.post h3 {
margin:.25em 0 0;
padding: 14px;
font-family: Arial;
font-size:18px;
font-weight:heavy;
text-transform: bold;
text-align: left;
float: left;
line-height:3.5em;
color: #000000;
h2.date-header {
font-family: arial;
color: #000000;
font-size: 11px;
font-style: italic;
float: left;
display: block;
margin:1.5em 0 .5em;
}]

Emily Grace

Marcia - For your question about centering the header: Are you using blogger's header widget or a html widget? I suggest using a html widget and put your code inside < center >< / center > tags. I think it really is centered, but there is a margin on the left that is preventing it from appearing that way. Ensure that all margins are set to 0 or auto.

Concerning your question about the post title: Make sure there is an ending bracket } at the end of your post h3 code. I believe the display: block; in your date-header code is what is messing up the alignment of your post title. Try removing it or changing it to display: inline;.

Let me know if this works for you or not.

marcia

Okay, so I have a problem. I am using the minima template (I got the code off of the creators of minima) and my text header simply refuses to allow my image header to upload. I used the normal header uploader, I tried uploading it through photobucket, I tried googling it, everything pretty much! I've never had a problem with my headers uploading before, I think there might be something in my code that is preventing it, but I can't find a thing! here is my code:

[#header-wrapper {
width:890px;
margin:0 auto 10px;
}

#header-inner {
background-position: center;
margin-$startSide: auto;
margin-$endSide: auto;
float: center;
}

#header {
margin: 5px;
float: center;
text-align: center;
color:$pagetitlecolor;
}


#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
float: center;
}

#header a {
color:$pagetitlecolor;
text-decoration:none;
float: center;
}

#header a:hover {
color:$pagetitlecolor;
}

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}

.ad {
margin: 10px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}]

Do you have an idea what is causing this? Or is there anyway to get around it?
THANK YOU SO MUCH, Emily!

Emily Grace

Marcia - I would guess that it has something to do with the 'float: center;' but I could be wrong. I would suggest not using the blogger header at all. It is much easier to be creative if you remove it and use the html/javascript widget. (If you need help removing the blogger header, follow step 6 in this post. Let me know if you have any questions about this and if this works or not for you. =)

Morgan

Hello,

I was wondering if you still did designs for people.
I was also wondering if you could only do a rotating header for me and how much would that cost.

Thanks,
Morgan

Emily Grace

Morgan - Currently, I am no longer designing for others. I would be glad to help you with any questions you have regarding a rotating header. Do you need help with creating the images or code?

Morgan

Whenever I do the tutorial the pictures will show up on my blog but they won't rotate

Emily Grace

Morgan - Do all of the photos show up(one right after another) or just the first one? It would be helpful if you could send me the code you used--either via comment or email.

Post a Comment

Leave your thought...