Friday, November 11, 2011

Old Template HTML Code To Let Go

Blog preview. Click untuk jelas.

Sekarang blog dah convert ke blogskin. So rasa macam murah hati sikit nak sedekah code template lama. Siapa yang nak, bolehlah ambik buat basecode untuk korang edit semula background, blockquote bla3. Tak perlu kredit, just komen kat sini untuk bagitahu korang ambik pun dah cukup. Huhu baik betul aku. Wek :p Background credit untuk template ni ialah FPA. Dats all. Selamat mengedit dan kalau ada apa-apa masalah, jangan segan silu tanya  (^.^)v   Bawah ni rules and regulations untuk guna code ni:

HEADER: 
Width harus 800px dan height harus 270px. Tujuan untuk make sure header korang bersambung dengan body blog. Header transparent digalakkan. Boleh upload header macam biasa, tapi tick 'Instead of blog description and blog title".

BACKGROUND: 
Kalau nak tukar background, boleh refer tutorial INI

SIDEBAR WIDGET: 
Sidebar widget kat sebelah kanan sebenarnya. Huhu gambar bawah atas screenshot lama. Untuk sidebar, ikut creativity sendiri ek.


<?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 expr:dir='data:blog.languageDirection' 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>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.post img&quot;).fadeTo(&quot;slow&quot;, 1.0);
$(&quot;.post img&quot;).hover(function(){
$(this).fadeTo(&quot;slow&quot;, 0.5);
},function(){
$(this).fadeTo(&quot;slow&quot;, 1.0);
});
});
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.latest_img&quot;).fadeTo(&quot;slow&quot;, 1.0);
$(&quot;.latest_img&quot;).hover(function(){
$(this).fadeTo(&quot;slow&quot;, 0.5);
},function(){
$(this).fadeTo(&quot;slow&quot;, 1.0);
});
});
</script>
    <b:include data='blog' name='all-head-content'/>
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>
    <b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name:     Minima
Date:     26 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */

#navbar-iframe { display: none !important; }

/* Variable definitions
   ====================
   <Variable name="bgcolor" description="Page Background Color"
             type="color" default="#fff" value="#eeeeee">
   <Variable name="textcolor" description="Text Color"
             type="color" default="#333" value="#666666">
   <Variable name="linkcolor" description="Link Color"
             type="color" default="#58a" value="#666666">
   <Variable name="pagetitlecolor" description="Blog Title Color"
             type="color" default="#666" value="#666666">
   <Variable name="descriptioncolor" description="Blog Description Color"
             type="color" default="#999" value="#999999">
   <Variable name="titlecolor" description="Post Title Color"
             type="color" default="#c60" value="#613645">
   <Variable name="bordercolor" description="Border Color"
             type="color" default="#ccc" value="transparent">
   <Variable name="sidebarcolor" description="Sidebar Title Color"
             type="color" default="#999" value="#999999">
   <Variable name="sidebartextcolor" description="Sidebar Text Color"
             type="color" default="#666" value="#999999">
   <Variable name="visitedlinkcolor" description="Visited Link Color"
             type="color" default="#999" value="#777777">
   <Variable name="bodyfont" description="Text Font"
             type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Georgia, Utopia, 'Palatino Linotype', Palatino, 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, 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">
   <Variable name="startSide" description="Side where text starts in blog language"
             type="automatic" default="left" value="left">
   <Variable name="endSide" description="Side where text ends in blog language"
             type="automatic" default="right" value="right">
*/

/* Use this with templates/template-twocol.html */

body {
  background:$bgcolor;background-image:url("http://4.bp.blogspot.com/-BMUrLSdYV54/TnLR1blrcxI/AAAAAAAABMw/fUCPWKbNRgA/s1600/sfwbb7.jpg");background-position: 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 {
border-bottom:1px solid #a4a4a4;
cursor: url(http://cur.cursors-4u.net/others/oth-6/oth589.cur), progress;
}
a.navi:hover {
background:#414141;
color:#FF4C4F;
-webkit-transition:1s;
border-bottom:0px solid #000000;
}

::-webkit-scrollbar {
height:12px;
width: 12px;
background: #ffffff
}
::-webkit-scrollbar-thumb {
background-color: #BDBDBD;
-moz-border-radius: 10px;
border-radius: 10px;
}

  color:$titlecolor;
  text-decoration:underline;
}
a img {
  border-width:0;
  }

/* Header
-----------------------------------------------
 */

#header-wrapper {
  width:840px;
  height: 220px;
  margin:0 auto 10px;
  border:0px solid $bordercolor;
  }

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

#header {
  margin: 5px;
  border:0px solid $headerBgColor;
  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:700px;
  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 {
  background-color: transparent;
  width: 840px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }

#content-wrapper {
-moz-border-radius-topleft: 35px;
-moz-border-radius-bottomright: 35px;
-moz-border-radius-topright: 35px;
-moz-border-radius-bottomleft: 35px;
-webkit-border-top-left-radius: 35px;
-webkit-border-top-right-radius: 35px;
-webkit-border-bottom-left-radius: 35px;
-webkit-border-bottom-right-radius: 35px;
-moz-box-shadow: 0 0 8px black;
-webkit-box-shadow: 0 0 8px black;
box-shadow: 0 0 8px #BDBDBD;

Read more: http://www.lassiegewdix.com/search/label/tutorial#ixzz1aj14V9ki
-moz-border-radius-topleft: 35px;
-moz-border-radius-bottomright: 35px;
-moz-border-radius-topright: 35px;
-moz-border-radius-bottomleft: 35px;
-webkit-border-top-left-radius: 35px;
-webkit-border-top-right-radius: 35px;
-webkit-border-bottom-left-radius: 35px;
-webkit-border-bottom-right-radius: 35px;
-top-right-radius: 35px;
border-top-left-radius: 35px;
border-top-right-radius: 35px;
border-bottom-left-radius: 35px;
border-bottom-right-radius: 35px;
background-color:#ffffff;
}

#main-wrapper {
-moz-border-radius-topleft: 35px;
-moz-border-radius-bottomright: 35px;
-moz-border-radius-topright: 35px;
-moz-border-radius-bottomleft: 35px;
-webkit-border-top-left-radius: 35px;
-webkit-border-top-right-radius: 35px;
-webkit-border-bottom-left-radius: 35px;
-webkit-border-bottom-right-radius: 35px;
-top-right-radius: 35px;
border-top-left-radius: 35px;
border-top-right-radius: 35px;
border-bottom-left-radius: 35px;
border-bottom-right-radius: 35px;
  padding-left: 30px;
  padding-right: 10px;
  background-color: #FFFFFF;
  width: 500px;
  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 */
  }

#sidebar-wrapper {
-moz-border-radius-topleft: 35px;
-moz-border-radius-bottomright: 35px;
-moz-border-radius-topright: 35px;
-moz-border-radius-bottomleft: 35px;
-webkit-border-top-left-radius: 35px;
-webkit-border-top-right-radius: 35px;
-webkit-border-bottom-left-radius: 35px;
-webkit-border-bottom-right-radius: 35px;
-top-right-radius: 35px;
border-top-left-radius: 35px;
border-top-right-radius: 35px;
border-bottom-left-radius: 35px;
border-bottom-right-radius: 35px;
  padding-left: 18px;
  padding-right: 2px;
  background-color: #ffffff;
  width: 270px;
  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 */
}


/* Headings
----------------------------------------------- */

h2 {
  text-align:center;
  padding-left: 15px;
  padding-right: 15px;
  margin:1.5em 0 .75em;
  font-family:"Rockwell",Georgia,Serif;
  line-height: 1.4em;
  text-transform:lowercase uppercase;
  letter-spacing:.2em;
  color:$sidebarcolor;
font-size:18px;
color:#BDBDBD;

}


/* Posts
-----------------------------------------------
 */
h2.date-header {
  margin:1.5em 0 .5em;
  }

.post {
 padding-left: 10px;
 padding-right: 10px;
 background: url(http://cdn.pimpmyspace.org/media/pms/c/pe/e9/97/sawa-.png);
 background-repeat: no-repeat;
 background-position: bottom center;
 margin:.5em 0 1.5em;
 border-bottom:0px dotted $bordercolor;
 padding-bottom:5.5em;
}

.post h3 {
  text-align:center;
  margin:.25em 0 0;
  font-family:"",Georgia,Serif;
  text-shadow: 2px 2px 3px #A4A4A4; /* JANGAN DIRUBAH */
  padding:0 0 4px;
  font-size:150%;
  font-weight:normal;
  line-height:1.4em;
  color:#BDBDBD;
}

.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:0 0 .75em;
  line-height:1.6em;
}

.post-body blockquote {
  line-height:1.3em;
}

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

.comment-link {
  margin-$startSide:.6em;
}
.post img, table.tr-caption-container {
  padding:4px;
  border:1px solid $bordercolor;
}
.tr-caption-container img {
  border: none;
  padding: 0;
}
.post blockquote {
background-image: url("http://1.bp.blogspot.com/-FU6b6tiFDJ8/TnmyB1KGtuI/AAAAAAAABiY/hN1n3KglmDs/s1600/bihastripe4.png"
);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 350ms;
padding:5px;
border-left:10px #BDBDBD groove;
text-align:left;
opacity:1;
}
}

.post blockquote p {
  margin:.75em 0;
}

/* Comments
----------------------------------------------- */

#comments h4 {
margin: 1em 3em;
font-weight: bold;
line-height: 1.4em;
}
#comments-block {
margin-left:1.5em;
line-height:1.6em;
background: #ffffff;
color: black;
padding: 1em;
border:0px solid #ffffff;
}
#comments-block .comment-author {margin:.5em 0;}
#comments-block .comment-body {margin:.25em 0 0; background: #ffffff;}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
padding: 20px 10px 10px 10px;
background: #D8D8D8 url(http://4.bp.blogspot.com/-BMUrLSdYV54/TnLR1blrcxI/AAAAAAAABMw/fUCPWKbNRgA/s1600/sfwbb7.jpg) repeat top left;
-moz-border-radius: 25px 25px / 25px 25px;
border-radius: 5px 5px / 5px 5px;
Border: 3px solid #D8D8D8;
}



#blog-pager-newer-link {
float: $startSide;
margin-$startSide: 13px;
}
#blog-pager-older-link {
float: $endSide;
margin-$endSide: 13px;
}

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

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

/* Sidebar Content
----------------------------------------------- */
.sidebar {
  color: $sidebartextcolor;
  line-height: 1.5em;
 }

.sidebar ul {
  margin:0 0 1.25em;
  padding:0 0px;
  list-style: none;
}
.sidebar ul li {
 background:url("http://www.attheworks.org/Images/1008838wybxuht5da.gif")  no-repeat 2px .25em;
 margin:0;
 padding:3px 0 10px 27px;
 margin-bottom:2px;
 line-height:1.5em;

.main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

.sidebar .widget {
border-bottom:0px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 50px;
background-image: url(http://img135.imageshack.us/img135/5795/shabbyblogsdividerg.jpg);
background-position: bottom;
background-repeat: no-repeat;
}

.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:0px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
}
a.navigation {
background: #ff0000;
color: #ffffff;
margin: 4px;
padding: 5px;
border-width: 0;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
}
a.navigation:hover {
background: #404040;
color: #ffffff;
text-decoration: none;
}

.post img{opacity:.5;filter:alpha(opacity=100); this.style.opacity=1}
.post img:hover{opacity:1;filter:alpha(opacity=1); this.style.opacity=6}

#comments h4 {
margin: 1em 3em;
font-weight: bold;
line-height: 1.4em;
color: #F78181;
}
#comments-block {
margin-left:1.5em;
line-height:1.6em;
background: #F78181;
color: black;
padding: 1em;
border:2px dashed #black;
}
#comments-block .comment-author {margin:.5em 0;}
#comments-block .comment-body {margin:.25em 0 0; background: #ffffff;}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
padding: 20px 10px 10px 10px;
background: #f3a64c url(http://4.bp.blogspot.com/-BMUrLSdYV54/TnLR1blrcxI/AAAAAAAABMw/fUCPWKbNRgA/s1600/sfwbb7.jpg) no-repeat top left;
}
.deleted-comment {
font-style:italic;
color:gray;
}

]]></b:skin>
  <style type='text/css'>

</style>

<style type='text/css'>
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}
a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js' type='text/javascript'/>

</head>

  <body>
 
  <div id='outer-wrapper'><div id='wrap2'>

    <!-- skip links for text browsers -->
    <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='3' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='&quot;Love Journal&quot; (Header)' type='Header'/>
</b:section>
    </div>

    <div id='content-wrapper'>

      <div id='crosscol-wrapper' style='text-align:center'>
        <b:section class='crosscol' id='crosscol'>
<b:widget id='Text1' locked='false' title='' type='Text'/>
</b:section>
      </div>

      <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:section>
      </div>

      <!-- spacer for skins that want sidebar and main to be the same height-->
      <div class='clear'>&#160;</div>

    </div> <!-- end content-wrapper -->

    <div id='footer-wrapper'>
      <b:section class='footer' id='footer'>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
</b:section>
    </div>

  </div></div> <!-- end outer-wrapper -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js' type='text/javascript'/>
<script src='https://sites.google.com/site/jquery01/jquery.lazyload.mini.js?ver=1.5.0' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($){
if (navigator.platform == &quot;iPad&quot;) return;
jQuery(&quot;img&quot;).lazyload({
effect:&quot;fadeIn&quot;,
placeholder: &quot;http://3.bp.blogspot.com/_LZtXSNcp76A/THkEtEOZfrI/AAAAAAAABRo/IARVMD_8TwA/s1600/grey.gif&quot;
});
});
</script>

   
</body>
</html>
               

4 comments:

  1. baru guna old template aritu..lpas tu trus give up! >__<

    ReplyDelete
  2. ni pun sbnrnye hampir give up. tp layankan jgk edit code ni. last2 pheww jadi.. ^^'

    ReplyDelete
  3. huhu..template lama ninie tu ape?washed denim ke?minima ke?

    kite pon pkai blogskin kat blog lagi satu..serius suke sebab dah byk kali tukar2..hahah..gile kan.tpi bgi kt mudah je edit kod dia tu..

    ReplyDelete
  4. template lama dl mimina. hehe blogskin mula2 agak payah nak paham code dia sbb dia berkait. tp lama2 ok dah. hehe

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...