Gotta Pixel

How to customize you blog with a digital scrapbook kit!

0 Comments | Leave a Comment

Hey Everyone!! Monica here with a brand new Tutorial! I’m excited about this one! A few years after I found digital scrap booking I found blogging. Then someone combined the two and added a beautiful scrap booked look to their blog! For years it was difficult to do but now that blogger has changed it’s super easy! I’m gonna show you how!!

CustomizeYourBlog

For this tutorial I’ll be using {Hues} Perfectly Pumpkin Kit and {Hues} Perfectly Pumpkin Extra Paper Pack by Connie Prince. I’m gonna show you how to make a background, a header and little tabs for your archives, followers or other thing on the side of your blog! Then I’ll show you how to add it to your blog! You will need a photo bucket account to add the tabs and your header to your blog.

Step One — Making your background

You will need to choose a kit that you want to use and your background should be 1200 wide by 825 high and 300 resolution. It took me a few trys to find the right size and this is the size that works best.

img1

Now if you want to use a pattern on the background you will need a solid paper piece on top of this paper. I have duplicated the white background and shrunk the width to 88%.

img2

Now you can add your papers at this point and see what you like best. Here is what I did.

img3

Now that you have your background made you may want to add elements to your background. I recommend keeping them to the sides otherwise you will have the elements in your text on your blog. You can see how I added my elements and gave them shadows.

img4

Now to make the other side look symmetrical I duplicated the side I had done and flipped it horizontally so that it mirrored the left side!

img5

Now you just need to save your background as a jpg file but do not resize it or shrink it down!  You will have to lower the quality to about 7 in order for it to be the file size blogger requires.  I also save mine as a PSD just in case I need to edit it later on!

Step Two — Making your Header

Now we get to make a Header for your blog. The size you need to start with is 875 wide by 300 high with 300 resolution. I like to put the name of my blog on my header. You can design it however you want just remember what color background you used on your background so you can make sure your header stands out.

Here is my header. Make sure you add your shadows and make it anyway you like!

img6

Now you just need to save it as a jpg file and remember not to shrink it.  You may also want to save it as a PSD in case you need to change anything later on!

Step Three — Making Tabs

Now some blogs have tabs on the side that say Followers, Archives, Search, Subscribe, and many others. For my blog I just have Archives and Followers. So I only need two tabs. You can make as many as you want. The size of the tabs is 225 wide by 106 high and 300 resolution. You may want each tab different or you may want them all the same. I like all of mine the same!

img7

img8

Step Four — Adding your Background to Blogger

Once you log into your blog it should look something like this.

img9

You will need to click on Template.

img10

Then you will click on Customize

img11

Now you will see this screen

img12

You will need to scroll over to find the template called Ethereal.
img13
img14

You can choose anyone of these that you want it will not matter.

img15

Once you have chose one click on background. You should see this.

img16

img17

Now you want to click where it says Background Image.

img18

You will have a box open up like this.

img19

Up at the top you will see Upload Image.

img20

Once you click that you will need to click on choose file and choose Background image you made from your computer.

img21

img22

Once it is uploaded you can choose done. That is how you add your Background! If you want your background to scroll with you page check the button. If not uncheck the button!

img23

Now you may have to click on Adjust widths to make sure your content on your blog fits properly. I have mine set to 870 and 180

img24

You can now go to Layout and set it how you want your blog to look. This is mine

img25

Then go to Advanced and choose the colors of the text and links you want on your blog. You can also choose the fonts you want. I’m going with black on mine to show off better! The links I am going to set to dark orange!

img26
You will need to set your background to transparent like I have it set here.

img27

Once you have all of that set remember to click Apply to blog.

img28

Step Five — Adding the Header

Now you want to go to layout so that you can change out your Header and your tabs.

img29

You need to open photo bucket and upload your header and your tabs you made.

Once you have them uploaded you will go back go your blog and click edit on the area that says Header.

img30

You will have a box pop up like this.

img31

Click choose file from your computer or you can paste the url from photo bucket if you would like. You want to make sure you have Instead of title and description checked so that your header shows up! Once you have that uploaded make sure you click save.

img32

Now click on your tabs, they will show up as HGML/JavaScrpit on the right hand side.

img33

Now you will want to copy the HTML code from photo bucket and paste it into the box. You will want to leave the title blank.

img34

Click save and apply to blog. And that is how you add these to your blog!

Final thoughts

I hope you have enjoyed this tutorial! Feel free to message me in the forum if you need help! I’ll be glad to help you! If you would like to see my finished blog go here!

You may want to put credits on your blog somewhere.  It’s always nice to give the designer who created the kit credit for it.  You can see mine on the right column down at the bottom by scrolling down a bit!

Thanks for reading the tutorial!!

Sign Up for Our Newsletter

Get all the latest news from your favorite Gotta Pixel designers delivered to your inbox!

Getting Started
Daily Download
Seasonal