Sunday, 19 May 2013

Tutorial Jom Edit Template Denim Sendiri Part 1

بِسْــــــــــــــــــمِ ﷲِالرَّحْمَنِ الرَّحِيم
Assalamualaikum dan hi ^__^

Sekarang nie SK tengah dok free tambah tambah lagi mood tak tahu nak buat apa. Jadi saya rasa nak edit blog orang yang buat tempahan. Sambil2 tu kakak khadijah mintak SK untuk ajar beliau macam mana nak edit blog yang simple dan senang.

Tapi step2 dia amat panjang berjela-jela. Kalau tak faham calling2 la Student Kecik ni ye. Hi hu

Step pertama : Copy basic code untuk denim template di SINI. credit to faqihah

Step kedua : Login ke Dashboard > Template > Edit HTML > This is quite important. Backup Template anda dulu ! (kalau rasa2 tak nak tu tak payah) > Klik pada arrow yang atas sekali tu.

Step ketiga : Ingat tak kauorang dah copy kod di step pertama tu? Pastekan dalam HTML tu. (paste je) ***AMARAN : Lepas kauorang paste, jangan terus SAVE ! Sebab nanti Javascript yang lain hilang. Tapi kalau nak dia hilang, boleh klik save.

Step keempat : Yang part ni, copy dan paste kod yang SK bagi kat bawah ni satu persatu. Baca instruction dulu yer.

- JOM MULAKAN DENGAN LAFAZ BISMILLAHIRRAHMANIRRAHIM -

Selepas save, korang akan terlihatkan blog yang kosong dan berwarna oren. Tak berapa nak ceria, kan? Tujuan anis buat tutorial ni sebab nak ceriakan blog korang lah. Eceh.

Step pertama : Ctrl + f cari kode body { . Mesti jumpa, kan? Gantikan anak2 kode body { tu dengan kod yang SK kasi nie.

  background-image: url(URL BACKGROUND);
  cursor: url(URL CURSOR), auto;
  margin: 0;
  padding: 0px;
  font: x-small Verdana, Arial;
  text-align: center;
  color: #333;
  font-size/* */:/**/small;
  font-size: /**/small;
}
Merah : url background korang. Biru : Url cursor korang. Dan blog SK dah jadi warna biru ! yess
Step kedua : Ctrl + f dan search kod :
#content-wrapper {
Copy je kod di bawah dan gantikan bawah kod tadi ok ?

width: 760px;
  margin: 0 auto;
  padding: 0 0 15px;
  text-align: $startSide;
  background-color: $mainBgColor;
  border: 0px solid #fff;
  border-top: 0;
-moz-border-radius: 30px 30px / 30px 30px;border-radius: 30px 30px / 30px 30px;-moz-box-shadow: 0 0 15px 5px #FFFFFF;-webkit-box-shadow: 0 0 15px 5px  #FFFFFF;
  border-top-left-radius: 30px 30px;
  border-top-right-radius: 30px 30px;
  border-bottom-left-radius: 30px 30px;
  border-bottom-right-radius: 30px 30px;
}

Oren : itu widht content/blog korang. Boleh adjust nak kecilkan atau besarkan. Tapi kena ingat untuk adjust size dua code bawah ni :
#main-wrapper { dan #sidebar-wrapper
nampak tak perbezaan dia? ada lengkung dan shadow .

Step ketiga : Sekarang ni SK nak ajar untuk header pula. Create header macam biasa. Nak bersambung atau tak nak. Boleh search di bahagian tutorial SK atau uncle google ada jalan penyelesaiannya.
Step keempat : Remove navigation atas sekali tu. Ctrl+f cari kod 
/* Variable definitions
Paste kod nie ATAS dia .
 #navbar-iframe {
display: none !important;
}
Sure 100% benda tu hilang, kan? Lepas ni SK nak ajar macam mana nak tukar kan sidebar title kita daripada warna oren jadi cantik .
.sidebar h2 {
Nampak kan anak2 kod dia ? Ok anis nak korang tukarkan semua tuh dengan kod ni.

margin: 1.6em 0 .5em;
 padding: 4px 5px;
 background-image:url(http://i.imgur.com/tDtge.png);
font-size: 21px;font-family: century gothic;font-weight: normal;
color: #666;text-align: center; border-top: 2px solid #ffb9cb; border-bottom: 2px solid #bfdfff;
}
Merah tu tukar dengan background sendiri.


Ok SK rasa nak berhenti sampai sini. Jangan kata susah selagi kita tak cuba design sendiri. Senang je lah. Yang basic lain tu boleh search google . Bye !

** part 2 untuk blogskin haritu anis belum siapkan lagi. Maaf lah lambat giler giler lambat. InsyaAllah akan siap juga nanti. 


 

13 comments:

heirizalieyana said...

thu x cmne nk letak reply comment untuk tmplat demin. .

anis Sk said...

@heirizalieyana http://studentkecik.blogspot.com/2012/09/tutorial-buat-reply-comment.html
ada kt situ :)

S.K.A said...

owhhh pnjg lebar pnerangan..sy kalau xtry bt dlu, cnfirm xfham ni huk3..tp cntik blog sk ni :) kretif la..pndai edit2..

anis Sk said...

@S.K.A hehe, tak lah blog saya biase2 je :) thanks btw ^^

Athi Schaa said...

terima kasih bykII , sangat membantu. :D

anis Sk said...

sama2 kak schaa :D

Nur Mahirah said...

sangat-2 helpful .. wah , x sabar menanti part 2 :) tq ! <3

Mrs. Wordy said...

assalamualaikum, terima kasih banyak sebab post ni ;) have a good day, :3

anis Sk said...

@Nur Mahirah wahh terima kasih :D insha Allah part 2 akn datang !

@Mrs. Wardy waalaikumsalam ;) orait hv a nice day too !

nUr aS-sAkINah said...

salam, awakkkkk tolong....!!tadi saya follow step by step..tp sidebar saye kat bwh..camne nk ubah balik duduk sebelah kanan or kiri T_T

anis Sk said...

@nUr aS-sAkINah wsalam, awak kecilkan sikit saiz main wrapper dan sidebar wrapper awak tu spaya sesuai dengan saiz #contentwrapper. Hrp mmbantu =)

ana fatihah said...

wah, terima kasih. :)

anis Sk said...

@ana fatihah sama sama :)