Letak Date Header di Luar Entry

selamat hari Rabu kawan-kawan hari ni katy nak buat tutorial untuk menampakkan blog kelihatan comel gitu! ok kalau korang nak tau  korang nampak tak disebelah kiri dalam blog katy ade kotak  yang berisi tarikh.. kalau nak buat macam katy buat meyh sini ikut step bawah ni.. jap2 katy print screen dulu supaya korang dapat tau,  manalah tau one day nanti katy dah tukar kan.. tuh! tgk kat bawah tu,, nampak x? kalau tak nampak click gmbar tu.

ha tulah ianya.. comel tak,, sorry lah aku memang giler pink..

ok kalau korang nak ikut step bawah ni..

1. Open Dashboard --> Template --> Edit HTML

2. Ctrl F

3. Ok copy code bawah ni

 .date-header { 

4. Sebelah kiri 

height: 0px; margin:-15px -20px -500px -115px; padding: 30px 300px 105px 10px;background: url( URL ICON DATE HEADER ) no-repeat;

position:absolute !important; position:relative;

text-align:center;

font:normal 17px Century Gothic;

color: #FFFFFF;

5. Sebelah kanan

height:0px;

margin:0px 60px 800px 590px;

padding: 32px 300px 80px 30px;

background: url(URL ICON DATE HEADER) no-repeat;position:absolute !important; position:relative;

text-align:center;

font:normal 17px Century Gothic;

color: #FFFFFF;

Animation di Tepi Blog Archive

morning uolls..  huh.. pagi ni katy tak tidur,  sebab busy buat template.. and the same time katy nak buat tuto  untuk blog archive nampak cute and tak kosong macam dekat bawah ni..

so kalo korang nampak cantik jom ikut step bawah ni.

1. Open Dashboard --> Template --> edit Html

2. Ctrl F

3. Copy code bawah ni 

<li><a expr:href='data:i.url'><data:i.title/></a></li>

4. Ok! bagus lah kalau korang jumpa, ok lepas tu korang copy code bawah ni pula..

 <img src='URL mini icon'/>

5. Lepas copy korang pastekan di sebelah <li> yang first tu.. katy bagi contoh k

<li><img src='URL mini icon'/><a expr:href='data:i.url'><data:i.title/></a></li>

6. yang katy warnakan dengan warna pink tu korang boleh cari dekat SINI

7. Jangan save dulu!!!!!!!!!!!! preview dulu.. ok kalau jadi baru boleh save ok..

Scroll Bar Berwarna

selamat petang uolls.. hari ni katy tetibe nak buat banyak tutorial.. jom kita sama2 cantik kan scroll bar kita,  supaya sedap mata memandang kan..

kalau rasa nak join jom ikut step bawah ni..

sebelum tu katy nak credit kat awexs comel ni

cik Lyssa

1. Open Dashboard --> Template --> Edit Html

2. Ctrl F

3. Copy Code bawah ni

]]></b:skin>

 4. dah jumpa? bagus kalau dah jumpa, next copy code bawah ni dan paste di atas code yang korang cari tadi.

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

Note cute: warna biru code untuk bar
                 warna pink code untuk background dalam scroll
                 warna merah code untuk border scroll

^_^ Selamat Mencuba

Buang Garisan bawah link

hye yayunk!  korang buka entry ni mesti korang ada masalah  dengan garisan-garisan kat bawah setiap link yang korang highlight tu kan.. atau pun dekat dekat dalam blog archive korang kan.. jom ikut step bawah ni kalau korang nak hilangkan k..
1. Open Dashboard --> Template --> Edit HTML  2. Ctrl f 3. Copy kod bawah ni

a:link {

4. kalau korang jumpa bagus lah, kalau tak jumpa tu sorry ea, ok pastu pastekan code bawah ni dibawah kod yang korang cari tadi tu

 text-decoration:none;

5. okay  done! preview dulu tau, kalau jadi korang save ok!

^_^ Selamat Mencuba

Kod Template Denim untuk blogspot

hye darling,, mesti uolls teringin nak memiliki blog cantik and mudah untuk dieditkan apa kata kita tukar simple template kite ke denim template, kalau korang nak tau ke tak kemudahannya, try lah buat, mesti korang akan rasa teruja sebab dapat realisasikan blog design by korang sendiri kan.   kalau rasa teringin nak buat, jom! ikut step bawah ni.. 1. Open Dashboard --> Template --> edit HTML 2. Korang kena backup dulu --> download template --> save di folder yang korang senang nak cari 3. Copy kod kat 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: Darren Delaye
URL:      www.DarrenDelaye.com
Date:     11 Jul 2006
-----------------------------------------------
*/

/* 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 {
  background: $bgColor;
  margin: 0;
  padding: 0px;
  font: x-small Verdana, Arial;
  text-align: center;
  color: $textColor;
  font-size/* */:/**/small;
  font-size: /**/small;
}
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: 760px;
  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: 760px;
  margin: 0 auto;
  padding: 0 0 15px;
  text-align: $startSide;
  background-color: $mainBgColor;
  border: 1px solid $borderColor;
  border-top: 0;
}
#main-wrapper {
  margin-$startSide: 14px;
  width: 464px;
  float: $startSide;
  background-color: $mainBgColor;
  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: $mainBgColor;
  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 {
  margin: 0;
  padding: 0;
  font-size: 125%;
  font-weight: bold;
  line-height: 1.1em;
}
.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 {
  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: $sidebarTitleBgColor;
 font-size: 100%;
 color: $sidebarTitleTextColor;
}
                                                          
.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;
}
]]></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='Hanis fanfic (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> 

4. Kalau dah copy korang gantikan kod template yang lama dengan kod yang korang copy tadi
5. Preview dulu..kalau tak ada apa halangan boleh SAVE!
Nota Cute: template atas ni original denim ok, so kalau korang nak ianya kelihatan cantik korang boleh tengok next tutorial ok!

^_^ Selamat Mencuba! 

Delete Subscribe to post

credit to Lyssa pepagi lagi terasa nak wat tutorial.. ini pun katy baru jek lepas cari dekat blog org.. cari punye cari akhirnya ketemu juga.. katy rase semak sangat kalo ade subscribe tu..

so katy nak delete so pada sesiapa yang rase semak juga, jom ikut step bawa ni. 1. Open dashboard --> Template --> Edit HTML 2. Ctrl F 3. copy code bawah ni

<!-- feed links -->

4. ada keluar code mcm bawah ini tak

<!-- feed links-->
    <b:include name='feedLinks'/>

5. kalau ada korang tukar kepada code ini

 <!-- feed links
      <b:include name='feedLinks'/>   -->

6. pastu korang preview dulu, kalau tak ada error, apa tunggu lagi save lah!

^_^Selamat Mencuba

Background untuk Blockquote

credit to: Lyssa hye kengkawan ku sayang  hari ni katy nak buar tutorial  untuk nampakkan Blockquote kite cantik gitu  for new blogger macam saya yang mula-mulanya pelik + tak tahu langsung tentang blockquote  kalo korang nak tau function blockquote tu  seperti dibawah ni

blockquote berfungsi sebagai kotak yang cantik hehe and senang untuk di copy paste

so cara nak cantikkannye

jom ikut step di bawah ni..

1. Open Dashboard --> Template --> Edit HTML 

2. Ctrl F

3. copy code bawah ni

.post blockquote { 

4. kalau dah jumpa, pastekan code ni pula di bawah code yang korang jumpa tadi

 background-image:url(url gambar);

Nota cute: korang cari background yang korang suka kat google or buat sendiri then upload HERE, pastu ambil yang direct link paste kat url gambar 

5. pastu korang preview dulu, kalau jadi save ok! 

^_^ Selamat Mencuba 

Delete Navigation Bar

hye korang, hari ni khaty nak teach korang macam mana nak hilangkan navigation bar,  so for new blogger yang rase tak tau apa itu navigation bar meyh look picture bawah ni kalo tak nampak korang click pada gambar untuk lebih jelas

kalo korang rase kotak ni semak or konon2nya nampak skema kat blog korang.

just buang lah dia dari keserabutan matamu itu.. hehehe

ikut step bawah ni..

1. Open dashboard --> Template --> Edit HTML 

2. Ctrl F

3. Copy code bawah ni

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

4. korang scroll ke atas sampai jumpa code ni

/* Variable definitions

5. pastu korang paste atas kot tersebut macam gambar kat bawah ni.