Tutorial : Title Sidebar Menggunakan Image

Assalamualaikum Ya Habibi

Cuba lihat sidebar title tuh, yang tuh aku guna image. Jum ikut step kalau nak cuba. 

• Dashboard -- Template -- Edit HTML
• CTRL + F dan cari code .sidebar h2 {
• Kalau dah jumpa, bawah code tuh ada anak-anak dia kan? sila lihat contoh.

.sidebar h2 {

margin: 1.6em 0 .5em; 

padding: 4px 5px;

background-color: $sidebarTitleBgColor; 

font-size: 100%; 

color: $sidebarTitleTextColor;

 }

• Padam code yang aku bold kan tuh, dan copy code dibawah dan pastekan bawah .sidebar h2 {

padding: 4px 5px;

height:50px;

letter-spacing : 2px;

background: url(URL IMAGE);

font-size:24px;

color:#fff;

text-align:center;

margin-top: 3px;

background-position: top;

line-height:1.6em;

}

• Yang warnah merah tuh korang adjust. Kalau okey tayah laa adjust kan. 
• Url image boleh ambil disini Klik Klik 
• Preview dan save. 

Tutorial: Cute Icon Sebelah Tajuk Blog Archive

Assalamualaikum Ya Habibi

Gais, ni tutorial untuk pengguna DENIM TEMPLATE

Nampak tak rumput hijau comel sebelah tajuk tuh. Comelkan? LOL XD

• Dashboard -- Template -- Edit Html
• Cari code <data:post.title/>
• Dah jumpa? Code penuh dia <li><a expr:href='data:post.url'><data:post.title/></a></li> kan?
• Copy code bawah ni dan pastekan diantara <li><a expr:href='data:post.url'> dan <data:post.title/></a></li>

<img src='http://i122.photobucket.com/albums/o260/mhilka/iconesagenda/mini-icone19.gif'/>

• Dia akan jadi macam ni  <li><a expr:href='data:post.url'><img src='http://i122.photobucket.com/albums/o260/mhilka/iconesagenda/mini-icone19.gif'/><data:post.title/></a></li>
• Preview dan save.

Tutorial: Lebarkan size Content Body, Sidebar & Post

Assalamualaikum ❤


Hi, okey selepas tukar background aku nak ajar korang macam mana nak lebarkan content body,sidebar dan post. Kalau nak kicikkan pun boleh. Tapi tak nampak kemas kalau kicik-kicik.
Template -- Edit Html Tekan mana-mana dalam kotak tuh dan CTRL+F untuk memudahkan pencarian Untuk lebarkan content korang cari code #content-wrapper { dia akan keluar seperti contoh dibawah
#content-wrapper {  width: 760px; margin: 0 auto; padding: 0 0 15px;  text-align: $startSide;  background-color: $mainBgColor;  border: 1px solid $borderColor;  border-top: 0; }
Untuk tukar keleberan post entry boleh search code ni #main-wrapper {
#main-wrapper {  margin-$startSide: 14px;  width: 464px;  float: $startSide;  background-color: $mainBgColor;  display: inline; /* fix for doubling margin in IE */  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 */  }
Untuk sidebar pula korang search code ni #sidebar-wrapper {
#sidebar-wrapper {  margin-$endSide: 14px; width: 240px;  float: $endSide;  background-color: $mainBgColor;  display: inline; /* fix for doubling margin in IE */  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 */ }

Merah: Tukar pada size yang korang nak. Misalnya kalau content 1000px. Korang agihkan sidebar 300px dan post entry 700px. {300px+700px =1000px}. Faham tak apa yang aku sampaikan ni. Kalau content 1200px. Korang nak sidebar 300px je selebihnya ada 900px kan? 900px tuh untuk post entry. Hm aku rasa macam dah ajar math pula.

Purple: Yang purple ni pula untuk sidebar dan post entry belah mana. Nak belah kanan ke kiri ke. Kalau korang perasan dekat main-wrapper codenya $startside kalau korang nak letak post entry to the left just gantikan kedua-dua $startside dengan code left. Kalau dah post entry left sidebar mesti laa right kan? Gantikan $endside tuh dengan code right. Begitu laa sebaliknya. 

Ada faham? kalau tara faham jangan segan-segan bertanya. 
Nanti aku akan update tutorial DENIM TEMPLATE dekat tutorial site aku. Nantikan yee tuto berikutnya

Tutorial: Tukar Background

Assalamualaikum ❤

Semalam aku janji dengan korang nak share tuto cantikkan blog guna denim dari header sampai footer kan. Okey start. First kita tukar background dulu. 

• Template - Edit HTML
• Tekan mana-mana dalam kotak tuh dan CTRL+F 
• Cari code body {
• Bawah code tuh background: $bgColor; kan?
• Padam code background: $bgColor; tuh dan gantikan dengan code dibawah ini

background:url(URL GAMBAR);

Background boleh cari disini. KLIK SINI