Wednesday, August 15, 2007

New Blogger 3 column Templates by Blogger Buster

NOTE: Before you edit or change template, make sure you backup your curremt template PLUS Page Elements. Refer to Backing up current template PLUS Page Elements before changing new template

New Blogger 3 column Sweet Dreams template

Amanda of BloggerBuster have created a number of New Blogger templates. However, please note that the templates uses many images hosted by Amanda, and when you download her templates, included also will be the images. This is like implying that you should upload those images to the web yourself, get the URL's and substitute them in the relevant parts of the templates. This may be because she don't want you to increase the bandwidth load from her site. In any case, it is probably wise for you to upload the images yourself as then these images will be controlled by you and not Amanda. If Amanda remove the images from the web or her site goes offline, the images in your blog will disappear.

Amanda's templates have some features very much different from the other templates including a Lable (category or tag) List in the form of a Label Cloud, animated or fixed gif images, widgets to add a mp3 music player plus a mp3 music file, search box, etc.

However, I have noticed that after downloading her templates, some don't include the images (Blues) and some have some missing images. However, this is no problem as I will show you how to get the images, upload them to the web, get the URL's and substitute these with the the relevant URL's in the template. If you want to depend on Amanda, you can skip all those explanation, just download, backup your current template PLUS the Page Elements, upload her template and just forget about the rest. However, she has indicated that she prefer you to host your own files and images. If you want control over the images yourself and you don't know how, then you will have to read my instructions on how to get the missing images, upload the neccessary images and files plus get their URL's.

I will start with one of her template and explain the process fully, and the others, if you want to use them, the instructions for the first template will be exactly the same.

New Blogger 3 column Sweet Dreams template

An example of a blog using this template is Medical Matters. You can download it from Download "Sweet Dreams" 3 column template (zip file). Save the zip file into a suitable folder, perhaps called "BloggerBuster Sweet Dream template" or something. After you downloaded and unzipped the file, you will get 3 column Sweet Dream xml template (highlighted with a red rectangle), a HTML file which when clicked on opens a webpage giving some instructions, an image folder, a music folder, a widger_code folder, and an xml template folder.

Blogger Buster New Blogger template folders and files

Refer to Backup and change New Blogger template. If you have already done some customizations (add Page Elements, etc.) edit the Page Elements one by one, paste them into Notepad files and save them into the same folder as some of the Page Elements will be deleted or become empty after you change to the new template. Click the TEMPLATE tab, then the EDIT HTML sub-tab to open the template editor. Click "Browser" and browser to the xml template highlighted with a red rectangle in the screenshot above. Click "Upload". You may get a message that some Page Elements (widgets) will get deleted. Go ahead and upload.

Update 11.10pm 15 August 2007: I found I missed some image URL's below when I recorded the original image URL's found in the original templatge, so created a test blog and tried uploading the template again and got a zip file. When I click on the zip file, I got the folders plus

Blogger Buster Sweet Dream template, problem uploading template

When in Window Explorer, I click on the zip file, then a "Sweet_Dream" folder, I can get to the folders plus HTML and xml files as shown in the first screenshot above. However, when I click "Browse" to upload the template and and click on the zip file to get to the folders plus HTML and xml files, the zip file got loaded into the "browse" window instead. So I was forced to open Windows Explorer, went to the folder containing the folders and HTML and xml files shown in the screenshot above and drag them into the folder above. If you faced this problem, this is what you may need to do. I don't know why I didn't have this problem the first time I did it.


After you have uploaded, the new template will be in the template editor window. Look for line of codes that contain something like url(http://........gif). To illustrate, I will put in the relevant sections I found into the scroll box below:

/* Blog Header
----------------------------------------------- */
#header-wrapper {
background: #000 url(http://kunoichi.info/bloggerbuster_templates/sweet_dreams/images/sweet_dreams.gif) bottom right no-repeat;
border: 1px solid #404040;
margin:22px 0 0 0;
padding:0px 0 0 0;
color:$titleTextColor;
}
#header {
background: url(http://kunoichi.info/bloggerbuster_templates/sweet_dreams/images/star2.gif) top left no-repeat;
height: 165px;
padding:8px 15px 8px;
}
-----------------------------------------------
a.comment-link {
/* IE5.0/Win doesn't apply padding to inline elements,
so we hide these two declarations from it */
background/* */:/**/url("http://www.blogblog.com/rounders/icon_comment.gif") no-repeat 0 45%;
padding-left:14px;
}
html>body a.comment-link {
/* Respecified, for IE5/Mac's benefit */
background:url("http://www.blogblog.com/rounders/icon_comment.gif") no-repeat 0 45%;
padding-left:14px;
}
--------------------------------------------------
.comment-author {
background:url("http://www.blogblog.com/rounders/icon_comment.gif") no-repeat 2px .3em;
margin:.5em 0;
padding:0 0 0 20px;
font-weight:bold;
}
-----------------------------------------------------
background:url("http://kunoichi.info/bloggerbuster_templates/sweet_dreams/images/profile_icon.gif") no-repeat 0 .1em;
padding-left:15px;
font-weight:bold;
}
-----------------------------------------------------
#left-sidebartop h2 {
line-height:1.5em;
background: url(http://kunoichi.info/bloggerbuster_templates/sweet_dreams/images/star1.gif) center left no-repeat;
padding: 0 0 0 20px;
color:$topSidebarHeaderColor;
border-bottom: 1px dotted $topSidebarHeaderColor;
margin-bottom: 0.5em;
font: $headerFont;
}

#sidebartop h2 {
line-height:1.5em;
background: url(http://kunoichi.info/bloggerbuster_templates/sweet_dreams/images/star1.gif) center left no-repeat;
padding: 0 0 0 20px;
color:$topSidebarHeaderColor;
border-bottom: 1px dotted $topSidebarHeaderColor;
margin-bottom: 0.5em;
font: $headerFont;
}
----------------------------------------------
.music {
line-height:1.5em;
background: url(http://kunoichi.info/bloggerbuster_templates/sweet_dreams/images/star1.gif) center left no-repeat;
margin:.5em 13px 1.25em;
padding: 0 0 0 20px;
color:$topSidebarHeaderColor;
border-bottom: 1px dotted $topSidebarHeaderColor;
margin-bottom: 0.5em;
font: $headerFont;
}
-----------------------------------------------
.sidebar h2 {
line-height:1.5em;
background: url(http://kunoichi.info/bloggerbuster_templates/sweet_dreams/images/star1.gif) center left no-repeat;
padding: 0 0 0 20px;
color:$topSidebarHeaderColor;
border-bottom: 1px dotted $topSidebarHeaderColor;
margin-bottom: 0.5em;
font: $headerFont;
}
-------------------------------------------------
.sidebar ul li {
background:url("http://www.blogblog.com/rounders/icon_arrow_sm.gif") no-repeat 2px .25em;
margin:0;
padding:0 0 3px 16px;
margin-bottom:3px;
border-bottom:1px dotted $borderColor;
line-height:1.4em;
}
--------------------------------------------------


The image URL's are highlighted in red and the relevant URL's are

http://kunoichi.info/bloggerbuster_templates/sweet_dreams/images/sweet_dreams.gif
http://kunoichi.info/bloggerbuster_templates/sweet_dreams/images/star2.gif
http://www.blogblog.com/rounders/icon_comment.gif (repeated 3 times)
http://kunoichi.info/bloggerbuster_templates/sweet_dreams/images/profile_icon.gif
http://kunoichi.info/bloggerbuster_templates/sweet_dreams/images/star1.gif (repeated 4 times)
http://www.blogblog.com/rounders/icon_arrow_sm.gif


These are images uploaded onto the web by Amanda and she has expressed the desire that those who use her templates upload them on their own which I have done. The way I did it was to copy-paste the image URL one by one into a browser window which will get me to the webpage containing just the image. I then right-click on the image and selected "Save Image As.." to copy them into my computer. From here you have various choices - upload them into Photobucket or upload them into a Blogger post. I uploaded them into a special blog post BloggerBuster Sweet Dreams which I used to host images, publish the post, opened the page, click on the image one-by-one, in the page containing just the image, click VIEW > PAGE SOURCE, then copied the actual URL of the image from the page source. To illustrate, I paste the page source of one of the images into the scroll box below:

<html>
<head>
<title>star1.gif (image)</title>
<script type="text/javascript">
<!--
if (top.location != self.location) top.location = self.location;
// -->
</script>
</head>
<body bgcolor="#ffffff" text="#000000">
<img src="http://2.bp.blogspot.com/_jizoPL28qCY/RsKtOH3xPzI/AAAAAAAAAdw/3H7BCsuEYm0/s1600/star1.gif" alt="[star1.gif]" border=0>
</body>
</html>


The URL I need is highlighted in red. Note that the last word in the URL is star1.gif

So I go into the template, look for all the url that ends with star1.gif, replaced it with my own URL wherever I find it. This is repeated for other images. When it is done, preview the template, and if everything seems fine, click "Save template". Now you have the images hosted and controlled by yourself instead of Amanda.

If you don't want the bother, you can use my images URL's for your template, but it will mean you are dependent on me. If my post goes offline, your images will disappear.

Amanda of Blogger Buster now don't require bloggers to using her templates to host the images themselves, plus added more templates. I will be making a new post as soon as I have the time and post the link here

More New Blogger templated


New Blogger template modified by Stavanger
Dots New Blogger template with Header
New Blogger templates modified by Ramani
New Blogger templates by Isnaini
New Blogger templates by Thur
Ramani's New Blogger Neo template
New Blogger template by Final Sense

26 comments:

  1. Hi peter, I used Amanda templete for my blog but ive deleted all the star marks.(star icons) I don't know whether it directly affect displayed images or not because my pictures had turned to black and white..I tried upload new pics but the result still remains the same.Glad if you could help me. Thanks.

    ReplyDelete
    Replies
    1. my blog walinongsari.blogspot.com . when i clik to this blok , it redirect to konoichi.infor, how do i overcome this problem in a very simple advice.

      Delete
  2. Hi Rohaida,

    Why don't you comment in Amanda's post? She may be able to help you better.

    Peter Blog*Star
    Blogger Dough
    (Blogging helped my put 2 sons through college on my pension and if not for blogging, I would have been in financial difficulties. We want to help you do the same)

    ReplyDelete
  3. Hi Peter.
    Thanks for your reply and a drop at my blog :> I'll try to reach Amanda later. It's quite sometimes since I faced that problem and now I quit using 3 colum templates. I just want a simple 3 column templates just like yours, only different color(#113355) for the background.Have you established your 3ct (3 colum templates)codes? perhaps you can share it with me. lol. BTW, your blog for blogging tips are really great.it helped me alot.Thanks again.

    ReplyDelete
  4. New Blogger 3 column templates.

    Peter Blog*Star
    Dummies Guide to Google Blogger
    "online book" IN PROGRESS. Use the CONTENT at the top of the main column

    ReplyDelete
  5. I use the 3 collumn template by Amanda and everything went well and I am glad with the appearance. But I experienced one problem, when I use internet explorer the pictures on my post becomes black and white. For mozilla firefox it is fine though. My blogsite is http://philippinetraveltour.blogspot.com. Please help. Thanks...

    ReplyDelete
  6. Hi Lavern,

    You did very well. You used Amanda's Sweet Dream template and substituted your own images in place of hers. I also checked your blog in Internet Explorer 6 and the blog Header is a colored image. No problem.

    ReplyDelete
  7. HI peter, thank you for your reply. I am learning a lot from your blog. My blog header is fine, the problem are the pictures in my posts they turn into black and white when i use internet explorer, but not in mozilla firefox. Can you also teach me how to create boxes in the post that you can scroll left and right. You always use it on your posts. Thanks a lot...

    ReplyDelete
  8. Thanx for the great template....

    But,there has been one thing which I can't find my answer yet.Even in default blogger templates,the width of the content changes according to the browser window size[width varies accordingly].

    But,most of the 3 column templates have fixed width.Is there any way to make the content width variable according to the browser window size?

    Thank you

    ReplyDelete
  9. Hi Admin,

    Those that changes with screen size are fluid width while those that do not change are fixed width template. If you want fixed width, easier to just change to a fixed width template.

    ReplyDelete
  10. Thanks for explaining the terms which I had so far ununderstood,Peter. :)

    ReplyDelete
  11. I read other posts with my problem, but find no solution. I used Amanda's Sweet Dreams 3 column template for my and my husband's blogs. Color is fine on my Mac with Firefox and w/Safari, but on his Mac and PC at work and my friend's puter, our sites are black & white. Not good. And my YouTube video is an empty box to them. You told one person to post Amanda, but I'm new and can't find where to do that? Also, many widgets won't work. I need a good translator widget that works and not even Google works on this template. Our blogs are http://lynettesphotoart.blogspot.com and http://pastorkenssliceofbread.blogspot.com. Pleeeeeease help us!

    ReplyDelete
  12. IS YOUR BLOG ALL BLACK & WHITE?
    Mine was and though the man here directed me to the blog template author, I found no help...until last night. Since I have seen other posts here with the same problem, I want to post the answer for those who will need it later on.
    If you use Amanda's Sweet Dreams template from Blogger Buster, as recommended here, your blog will be all b/w because she put a grey filter on the images.
    To fix, edit your blog. Click Layout tab. Click HTML tab. Look through the HTML till you find this code "img {filter: gray;}".
    Just delete the word "grey" and save!
    You may thank Allison from http://alliebrownslayouts.blogspot.com/ for finding the answer!!! Thank you Allison!!! She also has lovely free blog layouts for us.
    I'd love you all to visit my freebie blog at http://lynettesphotoart.blogspot.com - and now it's in living color!!!

    ReplyDelete
  13. i am getting this error..don't know what to do ?

    We're sorry, but we were unable to complete your request.
    When reporting this error to Blogger Support or on the Blogger Help Group, please:

    Describe what you were doing when you got this error.
    Provide the following error code and additional information.

    bX-uf7p6c

    Please can you tell now what to do ?

    ReplyDelete
  14. Hello Peter,

    I'm stuck.

    I've switched my blogger template from the regular "minima" to a 3-column hacked "minima" that I found on your site.
    (I want to add Amazon sales space and stuff in the left column)

    I backed everything up and got everything to work perfectly with the switch... EXCEPT I can't get my old header logo (my own design) to appear.

    Is it a matter of it being the "wrong" dimensions now?
    I can probably alter it's size to fit, but I honestly don't think it's all that much different in size to the current header/title box space (maybe my logo is a little higher).
    It's size was 646px × 240px.

    I really want to get my logo back.
    The text header is NOT what I need.

    Please advise.

    Thanks.

    ~P~
    Peter
    http://www.sanctumsanctorumcomix.blogspot.com/

    ReplyDelete
  15. Hi Peter,

    I would like to make my own blog a 3 Column blog - but I want to use my own colors, etc. I don't really want the template just another column.

    Is there a way to do this??

    Thanks!

    ReplyDelete
  16. That is much more complicated than just changing to a template that has the number of columns you want as each template is different. But you can refer to adding a third column

    ReplyDelete
  17. Peter,

    I was wondering if you know anything about Amanda from Blogger Buster's hack to make columns of equal length? I am using her Super Custom template and the 'class=column' code that she instructs to put in the HTML does not work for me. I do not have the "div id" code that she says to look for. The line of code I think the hack goes in says "no_shots" in it (the code that defines my left and right sidebars)

    I have already contacted Amanda with no response. You seem to be just as knowledgeable as she is and more accessible to your readers. Can you please help me?

    ReplyDelete
  18. Amanda apparently has IT background whereas I am just a retired asso. prof. in a non-IT related field who learned HTML etc on my own. You will have to ask Amanda.

    ReplyDelete
  19. hi! i like the designs. check out the source of the template.
    Thank you! i love it.
    More templates easy to download

    ReplyDelete
  20. Great website, Peter. Thanks so much. I have a blog that I want to convert to three columns - ie: text down the middle (preferably wider than it is now) and a column either side. I have been searching for MONTHS and cannot find out how to do this! I'm quite computer savvy but this is killing me! If you can help, I'd be so grateful. Warmly, Tania (http://taniamccartney.blogspot.com/)

    ReplyDelete
  21. Refer to these and report back if any did not help you or if any needs improving. I may make a new post rather than updating:

    Backing up and changing new Blogger template

    3 column templates mostly

    4 column template optimized for 1024x768 screeen

    ReplyDelete
  22. I have a blog sir and I don't wanna use download template since it will change most of the HTML of my blogs. I have lots of modifications in my HTML already and if I change my blog templates I need to do those changes again. Is there an easy way to change my blog templates where I don't need to "redo" those changes I already did, like placing Adsense ads within the post, changing the maximum width of my blog and other stuff...

    here is my blogs. I' really appreciate your suggestion sir.

    http://howtotipsandguide.blogspot.com
    http://hollywoodmoviestowatch.blogspot.com

    FYIP: Most of the modification in these blogs came from you sir. thanks

    ReplyDelete

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics