1950's Styles

Blogger Layouts / Classic

Designer's Comments

Look carefully for specific instructions

...

Using This Layout

For specific instructions read designer's comments

1. Log into blogger.com
2. Click on Template
3. Copy (ctrl c) and paste (ctrl v) code to EDIT HTML

Layout Code

Copy and paste to Template

Help

<html><head>
   <title>1950's styles</title>
   <style type="text/css">
      
   body{
   font-family:verdana;
   font-size:11px;
   color: #4b3c29;
   text-align: justify;
   line-height:18px;
   background-image: url('http://cbimg6.com/layouts/09/04/34284ab.png');
   }

::-moz-selection{color: #4b3c29; background:#e2ff54;}
     
   A:active, A:link, A:visited {
   color: #99f8ff;
   font-family:verdana;
   font-size:11px;
   text-decoration:none;}
     
   A:hover{
   background: transparent;
   color:#fc5033;
   text-decoration:none;
   border-bottom: 1px #fc5033 dashed;}
               
   
   .content{
   background: trasnparent;
   position:absolute; 
   top:100px; 
   width:300px; 
   left:285px;
   height:200px;
   overflow:auto;
   }   
   
   .sidebar{
   background-image: url('http://cbimg6.com/layouts/09/04/34284ab.png');
   position:absolute; 
   width:200px; 
   text-align:justify;}
   
      
   .head{
    color:#f9fb12;
    text-align:center;
    background-color: transparet;
    font-size:15pt;
    line-height:20px;
    letter-spacing: 0px;
    font-family:tahoma;
    border-bottom: 1px #4b3c29 dashed;
    text-transform:lowercase;
   }

.title{
   background:transparent;
   color:#fc5033;
   font-size:20pt;
   font-family:arial;
   letter-spacing:-1px;
   line-height:18px;
   text-transform:lowercase;}

.date{
    color:#f9fb12;
    text-align:center;
    background-color: transparent;
    font-size:9pt;
    line-height:18px;
    letter-spacing: 2px;
    font-family:verdana;
    border-bottom: 1px #ffffff solid;
    text-transform:lowercase;
    text-align:left;}
      
.say{
color:#4b3c29;
font-size:15pt;
line-height:15px;
letter-spacing:-1px;
font-family:times new roman;
position:absolute;
top:0px;
left:0px;}

b {color:#e2ff54; cursor:help; font-weight: bold;}
   i {color:#fc5033; background: transparent; cursor:move;}
   u {border-bottom:; font-weight: bold;}

blockquote{
background-color: transparent;
color: #4b3c29;
cursor: help;
border-left: #4b3c29 dashed 1px;
letter-spacing: 1.5pt;
padding: 5px;
}

blockquote:hover{
background-color: transparent;
color: #99f8ff;
border-left: #99f8ff dashed 1px;
cursor: help;
letter-spacing: 1.5pt;
padding: 5px;}

.effect_expand_text {
padding: 5px;
text-align: justify;
}
      
                   #text {

text-align: justify;
    }
                   #test1-label {
    background: #F6F19C;
    font: verdana;
    color: #000000;
    cursor: pointer;
    letter-spacing: 0pt;
    padding: 3px;
    text-align: center;
    }

#test5-label {
    background:#F0ACB3;
    font: verdana;
    color: #000000;
    cursor: pointer;
    letter-spacing: 0pt;
    padding: 3px;
    text-align: center;
    }

#test-label:hover, #test1-label:hover, #test2-label:hover, #test3-label:hover, #test4-label:hover, #test5-label:hover {
    -moz-opacity: 0.80;
    filter: alpha(opacity=80);
    letter-spacing: 0pt;
    }

</style>
                   <script type="text/javascript">

function $(d){
 return document.getElementById(d);
}

function dsp(d,v){
 if(v==undefined){
  return d.style.display;
 }else{
  d.style.display=v;
 }
}

function et(d){
 d = $(d);
 if(sh(d)<d.maxh){
  v = Math.round((d.maxh-sh(d))/d.s);
  v = (v<1) ? 1 :v ;
  v = (sh(d)+v);
  sh(d,v+'px');
  d.style.opacity = (v/d.maxh);
  d.style.filter= 'alpha(opacity='+(v*100/d.maxh)+');';
 }else{
  sh(d,d.maxh);
  clearInterval(d.t);

}
}

function cl(d){
 if(dsp(d)=='block'){
  clearInterval(d.t);
  d.t=setInterval('ct("'+d.id+'")',t);
 }
}

function ex(d){
 if(dsp(d)=='none'){
  dsp(d,'block');
  d.style.height='0px';
  clearInterval(d.t);
  d.t=setInterval('et("'+d.id+'")',t);
 }
}

// Removes Classname from the given div.
function cc(n,v){
 s=n.className.split(/s+/);
 for(p=0;p<s.length;p++){
  if(s[p]==v+n.tc){
   s.splice(p,1);
   n.className=s.join(' ');
   break;
  }
 }
}
//Accordian Initializer
function Accordian(d,s,tc){
 l=$(d).getElementsByTagName('div');
 c=[];
 for(i=0;i<l.length;i++){
  h=l[i].id;
  if(h.substr(h.indexOf('-')+1,h.length)=='text'){c.push(h);}
 }
 sel=null;
 
 for(i=0;i<l.length;i++){
  h=l[i].id;
  if(h.substr(h.indexOf('-')+1,h.length)=='label'){
   d=$(h.substr(0,h.indexOf('-'))+'-text');
   d.style.display='none';
   d.style.overflow='hidden';
   d.maxh =sh(d);
   d.s=(s==undefined)? 7 : s;
   h=$(h);
   h.tc=tc;
   h.c=c;

h.onclick = function(){
    for(i=0;i<this.c.length;i++){
     cn=this.c[i];
     n=cn.substr(0,cn.indexOf('-'));
     if((n+'-label')==this.id){
      ex($(n+'-text'));
      n=$(n+'-label');
      cc(n,'__');
      n.className=n.className+' '+n.tc;
     }else{
      cl($(n+'-text'));
      cc($(n+'-label'),'');
     }
    }
   }
   if(h.className.match(/select/)!=undefined){ sel=h;}
  }
 }
 if(sel!=undefined){sel.onclick();}
}
                      
                   </script>
   </head>
   <noembed><body></noembed>
    <body onload="new Accordian('text');">
<div class="say">
<center><img src="http://cbimg6.com/layouts/09/04/34284aa.png" border="0" alt="Image Loading ..."/></center></div>

<div class="sidebar" style="position:absolute; top:560px; left:90px; width: 230px; background:transparent;">  
<div class="head">Welcome</div>
How doth the little crocodile<br>
    Improve his shining tail,<br>
And pour the waters of the Nile<br>
    On every golden scale!<br><br>
How cheerfully he seems to grin,<br>
    How neatly spreads his claws,<br>
And welcomes little fishes in,<br>
    With gently smiling jaws!

<br>

<div class="head">About</div>
profile here

<div class="head">archives</div>
<br>
<div align="center">
<select name="ArchiveMenu" onChange="location.href=this.options[this.selectedIndex].value;">
<option value="/">archives & recents</option>
<optgroup label="archived entries">
<BloggerArchives>
<option value="<$BlogArchiveURL$>"><$BlogArchiveName$></option>
</BloggerArchives>

</select></div><br>

<div class="head">Exits</div>
        <a href="http://link.com/" target=_blank>link</a>, 
        <a href="http://link.com/" target=_blank>link</a>, 
        <a href="http://link.com/" target=_blank>link</a>, 
        <a href="http://link.com/" target=_blank>link</a>, 
        <a href="http://link.com/" target=_blank>link</a>, 
        <a href="http://link.com/" target=_blank>link</a>, 
        <a href="http://link.com/" target=_blank>link</a>, 
        <a href="http://link.com/" target=_blank>link</a>, 
        <a href="http://link.com/" target=_blank>link</a>, 
        <a href="http://link.com/" target=_blank>link</a>, 
        <a href="http://link.com/" target=_blank>link</a>.
<br><br>

<div class="head">Layout</div>
<br/>
<b>designer:</b> <a href="http://quetuatia.blogspot.com/">infra</a><a href="http://infravermelho.createblog.com/">vermelho</a><br/>
<b>resources:</b> <a href="http://ffffound.com/">ffffound</a><br/>
<b>codes:</b> <a href="http://www.blogskins.com/me/stinky">stinky</a></br>
<br>

<div class="head">statistics</div>
stats here 
   <p>
</div>
</div>

Layout Comments

Showing latest 10 of 14 comments

hey, look, about the layout, switching widgets to classic should solve it. If you're already using classic then you must have inserted the code in a wrong way, or not replacing it completely. If you did everything right then i don't know, I'm not a web master.

By Infravermelho on Aug 26, 2010 11:18 am

hey, can someone help me? :S the graphics are on the right side of my blog instead of the left, and i can't see the "about me" section!
http://toopoorforcou ture.blogspot.com if you don't know what i'm talking about.

By ChaChii on Aug 25, 2010 12:37 pm

I REALLY want to use this layout, but I get the same error message as melh2o. Please help!

By maricino on Aug 11, 2009 6:04 pm

Woops, < $ Blog Item Create $ >
ignore spaces

By vannpire on Apr 21, 2009 8:25 am

This layout hides the comments section, I didnt realise, so for those wanting to have comments use

in the last section of code.

By vannpire on Apr 21, 2009 8:24 am

ahhh omg thanks. i'm such an idiot. i really need to start actually reading the tags haha.

By melh2o on Apr 15, 2009 10:15 pm

It's not a widget template, it's a classic.

By Infravermelho on Apr 15, 2009 12:59 pm

D: it doesn't work! i get this message: Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The entity name must immediately follow the '&' in the entity reference.

By melh2o on Apr 15, 2009 12:31 am

hey goodjob! i really like it!

By kayetivity on Apr 13, 2009 9:56 pm

Ooo, this is nice. Good job. :)

By Mikeplyts on Apr 6, 2009 10:15 pm

View all »

Layout Details

Designer	Infravermelho
Submitted on	Apr 3, 2009
Page views	45,185
Favorites	55
Comments	14
Reviewer	schizo
Approved on	Apr 4, 2009

1950's Styles

Designer's Comments

Using This Layout

Layout Code

Layout Comments

Layout Details

Layout Colors

Layout Tags

Layout Tools

Layout Affiliates