HTML tutorial from { House of Sorensens }

Welcome Brittany from 
Brittany and I have become BFF’s and if I am lucky
She may become my neighbor! 
The super cool Brittany is going share a must know tutorial with us today.
Check it out before you run over and stalk/drool visit her blog

take it away girl…

It’s Tutorial Day!! Are you all ready for some nerd stuff??

My name is Brittany and I am here to give you some awesome HTML Coding lessons!!
I have had quite a few people ask me who designed my blog. Well, sorry to surprise you folks (ha), but I didn’t spend a dime! I did it all myself. I know it isn’t the most beautiful blog out there, but I think it looks pretty darn good for putting it all together myself. I actually asked my husband if I could pay someone to make my blog all fancy-like, and he pulled out his HTML Coding book from one of his classes last year and handed it to me. Gee, thanks, Husband. Well, don’t tell him this, but he was right…I could just do it myself. And I did! So today, I decided to put together a little “tutorial” of sorts on how I spiffied up my blog. It only took me one whole day, an HTML Coding book, and Google, that’s encouraging, right?? (Translation: set aside some time dedicated to sprucing up your blogger page.)

1. First off, aside from finding a super cute blogger background on one of many great sites [leelou blogs, shabbyblogs, the cutest blog on the block…] I became interested in changing the font of my title posts from boring blogger fonts to something exciting. For those of you who have been with me for a looong time (like 7 of you), my old blog (which is now deceased) had several fonts I went through trying to pick which one I liked best. I have finally found the current font for my post titles and blog post date as Pupcat Regular. How to install it? I am going to refer you to my favorite smart people ever, Kevin & Amanda. Click ;{here} for that tutorial. See ya in an hour.
2. Back? Okay. The next thing I did was upload some pictures to Picnik.com to make my fun header. I just made a collage with four photos, and used the geometric shapes (under Stickers) to cover up one photo and I added text to make it say House of Sorensens {creating our lives together}. 

I saved it, downloaded it, and uploaded it to blogger underneath my header as a Picture gadget. You can also upload it and use it as your header and have the image replace the title and description of your blog, but I did it differently because I felt it centered better and looked better. 
***If you wish to do the same, follow the exact steps as I have posted below in my next tutorial and enter the following code in the Add CSS space:
.header h1 {font-family:’Apple Chancery’, cursive; font-size:0%; text-transform:uppercase; letter-spacing:0.1em;}
3. Something that is very obnoxious is the fact that pictures have a border around them when you upload them to blogger!! I really wanted to get that to disappear. For me, I use the new blogger design template and so I went to Template Designer (click to view larger)

Clicked on Advanced

Scrolled down to click on Add CSS

and entered the following:
#Profile1 img {padding:0px; background:transparent; border:none; -moz-box-shadow: none; -webkit-box-shadow:none; box-shadow:none;}
.post img {padding:0px; background:transparent; border:none; -moz-box-shadow: none; -webkit-box-shadow:none; box-shadow:none;}
#sidebar-left-1 img {padding:0px; background:transparent; border:none; -moz-box-shadow: none; -webkit-box-shadow:none; box-shadow:none;}
#sidebar-right-1 img {padding:0px; background:transparent; border:none; -moz-box-shadow: none; -webkit-box-shadow:none; box-shadow:none;}
.post-body img {padding:0px; background:transparent; border:none; -moz-box-shadow: none; -webkit-box-shadow:none; box-shadow:none;}
By doing this, you are eliminating the shadow around the images in your blog post. There are multiple ways you can eliminate the shadow, but this is the only way that worked for my blog, and only if I entered in all of those lines of HTML coding.
4. The next thing I would like to share with you is how to add a button to your blog, with the HTML coding underneath so your friends and followers can grab your button. 
The first thing you need to do is create your fun little button (I went through several before I found one I liked), again using Picnik. See the evidence of my indecisiveness here:

After deciding on the button you want, save it toPhotobucket (or put it in a blog post ; publish it so it is saved in an online photo album).
Go retrieve the direct internet link for the image. In Photobucket, you just need to scroll over the image and the Link Option box will pop up. Copy the entire address that is in the Direct Link box. 
If you published your button in a blog post, click View Blog. Then click on the image. You will be brought to a blank page that has only your button on it. Copy the entire address in the address bar. Paste the code in a Word document until you need it.
Go to your dashboard in Blogger, and click on Design (or Layout if you are using the old blogger). Click “add a gadget” and choose HTML/Javascript. In the title, you can type in “my button” or “grab some love” or something super corny like that.  ;]
Copy and paste the following code in the box:
[center][a href=”http://YOUR WEB ADDRESS/” target=”_blank” title=”BLOG TITLE”][img alt=”BLOG TITLE” src=”http://IMAGE WEB ADDRESS”/][/a][center]
[/center]
[center][textarea id=”code-source” rows=”3″ name=”code-source”][center][a href=”http://YOUR WEB ADDRESS/”][img border=”0″ src=”http://IMAGE WEB ADDRESS”/][/a][/center][/textarea][/center]
All the brackets [ ] need to be replaced with <> respectively.
Replace YOUR WEB ADDRESS with your blog address.
Replace BLOG TITLE with…your blog title.
Replace IMAGE WEB ADDRESS with the direct link for your button that you saved earlier.
Save the gadget where you want it placed on your blog and save your changes. Click View Blog. 
Just to make sure it works, click on the button and make sure it takes you right back to your blog’s home page!
If it works, you’ve done it right! 
5. You can also add a cute signature to your blog if you like. I haven’t added one because I can’t make up my mind, but if you would like to do so, here is another great link from Kevin & Amanda that will teach you how.
If you have any questions, feel free to leave a comment or email me. 
And be sure to come visit me at my blog House of Sorensens! {it’s a party!}

Thanks Brittany…

Wow…I can not wait to blog stalk you all and see if you applied these sweet codes…

post signature 

© 2011 – 2013, Chrissy@thePearlblog This post may contain affiliate links. Purchasing through them will help support this blog.. All rights reserved.

About Chrissy@thePEARLblog

Sinner turned saint. Lover of Jesus. DIY crafter. Mom of 3. Blogger. Friend. married to her high school sweetheart. I blogs to share about the things I love. My hope is that my love for crafting, Jesus, family, and food will inspire you to try something new. If you enjoy what you read, don’t forget to subscribe to my blog!

Comments

  1. This is the most helpful thing I have read about HTML code. I am dying to try something new on my blog but am impossibly inept at that sort of thing…
    Thanks for sharing with us; can’t wait to follow House of Sorensons!

share your thoughts...