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"

217 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
    5. i have a good website http://www.iplaygame.ga/

      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
  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. Thank you :) This helped a lot :)!

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

    Learn Payoneer In Urdu | Hindi Video Tutorials

    http://www.learnpayoneer.blogspot.com

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

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

    ReplyDelete
  49. 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
  50. 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
  51. 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
  52. 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
  53. Great informational resource and tutorial! Everything elaborated very clearly to understand easily. I recommend this useful post to newbies specially.
    Custom Logo Design

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

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

    ReplyDelete
  56. thanks bro for your precious suggestions

    ReplyDelete
  57. 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
  58. Thanks so much for the tutorial! Everything elaborated very clearly to understand easily Cai win tai nha

    ReplyDelete
  59. 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
  60. 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
  61. hello dani,
    AMAZING TUTORIAL!!!!!!!!!!! ,but my problem is that my blog wouldnt show the post sidebar please help.

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

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

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

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

    ReplyDelete
  66. 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
  67. 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
  68. Hi, Dani!
    Thanks so much for the tutorial!
    http://munduword.blogspot.hu

    ReplyDelete
  69. 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
  70. This comment has been removed by the author.

    ReplyDelete
  71. http://www.flamenco-in-duesseldorf.de/gaestebuch.php
    http://www.fp.unud.ac.id/ind/biologi-tanah/
    http://www.fixwelfare.com/2012/10/2012-fix-the-system-report-shows-maine-a-national-leader-in-welfare-dependency/
    http://www.helperblogger.com/2012/05/remove-powered-by-blogger-attribution.html
    http://barcelonaschiringuito.com/no-hay-marcha-atras

    ReplyDelete
  72. It's very good blog which seems very helpful information. Thanks for sharing this post. Keep further posting...!!


    Best web development company & Best web development company in india

    ReplyDelete
  73. Actually great theory about create a blogger blog. Thanks for sharing.

    ReplyDelete
  74. Hi Dani! I have successfully created my own blog template!
    Here is the link to my blog! http://vodkaforace.blogspot.com/

    The only thing that I didn't like about it is that my sidebar doesn't look so connecting. I mean, i want it to be in a box. Connecting the tittle to the body. Do you know how to do that? Is it possible using simple template?

    ReplyDelete
  75. I want to thank you for this informative read; I really appreciate sharing this great.Utah custom web design company provided you leading web solutions.

    ReplyDelete
  76. article useful for all readers, I think this would be beneficial for me and many other readers
    thank you for sharing.
    http://belajarsearchengine.com

    ReplyDelete
  77. I was looking about the Website development Kansas Cityfor something like this ,Thank you for posting the great content……I found it quiet interesting, hopefully you will keep posting such blogs…

    ReplyDelete
  78. These all are momentous assurances… oracle training in chennai I stay with responsive site arrangement for my business. With the adaptable showcasing is hadoop training in chennai pounding ceaselessly's peak stage, having site that goes agreeable on all contraptions will help your business.

    ReplyDelete
  79. These all are momentous assurances… oracle training in chennai I stay with responsive site arrangement for my business. With the adaptable showcasing is hadoop training in chennai pounding ceaselessly's peak stage, having site that goes agreeable on all contraptions will help your business.

    ReplyDelete
  80. These all are groundbreaking confirmations…hadoop training in chennai I stay with responsive site plan for my business. With the versatile showcasing is beating constantly's crest oracle training in chennai stage, having site that goes pleasant on all contraptions will help your business.

    ReplyDelete
  81. It was really a wonderful article and I was really impressed by reading this blog. Thanks for sharing this informative blog. I did HTML Training in Chennai at FITA academy, Its really useful for me. Suppose if anyone interested to learn real time PHP Course in Chennai reach FITA.

    ReplyDelete
  82. I get a lot of great information from this blog. Thank you for your sharing this informative blog. Recently I did PHP course at a leading academy. If you are looking for best PHP Training Institute in Chennai visit FITA IT training academy which offer real timePHP Training in Chennai.

    ReplyDelete
  83. Not solely ar contingent staff on the increase, the "face" of Like some temp workers has modified dramatically from the short fix throughout busy work months or temporary coverage throughout unhealthiness or maternity leave employers saw twenty years past. Today's worker assignments ar longer (over 0.5 last longer than eleven weeks) associate degreed even as probably to be behind a laptop or in an government suite as at the secretarial assistant table.

    ReplyDelete
  84. Thanks a lot for this html tutorials kindly write one to code a custom Blogger template in detail. Thanks!

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

    ReplyDelete
  86. Great post for blogger beginner, Thank you for sharing with us.

    Priyanka jain
    FODUU

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

    ReplyDelete
  88. Your post is really good providing good information.. I liked it and enjoyed reading it. Keep sharing such important posts.
    utah professional web design

    ReplyDelete
  89. your post is very nice post .....................................................................................
    Website Development in India

    ReplyDelete
  90. Thanks for the tutorial - seems like makin cute blogs isn't around anymore? I'm sort of stuck on the adding digital scrapbook paper to the rounded rectangles since those tutorials are gone.

    ReplyDelete
  91. nice post
    regards
    http://www.knowledgea.com

    ReplyDelete
  92. Your post is reasonable giving Oracle Training in Chennai supported it and had an extraordinary time understanding it. Continue sharing such essential posts.Hadoop Training in Chennai

    ReplyDelete
  93. It looks like you are very much interested to write posts on this topic. And you have gained ample of knowledge in this subject. Quite impressive blog site that you have.

    ecommerce web development services

    ReplyDelete
  94. I like to use digital scrapbook kits. In my sidebar are listed the digital designers that I have used for my free designs. dance classes in northeast Philadelphia

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

    ReplyDelete
  96. Wow is just the simple word that may explain that how much I liked it. It was nicely stuffed with the material I was looking for. It’s great to be here though by chance.
    affordable web design utah

    ReplyDelete
  97. Awesome tutorial - would definitely be looking forward to other tutorials if you decide to publish more. The theme is lovely but I'm also looking to make things responsive as well these days.
    David @ The How To Make A Website Team

    ReplyDelete
  98. boleh x klw sya save awk pya blog dkt blog sya/

    ReplyDelete
  99. I want to have a static home page for blogger template (without any posts or pages) simply my HTML as blogger landing page. How to do this ?

    For more details : http://thinkittraining.in/blog/

    ReplyDelete
  100. Good work…unique site and interesting too… keep it up…looking forward for more updates.


    Utah custom web design

    ReplyDelete
  101. It was really a wonderful article and I was really impressed by reading this blog. Thanks for sharing this informative blog.
    online marketing courses in chennai

    ReplyDelete
  102. Your post is really good providing good information.. I liked it and enjoyed reading it. Keep sharing such important posts.
    seo training in Chennai

    ReplyDelete
  103. Awesome This is great.. wonderful information.. Thanks for sharing..
    Web Development India

    ReplyDelete
  104. Nice blog about make custom blog which is very useful in your SEO service. We are providing SEO Toronto services in Canada.

    ReplyDelete
  105. This was super helpful! Thanks for sharing all of this info. :) It helped me to design my blog!

    Georgia
    www.exuberanteducator.blogspot.com

    ReplyDelete
  106. Your post is really good providing good information.. I liked it and enjoyed reading it. Keep sharing such important posts. Oracle Training in chennai

    ReplyDelete
  107. Hi, Thanks for sharing this valuable blog.I was really impressed by reading this blog.
    Oracle Training in Chennai

    ReplyDelete
  108. I get a lot of great information from this blog. Thank you for your sharing this informative blog.. Informatica Training in chennai

    ReplyDelete
  109. Your post is reasonable giving Hadoop Training in Chennai supported it and had an extraordinary time understanding it. Continue sharing such essential posts.

    ReplyDelete
  110. QTP Training in Chennai Awesome This is great.. wonderful information.. Thanks for sharing..

    ReplyDelete
  111. I was looking about the SAS Training in Chennai for something like this ,Thank you for posting the great content…I found it quiet interesting, hopefully you will keep posting such blogs…

    ReplyDelete
  112. Green Technologies In Chennai It's very good blog which seems very helpful information. Thanks for sharing this post. Keep further posting...

    ReplyDelete
  113. Thanks For Your valuable posting, it was very informative. Green Technologies In Chennai

    ReplyDelete
  114. Thanks
    http://musafir61.blogspot.com/

    ReplyDelete
  115. An obligation of appreciation is all together For Your critical posting, it was greatly helpful.

    Manpower Consultancy in Chennai

    ReplyDelete
  116. This advice is really useful to make a template and the guidance also really follow able one..... informatica training in Bangalore

    ReplyDelete

  117. This is definitely one of the best articles I have read in this blog! Thanks Mate.
    if you want get certification with job in AWS. please let us know by click the followig link
    AWS Training in Chennai

    ReplyDelete

  118. It is a good blog. It is very helpful blog. if you want get certification with job in HTML please let us know by click the following link HTML Training in chennai
    HTML Training in Chennai

    ReplyDelete
  119. Very useful information. Thank you for sharing it. if you want get certification with job in SEO please let us know by click the following link
    SOA Admin Training in Chennai

    ReplyDelete
  120. awesome explanation about blogger desing i will try this one. thanks you Selenium Training in Bangalore ||
    Oracle Training in Bangalore

    ReplyDelete
  121. I have been following your posts regularly. It is very informative that I share it with my students.
    Harshitha
    QTP Training Institutes in Chennai

    ReplyDelete
  122. Thanks for the article. It has given me some idea of what I have been looking for and helped a lot, thank you. Come up with more such articles, wish to follow.
    Best PHP training institute in Chennai | Best PHP training institute in Chennai | Best PHP training institute in Chennai

    ReplyDelete
  123. This kind of shifting assistance is what for the expert packers and shifting companies solapur is operating in the locations.

    Packers and Movers Bangalore
    Packers and Movers Pune
    Packers and Movers Delhi
    Packers and Movers Gurgaon

    ReplyDelete
  124. Thus they act in such a way that they meet their customer to the most with their expert sources and methods being deployed for executing the shifting actions of the consumer.

    Packers and Movers Hyderabad
    Packers and Movers Mumbai
    Packers and Movers Chennai
    Packers and Movers Noida

    ReplyDelete
  125. While you are talking with assistance individuals, we have to talk about time taken, top top excellent quality and protection assurances from Client Support Group. Packers and Movers in Bangalore
    Packers and Movers in Pune
    Packers and Movers in Hyderabad
    Packers and Movers in Mumbai

    ReplyDelete
  126. Customer Support Group has to be handled professionally and they must maintain military in various important 'languages'. Packers and Movers in Chennai
    Packers and Movers in Delhi
    Packers and Movers in Gurgaon
    Packers and Movers in Noida

    ReplyDelete
  127. i gain the knowledge of and industry oriented coaching available from greens technology chennai in Adyar may visit.Sharepoint Training In Chennai

    ReplyDelete
  128. once again sharing this informative blog .It uses a graphical notation to construct data integration solutions and is available in various versions may visit greens technology chennai in adyaroracle dba course training In Chennai

    ReplyDelete
  129. Nice site....Please refer this site also if Our vision succes!.may visit this blog dotnet training In Chennai

    ReplyDelete
  130. Thank you for this wonderful information. It was really helpful.oracle dba course training In Chennai

    ReplyDelete
  131. i wondered keep share this sites .if anyone wants realtime training Greens technology chennai in Adyar visit this blog..performance tuning training In Chennai

    ReplyDelete
  132. This site has very useful inputs related to industrial oriented may update this link hibernate Training In Chennai

    ReplyDelete
  133. Nice site....Please refer this site also if Our vision succes!.may visit this blog dotnet training In Chennai

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

    ReplyDelete
  135. Thanks for the tutorial! This could be a really useful template to use in all my themes by default..Salesforce Training in Chennai

    ReplyDelete
  136. Why should you build your own WordPress Theme? ... The comment header lines in style.css are required for WordPress to be able to identify the Theme ...
    PHP Training in Chennai

    ReplyDelete

  137. Hai if our training additional way as (IT) trained as individual,you will be able to understand other applications more quickly and continue to build your skll set
    which will assist you in getting hi-tech industry jobs as possible in future courese of action..
    visit this blog webMethods-training in chennai



    ReplyDelete
  138. Really awesome blog. Your blog is really useful for me. Thanks for sharing this informative blog. Keep update your blog.
    QTP Training in Chennai



    ReplyDelete
  139. This information is impressive..I am inspired with your post writing style & how continuously you describe this topic.
    Best website development company
    website design services dubai

    ReplyDelete
  140. I found some useful information in your blog it was awesome to read.Thanks for this.
    professional website development services

    ReplyDelete
  141. When you are looking for some premium as well as best quality shot glass make sure you surf along popular online shopping portals regrading quality products. There are various and wide range of collections available that can help in meeting the demand of every customer. Most merchants are bringing up customized shot glasses that are making it easy enough for use.

    ReplyDelete
  142. Rajasthan Gram Panchayat 2252 Sathin Recruitment 2015-16

    I loved your blog, really looking forward to read more........ Fantastic....

    ReplyDelete
  143. Thanks For Your valuable posting,this is for wonderful sharing,i would like to see more information from your side.i am working in Erp Company In Dubai

    ReplyDelete
  144. Hello Dani, I need a little explanation why after I edit css appropriate, there are imperfections in the footer. I am waiting for your reply. Thanks

    ReplyDelete

  145. I have bookmarked you to check out new stuff of your blog. A must read!!!!
    Angel Investor in India

    ReplyDelete
  146. Thank you so much for the sharing. All contents were expressed in a clear n simplified manner n it was meaningful too. You are a marvelous writer. Good work!affordable web design

    ReplyDelete
  147. Thank you so much for the sharing. All contents were expressed in a clear n simplified manner n it was meaningful too. You are a marvelous writer. Good work!affordable web design

    ReplyDelete
  148. Thanks wonderful stuff , i was looking for this for a while , one can easily follow these steps to design its own template ,quality web design templates

    ReplyDelete

  149. Shifting your home or vehicle in India? Please Visit Our Website.

    http://ezmove.in/packers-and-movers-noida.html

    http://ezmove.in/packers-and-movers-bhubaneswar.html

    http://ezmove.in/packers-and-movers-coimbatore.html

    http://ezmove.in/packers-and-movers-thane.html

    ReplyDelete
  150. Latest Govt Bank Jobs 2016

    I am actually grateful to the holder of this web page who has shared this wonderful piece of writing at here.....................

    ReplyDelete
  151. Hello, I like your posts. They work on me. However, now, I’m looking for how to change the background color of my blog’s footer. I have been searching for here and there but unfortunately, I haven’t found it. I’m a new blogger anyway, so I’m still not that good on it. But I’m going to seriously blogging so that’s why I need ur help hihi. Thanks
    PHP Training in Chennai

    ReplyDelete
  152. Jharkhand Labour Department Recruitment 2016


    thanks for sharing the useful article which is helpful for many people…….

    ReplyDelete
  153. Thanks For Your valuable posting,This is for wonderful sharing,I would like to see more information from your side.I am working in Cloud Erp In Chennai

    ReplyDelete
  154. Nice info!! I thought creating custom blogs requires technical knowledge on web designing service, however now this tips helps me to try it by myself.

    ReplyDelete
  155. Hence, on the off chance that you need to begin another wander or need to re-outline your current eCommerce webpage, then you need to employ a skilled site architect. Along these lines, you can ensure that your venture is in the sheltered hands of a specialist. website design

    ReplyDelete
  156. very nice blogs!!! i have to learning for lot of information for this sites...Sharing for wonderful information.Thanks for sharing this valuable information to our vision. You have posted a trust worthy blog keep sharing.
    Pega Training In Chennai

    ReplyDelete
  157. Nice post. I learned how to make custom template. Thanks for sharing.

    IELTS classes in Kuwait

    ReplyDelete
  158. Truely a very good article on how to handle the future technology. After reading your post,thanks for taking the time to discuss this, I feel happy about and I love learning more about this topic.keep sharing your information regularly for my future reference. This content creates a new hope and inspiration with in me. Thanks for sharing article like this. The way you have stated everything above is quite awesome. Keep blogging like this. Thanks.

    Hadoop Training in Chennai

    ReplyDelete
  159. Really very informative blog. Thank you for sharing this unique content with us. I get admired by reading your post. Keep on posting like this unique content. Waiting for your future blog.
    Loadrunner Training in Chennai

    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.