February 12, 2013

How to Make Your Own Custom Blog Template


I have finally finished my tutorial on How to Create Your Own Custom Blog Template! (or at least customize the Simple Template with your own amazing design) This tutorial is based on the designs that I like to make where the header is placed above the body of the blog in such a way that it looks like it has been cut away from the background as shown below:





This tutorial is my most advanced tutorial in terms of both graphic design skills and HTML/CSS knowledge and is quite long. However, if you have had success with my previous tutorials, don't be afraid to give this one a try! 


To create the graphics for your template, you can use any of your own creations or obtain permission from designers that make digital clipart or any other digital designs. I like to use digital scrapbook kits. In my sidebar are listed the digital designers that I have used for my free designs. I have permission to use their designs because I have paid the commercial license fees they required. If you find a design on the web, make sure that you check the designer's terms of use and/or email the designer to verify their permission for you to use their designs. This is especially true if you have a commercial blog and/or make any income from your blog.

Once you have graphics for your template design, you need to decide what graphics editing program you will use. I recommend either Photoshop Elements or Pixlr.com. If you are fine with a simple design, Pixlr is the way to go. If you want something more detailed, I would use something better like Photoshop Elements. 


Now, let me give you a quick break down of the steps in this tutorial:

1. BACKUP YOUR CURRENT TEMPLATE!
2. Create a Repeatable Background
3. Create a Header, Post/Sidebar Background and Footer
4. Change to the Simple Template
5.  Alter the HTML/CSS
6.  Make a Few Adjustments
7. Add Extra Designs

Alright, let's get started: 


1. BACKUP YOUR CURRENT TEMPLATE!


 This tutorial can get complicated. If you make any mistakes, I am not liable, so backup your template before you do anything to your blog. Another good idea is to create an additional blog that you can practice on. That way, if anything goes wrong, your practice blog will be affected but your real blog won't be ruined. Once you create your perfect template, you can download the HTML from the practice blog and then upload it to the blog you actually use.

Here is my tutorial on How to Backup Your Template. Be sure to read the full tutorial so that you backup both your template and your sidebar gadgets.

 2. CREATE A REPEATABLE BACKGROUND

This is an example of a repeatable background that I will be using for this tutorial.

 

To make this design, I cropped an image from a digital scrapbook kit. (This is from Just So Scrappy's kit "Fresh Squeezed" by Katie Castillo). This image will be tiled across the background of your blog so that it covers the entire screen. This type of background is best because the file size of this image can be very small. A small image size means that when a reader opens your blog, the background of your design will load very quickly. More intricate background designs can get very large and slow down the computers of your readers.

This type of background is essential for this template design but you have 2 options for how to upload your background. I recommend following step A below to get more detailed instructions on making the background design. However, I recommend following the instructions in step B to upload your design straight from your computer.

A. Here is my tutorial on How To Make Your Own Background, that shows you how to make the background as well as how to upload it to the web onto a site like Photobucket.


B. If you don't want to host your background image on the web, you can upload it to your blog straight from your computer.

  i. Go to your Template page.
  ii. Click "Customize" (the orange button) so that you are in the Template Designer.
  iii. Click "Backgrounds" from the menu on the left.
  iv. Click the small gray arrow and then click "Upload Image" in the window that pops up.


  v. Once the image is uploaded, adjust the options as follows:

      a. Alignment: This is up to you. I don't think it matters where the original image starts. I have mine in the top left corner.
      b. Tile: This must be set to Tile.
      c. Scroll with page: I personally get a little dizzy when backgrounds scroll with the page so I unchecked this box. If you like the background to move up and down with your blog, check this box.

 

3. CREATE A HEADER, POST/SIDEBAR BACKGROUND AND FOOTER


This type of design requires a specific type of header. Here is the header I made for this tutorial:



Notice that the header has the post/sidebar background attached to the bottom of it. This is necessary to give it the continuous look. Also notice that the background behind my title is transparent. It is not white, it is transparent.

Carolynn at Makin' Cute Blogs has posted a video tutorial on how to make a similar design. She offers a video tutorial using Pixlr. The last video shows how to make the post/sidebar background. Here is her tutorial:


How to Design a Seamless Border Blog Header, Post Background Section and Footer using Pixlr.com

For a more detailed header design, you can follow my instructions below. (I am creating this in Photoshop CS4 but you can adjust these for Photoshop Elements, Pixlr or whatever program you have.)

A. Open your design program of choice and open a new file with these dimensions:


The width and height can vary depending on your preference. The resolution should be 72 pixels/inch if you are using another designer's images for your header. (The larger the resolution, the more time it will take to load onto a computer.) The background MUST BE TRANSPARENT!

B. Create rounded rectangles that will act as the background to your post and sidebars. I like to do 3 rectangles but you can do it very simply and just do one.


Notice that the bottom of my rectangles are cut off. If your program allows, you can add shadows to your rounded rectangles. I also used matching digital scrapbook paper from the kit mentioned above to fill these rectangles. (I used layer masks to fill the shapes with the scrapbook paper. There are many tutorials on the web that can teach you how to do this.)

C. Next, add other design elements from your digital scrap kit or other images that you have permission to use. (Remember, you cannot use just any image from the web on your blog. Even if you find an image that does not have a watermark, you do not necessarily have permission to use that image. Be especially careful if you plan to use an image for your logo.)

To learn how to add elements to a design, read my tutorial on How to Make Your Own Blog Button. Once you are done with your design, save your image. You must save your image as a png file. If you don't save it in this format, it will not have a transparent background. To learn what a png file is, read my tutorial on the Difference Between a jpg and a png file.

Here is another look at the header I designed for this tutorial:


Notice that the colors I used in my text as well as in the butterflies are light enough to be seen over my dark blue background.

Once your header is complete and saved, go to your blog and upload your header from the Layout page. To do this, choose Layout from the drop-down menu on your Blogger Dashboard. Once you are on this page, find the white rectangle that says, "Header". Click "Edit" in this box. A small window will pop-up. Click "Browse" and find your header image on your computer. Then click "Instead of Title and Description". Un-check "Shrink to Fit". Click "Save" and your header will be uploaded to your blog. It will not be positioned correctly or have a transparent background, but that is ok for now.

D. Now we are going to use our header image to create our Post/Sidebar background.

In your graphics editing program, use the marquee tool to select a small sliver of your header as shown below:


I've used the crop tool here so that the small sliver can be seen better. If you use the crop tool to cut out this piece, be sure to save your file with a different file name so that your header is not lost!

Once you select this small sliver for your header, you will need to copy it (possibly "Copy Merged") and then paste it into a new file that is the same size. This image can be very short because it will be repeated vertically all the way down your blog. If you use shadows around the sides of your header, like I did, then you will have to save your post/sidebar background as a png file. If you did not, you can crop your image around the image so that none of the background shows and save it as a jpg file. 

Once your image is saved, you will need to upload it to a site like Photobucket.  However, Photobucket recently changed things so that unless you have a Pro account, you can't upload images as wide as the ones we are making. If you do not have a Pro account, upload it to Blogger as shown below:

  i. Create a new post.
  ii. In this post, upload your background image as shown below:

Make sure the size is set to "Original size". Also, notice that you won't be able to see the whole image. That is ok.

iii. Next, click the button that says "HTML", right next to the "Compose" button. 
iv. Copy the code right after

<img border="0" src="

  then stop right before the closing quotation marks as shown below:


Do not include the quotation marks. This code is the direct link for the image. Notice that it is a web address (URL). I will be referring to it as the Post/Sidebar Direct Link

  v. Paste this code into a Word or Notepad file and label it the Post/Sidebar Direct Link. We will be using this later.

E. Alright, almost done with our images. Lastly we need to make our Footer image. If you have your header open, this part can be quite simple. Take your header image and remove or hide all of the elements except those rectangles that make up the post/sidebar background. (Make sure that you save this with a different file name so that you don't erase your header.) Then, flip your canvas or those images so that the rectangles are upside down as shown below:


 
I cropped this image slightly so that it was much shorter. If you would like a video tutorial for this, Carolynn at Makin' Cute Blogs has a tutorial below that shows you how to do this in Pixlr.

How to Design a Seamless Border Blog Header, Post Background Section and Footer using Pixlr.com

Once your footer is finished, you will need to save this as a png.

Finally, upload your footer to the web using a site like Photobucket or using Blogger. (Same tutorial as in Step D.)

4. CHANGE YOUR BLOG TEMPLATE TO THE WHITE SIMPLE TEMPLATE


This tutorial is based off of the Blogger Simple template. There are 7 Simple Templates. Choose the last one, the one that is all white.

To choose this template, choose Template from the drop-down menu on your Blogger Dashboard. On this page you will several templates listed at the bottom. Find the last Simple template and place your cursor over the image. You should see the words "Apply to Blog / Customize". Click "Apply to Blog".


If you uploaded the background for your blog through the Blogger Template Designer, you can skip the next steps (A-D)

For those of you that did not upload your background through the Blogger Template Designer, you will need to make a few adjustments to the white Simple Template. On the Template page, click the orange button that says "Customize". This will take you to the Template Designer. Do the following to customize this template:

A. Click "Advanced" from the vertical list on the left side of the screen (in the gray area).
B. Click "Backgrounds" from the second vertical list.
C. Under the words "Outer Background" you will see a white box with a downward arrow. Click this arrow and then check the box next to "Transparent".
D. Do the same thing for the "Main Background".

The Outer Background is a rectangular area covering the entire top portion of your blog from left to right. If you don't remove this background then there will be a white rectangle sitting on top of your custom background. (This is not true if you upload your background through Blogger's Template Designer.)

The Main Background is the background of your posts and sidebars. If you want a custom post/sidebar background as shown in Step #3 you will need to remove this background. Otherwise you will see white on top of your custom post/sidebar background. (This is not true if you upload your background through Blogger's Template Designer.) 


5. ALTER THE HTML/CSS


Now it is time to add to and alter the HTML/CSS of your template to fit each of these design elements.

A. First, we are going to add some CSS:

  i. Go to the Template page and click "Customize"  so that you are in the Template Designer.
  ii. Click "Advanced" from the menu on the left and then scroll down in the second menu until you see "Add CSS". 
  iii. Add the following code into the box:


.header {
width: 1040px;
}
.content-inner {
background: url('POST/SIDEBAR BACKGROUND DIRECT LINK HERE') repeat-y;
background-color:transparent;
background-position: 7px;
padding-bottom:10px;
padding-left:40px;
padding-right:40px;
padding-top:10px;
width: 960px;
}
.footer-inner {
background: url('POST/SIDEBAR BACKGROUND DIRECT LINK HERE') repeat-y;
background-position: 7px bottom;
width: 960px;
}
.footer-outer {
background: url('FOOTER IMAGE DIRECT LINK HERE');
background-repeat: no-repeat;
background-position: 0px bottom;
border: 0px;
padding-bottom:160px;
width: 1040px;
}

B. Now we are going to alter the HTML.
  i. Go to the Template page and click "Edit HTML". (You may want to backup your blog again before editing the HTML, just to be safe.)
  ii. The first change is to move the HTML for the Header outside of the "content-inner" section of the blog. This will set the header above the main portion of the blog and allow it to have a transparent background. To do this:

    Find the HTML that starts with <header> and ends with </header>. (Use Ctrl-F to find this section.)
Cut this section and move it from here (right below <div class='content-inner'>:

To right below <div class='content-outer'> (Use Ctrl-F to find this section.):
  iii. Now we are going to move the Footer section outside of the main body of the blog, just like we did the Header.

    Find the HTML that starts with <footer> and ends with </footer>. (Use Ctrl-F to find this section.)
Cut this section and move it from here

To right below
 <!--content-->
 </div>

This placed the footer section outside of the main section and allowed it to have a transparent background.
 

6. MAKE A FEW ADJUSTMENTS

After entering the code, you may find that your design elements do not line up as well as you would like. For example, when I first entered my code (which I found from Makin' Cute Blogs), the header, the "content-inner", "footer-inner" and "footer-outer were not lined up as shown below:


To help you know how to make your own adjustments, I will go through the CSS code from the beginning of Step 5 and explain what the different parts mean.


.header {
width: 1040px;
}
  
Alter this width to match the width of your header image.

 .content-inner {
background: url('POST/SIDEBAR BACKGROUND DIRECT LINK HERE') repeat-y;

The DIRECT LINK is the URL/code that you copied from Photobucket or Blogger in Step 3. The code "repeat-y", repeats the post/sidebar background up and down (along the y-axis). If you forget this part it may still repeat, but it may also repeat left to right (along the x-axis).
 
background-color:transparent;
background-position: 7px;

If the post/sidebar background does not line up with your header, adjust the background-position. To move it to the left, choose numbers smaller than 7. You can enter 0 and negative numbers if you need to move it that far to the left. To move this background to the right, choose numbers larger than 7.
 
padding-bottom:10px;

The padding-bottom creates more blank space below your posts/sidebar and the footer of your blog. The post/sidebar background will fill this space. For more space, increase this number. For less space, decrease this number.
 
padding-left:40px;

The padding-left is important if you find that your text is too close to the left border of your post/sidebar background. Increase this number to move your text more to the right. Decrease it to move it to the left.
 
padding-right:40px;

You can play around with the padding-right to see what it does. It should adjust the padding on the right, but I found that increasing this number did not make any change for me. Decreasing this number will cause your post/sidebar background to be cut-off on the right.
 
padding-top:10px;

 The padding-top will increase or decrease the space between your header and your posts/sidebar. The post/sidebar background will fill this space. If you have a navigation bar using blogger's Tabs, this space will be above that navigation bar. To increase the space, increase this number. To decrease the space, decrease this number.
width: 960px;
}

The width of the post/sidebar background should be about 80 pixels less than the width of your header but if it does not look right, you can adjust this up or down until it looks right.

.footer-inner {
background: url('POST/SIDEBAR BACKGROUND DIRECT LINK HERE') repeat-y;

Enter the same DIRECT LINK that you entered for "content-inner". The code "repeat-y", repeats the post/sidebar background up and down (along the y-axis). If you forget this part it may still repeat, but it may also repeat left to right (along the x-axis).
 
background-position: 7px bottom;

This background position places the background at the bottom of the "footer-inner" section of your blog. The "footer-inner" is the section of your footer where you can add text or gadgets. 

The 7px places the background 7pixels to the right of this section's left border. If you need to adjust this, smaller numbers will move it to the left and larger numbers will move it to the right. 
 
width: 960px;
}

This is the same as the width for the "content-inner".

.footer-outer {

The "footer-outer" is just the image that you created for the footer. There are no gadgets or text on that sit on top of this image.
 
background: url('FOOTER IMAGE DIRECT LINK HERE');

 The footer DIRECT LINK is the URL or Direct Link that you copied from Photobucket or Blogger in step 3.
background-repeat: no-repeat;

We don't want this footer image to repeat, so leave this as is.
 
background-position: 0px bottom;

This background position places the footer background at the bottom of the "footer-outer" section and closer to the bottom of the browser window. You can remove it or choose "center". Do not use "top" or it may overlap the image above it.

 The 0px places the background right on the left border of the "footer-outer" section. If you need to adjust this, negative numbers will move it to the left and positive numbers will move it to the right.
 
border: 0px;
padding-bottom:160px;

If your "footer-inner" and "footer-outer sections are overlapping, you need to increase the "padding-bottom". If they are too far apart, you need to decrease this number.
 
width: 1040px;
}

This width should match the width of your header image.

Every blog is different so I recommend previewing your changes in the Blogger Template Designer before you save your changes and click "Apply to Blog".

If your blog is looking good, it might be a good idea to backup your template again. You can save it under a new name to differentiate between your original template and this new updated one.

7. ADD EXTRA DESIGNS

The final step in creating your own custom template is adding extra design features such as a post icon, post divider, sidebar titles, blog button etc. There are several tutorials for these shown below:



Also, be sure to customize the fonts and colors on your blog in the Blogger Template Designer. Go to Advanced and then click on any of the options and use the fonts and colors that look best on your blog!

Here is a final view of my custom template:



Thanks for using this tutorial. Leave a comment with a link to your blog. I'd love to see your custom designs!

The CSS/HTML portion of this tutorial was used with permission from Carolynn at Makin' Cute Blogs from her tutorial "How to Create a Seamless Border around your Blogger Blog Layout & have a transparent background behind your Header"

101 comments:

  1. ♥♥♥...
    Dani, I used a free template her, and I wish you would visit me ...
    thank so mch...I because I loved the result ...
    kiss...♥

    ReplyDelete
  2. This is so great Dani! I love all your tuts! Very nice sharing.
    Thank you so much!

    ReplyDelete
  3. Hi Dani.

    It's so sad because I could not reach the link on "How to Create a Seamless Border around your Blogger Blog Layout & have a transparent background behind your Header" by Carolynn. I have tried to open from her blog, but there was an error 'Page is not found' as well.
    Is there any alternative for me to watch the tutorial?

    Thanks in advance.

    Nadia
    Malaysia.

    ReplyDelete
    Replies
    1. Nadia,

      I am so sorry her link is not working. This happened on her blog before so it may not come back for quite some time. I will try to contact her and ask for permission to copy the code portion. If I can, I will just add it in to my tutorial. Thanks for letting me know.

      Delete
    2. She replied and gave me permission to copy the code. I'll edit this template this week to include all that you need for the tutorial.

      Delete
    3. Nadia, it is updated! You do not need to visit any outside links to complete the tutorial.

      Delete
    4. Dani, A million thanks for your kindness ya! Now I'm trying to edit my blog's template! I wish I could have a cute template like yours! :) Thanks again Dani!

      Delete
  4. Make sure that you go to your Template Designer and Adjust the Width. If you adjust the part that says "Entire blog" it will move your blog to the left or right. Just make sure that it is centered.

    ReplyDelete
  5. Be sure to check out the mobile version of your blog on a tablet or phone to make sure it looks good. The header may look a little funny on the mobile version. Choose the version you prefer (mobile or web version) on the Template page or adjust your header to look better on the mobile version.

    ReplyDelete
  6. I followed your tutorial and am very pleased with the results (still have some tweaking to do) but I want my template to be more over to the left so that I don't have a horizontal scroll bar and for the information on my blog to fit in the white section nicely but I don't know how. Any help would be greatly appreciated, Thanks!
    To see what I mean: gilliansbeauty.blogspot.co.uk

    ReplyDelete
  7. I have followed your tutorial and created my own design...the problem I am running in to is that the text in the post and about me section (2 columns) go past my design on the left and right sides...if that makes sense? Is there a way I can get all the text to stay in between my borders like you have on your blog?

    ReplyDelete
  8. This is awesome tutorial. I wish I could make blogger template on the future.

    Thank for your great job.

    ReplyDelete
  9. nice post...you can also visit following link to know about how to create your own custom template in new blogger editor...click on the following link.

    Click Here

    ReplyDelete
  10. I know you're not active here again, but someone please help me.
    When I trying to add the CSS there's gap between the post background. Here some screenshot http://oi39.tinypic.com/2hmiu6t.jpg.
    The gaps i mean was the horizontal lines, the css was the same as the css in this website

    ReplyDelete
    Replies
    1. I've been solved it!
      The problem was with the anti aliasing in Corel Draw, I simply untick the anti aliasing option when exporting the .PNG file.
      Hope that can help the others :)

      Delete
    2. I use photoshop, I have the exact same problem ;'(

      Delete
    3. look: http://thatnattygal.blogspot.com/

      Delete
  11. Hi Dani! Love the tutorial by the way. However, I cant get to seem to get min to look right, my content and footer arent lining up with the header, its like the images is smaller, but its not...not sure what's going. Please check it it out when u get a chance. : )

    http://kipanikouture.blogspot.com/

    ReplyDelete
    Replies
    1. I'm having the exact same problem, how did you fix it?

      Delete
    2. I'm having the same problem... How was it fixed?

      mirandabee.com

      Delete
  12. well dang it! nevermind I got it to work, lol!! thanks again for this tutorial!

    ReplyDelete
  13. Thank you for your tutorial! A week ago I knew NOTHING about creating my own template and now I know *some*! :) One issue: I can't get my sidebar to repeat even though it says it is repeating. Hmmmm... Any suggestions?

    ReplyDelete
  14. I tried to upload the picture on as the background, but it wouldn't show up, it just showed the background before. Please help!

    ReplyDelete
  15. Backup is important before changing or creating a new template.
    Web Design in New York

    ReplyDelete
  16. I can't find , what's wrong?? :<

    ReplyDelete
  17. thank you so much !!! love your blog

    ReplyDelete
  18. Wow,,, it's totally working! now i can make my blog just like what i want! thanks for the tutorial :) I love your templates

    ReplyDelete
  19. Do you know how I can make a template like this one http://auroramohn.blogg.no/ for blogspot?

    ReplyDelete
    Replies
    1. Make the backgrounds white, eliminate most of the borders, make a simple header with a white background, stretch the width as wide as it will go and upload huge pictures. :)

      Delete
  20. Hi Dani,
    I cannot seem to get my sidebar/post to repeat. It shows on the bottom of my blog, but not throughout the entire site.
    Could you please take a look (this is my test blog site) and let me know what you think?
    Thanks!

    http://edpl215.blogspot.com

    ReplyDelete
    Replies
    1. Did you take of the sidebar/post background? I didn't see it. Tell me more about how you uploaded it.

      Delete
  21. Hi Dani,

    I am having a problem with 2 things.

    1. when i uploaded the sidebar image it is not matching the width of the header and footer.
    2. i am getting bumps due to the shadowing - i know i could just take it off however you didnt seem to have the same problem?

    Stacy
    Creative Critters
    http://creativecritters-teachingresources.blogspot.com.au/

    ReplyDelete
    Replies
    1. It looks like your header needs to be more narrow and the footer needs to shift to the right. Have you tried that? Read through step 6 again and see if any of that helps.

      The problem with your shadows is your original image. There is no shadow at the top but then it gradually fades into a shadow. So when it repeats down your blog, there are spots all over without shadows. If you instead make a large rectangle and crop a piece from the middle, there will be a consistent shadow throughout the image.

      Also, the pattern you chose for these backgrounds won't blend as well with the header and footer. The pattern has a irregular lines drawn over it. When that part is repeated down the middle, they disappear.

      Delete
  22. Hi Dani,

    i got a little problem, the main pages that we used to write is still transparent, how could it be? please help me, i wanna show my fellas about this.
    thank u, sorry about the grammar btw x
    Salsa

    ReplyDelete
    Replies
    1. you can change the color of content-wrapper.


      Delete
  23. Hi Dani,

    It doesn't work. I made the header, but appears only the header. The rest is blank.

    http://justreadandtravelinanotherworld.blogspot.ro/

    What did I do wrong?

    ~Cristina~

    ReplyDelete
    Replies
    1. You must have fixed it. Your blog looks great!

      Delete
    2. Yes, I fixed it! Thanks so much for the tutorial! It helped me a lot!

      Delete
  24. WOW thanks for this, i also follow at yours see mine what i made also like your tutorials www.pinoytrabahoonline.com

    ReplyDelete
  25. Hey Dani,
    Thank you so much for the tutorial! Very helpful! I do have one question. On my blog the background image keeps repeating past the footer and I can't figure out how to fix it. As well, part of the footer seems to be missing. If you could help me figure out where I went wrong I would be very grateful!
    xox
    Ais

    ReplyDelete
    Replies
    1. Can you give me your blog address? You can leave it here or email it to me. blogdesignsbydani[at]gmail[dot]com

      Delete


  26. Its must be an outstanding post ever i had never seen before and i really enjoy your post..
    Thanks for the post and have a great day.. by HRM 531 Week 4

    ReplyDelete
  27. hey there! thanks soooo much for the tutorial, it was so easy to follow.
    i have a little bump in the road though. my post background and footer arent showing up :(
    i followed all the directions, i dont have photobucket so i uploaded to blogger like you described. whats up?

    www.mrspaleomommy.blogspot.com

    ReplyDelete
    Replies
    1. I just looked at it and it looks great. Did you figure it out?

      Delete
    2. I did figure it out, thanks so much! I am so happy with the look of my website now. sorry it took me so long to reply.

      Delete
  28. Hey Dani! I'm having the same problem a lot of people seemed to have (and then figured out) where I can't get the post background to repeat. Here's a link to my blog:

    http://sincerelycaitxo.blogspot.com/

    I actually haven't started posting yet, I'm waiting to get everything set up design-wise. Can you help? Thanks!

    ReplyDelete
  29. This comment has been removed by the author.

    ReplyDelete
  30. thenk you! it works really well for me *-*

    ReplyDelete
  31. i passed a lot of searching till i found this tutorial, great work

    ReplyDelete
  32. Thank you for your tutorials that you share to your post. I learn new things while reading your thoughts in this blog jut like online software video tutorials.

    ReplyDelete
  33. Hi Dani,
    Thank you for your tutorial, it has been very helpfull and inspirational.
    Though my inexperience has led me to have trouble. The footer image is not showing up , and can't figure out what is wrong.

    Thank you in advance for all your help.

    Here is the blog preview address
    http://avidusoix.blogspot.mx/

    ReplyDelete
  34. http://langolinodialice.blogspot.com/ problem :(

    ReplyDelete
  35. http://petitefleur53.blogspot.ca/
    Hi Dani,
    here is the link of my template blog. After three days I have finally did it correctly.
    So now, I'm asking me how to bring this to my real blog? I have save my template and I think If I go to my real blog and upload this template it's suppose to work? Am I o.k.
    So I want to thank you so much for your great tutorial, I try to make my blog since a lot of months and didn't find enough explanation to do it. Thank you to leave a chance to people to make their own blog by themself.
    France aka Petite Fleur

    ReplyDelete
    Replies
    1. How did you fix it? my problems yet I can't figure out where I'm wrong http://langolinodialice.blogspot.it/

      Delete
  36. thanks so much for share

    learn how to make a website and make mony with it.
    http://www.howtomakeawebsites2.com

    ReplyDelete
  37. I like the design that I currently have on my blog, but I hate pink. I was wondering if you can help me possibly change it to an amethyst purple and remove the top right image and replace it with my mascot character? I don't know how to edit the html code and where to even start.
    http://sweetly-dark-n-kawaii-designs.blogspot.com

    ReplyDelete
  38. Very useful information dear thanks a lot for sharing keep it up...Here i also want to share a very best site where anyone can share their site to get better responses in their business.
    http://cssxperts.com/

    ReplyDelete
  39. Great tutorial and I adore it, it's been so helpful, but I can't get my footer to line up properly! It's offset weirdly :P Any ideas?

    ReplyDelete
  40. Good tutorial i like it but the link "How to Create a Seamless Border around your Blogger Blog Layout & have a transparent background behind your Header", its not work

    ReplyDelete
    Replies
    1. That link often does not work but was included to give credit to the person that helped me with the tutorial. My tutorial does not require this link.

      Delete
  41. Thank you!! I've started following u today.
    My blog: www.vincequek.com

    ReplyDelete
  42. Very Important Tips for me: www.ecotechinfo.com and www.fulefiles.com

    ReplyDelete
  43. Thank you so much!! guys please visit my site pag-aaral.com please. :)

    ReplyDelete
  44. Greetings.
    I've been setting up my blog for a couple of days and it still doesn't turn out to be like how I wanted. I'm kinda of bummer for CSS,and the last time I tried to put some self-assured codes into that HTML-thingy it ends up with me boiling all over when the codes ruined my blog's appearence for the mobile view.This is how I would like to see my blog from mobile:

    < Blog title >
    < Date header >
    < Post title >
    < Image > < Post >

    And the problems are:

    1)The current view of my blog from mobile are like this:
    < Blog title >
    < Date header >
    < Image > < Post title > < Post >

    2)For web view,(you can try visit my blog,www.kurochaa.blogspot.com)
    its my blog archive which makes me feel troubled.You see,firstly the post title colour is as same as the post description under it.I want it to be in different colour.Then,the post description didn't separated from its post title.

    Maybe for you out there who have been experimenting with these kind of set-ups could just stretch out your fingers and swooosh! everything are in orders. But I'm a newbie,a rookie.Almost made it to a noob.I'm in a total darkness,have tried google-ing all the possible answers that I could understand. But mostly of them are driving me blank at all.So,could you help me?

    ReplyDelete
  45. Thanks For Sharing Such A Nice Tutorial Bro :)

    Learn Payoneer In Urdu | Hindi Video Tutorials

    http://www.learnpayoneer.blogspot.com

    ReplyDelete
  46. it seems very difficult. so i am going to make html or notepad?

    ReplyDelete
  47. Jean my suggests oh you can do using notepad .

    ReplyDelete
  48. I've followed this step by step but my header and footer won't show up :(
    I used the blogger way to upload them, made sure I copied only the links.
    Please help! I would be very grateful :)

    ReplyDelete
    Replies
    1. Okay so I managed to get them to show up but now I can't centre my header and the border is way too high! I'm so confused :(

      www.liveinfrantasy.blogspot.com

      Delete
  49. Hello Dani, I like your post so much and thanks for your sharing, I have already designed a new blog, but I have a problem, I dont know how to fix it because I'm newbie in blogger,plzz help me...this is my blog http://ilovemyhands.blogspot.com/

    ReplyDelete
    Replies
    1. My problem is the post/side bar not like yours, it's broken

      Delete
  50. Hello Dani,

    Thanks so much for the tutorial! I made the sections you describe and got my header and footer working, but for some reason none of the body border is showing. Maybe the content is just too wide? But no amount of adjusting column widths (or even changing my layout to one column, though I would really like it to be two columns) has caused any part of the border to show up. www.sketchbookmagic.com - any clues?

    ReplyDelete
  51. Nevermind, fixed. This is so amazing, thanks again! Do you have a book or resource that you recommend for learning to do this kind of thing? Because it's surprisingly hard to find on the internet.

    ReplyDelete
    Replies
    1. Laura, I'm having the same problem. Can you please tell me how you solved it. Thanks so much.

      Delete
  52. Great informational resource and tutorial! Everything elaborated very clearly to understand easily. I recommend this useful post to newbies specially.
    Custom Logo Design

    ReplyDelete
  53. awesome.. I really like this tutorial. even though my english not too good. but, I want to try this tutorial.. thanks.

    ReplyDelete
  54. cool.. i have tried this tutorial. i hope my blog will be nice like yours. thank you very much!!!

    ReplyDelete
  55. thanks bro for your precious suggestions

    ReplyDelete
  56. Hi Dani, great tutorial although I can't seem to get the Step 5 right. I can't find the 'iii. ' sections, even when I use the cmd+f feature. I don't know wether this is because of the new-ish blogger html feature. Is there a bog standard html code that I could look at?

    Also, i uploaded my background using photo bucket, however when I do 'Section 3: i-v' the blogger uploads the image darker than the original? Is there a way around this?

    Sorry for the probably terribly stupid questions...

    ReplyDelete
  57. Thanks so much for the tutorial! Everything elaborated very clearly to understand easily Cai win tai nha

    ReplyDelete
  58. is my problems 1st page 1post, I can jest 10 post of home page please succession

    is my blog site http://it-house24.blogspot.com/

    ReplyDelete
  59. This doesn't work :( I don't know what i do wrong, but nothing just doesn't work. At least i do the banner right, but it isn't that beautiful. I'm practice with my another blog, so my real blog don't get ruined. Im not good in englis, so that is possibly my broblem. Anyway, I try harder one more time.

    ReplyDelete
  60. hello dani,
    AMAZING TUTORIAL!!!!!!!!!!! ,but my problem is that my blog wouldnt show the post sidebar please help.

    ReplyDelete
  61. I have always wondered how to do that!

    ReplyDelete
  62. All I can say is YOU ARE WONDERFUL!!!!!!!!!!!THANK YOU!

    ReplyDelete
  63. Yeah, I got a lot of thing, Thanks

    ReplyDelete
  64. Beautifully described tutorial! The explanation way of this tutorial is absolutely different and simple to follow up easily.
    Professional Online Logo Design Company

    ReplyDelete
  65. This tutorial is really helpful. I got a lot of things here. Thanks for sharing your thoughts.

    sales coaching

    ReplyDelete
  66. Thanks For Your valuable posting, it was very informative. i am working in Construction Management In Chennai

    ReplyDelete
  67. Hi Dani..
    finally i found this post..
    great tutorial, gonna try it soon..
    maybe i'll comment here again if i find problem..

    thanks for sharing.. :D

    ReplyDelete
  68. hi,Dani!
    i'm actually very interested on this blog.
    to see the blog:onlyoukimjongin.blogspot.com
    how do i want to create a blog like her

    ReplyDelete
  69. Thanks For Your valuable posting, it was very informative. Am working in Erp Software Company In India

    ReplyDelete
  70. Hi, Dani!
    Thanks so much for the tutorial!
    http://munduword.blogspot.hu

    ReplyDelete
  71. Hello Dani :3 Can you please design my blog? I tried to follow all your instructions but it's so hard and I made it worse than it was before :( please help me <3

    ReplyDelete
  72. This comment has been removed by the author.

    ReplyDelete

Thank you so much for leaving a comment! I would love to answer everyone's questions, but I am a busy mama. I will try my best, but technical questions that require me to study your blog's html are very time consuming for me. I may not be able to answer all of these comments. If you are a reader that knows the answer to a question, please help your fellow readers by offering your advice.