Freebies - Kotak Dashboard Made By Me

salam 1 malaysia for warganegara malaysia.. hehehe

humm katy bosan sangat malam ni so katy buatkan untuk korang kotak dashboard..

tak taulah korang berminat ke tak.. katy pakai buat jek.. 

kalau korang rasa comel,,

amik lah apa salahnye.. tapi bagi sesiapa yang nak amik tu dimaklumkan untuk follow blog ini dulu k..

kalau tak follow xleh amik.. hehehe gurau je lah..

amik lah katy tak paksa pun nak follow ke tak..

yang penting ikhlas..

http://i.imgur.com/yuQO2Mv.png

http://i.imgur.com/MAmUAbQ.png

http://i.imgur.com/inWuTjH.png

http://i.imgur.com/KcElT4s.png

http://i.imgur.com/Aw8d8Kw.png

http://i.imgur.com/TM6i6wK.png

http://i.imgur.com/Ngu4pT4.png

Nota Pink: kalau sesiapa yang nak request colour boleh request tak ada masalah, kalau nak request border kena order lah ye..

Letak Button Dashboard

Salam Maghrib.. uolls.. jangan.. hari ni katy nak buat share tutorial daripada lyssa,, credit to her.. ok... firstly kalo kornag nak tau apa itu button dashboard... korang tengok gambar bawah ni,. ni bagi yang belom tahu lah kan..

klik untuk lebih jelas

ok nampak tak.. yang katy anak panahkan tu..  itulah button dashboard.. cara-caranya.. korang ikut step bawah ni.. hehe
1. Open Dashboard --> Layout --> Java Script
2. Copy code di bawah ni..

<div style="display:scroll; position:fixed; top:5px; right:2px;"><a class="linkopacity" href="http://blogger.com/home" target="_blank" rel="nofollow" title="Dashboard !" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="URL image" /></a></div>

3. Yang warna pink tu korang boleh upload image yang korang buat kat sini

4. Kalau korang rasa malas nak buat korang boleh amik kat sini apa salahnya.

Nota pink: Kepada siapa yang nak guna tutorial ni atau nak copy.. tolong credit ke blog katy and follow sekali ok.. tQ..

Letak Iklan Nuffnang di Blog

korang korang korang... katy in the room.. ok malam ni series katy boring sangat2.. tak tau nak buat apa so katy nak share tutorial for new blogger macam katy.. mesti ada juga segelintir sekelumit yang masih tercari-cari tertanya-tanya bagaimana nak buat iklan di atas header, tepi header and so on.. ok sebelum tu korang kena ikut Tuto ini bagi yang nak buat atas header.. lets follow step bawah ni.. 1. Korang pegi sini dulu dan isi maklumat korang kat sini.. 2. kalau dah siap, korang klik my nuffnang (tengok gambar bawah ni kalau tak paham)

3. Lepas tu korang klik kotak tepi tu yang ada tulis manage your blog tu..

4. Lepas tu korang klik ini pulak..

5. isi maklumat korang,

6. then korang pilih yang mana 1 korang nak tick kat bawah kotak tersebut and then korang copy code yang keluar pastu paste kat ruang Java Script korang (HTML)

dah siap,, korang boleh save.. 

Add gadget atas Header

cara nak letak iklan nuffnang diatas header ..  korang mestilah kena ikut step di bawah ni dulu..
1. Open Dashboard --> Template --> Edit HTML 2. Ctrl F 3. Copy code bawah ni

b:section class='header' id='header' maxwidgets='1' showaddelement='no'

4. Kalau dah jumpa, tukarkan 1 kepada 3 dan no kepada yes, susah sangat gantikan code tu kepada code dibawah ni..

 b:section class='header' id='header' maxwidgets='3' showaddelement='yes'

5. sebelum pastu korang save and check di layout.. ada x? kalau ada korang boleh ikut Tutorial Ini pula..

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!