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. 

 

---

THANKS FOR READING. DROP YOUR COMMENT PLEASE?

---