Tutorial sidebar dan background

Thursday, July 10, 2014


Assalamualaikum, =D


2 minggu yang lepas (entry sini), aku dah edit blog ni mana yang patut aku edit, cuma tak tukar design sidebar je. Katanya masa tu tak ada idea. So hari ni, bila ada idea nak tukar design sidebar...Aku terus tukar. Menjajau juga aku mencari beberapa tutorial untuk ubah design sidebar aku tu. Dan akhirnya...

Ya iyalah, beginilah hasilnya (gambar "selepas")


Dan terhasillah satu design sidebar dari 3 jenis tutorial yang berbeza. Di bawah ni aku sertakan link untuk setiap tutorial yang aku follow dalam menghasilkan design sidebar blog aku yang paling simple. Simple - simple sudahlah, hehe.

1. Untuk tajuk sidebar, aku ambil dari blog INI.
2. Untuk body sidebar, aku ambil dari blog INI.
3. Untuk background sidebar, aku ambil dari blog INI.

Terima kasih buat ketiga - tiga blog yang menyediakan tutorial tersebut. So...dekat bawah ni aku akan update dua tutorial untuk sidebar seperti gambar - gambar di atas. 

Design Pertama
h2 {
text-align:center;
font: normal 12px 'Trebuchet MS',Trebuchet,Verdana,sans-serif;
-moz-border-radius:20 0 10px 10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
background: #ffffff url(URL BACKGROUND) repeat scroll bottom center;
padding:5px 8px;
border:3px solid #F778A1;
}
.sidebar .widget-content {
-moz-border-radius:0 0 10px 10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
background: #ffffff url(URL BACKGROUND) repeat scroll bottom center;
padding:5px 8px;
border: 2px solid #F778A1;
}

Design Kedua
text-align:center;
background-color:transparents; repeat scroll bottom center;
border-bottom: 2px dashed #F778A1;
margin:1em;
font:normal 12px Century Gothic;
color: #000000;
}
.sidebar .widget {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background: #ffffff url(URL BACKGROUND) repeat scroll bottom center;
border-radius: 10px;
border:2px double #F778A1;
margin:0 -5px 1.5em -5px;
padding:10px 7px 10px 7px
}

Cara apply dalam blog 
1. Dashboard > Template > Edit HTML.
2. CTRL + F >> cari code "h2" (untuk sidebar)
3. Pilih mana - mana design sidebar yang korang suka dekat atas tu. COPY code tersebut.
4. PASTE di bawah code "h2" yang korang dah cari tadi.
5. Preview dulu (yelah mana tau ada error ke kan).
6. Save dan lihat hasilnya! =D

Nota
Untuk mereka yang tak berapa nak tahu guna edit HTML yang baru tu, boleh SINGGAH SINI << tutorial edit HTML new interface.

Lain - lain tutorial sidebar
1. Tutorial Full border di sidebar.
2. Tutorial Border Sidebar Part 2.
3. Tutorial Full Border di sidebar Part 2.
4. Letak Border dan Sidebar pada tajuk sidebar.
*eh rasa banyak pula tutorial sidebar sahaja, hahha.
*kalau nak tengok tutorial blogging lain SINGGAH SINI ok.


You Might Also Like

9 comment di sini.