Saturday, July 28, 2012

Tutorial : Add Navigate for Newbie (Blogskin)




Tutorial ni di re-quest oleh miera tak silap atin ah . dia tanya something ah . tapi atin kurang fhm .Tapi bile pk balik rasenye dia nak taruk navigate kot . Sebab atin perasan blog dia xde manu . Ohh ok, baru atin faham maksud die huhu . 


Yang atin ajar ni cuma untuk blogskin yang takde navigate je k . Now jom start

 Dashboard > Template > Edit HTML
 Tekan Ctrl + f (serentak) dan cari code </stlye>
 Copy code bawah ni
.navi {
border: 2px solid #FFD2DB;
background : #d1d1d1;
padding: 2px;
letter-spacing: 2px;
display: inline-block;
margin-bottom:2px;
width: 200px;
color: #fff;
-webkit-transition-duration: 1.5s;
font-family: century gothic;
font-size: 12px;
text-align: center;
text-transform: uppercase;
}
.navi:hover {
background : #fff;
-webkit-transition-duration: 1.5s;
color: pink;
margin-bottom:2px;
}
 Paste di atas code </stlye>
        
 Next , Copy code bawah ni pulak

*Code Pertama
<a class="navi" onClick="document.getElementById('entry').innerHTML=document.getElementById('about').innerHTML" title="">ABOUT</a>

*Code Kedua
<a class="navi" onClick="document.getElementById('entry').innerHTML=document.getElementById('tutor').innerHTML" title="">TUTORIAL</a>
 Paste kat bahagian sideber korang k
 Next . Tekan Ctrl + f (serentak) dan cari code </body> pulak
 Then , copy pulak yang bawah ni

*Code pertama
<div id="about" style="display: none;">
<div class="CODE POST">ABOUT </div><br>
<center><img src="URL IMAGE" width="500" height="250"></center><br>
Tulis apa2 yang korang nak buat . pastikan di sini
<br>
<br>

*Code Kedua

<div id="tutor" style="display: none;">
<div class="CODE POST">TUTORIAL</div><br>
<center><img src="URL IMAGE" width="500" height="250"></center><br>
Tulis apa2 yang korang nak buat . atau letak link tutorial di sini pastikan di sini
<br>
<br>

 Paste di atas code </body> tadi
     Review and Save.

hijau : warna border
oren : warna background
kuning : lebar dan tinggi
biru 1 : Tajuk 
biru 2 : Tajuk entry
pink : korang punye code post/entry   
bold : URL image korang







Atin harap bagi yang newbie ni faham2kan ok ><

11 comments:

Aimi Dyna ✰ said...

Susahnya kak! >.< hehe

Atin Tory said...

@aimi: susah? haha .. newbie mmg slalu ckp mcm tu .. cube je ..

NorAmirah said...

Salam Atin,tuto nie tak menjadi lah :'(

ArNi NiNiE said...

dik...napa tak akak tak dapat copy erk?

Atin Tory said...

@ArNi NiNiE : tekan ctrl+C (serentak)

stifa zara said...

code post tuh acane?quick respond

Vladi Perry said...

akak, ndot masih bingung .. ndot sedang buat blogskin tetapi navigationnaya tidak berfungsi dan masih saja bingung :(

Atin Tory said...

@Vladi Perry : ada code yg mungkin x sama... seperti code post ...

Simple Syara said...

Akak,code post tu ape ? respon dekat cbox tau :)

Marionette Myrrh said...

tok html javaskrip da x yg nie? leyh gne x?

ju lieya said...

jadikkkk ! mekasih.tp biler clik nape x kuar ape2 kat page kiter nak tu?camne ye?