December 2009 ~ • tutorial by ekin •

15.12.09

request tutorial

assalamualaikum kawan-kawan
sape2 yg nak request tutorial,
boleh request kat cni...
aku akn cube carikkan utk korg ea...huhuhu
i'll try my best...
aku juz nak share ape yg aku tau je...
hihhihihihi....thank u

lots of love

thanks for reading ♥ ekinyusri

12.12.09

tab menu

tutorial ini adalah untuk membuat tab menu kat bahagian atas tue...ada templatyg dah ade tab menu..tp klu templat yg biase,yg kite buat sndr,xde tab menu...dah lame aku blaja nak wat tab menu nie...dan akhirnye aku berjaye gak...let try it!!!

1. LAYOUT > edit HTML

2. klik pada 'expand widget'

3. copy and paste kod kat bawah nie,dan letak kat atas kod nie ]]></b:skin>

#navigation{font-size:110%;
height:2.2em;
line-height:2.2em;
margin:0 1px;
color:#999;
}
#navigation li{
float:left;
list-style-type:none;
border-right:1px solid #ccc;
white-space:nowrap;
}
#navigation li a{
display:block;
padding:0 10px;
font-size:0.8em;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #999;
}
* html #navigation a {width:1%;}
#navigation a:hover{
background:#ccc;
color:#fff;
text-decoration:none;
}

4. kemudian carik kod bawah nie plak

<b:section class="header" id="header" maxwidgets="1" showaddelement="no">

5. then ubah macam kod bawah nie...copy and paste je

<b:section class="header" id="header" maxwidgets="10" showaddelement="yes">

6. then SAVE TEMPLAT...jgn lupe plak

7. pastu gi kat PAGE ELEMENT plak... klik ADD GADGET,pilih HTML/JAVASCRIPT

8. copy and paste kod kat bawah nie

<div style="text-align: center;">
<div id="navigation">
<ul>
<li class="selected">
<a href="http://blogkamu.blogspot.com/">Home</a></li>
<li><a href="http://blogkamu.blogspot.com/search/label/LABEL" >Link Label</a></li>
<li><a href="http://blogkamu.blogspot.com/">Blogroll Links</a></li>
</ul>
</div>
</div>

9. Lastly, SAVE it

NOTE : gantikan URL tulisan warna biru tue ngan URL blog anda sendiri k...

selamat mencuba~

lots of love

thanks for reading ♥ ekinyusri

memaparkan jumlah entri & jumlah komen

tutorial ini berfungsi utk memberitahu total entri yg kte dah post dan total komen yg kte terima utk setiap post kite...try it!!!

1. Masuk ruangan LAYOUT

2. Klik pada PAGE ELEMENT dan ADD GADGET

3. Kemudian pilih add HTML/Javascript

4. Copy kod di bawah nie

JUMLAH KOMEN

JUMLAH ENTRI

5. Lastly SAVE

NOTE : URL yang berwarna purple tue,URL blog anda sendiri yer

lots of love

thanks for reading ♥ ekinyusri

membuat link berpelangi

link berpelangi nie berfungsi bile korang mouseover kat link tue,link korg akan bertukar-tukar warna pelangi...cantik tau...jomlah try

1. gi kat LAYOUT

2. then gi kat EDIT HTML

3. copy and paste kod kat bawah nie dibawah kod <body>

4. SAVE

ok,siap!!! selamat mencuba~

lots of love

thanks for reading ♥ ekinyusri

disable copy and paste

tutorial ini adalah untuk mengelakkan data-data, gambar-gambar atau ape je dari blog anda di 'copy paste' oleh org2 yg tidak bertanggungjawab...juz follow je step kat bawah nie...

1. pegi kat LAYOUT

2. klik kat EDIT HTML

3. copy kod kat bawah nie...dan paste kat atas kod </head>

4. SAVE

lots of love

thanks for reading ♥ ekinyusri

buat 'overflow/scroll' dalam post

• cara nak buat overflow atau kotak scroll nie senang je...juz copy n paste code kat bawah nie
• kemudian leh isi gambar,artikel,code atau ape saje kat dlm tue
(gantikan dengan tulisan 'text' berwarna biru)
• anda boleh sambung semula post anda sebelum atau selepas scroll tersebut

Text
<div style="border: 1px solid ; background: transparent none repeat scroll 0% 0%; overflow: auto; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 450px; height: 100px;">
Text
Text
Text
Text
Text
Text
Text
</div>
Text

selamat mencuba~

lots of love

thanks for reading ♥ ekinyusri

11.12.09

senaraikan blog di google

Salah satu cara untuk meningkatkan jumlah penjunjung ke blog / laman web kita ialah dengan menyenaraikannya pada laman pencarian yang popular. Google dilabelkan antara laman pencarian yang sering digunapakai oleh orang ramai sewaktu mencari sesuatu informasi. Justeru, anda sangat disarankan untuk menyenaraikan blog / laman web anda di Google.

Caranya mudah sahaja. Anda cuma masuk ke laman web GOOGLE. Kemudian masukkan maklumat yang diperlukan. Setelah anda berpuas hati dengan semua maklumat yang anda tulis, terus sahaja tekan butang Add URL. Nah, sekarang blog anda sudah tersenarai di laman pencarian popular.

Selamat mencuba~
Sumber : Fitrah Alam

lots of love

thanks for reading ♥ ekinyusri

basic code

font style code :

• <del> ~~delete~~ </del>

• <s> ~~cancel~~ </s>

• <b> bold </b>

• <i> italic </i>

• <u> underline </u>

• <blink> blink </blink>

• <br/> line tab

• <hr/> straight line

• <center> center </center>

show image :

<img src="URL image"/>

lots of love

thanks for reading ♥ ekinyusri

border

jenis-jenis border :

border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;

kod2 setiap border :

border-style: dotted;

<div style="border-width: 2px; border-style: dotted; border- ">
TULISKAN AYAT DI SINI
</div>

border-style: dashed;

<div style="border-width: 2px; border-style: dashed; border- ">
TULISKAN AYAT DI SINI
</div>

border-style: solid;

<div style="border-width: 2px; border-style: solid; border- ">
TULISKAN AYAT DI SINI
</div>

border-style: double;

<div style="border-width: 4px; border-style: double; border- ">
TULISKAN AYAT DI SINI
</div>

border-style: groove;

<div style="border-width: 4px; border-style: groove; border- ">
TULISKAN AYAT DI SINI
</div>

border-style: ridge;

<div style="border-width: 4px; border-style: ridge; border- ">
TULISKAN AYAT DI SINI
</div>

border-style: inset;

<div style="border-width: 4px; border-style: inset; border- ">
TULISKAN AYAT DI SINI
</div>

border-style: outset;

<div style="border-width: 4px; border-style: outset; border- ">
TULISKAN AYAT DI SINI
</div>

juz copy and paste je
good luck~

lots of love

thanks for reading ♥ ekinyusri

ORDER NOW!

anda klik LAYOUT,then klik EDIT HTML..
nie adalah code2 dlm edit HTML...
aku nak ajar sikit2 cmne nak bce code2 nie...
part mane yg boleh diubah ikot ape yg kte nak...

body { <---- nie bhgn background
//CARA NAK TUKAR BACKGROUND,LIHAT KAT SIDEBAR SBLH KANAN YER
background:$bgcolor; //background color
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center; //position background
} //background leh diubah ikot ape yg aku ajar kat tepi blog nie

/* Header <---- bhgn header plak (bhgn ats skali tue)
-----------------------------------------------
*/

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
//border header..klu xnak gne,boleh delete
}

#header-inner {
background-position: center; //position header
margin-left: auto;
margin-right: auto;
}

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em; //jarak antara ayat line atas n bwh
text-transform:uppercase; //uppercase = sume huruf besar
//leh nak tukar lowercase = sume huruf kecik
letter-spacing:.2em; //jarak antara huruf
font: $pagetitlefont; //jenis font digunaka
}

#header a {
color:$pagetitlecolor;
text-decoration:none;
}

#header a:hover {
color:$pagetitlecolor;
}

#header .description { //same cam header h1 kat atas
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}

/* Outer-Wrapper <---- adalah saiz blog nie
----------------------------------------------- */
#outer-wrapper {
width: 660px; //nie saiz blog..boleh ubah ikot kesesuaian nak
margin:0 auto;
padding:10px;
text-align:$startSide; //start ayat
(center, $startSide = kiri, $endSide =kanan)
font: $bodyfont; //font utk post/body
}

#main-wrapper {
width: 410px; //saiz blok utk posted
float: $startSide; //mule blok
(center, $startSide = kiri, $endSide =kanan)
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: 220px; //saiz blok utk sidebar
float: $endSide; //mule blok
(center, $startSide = kiri, $endSide =kanan)
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 <---- bhgn tarikh post dan title sidebar
----------------------------------------------- */

h2 {
margin:1.5em 0 .75em;
font:$headerfont; //jenis font
line-height: 1.4em; //jarak antara ayat line atas n bwh
text-transform:uppercase; //uppercase = sume huruf besar
//leh nak tukar lowercase = sume huruf kecik
letter-spacing:.2em; //jarak antara huruf
color:$sidebarcolor; //warna font
background:#fffffff; //nie warne bckground klu nk gne
(cth link berwarne hitam kat blog nie)
//#ffffff leh ditukar ikot warne yg kte suke
//leh jgak klu nak ltak imej..tp kne sesuai
}

/* Posts <---- bhgn posted body
-----------------------------------------------
*/
h2.date-header { //bhgn tarikh
margin:1.5em 0 .5em;
}

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
//nie adalah pembahagi antara 2 posted,klu xnak,leh delete atau tukar style (solid,dashed,dotted)
padding-bottom:1.5em; //jarak antara pembahagi bwh
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%; //saiz font
font-weight:normal; //style font (bold, normal, italic)
line-height:1.4em;//jarak antara ayat line atas n bwh
color:$titlecolor; //warna font
}

.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal; //style font (bold, normal, italic)
}

.post h3 strong, .post h3 a:hover {
color:$textcolor;
}

.post-body {
margin:0 0 .75em;
line-height:1.6em; //jarak antara ayat line atas n bwh
}

.post-body blockquote {
line-height:1.3em;
}

.post-footer {
margin: .75em 0;
color:$sidebarcolor; //warna font
text-transform:uppercase; //uppercase = sume huruf besar
//leh nak tukar lowercase = sume huruf kecik
letter-spacing:.1em; //jarak antara huruf
font: $postfooterfont; //jenis font digunakan
line-height: 1.4em; //jarak antara ayat line atas n bwh
text-align:$startSide; //position ayat
(center, $startSide = kiri, $endSide =kanan)
}

.comment-link {
margin-$startSide:.6em;
}
.post img { //nie utk image post
padding:4px; //jarak antara pic ngan ayat
border:1px solid $bordercolor; //border image
//klu xnak gne,leh delete je
}
.post blockquote { (akan diajar kemudian)
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}

/* Comments //bhgn komen,xde ape nak ubah
----------------------------------------------- */

/* Sidebar Content <---- bhgn sidebar tepi (widget)
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor; //warna font sidebar
line-height: 1.5em; //jarak antara ayat line atas n bwh
}

.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}

.sidebar .widget, .main .widget { //bhgn widget2 yg digunakan
border-bottom:1px dotted $bordercolor; //nie adalah pembahagi antara 2 posted,klu xnak,leh delete atau tukar style (solid,dashed,dotted)
margin:0 0 1.5em;
padding:0 0 1.5em;
}

.main .Blog {
border-bottom-width: 0;
}

/* Profile //xde ape nak ubah kot, hidekan je
----------------------------------------------- */

/* Footer <---- bhgn bwh posted
----------------------------------------------- */
#footer {
width:660px; //saiz footer
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em; //jarak antara ayat line atas n bwh
text-transform:uppercase; //uppercase = sume huruf besar
//leh nak tukar lowercase = sume huruf kecik
letter-spacing:.1em; //jarak huruf
text-align: center; //position ayat
(center, $startSide = kiri, $endSide =kanan)
}

• tulisan yg wane biru tue leh diubah ikot ape yg kte nak
• care terbaik,setiap kli kte ubah code2 nie,kte klik PREVIEW dulu...jgn save lg...dah rs ok,ubah part yg len plak...cube satu2..memg leceh,benda nie memerlukan kesabaran skit...
• dah puas hati,brulah SAVE...jgn lupe plak
• note tambahan :
margin : 1.0em 1.0em 1.0em
(tepi kiri, atas n bwh, tepi kanan)
padding : 1px 1px 1px
(tepi kiri, atas n bwh, tepi kanan)
• code2 nie kne rajin explore..brulah byk bnde kte leh tau
• ape2 yg x phm dan nak tny,leh tny...tq

the owner

klik nuffnang

15.12.09

request tutorial

12.12.09

tab menu

memaparkan jumlah entri & jumlah komen

membuat link berpelangi

disable copy and paste

buat 'overflow/scroll' dalam post

11.12.09

senaraikan blog di google

basic code

border

the owner

ORDER NOW!

f o l l o w - m e

Label

mommies/ mom.2.be

e x / b r i d e . 2 . b e

MATRADE's

GOSSIP!!

SHOPPING TIME!

tabung anakku

Total Pageviews

my post

traffic light

komen disini!!!