Add Myspace Layouts to Blogger Blogs.

If you have a Myspace site and want your Blogger blog to be customized with the same look you can easily put your Myspace Layout on top of your Blog Layout. See picture of Blogger blog with a Myspace Layout on it below :




This is for Blogger blogs with Layout Templates. Those blogs with Classic Template should first Upgrade to Layouts Template...............

LOAD THE MINIMA LAYOUT

The first step is to load the Minima Layout Template. This is because if your original Blogger Layout contains graphic images they will interfere with the Myspace Layouts which contain lots of graphics and prevent them from displaying properly.



To do this first BACKUP WIDGETS TEMPLATE DATA. When you change Layouts your original widgets are deleted and have to be added later after loading the new layout. You can also use this method to keep widgets and change Layouts Template.


Login at Blogger.com and click on Layout link on Dashboard. On Page Elements tab which opens click on 'Pick New Template' subtab of Template tab. Select the radio button for the Miima Template and click Save Template button at top.
The Minima Template is now loaded. Now add in the widgets code from the backup saved in the paragraph above. Paste the code in Html Page Elements.

LOAD MYSPACE LAYOUT

To choose a Myspace Layout just Google for it. Go to the sites returned in the search results and choose the Layout you like. Copy the code for the Myspace Layout which is provided below the thumbnail preview. If you already have a Myspace Layout copy the code from the About Me box after login to your Myspace site.



Login at Blogger.com and click 'Layout' link on Dashboard. On the Page Elements tab click on the 'Add Page Elements' link in the top of the left sidebar. In the popup window choose Html/Javascript Page Element. In the contents window paste the whole code which you had copied of the Myspace Layout. DO NOT ADD A TITLE. Save.

FINE TUNING LAYOUT

To fine tune the Layout switch to the Fonts and Colors subtab of Template tab. The Minima Template has dark fonts which you may need to make lighter if the Myspace Layout is dark. You can do this on this tab. Also you can adjust the background color so that it blends into the Myspace Layout. After previewing and making changes save them.




View Blog. Enjoy your Blogger blog with the Myspace Layout!!

The Table of Contents Template.

A reader asked to have a three column template with a Table of Contents at the top. So I decided to make it and take you, my dear readers, along with me as I do so. Something like "The Making of a template.....". So here we go.........

1. CREATE A BLOG

As I have said previously in Practical Approach to Hacking Templates, it is always best to start of with one of the Blogger Templates. So we login to the Dashboard and click on Create Blog link and follow the steps in How to Start a Blog. We will use this blog to showcase the new template. We choose the name as Table of Contents Template and the URL as http://tableofcontentsdemo.blogspot.com/. Lastly we choose the Minima Template and create a Test Post. Since this is to be a Demo blog we set the Settings----Basic------->Add your Blog to our listings?----->No----->Save. In Settings----->Publishing----->Send Pings---->No----->Save. In Settings----->Comments we set Who Can Comment? to Only Members of this blog----->Save, since we do not want spam comments on this Demo blog. In Settings----->Site Feed we set Allow Blog Feed to None---->Save, as this is a demo.

2. INCREASE BLOG WIDTH

The next step is to increase blog width, as shown in How to change width of blog, so as to accommodate a third column. So we go to Template------>Edit Html and first backup the template. Then scroll down in edit Html text box till you come to this code :

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px; <----CHANGE THIS
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

The outer wrapper contains all the blog sections within it. See the picture below
: To create space for a third column we increase it to 880 px and save the template. See the picture below showing increased width of the blog

3. ADD THIRD COLUMN

To add a third column as shown in add a third column to blog, we first define a new column which will be floated left and which will hold the posts column and the new left sidebar. Let us call it the bigcolumn. We add this code just below the outer wrapper code in No 2 above :

#bigcolumn {
width: 630px;
float: left;
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 */
}

The width is Main (posts) Column 410px + Left sidebar 220px = 630px. It is floated left. Then add the new left sidebar wrapper code below it :

#leftsidebar-wrapper {
width: 220px;
float: left;
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 */
}

It is floated left within the big column while the posts column is floated right. So we change the float property of the posts column in the code below fro left to right:

#main-wrapper {
width: 410px;
float: right;
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 */
}

Save Template. The columns have been defined in the CSS and now we have to add code in the body part to show the on page. So we add the big column first after this line in the code :

<div id='content-wrapper'>

ADD THIS LINE

<div id='bigcolumn'>

THEN ADD THE LEFT SIDEBAR WRAPPER CODE BELOW IT :

<div id='leftsidebar-wrapper'>
<b:section class='sidebar' id='leftsidebar' preferred='yes'>
</b:section>
</div>

save the template after closing the bigcolumn division by putting

</div>

after this block of code which represents the main (posts) column :

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

See the picture of the full blog below which is now three columns :

4. TABLE OF CONTENTS

The Table of Contents is a Archive Widget which we will place in the central (posts) column. To do this we have to increase the number of widgets in the central column. Go to Template----->Edit Html----->and scroll down till you come to :

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>

Change this code to

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='yes' maxwidgets='3'>

Save Template and switch to Page Elements tab. There is already an Archive widget in the right sidebar. Drag and drop it to the top of the posts column and click on Save at the top. Switch back to Edit Html tab and put a check in Expand Widgets Template checkbox at the top of the Edit Template textbox. This will expand the code for the Archives widget. Replace the code AFTER THE FIRST TWO LINES which are :

<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
<b:includable id='main'>

WITH THE CODE BELOW :

<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
</div>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
<b:includable id='interval' var='intervalData'>
<b:loop values='data:intervalData' var='i'>
<b:if cond='data:i.data'>
<b:include data='i.data' name='interval'/>
</b:if>
<b:if cond='data:i.posts'>
<b:include data='i.posts' name='posts'/>
</b:if>
</b:loop>
</b:includable>
<b:includable id='posts' var='posts'>
<ul class='posts'>
<b:loop values='data:posts' var='i'>
<li><a expr:href='data:i.url'><data:i.title/></a></li>
</b:loop>
</ul>
</b:includable>
</b:widget>

Save Template.

5. USE CONDITIONAL TAGS

Now we have the Blog Archives widget showing only the links to the posts. Below it is the posts. We will now use conditional tags as described in Post a Book in the New Blogger to show only the Archives widget on the main page and to show the posts widget on the post pages only.

To do this go to Templates----->Edit Html and put a check in the box to expand Widgets Templates at the top of the Edit Template text box. Then scroll down to the archives code

<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
<b:includable id='main'>

Add after the above lines the following code :

<b:if cond='data:blog.url == data:blog.homepageUrl'>

Also add </b:if> before the immediate next </b:includable>
The whole code after modification becomes :

<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
</div>
</div>
<b:include name='quickedit'/>
</div>
</b:if>
</b:includable>
<b:includable id='toggle' var='interval'>
<b:if cond='data:interval.toggleId'>
<b:if cond='data:interval.expclass == "expanded"'>
<a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" + "&dir=close&amp;toggle=" + data:interval.toggleId + "&toggleopen=" + data:toggleopen'>
<span class='zippy toggle-open'>▼ </span>
</a>
<b:else/>
<a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" + "&dir=open&toggle=" + data:interval.toggleId + "&toggleopen=" + data:toggleopen'>
<span class='zippy'>► </span>
</a>
</b:if>
</b:if>
</b:includable>
<b:includable id='flat' var='data'>
<ul>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</b:includable>
<b:includable id='posts' var='posts'>
<ul class='posts'>
<b:loop values='data:posts' var='i'>
<li><a expr:href='data:i.url'><data:i.title/></a></li>
</b:loop>
</ul>
</b:includable>
<b:includable id='menu' var='data'>
<select expr:id='data:widget.instanceId + "_ArchiveMenu"'>
<option value=''><data:title/></option>
<b:loop values='data:data' var='i'>
<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
</b:loop>
</select>
</b:includable>
<b:includable id='interval' var='intervalData'>
<b:loop values='data:intervalData' var='i'>
<b:if cond='data:i.data'>
<b:include data='i.data' name='interval'/>
</b:if>
<b:if cond='data:i.posts'>
<b:include data='i.posts' name='posts'/>
</b:if>
</b:loop>
</b:includable>
</b:widget>

For the posts column paste this line of code :

<b:if cond='data:blog.pageType == "item"'>

instead of line xxxxxxxxxxxxxxxxx in below code in your template :

<b:includable id='main' var='top'>
<!-- posts -->
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<div class='blog-posts'>

Then locate the immediate next </div> and add </b:if> after it. Save Template.

6. CUSTOMIZING APPEARANCE

You now have a TABLE OF CONTENTS on the front page. To change the title from Blog Archives to TABLE OF CONTENTS just click Edit link in the Archives section on top of the blog posts on Page Elements subtab of Template tab. To change the background of the Table of Contents put this code in the VARIABLE DEFINITIONS :

<Variable name="headingcolor" description="TABLE OF CONTENTS Color"
type="color" default="#fff" value="#ffffff">
<Variable name="contentBackgrnd" description="TABLE OF CONTENTS Background Color"
type="color" default="#fff" value="#ffff66">

and this code lower down after the outer wrapper code :

.BlogArchive h2 {
color:$headingcolor;
}
.BlogArchive {
border:10px solid #000000;
border-bottom:10px solid #000000 !important;
background-color:$contentBackgrnd;
text-align:center;
}

Save Template. See the picture of the blog below :


You can check out the DEMO BLOG here. You can download the full template here.

Technorati Tags:template, width, third column, change template, conditional tags, css, blogger hacks,
post titlestable of contents

How to Change the Template.

The Template is your blog's clothes and to change it....

click on the Template tab after logging into the Dashboard and clicking on your blog's name. Ihe Template Tab has four subtabs : 'Page Elements', 'Fonts and Colors', 'Edit HTML' and 'Pick New Template'. The Page Elements subtab is the default and is used to arrange the various Page elements or Widgets in your blog. The Edit Html subtab is where you can change your template. Click on 'Edit Html'to bring up the page to change the template.

WARNING : ALWAYS BACK UP YOUR FIRST TEMPLATE BEFORE CHANGING INTO A NEW ONE!!!

There are two ways to do this in beta blogger. The first method is to click the link 'Download Full Template' under the heading Backup/Restore Template on this page. Click on it and save the file with XML extension to your hard disk. If you write a post and put it on a blog, that's a historical document.

If you change your template, then that entry looks completely different. It's the same words, but not the same meaning. This all depends on what historical questions that people will be asking and we can't know what they will want.
Josh Greenberg, Digital Preservation and Blogs, SXSW 2006

The second method is to first put a check in the box to 'Expand Widget Templates'. This expands the template in the text box below. Now right click anywhere within that text box and choose 'Select All' Then right click within the blue selected area and choose 'Copy'. Open Notepad Right click within it and choose 'Paste'. This pastes your entire template in Notepad and now save it as a text file.

To change into a new template click on Browse button after 'Upload a template from a file on your hard drive:' on the Edit Html page. Select the XML file which is your template by navigating to it and click 'Open'.

IMPORTANT :OLD BLOGGER USES HTML TEMPLATES WHICH ARE INCOMPATIBLE WITH NEW/BETA BLOGGER.

The path to the file is loaded and then click on 'Upload'. The template is uploaded and saved immediately and you can view your blog in its new clothes.

Another method is to copy and paste the entire template code into the Edit Template box on the Edit Html page and click Save.

After dressing your blog in its new clothes always check it in browser to see how it looks. About 80-90% viewers use Internet Explorer and about 10-15% use Firefox. Others use Opera and safari. Try and check it in all the browsers you have.

Check also to see how it looks at different resolutions. To check how it looks at 800 by 600 type following in your browser address box (after loading your blog) :

javascript:top.resizeTo(800,600)

and press ENTER.

It will resize window to the window to that resolution. About 15-20% viewers use that resolution and should be able to view your site without distortion. To check at other resolutions enter the corressponding figures in the parenthesis above and do likewise.

TO EDIT XML FILES YOU CAN USE FOLLOWING PROGRAMS :

XML Notepad 2006
Microsoft XML Notepad
Stylus Studio XML Pro
XML Fox XML&XSD Editor

Technorati Tags:browser, change template, resolution, template