Free Scrapbook Blogger Templates and Layouts! Check out the Scrapbook Blogger Template, which is a perfect Blogger background.
All of pYzam's Blogger Templates and Layouts are original and made by us! We're always adding new templates every day so check back all the time.

My pYzam

Scrapbook Blogger Layout

Free Scrapbook templates for Blogger

pYzam > Blogger Templates > Scrapbook

4.6

Preview Full Screen
Get the Code!

Add to Favorites

Scrapbook Homepage
Link to this page

AIM This Page to a Friend
Bookmark This Page

Click here to preview scrapbook blogger template

Available for:

Tagged with: scrapbook, ripped, pages, centered designs, grey, girly, abstract, general
Should this be tagged something else? Coming Soon

Get the code

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
  <head>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>
    <b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name:     
Designer: pYzam Team
URL:      www.pyzam.com
----------------------------------------------- */

/* Variable definitions
   ====================
   <Variable name="bgcolor" description="Page Background Color"
             type="color" default="#404040" value="#404040">
   <Variable name="textcolor" description="Text Color"
             type="color" default="#da156d" value="#da156d">
   <Variable name="linkcolor" description="Link Color"
             type="color" default="#da156d" value="#da156d">
   <Variable name="pagetitlecolor" description="Blog Title Color"
             type="color" default="#da156d" value="#da156d">
   <Variable name="descriptioncolor" description="Blog Description Color"
             type="color" default="#da156d" value="#da156d">
   <Variable name="titlecolor" description="Post Title Color"
             type="color" default="#da156d" value="#da156d">
   <Variable name="bordercolor" description="Border Color"
             type="color" default="#000000" value="#000000">
   <Variable name="sidebarcolor" description="Sidebar Title Color"
             type="color" default="#da156d" value="#da156d">
   <Variable name="sidebartextcolor" description="Sidebar Text Color"
             type="color" default="#da156d" value="#da156d">
   <Variable name="visitedlinkcolor" description="Visited Link Color"
             type="color" default="#da156d" value="#da156d">
   <Variable name="bodyfont" description="Text Font"
             type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Georgia, Serif">
   <Variable name="headerfont" description="Sidebar Title Font"
             type="font"
             default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">
   <Variable name="pagetitlefont" description="Blog Title Font"
             type="font"
             default="normal normal 200% Georgia, Serif" value="normal normal 200% Georgia, Serif">
   <Variable name="descriptionfont" description="Blog Description Font"
             type="font"
             default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
   <Variable name="postfooterfont" description="Post Footer Font"
             type="font"
             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:$bgcolor;
  margin:0;
  color:$textcolor;
  font:x-small Georgia Serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  text-align: center;
  background-color:#404040;
	background-image:url(http://stuff.pyzam.com/layouts/img/r/a/scrapbook.jpg);
	background-attachment: fixed;
	background-position:top center;
	background-repeat:no-repeat;
	border-color:#ffffff;
	border-width:0px ;
	border-style: solid;
  }
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:660px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  background-color:#transparent;
  
  }

#header-inner {
  background-position: center;
  margin-left: auto;
  margin-right: auto;
}

#header { 
  margin: 5px;
  border: 1px solid $bordercolor;
  text-align: center;
  color:$pagetitlecolor;
  background-color:#transparent;
  
}

#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:700px;
  text-transform:uppercase;
  letter-spacing:.2em;
  line-height: 1.4em;
  font: $descriptionfont;
  color: $descriptioncolor;
 }

#header img {
  margin-left: auto;
  margin-right: auto;
}

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

#main-wrapper {
  width: 410px;
  float: left;
  padding: 5px;
  border:1px solid $bordercolor;
  background-color:#transparent;
  
  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: 220px;
  float: right;
  padding: 5px;
  border:1px solid $bordercolor;
  background-color:#transparent;
  
  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 0 .5em;
  }

.post {
  margin:.5em 0 1.5em;
  border-bottom:1px dotted $bordercolor;
  padding-bottom:1.5em;
  }
.post h3 {
  margin:.25em 0 0;
  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 p {
  margin:0 0 .75em;
  line-height:1.6em;
}

.post-footer {
  margin: .75em 0;
  color:$sidebarcolor;
  text-transform:uppercase;
  letter-spacing:.1em;
  font: $postfooterfont;
  line-height: 1.4em;
}

.comment-link {
  margin-left:.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;
  padding: 5px;
  border:1px solid $bordercolor;
  background-color:#transparent;
  
  }

#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: left;
 }
 
#blog-pager-older-link {
  float: right;
 }

#blog-pager { 
  text-align: center;
 }

.feed-links {
  clear: both;
  line-height: 2.5em;
}

/* Sidebar Content
----------------------------------------------- */
.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:0 0 .25em 15px;
  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: left;
  margin: 0 5px 5px 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;
  padding: 5px;
  border:1px solid $bordercolor;
  background-color:transparent;
  
}

/** Page structure tweaks for layout editor wireframe */
body#layout #header { 
  margin-left: 0px;
  margin-right: 0px;
}

.bloggerPyBar { background-color:#ff6600;
color:#114477;
font-family: Arial, Helvetica, sans-serif;
font-size:10px;
text-align:left;
font-weigth:bold;
padding:2px 2px 2px 6px;}
.bloggerPyBar a {color:#114477;}
.pylogo {float:right;padding-right:9px;}

]]></b:skin>
  </head>

<body>

<div class="bloggerPyBar" style="cursor:pointer;"><div class="pylogo"><span style="position:relative;top:-1px;left:0px">«</span> <a href="http://www.pyzam.com">PYZAM.COM</a></div>
    <a href="http://www.pyzam.com/bloggertemplates">BLOGGER TEMPLATES</a> AND <a href="http://www.twitterbackgrounds.com">TWITTER BACKGROUNDS</a> <span style="position:relative;top:-1px;left:0px;">»</span> </div>

<span id='skiplinks' style='display:none;'>
      <a href='#main'>skip to main </a> |
      <a href='#sidebar'>skip to sidebar</a>
    </span>

<b:if cond='data:useImage'>
    <b:if cond='data:imagePlacement == "REPLACE"'>
      
      <div id='header-inner'>
        <a expr:href='data:blog.homepageUrl' style='display: block'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
        </a>
      </div>
    <b:else/>
      
      <div expr:style='"background-image: url(\"" + data:sourceUrl + "\"); "                      + "background-repeat: no-repeat; "                      + "width: " + data:width + "px; "                      + "height: " + data:height + "px;"' id='header-inner'>
        <div class='titlewrapper' style='background: transparent'>
          <h1 class='title' style='background: transparent; border-width: 0px'>
            <b:if cond='data:blog.url == data:blog.homepageUrl'>
              <data:title/>
            <b:else/>
              <a expr:href='data:blog.homepageUrl'><data:title/></a>
            </b:if>
          </h1>
        </div>
        <div class='descriptionwrapper'>
          <p class='description'><span><data:description/></span></p>
        </div>
      </div>
    </b:if>
  <b:else/>
    
    <div id='header-inner'>
      <div class='titlewrapper'>
        <h1 class='title'>
          <b:if cond='data:blog.url == data:blog.homepageUrl'>
            <data:title/>
          <b:else/>
            <a expr:href='data:blog.homepageUrl'><data:title/></a>
          </b:if>
        </h1>
      </div>
      <div class='descriptionwrapper'>
        <p class='description'><span><data:description/></span></p>
      </div>
    </div>
  </b:if>
</b:includable>
</b:widget>
</b:section>
    </div>
 
    <div id='content-wrapper'>

<b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
      <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
      <b:else/>
      <b:if cond='data:newerPageUrl'>
        <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
      </b:if>
    </b:if>

</div>
  <div class='clear'/>
</b:includable>
<b:includable id='backlinks' var='post'>
  <a name='links'/><h4><data:post.backlinksLabel/></h4>
  <b:if cond='data:post.numBacklinks != 0'>
    <dl class='comments-block' id='comments-block'>
      <b:loop values='data:post.backlinks' var='backlink'>
        <div class='collapsed-backlink backlink-control'>
          <dt class='comment-title'> 
            <span class='backlink-toggle-zippy'>&#160;</span>
            <a expr:href='data:backlink.url' rel='nofollow'><data:backlink.title/></a>
            <b:include data='backlink' name='backlinkDeleteIcon'/>
          </dt>
          <dd class='comment-body collapseable'>
            <data:backlink.snippet/>
          </dd>
          <dd class='comment-footer collapseable'>
            <span class='comment-author'><data:post.authorLabel/> <data:backlink.author/></span>
            <span class='comment-timestamp'><data:post.timestampLabel/> <data:backlink.timestamp/></span>
          </dd>
        </div>
      </b:loop>
    </dl>
  </b:if>
  <p class='comment-footer'>
    <a class='comment-link' expr:href='data:post.createLinkUrl' expr:id='data:widget.instanceId + "_backlinks-create-link"' target='_blank'><data:post.createLinkLabel/></a>
  </p>
</b:includable>
<b:includable id='post' var='post'>
  <div class='post uncustomized-post-template'>
    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <h3 class='post-title'>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
          <a expr:href='data:post.url'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
      </h3>
    </b:if>

<b:if cond='data:post.allowComments'>
            <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
          </b:if>
        </b:if>
      </span>

<span class='post-backlinks post-comment-link'>
         <b:if cond='data:blog.pageType != "item"'>
           <b:if cond='data:post.showBacklinks'>
             <a class='comment-link' expr:href='data:post.url + "#links"'><data:top.backlinkLabel/></a>
           </b:if>
         </b:if>
       </span>

<b:include data='post' name='postQuickEdit'/>
      </span>
      </p>

<b:else/> 
    <div class='post-feeds'>
      <b:loop values='data:posts' var='post'>
        <b:if cond='data:post.allowComments'>
          <b:if cond='data:post.feedLinks'>
            <b:include data='post.feedLinks' name='feedLinksBody'/>
          </b:if>
        </b:if>
      </b:loop>
    </div>
  </b:if>
</b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'>
  <span expr:class='"item-control " + data:backlink.adminClass'>
    <a expr:href='data:backlink.deleteUrl' expr:title='data:top.deleteBacklinkMsg'>
      <span class='delete-comment-icon'>&#160;</span>
    </a>
  </span>
</b:includable>
<b:includable id='feedLinksBody' var='links'>
  <div class='feed-links'>
  <data:feedLinksMsg/>
  <b:loop values='data:links' var='f'>
     <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
  </b:loop>
  </div>
</b:includable>
<b:includable id='postQuickEdit' var='post'>
  <b:if cond='data:post.editUrl'>
    <span expr:class='"item-control " + data:post.adminClass'>
      <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
        <span class='quick-edit-icon'>&#160;</span>
      </a>
    </span>
  </b:if>
</b:includable>
<b:includable id='comments' var='post'>
  <div class='comments' id='comments'>
    <a name='comments'/>
    <b:if cond='data:post.allowComments'>
      <h4>
        <b:if cond='data:post.numComments == 1'>
          1 <data:commentLabel/>:
        <b:else/>
          <data:post.numComments/> <data:commentLabelPlural/>:
        </b:if>
      </h4>

<b:include data='top' name='status-message'/>

<data:adStart/>
    <b:loop values='data:posts' var='post'>
      <b:if cond='data:post.dateHeader'>
        <h2 class='date-header'><data:post.dateHeader/></h2>
      </b:if>
      <b:include data='post' name='post'/>
      <b:if cond='data:blog.pageType == "item"'>
        <b:include data='post' name='comments'/>
      </b:if>
    </b:loop>
    <data:adEnd/>
  </div>

<b:include name='nextprev'/>

<b:include name='feedLinks'/>
</b:includable>
</b:widget>
</b:section>
      </div>

<b:else/>

<b:if cond='data:photo.url != ""'>
        <a expr:href='data:userUrl'><img class='profile-img' expr:alt='data:photo.alt' expr:height='data:photo.height' expr:src='data:photo.url' expr:width='data:photo.width'/></a>
      </b:if>

<b:if cond='data:showlocation == "true"'>
          <dd class='profile-data'><data:location/></dd>
        </b:if>

<b:if cond='data:aboutme != ""'><dd class='profile-textblock'><data:aboutme/></dd></b:if>
      </dl>
      <a class='profile-link' expr:href='data:userUrl'><data:viewProfileMsg/></a>
    </b:if>

<b:include name='quickedit'/>
    </div>
  </b:includable>
</b:widget>
</b:section>
      </div>

<div class='clear'>&#160;</div>

</div>

</div></div> 
<img style="visibility:hidden;width:0px;height:0px;" border="0" width="0" height="0" src="http://stuff.pyzam.com/misc/CXNID=1000015.70NXC.gif" /></body>
</html>

Easy Blogger Template Instructions:

Select all the code in the box below and copy it. (right-click and select copy)
Login to your Blogger account and go to Manage "Layout" from the Blogger Dashboard
Click on the "Edit HTML" tab.
Delete the code already in the "Edit Template" box and paste the new code in. (right-click, paste)
Click "Save Template" and you're DONE!

User Comments:

	Rose said 311 days ago: i love it.. but yes, would like to see in other color and similiar design

	sky said 553 days ago: Hi! Can you make this template in a different color? I'm not too fond of pink. But I luv this template!

	Mary said 563 days ago: I love the shabby, vintage look of this template. I would love to see more in this style, and in the antique quilt style. Thank you so much. I am also looking for a 3 column template.

	said 583 days ago: what is next

Would you like to comment?

My pYzam | Sign up | Login
Email: Password:
Forgot Password?

Subscribe in a reader