Oke, Tutorial kali nih adalah kesinambungan dengan Tutorial Ini.


sebelum


selepas


Bila Cursor uols menghala ke Scroll Bar, automatik Scroll Bar akan bertukar warna.
Macam mana nak buat? Oke, senang je.

1. Dashboard > Design > Edit HTML > Tick Expand Widget

2. Cari kod ini :
]]></b:skin>


3. Pastekan kod kat bawah nih di ATAS kod yang uols cari. 

 ::-webkit-scrollbar {
height: 10px;
width: 10px;
background: #97775e;
border: 1px dotted #fcb7c9;
}
::-webkit-scrollbar-thumb {
background-color: #fcb7c9;
-moz-border-radius: 8px;
border-radius: 0px;
border: 1px dotted #000000;
}
::-webkit-scrollbar:hover {
height:10px;
width: 10px;
background: #fcb7c9;
border: 1px dotted #000000;
}
::-webkit-scrollbar-thumb:hover {
background-color:  #97775e;
-moz-border-radius: 8px;
border-radius: 0px;
border: 1px dotted #ffffff;
}

4. Tukarkan yang warna Merah tuh kepada warna lain oke. Kalau uols tak ubah, nanti jadi macam Scroll Bar Montela :)

Note Kaki :
Kepada sesiapa yang dah ikut Tutorial yang sebelum nih, sila delete semua kod tersebut dan ikut Tutorial yang ini oke. 



Tutorial kali nih cara nak cantikkan Scroll Bar.
Oke, macam blog Montela nih.


Before kita start Tutorial, Montela nak bagitahu nih, Scroll Bar nih hanya berfungsi dengan menggunakan Google Chrome je tau. Mozilla ke IE ke tak berfungsi oke.

1. Dashboard > Design > Edit HTML > Tick Expand Widget

2. Search kod ini dengan menggunakan Ctrl F
]]></b:skin>

3. Dah jumpa? Oke, now, Copy dan Paste kod kat bawah nih di ATAS kod yang uols cari tadi.
::-webkit-scrollbar {
height:12px;
width: 12px;
background: #D9D9D9;
border: 1px solid #000000;
}
::-webkit-scrollbar-thumb {
background-color: #F2F5A9;
-moz-border-radius: 10px;
border-radius: 10px;
border: 1px solid #000000;
}

4. Yang warna Merah tuh kod warna, boleh tukar di Sini.
5. Yang warna Biru tuh size scroll bar. Boleh tukar saiz jugak :)

Selamat Mencuba.


Oke, Entry kali nih, Montela akan ajar cara nak buat ayat di bawah setiap Post.
Tak paham? Macam nih haaa...


1. Dashboard > Design > Edit HTML > Tick Expand Widget

2. Dengan menggunakan fungsi Ctrl F, cari kod nih :
<data:post.body/>

3. Now, uols Copy kod nih BAWAH kod yang uols cari tadi.
<hr/><center>
<b>ayat korang</b>
</center><hr/>

4. ayat korang tuh, uols boleh tukar dengan ayat sendiri :) 

Selamat Mencuba.




Assalamualaikum.. WBT
Hai hai. Oke, sape tak paham apa itu Marquee? 
Marquee means korang punya ayat tuh bergerak-gerak lah. 
Hari nih Montela nak ajar Post Title bergerak ke kiri.

1. Log In > Dashboard > Design > Edit HTML > Tick Widget Expand Tempalate

2. Gunakan Ctrl F dan search kod kat bawah nih :
<b:includable id='post' var='post'> 

3. Bila uols dah jumpa kod tadi, uols cari kod macam kat bawah nih.

<b:includable id="post" var="post">
</b:includable>
<div class="post hentry uncustomized-post-template">
<a expr:name="data:post.id" href="">
<b:if cond="data:post.title">
</b:if></a>
<h3 class="post-title entry-title">
<a expr:name="data:post.id" href=""><b:if cond="data:post.link">
</b:if></a><a expr:href="data:post.link" href=""><data:post .title=".title"></data:post></a>
<b:else>
<b:if cond="data:post.url">
<a expr:href="data:post.url" href=""><data:post .title=".title"></data:post></a>
<b:else>
<data:post .title=".title">
</data:post></b:else></b:if>
</b:else>
</h3>
</div>

4. Oke,  sekarang delete semua kod yang panjang lebar tuh dan gantikan dengan kod ini :
<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<marquee direction='left'><h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3></marquee>
</b:if> 

5. Uols jangan lupa Preview dulu oke. Tak jadi kang menangis tak berlagu. Dah takde Error baru SAVE! 




Tutorial kali nih untuk bahagian Hover.
Bila cursor uols pergi mana-mana link atau image, akan ada dashed atas dan bawah link. 
Oke, kite teruskan la yer.

1. Dashboard > Design > Edit HTML > Tick Expand Widget

2. Dengan menggunakan fungsi Ctrl F, cari kod nih : 
a:hover {

3. Oke, dah jumpa kan? Sekarang Copy dan Paste kod kat bawah nih BAWAH kod yang uols cari tadi.
border-top: 2px dashed #58ACFA;
border-bottom: 2px dashed #58ACFA;
4. Yang dashed tuh, uols boleh tukar kepada Solid atau Dotted 
5. Kod #58ACFA boleh tukar kat Sini.

Save terus, tak payah Preview oke, sebab kalau uols Preview takkan dapat tengok.


Assalamualaikum WBT.

Hai hai.. Montela nak ajar kat uols cara-cara nak buat Tajuk dekat Sidebar dan Post Title nampak timbul.
Oke, senang je tuh. Korang just tambah bayang-bayang je.
Tak paham? Macam gambar kat bawah nih je.


Nampak tak tulisan tuh macam timbul. Oke, jom belajar!

1. Mula-mula Log In > Dashboard > Edit HTML > Tick Widget Expand

2. Uols cari kot Sidebar. Gunakan Ctrl F. Kod Sidebar macam nih :
h2 {

3. Oke, dah jumpa? Sekarang Copy dan Paste kod kat  bawah nih di BAWAH kod yang No.2.
text-shadow: 2px 2px 3px #FFFFFF;

Untuk Post Title, uols guna cara yang sama oke. Cuma kod Post Title macam kat bawah nih :  
h3.post-title {
kalau tak jumpa, try search kod ni pulak :
.post h3 {

#FFFFFF adalah kod warna.
Kalau warna background  tuh warna gelap, uols gunakan kod warna #FFFFFF, tapi kalau background tuh cerah, uols gunakan #000000. Atau boleh cari kat sini untuk warna lain.

Selamat Mencuba :)


Assalamualaikum WBT
Oke, kita teruskan dengan tutorial seterusnya. 
Acane nak ke tengahkan Post Title dan Sidebar blog ye?
Senang jer caranya.
Tengok betul-betul oke. :)


1. Dengan menggunakan Ctrl F, uols cari kod kat bawah nih :


Untuk Post Title
h3.post-title {

Ataupun ini :
h4 {


Untuk Sidebar
h2 {


2. Dah jumpa? Oke, sekarang uols Copy dan Paste kod nih di BAWAH kod yang uols cari tadi.
text-align:center;


Senangkan? Oke, jangan lupa SAVE!



Korang dah bosan dengan bentuk border yang sedia ada?
Korang dah tak mahu pakai border bentuk petak?
Oke, kat bawah nih, ade kod untuk border yang biasa digunakan di dalam blog.



-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;


-moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 50px 25px;


-moz-border-radius-bottomright: 25px 50px;
border-bottom-right-radius: 25px 50px;


-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;


-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;


-moz-border-radius: 35px;
border-radius: 35px;



Yang nih korang pandai-pandai oke gunakan. 
Nanti kalau rajin Montela buat Tutorial macam mana nak apply bentuk border nih dalam blog :))



Tutorial kali nih amatlah mustahak ye. Eceh.. Sebab kan, Montela sendiri, kalau blogwalking, Montela suka blog yang kalau kita klik Link tuh, dia akan bukak kat tab baru. Tutorial nih amat lah mudah sekali. Jom jom!  Korang tengok kat bawah nih oke.

1. Pergi ke Dashboard > Design > Edit HTML
2. Dengan menggunakan fungsi Ctrl F, korang cari kod ini 
<head>
3 Oke, dah jumpa? Good.. Now, uols semua Copy dan Paste kod nih kat BAWAH kod yang uols cari tadi.
<base target='_blank'/>  
4. Done? Jangan lupa SAVE oke!







Hye hye! Kali nih Montela nak ajar cara nak letak Bloglist dalam blog.
Sebelum tuh, apa kepentingan Bloglist ye dalam blog?
Oke, dalam Bloglist nih akan ada Blog-blog favourite uols.
Kalau nak letak semua Blog yang uols follow pun boleh. 

1. Dashboard > Design > Layout > Add Gadget > Add HTML



2. Now, uols tambahkan Gadget tuh dalam Blog oke. Dan akan keluar macam nih :


3. Uols nampak tak Add a blog to your list? Oke, klik. Dan akan keluar macam nih :


4. Masukkan lah Link Blog followers uols. Masukkan Link Blog Montela sekali oke :)

Selamat Mencuba.






Header memainkan peranan yang agak penting untuk sesebuah blog.
Montela sendiri kalau masuk mana-mana blog, nampak Header cantik je, mesti rasa,
Oh Mai God.. Cantiknya header.
Oke, tanpa buang masa, meh Montela ajar macam mana nak centerkan Header blog. 


1. Pergi Dashboard > Design > Edit HTML
2. Cari kod kat bawah nih. Nak senang, uols tekan ctrl F oke.
/* Content

3. Oke, then korang copy kat bawah nih dan paste kan kat ATAS kod yang No.2 tadi.
.Header img {
margin-$startSide: auto;
margin-$endSide: auto;
}

4. Tak paham? Meh Montela tunjuk. Kod korang masukkan tadi tuh akan jadi macam nih. 
.Header img {
margin-$startSide: auto;
margin-$endSide: auto;
}
/* Content
----------------------------------------------- */

Senang kan? Preview dulu oke. Kalau takde Error, baru Save :)






Oke, tadi duk sembang-sembang dengan adik. Adik ke adik Montela kata blog Montela nih berat semacam. padahal Broadband dia dah Quota Limit. Uols tahu tak acane nak timbang blog uols. Senang je. Takde la susah sangat. Atleast bila uols dah tau berat blog, uols boleh la up kan sikit maintanencenya. Hikhik.. I means, uols boleh la buang widget yang tak patut. Takde la blog uols berat semacam. Ye tak.

Mula-mula pergi ke Sini.

Oke, dah masuk Link yang Montela bagi tuh, korang nampak tak kotak macam kat bawah nih?


Sekarang uols masukkan URL Blog uols ke dalam kotak tersebut oke. 
Then, lihat hasilnya.

Selamat mencuba :)