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...
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
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:
Do these tips work with wordpress too?
~Godsgirlz1~
http://godsgirlz1.wordpress.com
You could try it, but I've never used wordpress so I don't know.
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
Oriana - Yes, I know what you mean. I've added that to my list of topics to cover. :)
How did you make the Font for your header?
-Morgan
Morgan - I used the fonts Before the Rain and Arial in my current header.
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
Marcia - Search for #main-wrapper. More info here. Does that help? :)
Yes, that helped a lot! thanks so much!
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/
Hannah Elise - I don't mind at all, I actually just used a stamp I have from stampin up! ;)
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?
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? =)
Thank you! I will do this!
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 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?
Thanks, Emily! I knew there must be some way...
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!
Could you please tell me how to put tabs above my header?
Thanks Morgan
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. =)
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
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;
}]
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.
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!
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. =)
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
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?
Whenever I do the tutorial the pictures will show up on my blog but they won't rotate
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...