Tutorial Design Template Blog (Part 3 : Edit Post Dan Sidebar)

Assalamualaikum..

Alhamdulillah.. Dah sampai pun ke Part 3.. InsyaAllah ni yang terakhir kot untuk Tutorial Design Template Blog ni.. Yang MD ajar ni yang basic ja ya.. Nanti akan menyusul lagi tutorial-tutorial lain.. Tapi untuk yang basic ni sampai sini saja.. Ok tanpa lengah masa lagi jom sambung kerja-kerja edit blog ni..

Baiklah sekarang kita nak edit bahagian post kita.. Kalau biasa plain ja kan macam ni..

Kita tambah sikit kasi jadi macam ni..

Nampak macam menarik kan bila tambah border dan background macam tu.. Baiklah jom kita proceed terus ke step pertama.. Korang kena search dulu perkataan di bawah ni.. Tekan Ctrl + F untuk memudahkan pencarian korang..

.post {

Dan pastekan ini di bawah .post { tadi...

background: #ffffff;

border: 0px solid #ffffff;

Tapi kalau korang paste yang ni saja takkan effect apa-apa.. Ni cuma basic saja.. Kena edit sikit background dan border tu..

Cara edit background  ~ background: #ffffff;

Yang kita guna sekarang #ffffff tu adalah kaler putih.. So korang cari la kaler yang korang berkenan, ambik code dia kat SINI.. Korang ganti la #ffffff tu dengan code korang.. Cari yang kaler light sikit la.. Hasilnya..

background: #FBEFF2;

Cara edit border ~ Yang di bawah ni saya terangkan yang basic saja.. Untuk belajar dengan lebih jelas tentang border ni sila rujuk link ni : Tutorial Jenis-jenis Border Blog

border: 0px solid #ffffff;

Yang korang paste tadi tu 0px solid #ffffff kan.. 0px tu korang kena gantikan sebarang nilai kat situ.. 1px ka.. 2px ka.. Sampai 10px pun boleh.. Lagi besar nilai tu lagi tebal border korang..

border: 0px solid #ffffff;

Perkataan solid tu pulak korang boleh ganti dengan jenis-jenis border yang lain.. Solid ni border normal ja.. Korang boleh jugak pilih yang lain-lain seperti dotted, double, groove, dashed, inset, outset, dan ridge..

border: 0px solid #ffffff;

Macam tadi jugak, korang cari la code warna yang korang berkenan di SINI.. Untuk border korang cari la kaler yang terang sikit ya..

border: 5px solid #F7819F;

Kalau korang nak gambaran yang lebih jelas tentang border ni, serta gambar-gambar contoh untuk border ni.. Skali lagi rujuk tutorial ni..

Tutorial Jenis-jenis Border Blog

Jadi ini saja la yang MD nak ajar hari ni.. Eh? Banyak ni ja? Macam mana nak edit sidebar? Title post? Yang lain-lain? Hehe sabo-sabo.. Sebenarnya cara dia sama ja.. Cuma korang kena tau dekat mana nak edit.. So sekarang ni MD kasi tempat-tempat untuk korang edit ya.. Buat macam step pertama balik.. Pastekan background: #ffffff; border: 0px solid #ffffff ni selepas code-code yang akan diberi di bawah..

Untuk edit tajuk post, cari

.post h3 {

background: #F6CED8;

Untuk edit tarikh post, cari

h2.date-header {

border-bottom: 2px dashed #F7819F;

Untuk edit footer post, cari

.post-footer {

background: #F6CED8;

border: 2px dotted #F7819F;

Untuk edit sidebar, cari

.sidebar .widget{

background: #FBEFF2;

border: 5px solid #F7819F;

Untuk edit tajuk sidebar, cari

.sidebar h2 {

background: #F6CED8;

*Padamkan code border-bottom: 1px solid #000000; untuk buang line hitam bawah tajuk tu..

#Note : Code yang saya tulis di bawah setiap gambar tu merupakan code yang saya guna untuk dapatkan hasil macam dalam gambar tu.. Paham?

Sampai di sini dulu kot.. Ini ja la basic yang kena ada untuk edit blog tu.. Tak susah sebenarnya.. InsyaAllah, korang blajar la main-main dengan code tu.. Alah bisa tegar biasa kan.. Gudluck k.. Nanti tunjuk la blog yang korang dah edit tu kat MD.. Kalau korang rasa berguna sila la share dengan kawan-kawan.. Sekian, opps.. Jangan lupa klik churpchurp tau.. Penat ni.. Assalamualaikum..

---

Don't forget to look at the ads below

---