Renovation Time Part 1

Hi everyone and anyone who may be out there as I'm just starting up this blog! I thought it would be fun to document my blog startup and renovation to give any new bloggers out there some ideas for basic HTML changes to pretty up your blogs. First off, just some disclaimers, I am not a professional programmer by ANY means!!!!! I am just writing about code that I have tweaked over and over in previous blogs that I have made over (I've linked both of my mom's homeschool blogs below).Also, nothing in this post is sponsored in any way, these are all just my personal opinions based on what I have experienced while trying to learn html.

 These blogs were both created through blogger using the template customizer as well as the HTML editor. I'll try and get a link to the posts that I have used that have helped me along the way by lending me chunks of code, giving me ideas for new ways of changing my blog and making it work well for my purposes.
To start, I am blogging through my blogger.com account and have purchased a domain through google. The reason I am using blogger and not wordpress is because I want to have total control over my layout. I think wordpress is a brilliant platform for people who want a gorgeous blog that is easy to use and design quickly for relatively little money, but I wanted something that would allow me to really dive into the source code behind my page and explore every aspect behind it and tweak it as I liked.
 I actually tried opening multifariousmara as a wordpress blog first, under the suggestion of my sister who really loves it. I was sad to find that to even begin editing the css you had to pay for their premium membership, when I knew from previous experience that I could do all that I was wanting to do with blogger for free. the downside was that I couldn't start with a template with features in place that I really liked. I would have to design all of the cool template feautures on my own and with the help of the good ol' interwebs. Since I am basically just learning as I go through trial and error, I try to keep a log of all of the changes I've made and code that I have taken out, or where I have put new code in, just in case I really mess something up and need to go back and undo something. If you're looking for a good starting point in understanding basic html, I would suggest checking out Eli the Computer Guy's video on HTML. His videos have really helped me in my journey of learning to program.
Okay, let's get to it! I started with the "Simple" template and did my best using the template customizer to make things as black and white and plain as possible. I also removed the blog navigation bar from the top, by going into the layout settings and setting it to "off".
Next, to remove the outer shadows surrounding the page, I went to the HTML editor, scrolled down to the css portion of the code that held the main content settings  (somewhere around line 180 in the "Simple" Template)

and removed this section of code:

.content-outer {

  -moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);

  -webkit-box-shadow: 0 0 $(content.shadow.spread.webkit) rgba(0, 0, 0, .15);

  -goog-ms-box-shadow: 0 0 $(content.shadow.spread.ie) #333333;

  box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);

I could have just turned it off by commenting it out (for those of you who might not know, you do this by placing /* at the beginning of what you want to nullify and */ at the end), but I knew that I really like a clean looking blog and would probably never want to turn it on again, so I just cut it out and put it in my notesheet.
 Next, I wanted to neaten up and customize my About Me section of the sidebar. This took a lot of tweaking and trial and error for me to figure out when I first did it to my mom's blog. I really liked the look of it and decided to bring it over to this blog as well.

It took a lot of code-reading before I finally found where to make the changes the first time, so I'll just tell you right now it makes it a whole lot easier if you click somewhere in the editor, press Ctrl+F or whatever your "find" shortcut is for your computer, then type in "profile1" and it will bring up the section that controls what the profile part of your sidebar looks like. Scroll down through the if statements until you find the "normal blog profile" section as seen below.

I then got rid of all of the code between <dt class='profile-data'> and <b:if cond= 'data:hasgoogleprofile'> and put in the following:

 This declares a new class called "mara" which holds  classes "aboutMe" and "profilepic". the aboutMe class holds my name which links to my profile. The profilepic class holds my profile picture with its specifications and links to my profile as well. I then added the following code in the CSS section to declare specifications for these new classes I created.

Reading from top to bottom, float:right; This tells it that I want my profile picture to align to the right of this cluster of information. border-radius:50px; This is one of my favorite commands. This tells it that I want my picture to be a circle! I declared the picture as 100px, so 50px radius gives me a perfect circle. If I wanted to, I could make the number smaller to give me a square with rounded corners. Next, I have the hover commands telling it that I want the picture to become slightly opaque when you hover over it. This isn't really necessary, but I think it's a nice touch! Then, in the aboutMe, I tell it that I want my name to align to the left  of this cluster, so it will be next to my picture. I changed the font, font-size, color, centering, and padded it to get it to sit exactly where I wanted it to as well as to give it space around. I also, declared a container width  for class mara. then I put "hover" and "visited" specifications for what would happen when you hover and click on my name.
Then, I wanted to change the color of my post titles. There is no option for editing this quickly in the template customizer, so I googled it and found out how to do it here!
That's all I have for now. I'll try and bring in updates every now and then as I change up my blog.