25 November 2013

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

24 November 2013

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! 

23 November 2013

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.


22 November 2013

Nak Letak Gadget atas Header

firstly khaty nak cerdit to Sha
ok hari ni khaty nak buat tutorial cara nak letak gadget atas header mcm ni
selalunya blogger akan letak iklan kat sini kan.. 
so, for new blogger .. eceh khaty pun new blogger juga, 
(blagak mcm dah lame jek)..
1. Open Dashboard --> Template --> Edit HTML --> Ctrl F 
2. Copy code bawah ni pastu paste diruang find tepi tu pastu enter, 
b:section class='header' id='header' maxwidgets='1' showaddelement='no'
3. kalau jumpa korang ganti code di atas dengan code kat bawah ni
b:section class='header' id='header' maxwidgets='3' showaddelement='yes'
Nota Cute: kalau korang malas nak copy paste korang boleh tukar jek yang '1' kepada '3' and yang 'no' kepada 'yes' 

4. Kalau tak ada error korang boleh SAVE
5. Try open layout ada tak keluar.. hehehe kalau ada anda sudah berjaya!
^_^Selamat mencuuba!