What we are doing today:
Firefox
Basic set up
Running thought all the buttons
Editing your profile
Choosing a template
Installing the new template
(A note about the vimeo videos used in our classes: if you have a free VIMEO account you have some EXTRA PRIVELIDGES ...1. You can log-in to view the class videos in vimeo. 2. You can choose to save the video to your computer by logging in to Vimeo and clicking the SAVE button at the bottom right of the screen. 3.You can also view them fullscreen when logged in to Vimeo. You can get a free Vimeo account at www.vimeo.com)
I also created some templates for you ( 2 column and a 3 column) that you can download and upload to your blog. I will walk you through those steps with a video. A few cool things that I included in the html code (that you can download) for the two and three column blogs: (these codes are in different colors in the html text file)
⁃ The flavicon code. This is the little icon you see next to your blog address bar. So you can find and replace it with your own flavicon later. It will be discussed in one of the lessons.
⁃ The custom background code. We will design/upload new ones tomorrow. Again this will help you find and replace the bit of code you need to customize your background.
⁃ The code you will need to customize your blog titles/ sidebar title and or date headers (see the image below)
A note on Firefox:
Please note: All the blogger classes have been formatted for Firefox. If you are not using Firefox as your web browser, please download it for free... HERE.
Watch this video and it will explain to you why Firefox is so cool! It might be a little bit too much information, but I still recommend that you watch it. It will not only help to make your blog awesome, but Firefox uses less of your computer's ram (random access memory) which means that your computer will work faster. The video will also teach you cool features of Firefox that will enhance the whole "surfing the web" experience. I can not imagine life without Firefox!
watch the FIREFOX VIDEO
Basic Set up of Blogger:
For those of you who want to set up your blog from scratch, this is a fantastic video to watch. It will take you though the steps.
watch the GETTING STARTED with blogger from scratch VIDEO.
Running thought the buttons:
password: blogger09
Running through the buttons... from Wilna Furstenberg on Vimeo.
Editing your profile:
(video password: blogger09)
Here is some information on how to edit your profile. My video is short and to the point. If you want much more information... check out this YouTube video
Profile from Wilna Furstenberg on Vimeo.
Choosing a template:
For this blogger class, I have custom designed 2 templates:A 2 column and a 3 column template. You can download the html code for them in the next section.
What I mean by custom designed:
* I added the code for the background. Tomorrow I will show how to make your own background in Photoshop. I have a background template that will perfectly fit these 2 custom templates.
* I made the 2 column template a little bigger so that it looks uncluttered.
* The 3 column template is based on my current blog and I am so happy with the sizes and feel of the template.
* Both templates have custom backgrounds already. You can keep it if you want. as I designed every element myself, there is no copyright.
* With blogging being such a HUGE subject, I want to stick with what I know. I can help you upload and customize these 2 options. It narrows the field for me... There's no way I can possibly know everything!
The files: This is a screenshot of how the text file looks like that you will download and install (as I explained in the video and article below)
TWO COLUMNS:
This is the 2 column template. Click here to download the 2 column HTML text file. The best way to download the file is to click the file. It will open a new dialogue box. Click save and select a place where you want to save it. This is a text edit file which open in TextEdit, Notepad or in Word. Remember that tomorrow I will show you how to make your OWN background + there will be various background designs for you to choose from and download. If you want to install the HTML code, follow the instructions carefully...(also in the next section). What's cool about the HTML text file is that I color coded the most important code that you will need to change.
THREE COLUMNS:
This is the 3 column template. You can click and save the html text file. The best way to download the file is to click the file. It will open a new dialogue box. Click save and select a place where you want to save it.. This is a text edit file which open in TextEdit, Notepad or in Word. Remember that tomorrow I will show you how to make your OWN background + there will be various background designs for you to choose from and download. If you want to install the HTML code, follow the instructions carefully...(also in the next section). What's cool about the HTML text file is that I color coded the most important code that you will need to change.
CHANGING your old template to a new one.
THIS article is copied from HERE. It's a brilliant brilliant article on how to change your blog template without loosing any widgets. I made a video that follows the instructions carefully.
Watch this video on how to change your blog template: Below in this post is a WRITTEN How to. I used it exactly.
password: blogger09
Adding a new template from Wilna Furstenberg on Vimeo.
This article was written to provide a step-by-step guide on how to correctly apply a new XML Blogger template to your blog. This process can be tricky depending on several factors (quality of the code in the new template, your existing widgets, etc) so you need to be careful when changing your template. Don’t worry though, just follow our step-by-step instructions below and we’ll hopefully get you through it without much pain.
Many people make the same mistake when installing a new blogger template. Most problems when installing a new template are caused by the blogger widgets (Page Elements) that you’ve spent time setting up in your previous template. Almost all Blogger templates available for download on this site are in the new Blogger xml template format so if you’ve downloaded the template from us, it’s going to be much easier to follow our instructions.
Step #1 - Backup Your Current Template
Backup your current Template just in case you make a mistake. This is very important so you can always go back (click on the screenshot to the left to see exactly how this is done). You’ll want to navigate to the “Template” => “Edit HTML” section of Blogger and then look for the “Before editing your template, you may want to save a copy of it. Download Full Template“. Click on the “Download Full Template” and save it somewhere easy to find later on your computer. We are not responsible for any mistakes you make in applying your new Blogger template. Once you have saved this .xml file onto your computer, move on to step #2.
Step #2 - Take a Screenshot of Your Page Elements
This next step isn’t necessary but I like to do it anyhow. Take a screenshot of your “Page Elements” page just so you know exactly what widgets (Page Elements) you had before applying the new template (an example of the exact page you should take a screenshot of is in the image to the left). If you blow away all your widgets and you don’t remember which ones you had, this screenshot will at least help you remember. If you’re unsure as to how to take a screenshot, then check out this quick tutorial (MS Windows).
Step #3 - Make a temporary placeholder for your widgets
Next, we’re going to essentially make a temporary placeholder for your widgets (Page Elements) within your current template. You should still be in the “Template” => “Edit HTML” section of Blogger so if you’re not, go back to that section.
You’re going to actually edit this template code now so pay close attention. Look for the following piece of code which is all the way at the bottom.
Now you’re going to replace that code with the following bit of code: (Look for this line in the article then you dont have to type it out... you can just copy and paste it.)
Save your template and you’ll see this message (which is a good sign):
What did we just do? We created a brand new widget (Page Element) in your current Blogger template so we can move all your widgets over to keep them safe! Next navigate over to the “Template” => “Page Elements” section of Blogger and you’ll see a blank new footer section.
Drag all your widgets (Page Elements) that were going to be deleted (we wrote them down or took a screenshot in step #3). The order doesn’t really matter as long as you’ve moved them all down into the widget (top image on left). After you’re done, it should look something like this (bottom image on left):
Now click on the “Save” button and the temporary placeholder for our widgets will be saved. We’re not done quite yet but if you’ve gotten this far already you’ve done great! The hardest part is over. Now we’re going to copy the widgets we just protected over to your new template. Hold off on that bathroom break and let’s keep going.
Next, go back to the “Template” => “Edit HTML” section of Blogger and scroll down in the template code and look for the line of code you added before:
There should now be a bunch more code in between it which will look something like this:
This is a list of all your widgets (Page Elements) that we just moved into the footer. You want to select all this code and copy it. We’re going to paste it into our new Blogger template code which will complete the transfer safely.
Now open your new Blogger template xml file in a text editor (you can use Notepad/ Text Edit, just right click -> Open With -> Choose Notepad). Once you have it open, scroll all the way down to the bottom of the code and look for the following code:
You’re going to replace this code with the new code you just copied above. Make sure you only replace that one bit of code otherwise you might run into some problems. Save your new Blogger template and you’ve finished transferring your widgets (Page Elements) into the new Blogger template!
Now after all that work just to save your precious widgets, let’s hope the new template works ok in Blogger. Go back to step #3 above and upload your new template like you attempted to do before. If all goes well, your new template will properly save and your blog will be updated!
Step #4 - Move Your Widgets Back To Their Original Spots
I’m assuming your new template installed without and problems and you’re ready to move your widgets (Page Elements) back to their original spots. This is just the reverse process of what we did before by going to the “Template” => “Page Elements” section of Blogger and moving them out of the footer and back into the sidebar (or wherever you originally had them in your old template).
After you arrange them to your liking, make sure to save and view your blog. If all went well then your blog should be looking the way it did before the new template was applied (well, except for the new beautiful design which is the main reason for this hassle in the first place right?).
Summary
Congratulations on adding a new custom Blogger xml template to your blog! The whole process should have taken anywhere from 15 minutes to 1 hour depending on your experience and comfort with blog template code, the code quality of the new template, and the number of widgets your blog currently has. Blog designs shouldn’t have to change very often so hopefully this is a one-time process for you. If not, I recommend you bookmark or add this page to your favorites so it’s easy to find the next time you decide to change Blogger templates.
A few things to remember when you change your template: (As discussed in the template video)
Take some screenshots of your current blog. That way you can always re-create a look or list you loved.
Download your current template.
DON'T BE AFRAID to change your template.You will NOT loose your blog post content.
With the place holder method you SHOULD NOT loose any widgets... if you do... DON'T WORRY! It's easy to re-create and fun to give your blog a spring clean. I do this at least once a year!
If you want to change your templates today so that we can start blinging them tomorrow, it will be cool. If you have any problems, leave me a comment and I will help you!
Leave me a comment if you are HAPPY and if you need HELP...The only condition for me to HELP is that you SHOULD HAVE watched ALL the videos and read all the instructions!
-------------
2 COLUMN CODE
-----------------------------------------------
Blogger Template Style
Name: Minima
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 26 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */
/* Variable definitions
====================
default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">
default="normal normal 200% Georgia, Serif" value="normal normal 200% Georgia, Serif">
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
*/
/* Use this with templates/template-twocol.html */
body {
background-image: url(http://wilna71.googlepages.com/2columntemplatetrees.jpg/2columntemplatetrees-full.jpg);
background-repeat: no-repeat;
background-position: top center;
background-attachment: fixed;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
a:link {
color:$linkcolor;
text-decoration:none;
}
a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}
a:hover {
color:$titlecolor;
text-decoration:underline;
}
a img {
border-width:0;
}
/* Header
-----------------------------------------------
*/
#header-wrapper {
width:800px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}
#header a {
color:$pagetitlecolor;
text-decoration:none;
}
#header a:hover {
color:$pagetitlecolor;
}
#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:800px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}
#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 800px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#main-wrapper {
width: 610px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
width: 190px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
/* Headings
----------------------------------------------- */
h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
}
/* Posts
-----------------------------------------------
*/
h2.date-header {
margin:1.5em
}
.post {
margin:.1em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
.post h3 {
margin:1em;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}
.post h3 strong, .post h3 a:hover {
color:$textcolor;
}
.post-body {
margin:1em;
line-height:1.6em;
}
.post-body blockquote {
line-height:1.3em;
}
.post-footer {
margin: 1em;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
}
.comment-link {
margin-$startSide:.6em;
}
.post img {
padding:4px;
border:1px solid $bordercolor;
}
.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}
/* Comments
----------------------------------------------- */
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}
#blog-pager-newer-link {
float: $startSide;
}
#blog-pager-older-link {
float: $endSide;
}
#blog-pager {
text-align: center;
}
.feed-links {
clear: both;
line-height: 2.5em;
}
/* Sidebar Content
----------------------------------------------- */
.sidebar {
background:$sidebar;
color: $sidebartextcolor;
line-height: 1.5em;
}
.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:20px;
text-indent:-15px;
line-height:1.5em;
}
.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
.main .Blog {
border-bottom-width: 0;
}
/* Profile
----------------------------------------------- */
.profile-img {
float: $startSide;
margin-top: 0;
margin-$endSide: 5px;
margin-bottom: 5px;
margin-$startSide: 0;
padding: 4px;
border: 1px solid $bordercolor;
}
.profile-data {
margin:0;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
color: $sidebarcolor;
font-weight: bold;
line-height: 1.6em;
}
.profile-datablock {
margin:.5em 0 .5em;
}
.profile-textblock {
margin: 0.5em 0;
line-height: 1.6em;
}
.profile-link {
font: $postfooterfont;
text-transform: uppercase;
letter-spacing: .1em;
}
/* Footer
----------------------------------------------- */
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
]]>