728x90 AdSpace

Latest News

12 November 2010

Tutorial:Pos Dengan Latar Belakang Berbeza

Camna nak buatkan pos dengan latar belakang berbeza?

BILA IANYA MUNGKIN DIPERLUKAN
  • jika korang nak buat pos khusus(macam pos tema)
  • bila korang ada mutliple author kat blog.Penampilan pos bergantung kepada setiap author
  • cara ni juga boleh diguna utk highlightkan sbhgn Post
  • dan lain-lain yg korang bleh fikirkan 

Camna Nak Buat?
Ianya dilakukan dengan "wrapping"/membalut kandungan Post ke dalam elemen "div". Korang setkan setting kod ni kepada pos korang yang dah dipublish juga....dan ubah/alih ia bila-bila masa...

Kod untuk ubah warna background pos:



<div style="background:#FFE1FF; padding:5px 8px 5px 8px;">
Teks korang disini
</div>
  • Line oren adalah line dimana korang perlu letak di PERMULAAN pos korang...
  • Line merah jambu adalah line yang korang perlu letak di AKHIR......
  • Gantikan kod hijau dengan kod warna yang korang suka
  • Di "Teks korang di sini..."adalah utk korang letakkan kandungan pos korang
  • Padding adalah supaya teks tak rapat dengan border

Kod utk letakkan imej latarbelakang di belakang Pos: 

 <div style="background:url(URL GAMBAR KORANG) no-repeat;">
Teks korang disini....
</div>

  • Line hijau,korang letak alamat URL gambar korang
  • Line oren adalah line yang korang perlu letak di PERMULAAN pos korang......
  • Line merah jambu adalah line yang diletakkan di AKHIR.
  • Di "Teks korang di sini..."adalah utk korang letakkan kandungan pos korang

Sekarang korang ada banyak pilihan disini
  • korang boleh guna corak kecil, dan setkan utk repeat di sebelah kawasan post  (cuma alihkan "no repeat" dari kod)
  • korang boleh posisikan gambar dan letakkan di lokasi didalam pos
  • gabungan warna + gambar background (background:#000000 url(ALAMAT URL)no-repeat;)

Contoh kod yang diletakkan dalam kotak edit pos:

  • kalau boleh,letakkan kod selepas dah siap menulis pos
  • buat di EDIT HTML Post editor
  • Jika korang pergi semula ke edit kod,korang akan perasan Blogger ubah sikit kod....tapi ia tetap sama
Ok,tu je,TQ^^
Tutorial:Pos Dengan Latar Belakang Berbeza
  • Blogger Comments
  • Facebook Comments

2 ulasan:

Top