Monday, 24 October 2011

Purple Stripes Template


Click to enlarge
wow \o/ ! It took me 1 week and four days to do this thing . Lebih terok dari yg Grey Stripes tu  haha ! niway , heres the code . 
What you need to do is ;
1. Copy all the codes
2. Paste it to your HTML .//psst ! don't need to tick to expand okay ?
<?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>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>
    <b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name:     Washed Denim
Designer: Darren Delaye
URL:      www.DarrenDelaye.com
Date:     11 Jul 2006
-----------------------------------------------
*/
 #navbar-iframe {
display: none !important;
}
/* Variable definitions
   ====================
 <Variable name="bgColor" description="Page Background Color"
           type="color" default="#ffffff" value="#ffffff">
 <Variable name="textColor" description="Text Color"
           type="color" default="#333333" value="#333333">
 <Variable name="linkColor" description="Link Color"
           type="color" default="#336699" value="#336699">
  <Variable name="headerBgColor" description="Page Header Background Color"
           type="color" default="transparent" value="transparent">
 <Variable name="headerTextColor" description="Page Header Text Color"
           type="color" default="transparent" value="transparent">
 <Variable name="headerCornersColor" description="Page Header Corners Color"
           type="color" default="transparent" value="transparent">
 <Variable name="mainBgColor" description="Main Background Color"
           type="color" default="#ffffff" value="#ffffff">
 <Variable name="borderColor" description="Border Color"
           type="color" default="#ffffff" value="#ffffff">
 <Variable name="dateHeaderColor" description="Date Header Color"
           type="color" default="#999999" value="#999999">
 <Variable name="sidebarTitleBgColor" description="Sidebar Title Background Color"
           type="color" default="#ffffff" value="#ffffff">
 <Variable name="sidebarTitleTextColor" description="Sidebar Title Text Color"
           type="color" default="#333333" value="#333333">
 <Variable name="bodyFont" description="Text Font"
           type="font" default="normal normal 100% Verdana, Arial, Sans-serif;" value="normal normal 100% Verdana, Arial, Sans-serif;">
 <Variable name="headerFont" description="Page Header Font"
           type="font" default="normal normal 210% Verdana, Arial, Sans-serif;" value="normal normal 210% Verdana, Arial, Sans-serif;">
   <Variable name="startSide" description="Start side in blog language"
             type="automatic" default="left" value="left">
   <Variable name="endSide" description="End side in blog language"
             type="automatic" default="right" value="right">
*/
body {
    background: url(http://4.bp.blogspot.com/-A675PTMMsow/TnmyBeCor0I/AAAAAAAABiU/7QaEy7mHSVk/s1600/bihastripe3.png);
    background-attachment: fixed;
    background-repeat: repeat;
    margin: 0;
    padding: 0px;
    font: x-small Verdana, Arial;
    text-align: center;
    color: #000000;
    font-size/* */:/**/small;
    font-size: /**/small;
    letter-spacing:1px;
    }
a:link {
  text-decoration: none;
color: #D0A9F5;
}
a:visited {
  color: $linkColor;
}
a img {
  border-width: 0;
}
#outer-wrapper {
  font: $bodyFont;
}
/* Header
----------------------------------------------- */
#header-wrapper {
  margin:0;
  padding: 0;
  background-color: $headerCornersColor;
  text-align: $startSide;
}
#header {
  width: 762px;
  margin: 0 auto;
  background-color: $headerBgColor;
  color: $headerTextColor;
  padding: 0;
  font: $headerFont;
}
h1.title {
  padding-top: 38px;
  margin: 0 14px .1em;
  line-height: 1.2em;
  font-size: 100%;
}
h1.title a, h1.title a:visited {
  color: $headerTextColor;
  text-decoration: none;
}
#header .description {
  display: block;
  margin: 0 14px;
  padding: 0 0 40px;
  line-height: 1.4em;
  font-size: 50%;
}
                                                             
/* Content
----------------------------------------------- */
.clear {
  clear: both;
}

#content-wrapper {
    width: 760px;
margin: 0 auto;
padding:15px;
text-align: $startSide;
background : url(http://i1218.photobucket.com/albums/dd417/cheesweet/backgroundbody2.gif);
border: 1px solid $borderColor;
border-top: 0;
border-top-left-radius: 25px 25px;
border-top-right-radius: 25px 25px;
border-bottom-left-radius: 25px 25px;
border-bottom-right-radius: 25px 25px;
}
#main-wrapper {
  margin-$startSide: 14px;
  width: 468px;
  float: $startSide;
  background-color: transparent;
  display: inline;       /* fix for doubling margin in IE */
  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 {
  margin-$endSide: 14px;
  width: 240px;
  float: $endSide;
  background-color: transparent;
  display: inline;       /* fix for doubling margin in IE */
  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, h3 {
  margin: 0;
}
/* Posts
----------------------------------------------- */
.date-header {
  margin: 1.5em 0 0;
  font-weight: normal;
  color: $dateHeaderColor;
  font-size: 100%;
}
.post {
  margin: 0 0 1.5em;
  padding-bottom: 1.5em;
}
.post-title {
 border: 1px dashed #BE81F7;
background: url(http://i1218.photobucket.com/albums/dd417/cheesweet/purplestripes-1.png);
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
border-left: 1px solid #999999;
}
.post-title a, .post-title a:visited, .post-title strong {
  text-decoration: none;
  color: $textColor;
  font-weight: bold;
}
.post div {
  margin: 0 0 .75em;
  line-height: 1.3em;
}
.post-footer {
  margin: -.25em 0 0;
  color: $textColor;
  font-size: 87%;
}
.post-footer .span {
  margin-$endSide: .3em;
}
.post img, table.tr-caption-container {
  padding: 4px;
  border: 1px solid $borderColor;
}
.tr-caption-container img {
  border: none;
  padding: 0;
}
.post blockquote {
  background: url( http://i1218.photobucket.com/albums/dd417/cheesweet/purplestripes-1.png);
border-radius: 5px;
border: 2px solid #BE81F7;
margin:1.0em;
padding:5px;
}
.post blockquote:hover {
background-color: #BE81F7;
-webkit-transition-duration: 2.4s;
border-left:9px solid #D0A9F5;
}
.post blockquote p {
  margin: .75em 0;
}
/* Comments
----------------------------------------------- */
#comments h4 {
margin: 1em 3em;
font-weight: bold;
line-height: 1.4em;
color: #ffffff;
}
#comments-block {
margin-left:1.5em;
line-height:1.6em;
background: transparent;
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 .60em;
padding: 5px 5px 5px 5px;
background: url( http://i1218.photobucket.com/albums/dd417/cheesweet/purplestripes-1.png) repeat top left;
-moz-border-radius: 20px 20px / 20px 20px;
border-radius: 5px 5px / 5px 5px;
border: 2px solid #D0A9F5;
}
.deleted-comment {
font-style:underlined;
color:transparent;
}
.feed-links {
clear: both;
line-height: 2.5em;
}
#blog-pager-newer-link {
float: left;
}
#blog-pager-older-link {
float: right;
}
#blog-pager {
text-align: center;
}
/* Sidebar Content
----------------------------------------------- */
.sidebar h2 {
 text-align:right;
background-image:url( http://i1218.photobucket.com/albums/dd417/cheesweet/purplestripes-1.png);
border-bottom: 2px dashed #BE81F7;
margin:1em;
font: normal normal 12px Century Gothic;
color: #4D4D4D;
}
                                                             
.sidebar ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sidebar li {
  margin: 0;
  padding-top: 0;
  padding-$endSide: 0;
  padding-bottom: .5em;
  padding-$startSide: 15px;
  text-indent: -15px;
  line-height: 1.5em;
}
.sidebar {
  color: $textColor;
  line-height:1.3em;
}
.sidebar .widget {
  margin-bottom: 1em;
}
.sidebar .widget-content {
  margin: 0 5px;
}
/* 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-weight: bold;
  line-height: 1.6em;
  font-size: 78%;
}
.profile-datablock {
  margin:.5em 0 .5em;
}
.profile-textblock {
  margin: 0.5em 0;
  line-height: 1.6em;
}
                                                             
/* Footer
----------------------------------------------- */
#footer {
  clear: both;
  text-align: center;
  color: $textColor;
}
#footer .widget {
  margin:.5em;
  padding-top: 20px;
  font-size: 85%;
  line-height: 1.5em;
  text-align: $startSide;
::-webkit-scrollbar { width: 10px; background-color: #FFFFFF; border-right:5px solid white; }
::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment { height: 2px; display: block; background: #FFFFFF;}
::-webkit-scrollbar-track-piece { background-color: #FFFFFF; }
::-webkit-scrollbar-thumb{
background-color: #BE81F7;
; -webkit-border-radius: 400px; border-radius: 400px; }
}
]]></b:skin>
  </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='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Miraa Hussin (Header)' type='Header'/>
</b:section>
    </div>
    <div id='content-wrapper'>
      <div id='crosscol-wrapper' style='text-align:center'>
        <b:section class='crosscol' id='crosscol'/>
      </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:widget id='HTML1' locked='false' title='Big Boss' type='HTML'/>
<b:widget id='Text1' locked='false' title='Blog&apos;s Info' type='Text'/>
<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>
</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'/>
    </div>
  </div></div> <!-- end outer-wrapper -->
</body>
</html>

3. Preview , if you liked it , save .

sorry :') I'm still a beginner , so I'm still learning in this coding things
Share:

7 comments:

Terima kasih kerana sudi membaca , jangan lupa tinggalkan komen :)
Fikir semula sekiranya korang ingin meninggalkan komen lucah, ugutan, mengancam, identiti palsu, dan menyakitkan hati. Baca AKTA 588, AKTA KOMUNIKASI DAN MULTIMEDIA 1998. Oh, sebelum tu, tengok lah site awesome
ini