Bismillahirahmannirahim.. Assalamualaikum w.b.t Dear BeloG, Maaf semua, SH agak lambat menyediakan tutorial part 2.. Sejak akhir-akhir ini, SH agak kepenatan maka tak kesempatan untuk menjenguk beloG ini :) Baiklah hari ni kita sambung tutorial hari tu! Bagi yang nak tahu Tutorial : Style kan Minima template anda ! [ Part 1] hari tuh bolehlah klik SINI ! Baiklah, tutorial lalu SH dah ajar cara make over background bagi template minima ! Kali ini SH nak ajar cara make over bahagian entry dan side bar pula ! Jadi, kali ni kita bagi warna berbeza dari background beloG kita ok ! Seperti biasa, klik DESIGN > EDIT HTML > cari code #outer-wrapper { untuk cari code korang boleh tekan ctrl + f serentak ! Lepas dah cari code diatas , korang akan jumpa code ini ; #outer-wrapper{ Kita akan tambah code warna untuk background pada code tersebut. Caranya, korang boleh tambah code dibawah ini pada mana-mana bahagian dalam code diatas : background-color: #(warna yang korang nak); Contohnya : #outer-wrapper { background-color: #f8b0d7; width: 660px; margin:0 auto; padding:10px; text-align:$startSide; font: $bodyfont; }Maka ,beloG kesayangan korang akan jadi begini: Ok sekarang masanya untuk make over untuk bagi kelainan bagi bahagian entry dan side bar korang plak ! Untuk bahagian entry, cari code : #main-wrapper{ Korang akan jumpa code dibawah ini : #main-wrapper { width: 410px; float: $startSide; 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 */ } Masukkan code background warna yang korang suka. Contohnya :
background-color: #fbe4f1; width: 410px; float: $startSide; 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 */ } BeloG korang akan jadi begini : Untuk bahagian side bar pula, korang cari code #sidebar-wrapper { Korang akan jumpa code dibawah ini: #sidebar-wrapper { width: 220px; float: $endSide; 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 */ } Masukkan code background warna yang korang idamkan! Contoh : #sidebar-wrapper { background-color: #dcadc7; width: 220px; float: $endSide; 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 */ } Haa senang kan, korang dah mahir pun dalam sesi tukar menukar warna ini ! Kalau korang tak nak guna warna tapi nak guna picture yang menarik korang boleh cari di SINI ! Tapi korang perasan sesuatu tak dengan beloG korang.. Width nya bagi setiap entry or sidebar nampak kecik kan.. Kalau SH memang tak puas nak baca kalau beloG macam tuh ! Macam mana nak tukar?? Senang jer ! Kita jumpa di part 3 ok ! SINI Thanks with Love to: Belog Cap Ayam EpiloG Dunia SaYuRi. Labels: Tutorial |