Freebies Code Denim - Mine design !!

sHaRiNa eLyaNa 14 Comments


Assalamualaikum
kalau korang ingatlah kan..sha pernah janji nak share pasal code Denim di entry ini kan? setelah sha edit template tu akhirnya jadilah dia seperti bawah ni..


means kod tu tak lah susah mana kalau korang nak edit balik..kan..kan..
sidebar, title post, post footer, layout border..itu ja yang sha mampu buat hehe..selebihnya korang yang edit mengikut kretiviti masing2..siapa peminat pink boleh copy laju code bawah ni :)

<?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:     Denim
Designer: Sharina Elyana
Url : www.opzzpinky.my
Date:     11 Feb 2013
-----------------------------------------------
*/

/* Variable definitions
   ====================
 <Variable name="bgColor" description="Page Background Color"
           type="color" default="#efefef" value="#efefef">
 <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="#cccccc" value="#cccccc">
 <Variable name="dateHeaderColor" description="Date Header Color"
           type="color" default="#999999" value="#999999">

 <Variable name="sidebarTitleBgColor" description="Sidebar Title Background Color"
           type="color" default="#ffd595" value="#ffd595">
 <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 {
text-align: center;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaUbEUWrg-ib4Eyi8rhp3BKoQLw_yBEXnfrSapioKlZPiyghOJkf5o3SaOvuYhl33ihgO2oLYytVujIX8bOX70ZKnHCrIKmyksBdAM1e8VVoVVUPYpez2zvWGFxPFp64eONNmeVniqntjw/s1600/tpolkadotorange.gif);
color: black;
font-size:14px;
font-family: 'Elsie Swash Caps', cursive;
letter-spacing: 1px;
}

a:link {
  color: $linkColor;
}
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: 1000px;
  margin: 0 auto;
  background-color: $headerBgColor;
  border: 1px solid $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: 960px;
margin:0 auto;
padding:20px;
text-align:left;
font: normal normal 99% Verdana, sans-serif;
background:url(http://i.imgur.com/eLgZ2es.png);
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 {
width: 600px;
margin-left: 0px;
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 {
width: 300px;
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, 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 {
 margin: 1.6em 0 .5em;
 padding: 4px 5px;
 background-color: #F781BE;
 font-size: 100%;
border : dotted 1px #000;
}

.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 {
background-color : pink;
 text-align: center;
border:2px dotted #D358F7;
color:#000000;
font:verdana;
font-size:12px;
font-weight:bold;
margin:0.75em 0;
}

.post-footer .span {
  margin-$endSide: .3em;
}

.post img, table.tr-caption-container {
  padding: 4px;
  border: 0px solid $borderColor;
}
.tr-caption-container img {
  border: none;
  padding: 0;
}
.post blockquote {
  margin: 1em 20px;
}
.post blockquote p {
  margin: .75em 0;
}

/* Comments
----------------------------------------------- */
#comments h4 {
  margin: 1em 0;
  color: $dateHeaderColor;
}
#comments h4 strong {
  font-size: 110%;
}
#comments-block {
  margin: 1em 0 1.5em;
  line-height: 1.3em;
}
#comments-block dt {
  margin: .5em 0;
}
#comments-block dd {
  margin: .25em 0 0;
}
#comments-block dd.comment-footer {
  margin: -.25em 0 2em;
  line-height: 1.4em;
  font-size: 78%;
}
#comments-block dd p {
  margin: 0 0 .75em;
}

.deleted-comment {
  font-style:italic;
  color:gray;
}

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

#blog-pager-newer-link {
  float: $startSide;
 }

#blog-pager-older-link {
  float: $endSide;
 }

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

/* Sidebar Content
----------------------------------------------- */
.sidebar h2 {
 margin: 1.6em 0 .5em;
 padding: 4px 5px;
 background-color: #F781BE;
 font-size: 100%;
border : dotted 1px #000;
}
                                                            
.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: 0px 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;
}
]]></b:skin>
  </head>

  <body>
  <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
</b:section>

  <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='haniszakirahdanfaqihahhusni (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='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
<b:widget id='Attribution1' locked='false' 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 -->
  <b:include data='blog' name='google-analytics'/>
</body>
</html>

cara nak masukkan ke dalam blog
sebelum mula, korang dinasihatkan untuk backup template asal..takut ada kesalahan atau xberkenan nanti blog jadi buruk jangan salahkan sha ya hihi..

  • Dashboard > Template > Edit HTML > Tick
  • Copy code Denim
  • dan paste pada ruangan template
  • dah siap edit korang klik button save dan keep widget tengok gambar di bawah


dah siap !! now korang sendiri pun dah boleh edit blog..wah tahniah !! meh rajin2 peningkan kepala dengan HTML hihih..gud luck ya..


14 Comments

Assalamualaikum..terima kasih sebab singgah, komen yang baik2 ja tau !! nanti sha singgah blog korang..In Sha Allah :)

  1. AnonymousFebruary 11, 2013 at 9:36 PM

    wahh. freebies lah :D

    ReplyDelete
  2. Lady ★ HannaFebruary 11, 2013 at 9:39 PM

    terer dye skrg ye ;) bg freebies ;)

    ReplyDelete
  3. aisyah humaira'February 11, 2013 at 9:43 PM

    amboi.dah blh bg freebies. tahniah !

    ReplyDelete
  4. AnonymousFebruary 11, 2013 at 9:58 PM

    shaa . cik dah tlg preview . tapi dia error :) cube shaa nengok balik :)

    ReplyDelete
  5. dinaFebruary 11, 2013 at 10:16 PM

    hasil tangan awak comella... Hihi... Mesti ramai orang suke =)

    ReplyDelete
  6. DingdangFebruary 11, 2013 at 11:07 PM

    pandainya sha...

    ReplyDelete
  7. Mia KassimFebruary 11, 2013 at 11:21 PM

    Salam kenal dan follow... :D

    ReplyDelete
  8. Syafiq AjisFebruary 11, 2013 at 11:26 PM

    wow ! hebat betul perempuan skrg bermain ngn coding html.. ade mse boleh kongsikan bersama kt forum Komuniti Blogger Malaysia ni ye.. harap tak keberatan..hehe..

    ReplyDelete
  9. UnknownFebruary 12, 2013 at 9:58 AM

    nanti mama nak cuba...ilike dnim..ehe..tq sha

    ReplyDelete
  10. Mrs VelentineFebruary 13, 2013 at 12:50 PM

    nda lah kak mau peningkan kepala yg sedia pening ni sha..by the way nice tutorial

    ReplyDelete
  11. UnknownJuly 18, 2013 at 9:39 PM

    kak sha.. Hanie ambik tau..Nnti Hanie kredit kak sha :)

    ReplyDelete
  12. Fatimah NabilaDecember 5, 2013 at 4:20 PM

    hye sha..sye amek tau freebies ni..tq so much!!

    ReplyDelete
  13. Mila JamilMay 28, 2017 at 4:51 PM

    kak sha..
    ape nama font yg kak sha guna untuk tulisan yg kat header tu??

    ReplyDelete
  14. Alyza AriffenJuly 29, 2019 at 8:07 PM

    sha... akak amik ye :-)

    ReplyDelete

Post a Comment

Assalamualaikum..terima kasih sebab singgah, komen yang baik2 ja tau !! nanti sha singgah blog korang..In Sha Allah :)

Previous Post Next Post