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. :)