edit photoshop: HTML template blogger

( tinggal copypaste tulisan yg berwarna merah )

1. HTML Template bird :

<?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: Birds----- *Designer: J.aghili ----- * URL: www.finalsense.com ------ * Date: March 2007 ----- */
/* Variable definitions
   ====================
   <Variable name="textcolor" description="Text Color"
             type="color" default="#369">
   <Variable name="pagetitlecolor" description="Page Header Color"
             type="color" default="#666">
   <Variable name="datecolor" description="Date Header Color"
             type="color" default="#ccc">
   <Variable name="titlecolor" description="Post Title Color"
             type="color" default="#f63">
   <Variable name="footercolor" description="Post Footer Color"
             type="color" default="#999">
   <Variable name="sidebartextcolor" description="Sidebar Text Color"
             type="color" default="#999">
   <Variable name="sidebarcolor" description="Sidebar Title Color"
             type="color" default="#666">
   <Variable name="linkcolor" description="Link Color"
             type="color" default="#69c">
   <Variable name="visitedlinkcolor" description="Visited Link Color"
             type="color" default="#666699">
   <Variable name="descriptioncolor" description="Description Color"
             type="color" default="#eddeb5" value="#eddeb5">
   <Variable name="bodyfont" description="Text Font"
             type="font"
             default="normal normal 100% Verdana, sans-serif">
   <Variable name="pagetitlefont" description="Page Header Font"
             type="font" default="normal normal 100% 'Georgia','Times New Roman'">
   <Variable name="titlefont" description="Post Title Font"
             type="font" default="normal bold 130% 'Georgia','Times New Roman'">
   <Variable name="sidebarheaderfont" description="Sidebar Title Font"
             type="font" default="normal bold 130% 'Georgia','Times New Roman'">
<Variable name="descriptionfont" description="Description Font"
             type="font" default="normal normal 80% 'Verdana','Arial'" value="normal normal 80% 'Verdana','Arial'">
*/
/* ---( page defaults )--- */
body { margin: 0px; padding: 0px; font-size: small; text-align: center; color: #333333; background: #ffffff; }
blockquote { margin: 0 0 0 30px; padding: 10px 0 0 20px; font-size: 88%; line-height: 1.5em; color: #666; }
blockquote p { margin-top: 0; }
abbr, acronym { cursor: help; font-style: normal; }
code { color: #f63; }
hr { display: none; }
img { border: none; }
/* unordered list style */
ul { list-style: none; margin-left: 10px; padding: 0; }
li { list-style: none; padding-left: 14px; margin-bottom: 3px; }
/* links */
a:link { color: #89b0d8;text-decoration: none; }
a:visited { color: #89b0d8;text-decoration: none; }
a:hover { color: red;text-decoration: none; }
a:active { color: #89b0d8; text-decoration: none; }
/* ---( layout structure )---*/
#outer-wrapper { width: 920px; margin: 0px auto 0;   text-align: justify; font: normal normal 100% Verdana, sans-serif; }
#content-wrapper { margin-left: 24px; /* to avoid the border image */ width: 865px; }
#main { float: right; width: 585px; margin: 0px; padding: 0px 0px 0px 15px; line-height: 1.5em; 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 { float: left; width: 225px; padding: 0px; font-size: 85%; color: #ffffff; line-height: 1.4em; 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 */ }
#center {background: #eaf3f5 url('http://lh3.google.com/image/jvdmds/RfYVb0sJ2PI/AAAAAAAAAI8/7QSzAxhThtA/C%3A%5CDocuments%20and%20Settings%5CAdministrator%5CMy%20Documents%5CMy%20Pictures%5Cnew%5Cbird-2.jpg') repeat-y top left;}
/* ---( header and site name )--- */
#header-wrapper { margin: 0; font: normal normal 100%'Georgia','Times New Roman'; }
#header { margin: 0; height:314px; width:920; color: #ffffff;   background: url('http://lh3.google.com/image/jvdmds/RfYVb0sJ2NI/AAAAAAAAAIs/QxhY6vxnBUs/C%3A%5CDocuments%20and%20Settings%5CAdministrator%5CMy%20Documents%5CMy%20Pictures%5Cnew%5Cbird-1.jpg') no-repeat top left; }
#header h1 { width: 500px; font-size: 240%; padding: 135px 0px 0px 40px; filter: glow(color=#000000,Strength=5); text-align: left;}
#header h1 a { text-decoration: none; color: red; }
#header h1 a:hover { color: #eee; }
#header .description { margin:-10px 0px 0px 40px; text-align:left; padding-bottom:10px; width:500px; font: $descriptionfont; color: $descriptioncolor; }
/* ---( main column )--- */
h2.date-header { margin-top: 0; padding-left: 10px; font-size: 90%; color: #cccccc; }
.post h3 { margin-top: 0; font: normal bold 130% 'Georgia','Times New Roman'; color: #ff6633; }
.post { border-bottom: 1px solid #ccc; margin-left:0; margin-right:0; margin-top:0; margin-bottom:1em; padding-left:10px; padding-right:0; padding-top:0; padding-bottom:1em }
.post h3 a {color: #ff9933; text-decoration: none;}
.post h3 a:hover {   color: #369; text-decoration: none; }
.post-footer { margin: 0; padding: 0px; font-size: 88%; color: #999999; }
.post img { padding: 6px; border-top: 1px solid #ddd; border-left: 1px solid #cccccc; border-bottom: 1px solid #c0c0c0; border-right: 1px solid #c0c0c0; }
.feed-links { clear: both; line-height: 2.5em;}
#blog-pager-newer-link { float: right; }
#blog-pager-older-link {   float: left; }
#blog-pager {     text-align: center; }
/* comment styles */
#comments { padding-top: 10px; font-size: 85%; line-height: 1.5em; color: #666; }
#comments h4 { margin: 20px 0 15px 0; padding: 8px 0 0 40px; font-family: "Lucida Grande", "Trebuchet MS"; font-size: 130%; color: #666; height: 29px !important; /* for most browsers */ height /**/:37px; /* for IE5/Win */ }
#comments ul { margin-left: 0; }
#comments li { background: none; padding-left: 0; }
.comment-body { padding: 0 10px 0 25px; }
.comment-body p { margin-bottom: 0; }
.comment-author { margin: 4px 0 0 0; padding: 0 10px 0 60px; color: #999;    }
.comment-footer { border-bottom: 1px solid #ddd; padding-bottom: 1em;}
.deleted-comment { font-style:italic; color:gray; }
/* ---( sidebar )--- */
.sidebar h2 {   margin: 0 0 0 0; padding: 10px 0 0 0px; font: normal bold 130% 'Lucida Grande','Trebuchet MS'; color: #cccccc; height: 32px; height: 32px !important; /* for most browsers */ height /**/:57px; /* for IE5/Win */ }
.sidebar .widget { margin: 0; padding: 0 0 10px 10px; border-bottom: 0px solid #ddd;}
.sidebar a {color: #ffffff; text-decoration: none;}
.sidebar a:hover {color: #000000; }
.sidebar li { padding-left: 5px; }
.profile-textblock { margin:.5em 0 .5em; }
.profile-img { float: left; margin: 0 5px 5px 0; border: 1px solid #ddd; padding: 4px;}
/* ---( footer )--- */
.clear { /* to fix IE6 padding-top issue */ clear: both; }
#footer-wrapper { margin: 0; padding: 0 0 0 0; font-size: 85%; }
#footer { margin: 0; width: 920px; height:226px; padding: 0px; background: url('http://lh3.google.com/image/jvdmds/RfYVb0sJ2QI/AAAAAAAAAJE/lpdrj5Da4D8/C%3A%5CDocuments%20and%20Settings%5CAdministrator%5CMy%20Documents%5CMy%20Pictures%5Cnew%5Cbird-3.jpg') no-repeat top left; }
/** Page structure tweaks for layout editor wireframe */
body#layout #outer-wrapper,
body#layout #main,
body#layout #sidebar {   padding-top: 0; margin-top: 0;}
body#layout #outer-wrapper,body#layout #content-wrapper {   width: 740px;}
body#layout #sidebar {   margin-right: 0; margin-bottom: 1em; }
body#layout #header,body#layout #footer,
body#layout #main { padding: 0; }
body#layout #content-wrapper {   margin: 0px; }
#navbar-iframe {   height:0px;   visibility:hidden;   display:none   }
]]></b:skin>
</head>
<body>
<div id='outer-wrapper'><div id='wrap2'>
    
    <span id='skiplinks' style='display:none;'>
      <a href='#main'>skip to main </a> |
      <a href='#sidebar'>skip to sidebar</a>
    </span>
    <div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Wordpress (Header)' type='Header'/>
</b:section>
    </div>
<div id='center'>
    <div id='content-wrapper'>
      <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>
      <div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
      </div>
      
      <div class='clear'> </div>
    </div> 
     </div> 
    <div id='footer-wrapper'>
      <b:section class='footer' id='footer'/>
    </div>
</div></div> 
</body>
</html>

2. HTML Template Keyboard

<?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: Keyboard----- *Designer: J.aghili ----- * URL: www.finalsense.com ------ * Date: March 2007 ----- */
/* Variable definitions
   ====================

   <Variable name="textcolor" description="Text Color"
             type="color" default="#666" value="#666666">

   <Variable name="PageBgColor" description="Page Background Color"
             type="color" default="#737373" value="#737373">

   <Variable name="pagetitlecolor" description="Page Header Color"
             type="color" default="#999" value="#999999">

   <Variable name="datecolor" description="Date Header Color"
             type="color" default="#ccc" value="#cccccc">

   <Variable name="titlecolor" description="Post Title Color"
             type="color" default="#f63" value="#ff6633">

   <Variable name="footercolor" description="Post Footer Color"
             type="color" default="#999" value="#999999">

   <Variable name="sidebartextcolor" description="Sidebar Text Color"
             type="color" default="#369" value="#336699">

   <Variable name="sidebarcolor" description="Sidebar Title Color"
             type="color" default="#999" value="#999999">

   <Variable name="sidebarlink" description="Sidebar Link Color"
             type="color" default="#369" value="#336699">

   <Variable name="sidebarhover" description="Sidebar Hover Color"
             type="color" default="#000" value="#000000">

   <Variable name="linkcolor" description="Link Color"
             type="color" default="#69c" value="#6699cc">

   <Variable name="linkhover" description="Link Hover Color"
             type="color" default="#ff0000" value="#ff0000">

   <Variable name="visitedlinkcolor" description="Visited Link Color"
             type="color" default="#669" value="#666699">

   <Variable name="bodyfont" description="Text Font"
             type="font" default="normal normal 82% Verdana, sans-serif" value="normal normal 87% Verdana, sans-serif">

   <Variable name="pagetitlefont" description="Page Header Font"
             type="font" default="normal bold 200% 'Georgia','Times New Roman'" value="normal bold 200% 'Georgia','Times New Roman'">

   <Variable name="titlefont" description="Post Title Font"
             type="font" default="normal bold 110% 'Georgia','Times New Roman'" value="normal bold 110% 'Georgia','Times New Roman'">

   <Variable name="sidebarheaderfont" description="Sidebar Title Font"
             type="font" default="normal bold 105% 'Georgia','Times New Roman'" value="normal bold 105% 'Georgia','Times New Roman'">

   <Variable name="descriptionfont" description="Description Font"
             type="font" default="normal normal 80% 'Verdana','Arial'" value="normal normal 80% 'Verdana','Arial'">

   <Variable name="descriptioncolor" description="Description Color"
             type="color" default="#fff" value="#fefefe">

   <Variable name="Commentscolor" description="Comments Text Color"
             type="color" default="#666" value="#666">
*/

/* ---( page defaults )--- */
body { margin: 0px; padding: 0px; text-align: left; font:$bodyfont; color:$textcolor; background: $PageBgColor; }
blockquote { margin: 0 0 0 30px; padding: 10px 0 0 20px; font-size: 88%; line-height: 1.5em; color: #666; }
blockquote p { margin-top: 0; }
abbr, acronym { cursor: help; font-style: normal; }
code { color: #f63; }
hr { display: none; }
img { border: none; }

/* unordered list style */
ul { list-style: none; margin-left: 10px; padding: 0; }
li { list-style: none; padding-left: 14px; margin-bottom: 3px; }

/* links */
a:link { color: $linkcolor; text-decoration: none; }
a:visited { color: $visitedlinkcolor; text-decoration: none; }
a:hover { color: $linkhover; text-decoration: none; }
a:active { color: $visitedlinkcolor; text-decoration: none; }

/* ---( layout structure )---*/
#outer-wrapper { width: 901px; margin: 0px auto 0;   text-align: justify; }
#content-wrapper { margin-left: 10px; /* to avoid the border image */ width: 880px; }
#main { float: left; width: 440px; margin: 5px; padding: 0px 5px 0px 0px; line-height: 1.5em; 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 { float: right; width: 190px; padding-right: 17px; font-size: 85%; color: $sidebartextcolor; line-height: 1.4em; 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 */ }
#ads-wrapper {float: left; width: 210px; padding-left: 0px; 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 */}
#ads{font-size: 100%; color: $sidebartextcolor; padding: 0px; }
#center {background: #ffffff url('http://lh6.google.com/image/jvdmds/Rf39M0sJ29I/AAAAAAAAAOo/YCwrelP-pQ0/F%3A%5Ctexts%5Cnew-temp%5Cbeta%5C3%5Ckey-2.jpg') repeat-y top left;}

/* ---( header and site name )--- */
#header-wrapper { margin: 0; }
#header { margin: 0; height:280px; width:901; color: $pagetitlecolor;   background: url('http://lh4.google.com/image/jvdmds/Rf38JUsJ21I/AAAAAAAAANo/bMkzjCKQH9E/key-1.jpg') no-repeat top left; }
#header h1 { font: $pagetitlefont; padding: 50px 20px 0px 30px; text-shadow: #cccccc 2px 2px 2px; text-align: left;}
#header h1 a { text-decoration: none; color: $pagetitlecolor; }
#header h1 a:hover { color: #eee; }
#header .description { margin:0 5px 5px; text-align: left; padding:15px; width:55%;    line-height: 1.4em; font: $descriptionfont; color: $descriptioncolor; }

/* ---( main column )--- */
h2.date-header { margin-top: 0; padding-left: 10px; font-size: 90%; color: $datecolor; }
.post h3 { margin-top: 0; font: $titlefont; color: $titlecolor; }
.post { border-bottom: 1px solid #ddd; margin-left:0; margin-right:0; margin-top:0; margin-bottom:1em; padding-left:10px; padding-right:0; padding-top:0; padding-bottom:1em }
.post h3 a {text-decoration: none;}
.post h3 a:hover {   color: #369; text-decoration: none; }
.post-footer { margin: 0; padding: 0px; font-size: 88%; color:$footercolor; }
.post img { padding: 6px; border-top: 1px solid #ddd; border-left: 1px solid #cccccc; border-bottom: 1px solid #c0c0c0; border-right: 1px solid #c0c0c0; }
.feed-links { clear: both; line-height: 2.5em;}
.blog-feeds { text-align: right;}
#blog-pager-newer-link { float: left; }
#blog-pager-older-link {   float: right; }
#blog-pager {     text-align: center; }

/* comment styles */
#comments { padding-top: 10px; font-size: 85%; line-height: 1.5em; color: $Commentscolor; }
#comments h4 { margin: 20px 0 15px 0; padding: 8px 0 0 40px; font-family: "Lucida Grande", "Trebuchet MS"; font-size: 110%; color: $Commentscolor; height: 30px !important; /* for most browsers */ height /**/:37px; /* for IE5/Win */ }
#comments ul { margin-left: 0; }
#comments li { background: none; padding-left: 0; }
.comment-body { padding: 0 10px 0 25px; }
.comment-body p { margin-bottom: 0; }
.comment-author { margin: 4px 0 0 0; padding: 0 10px 0 60px; color: #999;    }
.comment-footer { border-bottom: 1px solid #ddd; padding-bottom: 1em;}
.deleted-comment { font-style:italic; color:gray; }

/* ---( sidebar )--- */
.sidebar h2 {   margin: 0 0 0 0; padding: 10px 0 0 0px; font: $sidebarheaderfont; color: $sidebarcolor; height: 32px !important; /* for most browsers */ height /**/:57px; /* for IE5/Win */ }
.sidebar .widget { margin: 0; padding: 0 0 5px 10px;}
.sidebar a {color: $sidebarlink; text-decoration: none;}
.sidebar a:hover {color: $sidebarhover; }
.sidebar li { padding-left: 5px; }
.profile-textblock { margin:.5em 0 .5em; }
.profile-img { float: left; margin: 0 5px 5px 0; border: 1px solid #ddd; padding: 4px;}

/* ---( footer )--- */
.clear { /* to fix IE6 padding-top issue */ clear: both; }
#footer-wrapper { margin: 0; padding: 0 0 0 0; font-size: 85%; }
#footer { margin: 0; width: 901px; height:72px; padding: 0px; background: url('http://lh6.google.com/image/jvdmds/Rf38J0sJ22I/AAAAAAAAANw/nFi4HqWUvYw/key-3.jpg') no-repeat top left; }

/** Page structure tweaks for layout editor wireframe */
body#layout #outer-wrapper,
body#layout #main,
body#layout #sidebar {   padding-top: 0; margin-top: 0;}
body#layout #outer-wrapper,body#layout #content-wrapper {   width: 901px;}
body#layout #sidebar {   margin-right: 0; margin-bottom: 1em; }
body#layout #header,body#layout #footer,
body#layout #main { padding: 0; }
body#layout #content-wrapper {   margin: 0px; }
#navbar-iframe {   height:0px;   visibility:hidden;   display:none   }

]]>
</b:skin>
</head>
<body>
<div id='outer-wrapper'>
<div id='wrap2'>

<span id='skiplinks' style='display:none;'>
<a href='#main' shape='rect'>skip to main</a>
|
<a href='#sidebar' shape='rect'>skip to sidebar</a>
</span>
<div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Wordpress (Header)' type='Header'/>
</b:section>
    </div>
<div id='center'>
<div id='content-wrapper'>
<div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
           <b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
           <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
        </b:section>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog' />
</b:section>
</div>
<div id='ads-wrapper'>
<b:section class='sidebar' id='ads' preferred='yes'>
<b:widget id='Label1' locked='false' title='Ads' type='Label' />
<b:widget id='HTML1' locked='false' title='Text-Ads' type='HTML' />
<b:widget id='HTML2' locked='false' title='Links' type='HTML' />
<b:widget id='HTML3' locked='false' title='Feeds' type='HTML' />
</b:section>
</div>

<div class='clear'> </div>
</div>

</div>
<div id='footer-wrapper'>
<b:section class='footer' id='footer' />
</div>
</div>
</div>

</body>
</html>

edit photoshop

Monday, July 4, 2011

HTML template blogger

No comments:

Post a Comment