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.



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



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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvXoUYRx2mp5HxyGsKtjCzFuRdzs8sAPawWXvUWiQMMURccNha-qWrZggj9zxq17TrmAqtlJe80iytuRCelh094QiQbMI5BWFO38IxloB85hl4EOO9GnZyB74I6Kv8vNF-hgVscF93cbiS/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

Posted in: blog Help,Blog Tips,Blog Tricks,Edit Blogs