161 Tutorial : buat background foto & label awan

Salam semua,

Harap semuanya sihat2 dan ceria2 belaka. Kali ni hanya nak berkongsi beberapa tutorial @ tips blog.

Iaitu cara nak membuat label awan dan membuat latarbelakang dengan foto sendiri.

1. Label awan

• pergi ke site ini => Blogger widgets
• kakyong ada letakkan link Blogger widgets di kakyong's bloggerlist di bawah tajuk 'Blogs tips & tutorial'
• atau terus ajer ke link ini =>Label Cloud Widgets For Blogger/Blogspot
• atau boleh juga merujuk ke blog Eriyza => Label berbentuk

2. Emoticon yang 'cool'..

• boleh refer & bookmark link ini =>Use emoticon on blogger blog

3. Membuat latarbelakang guna foto sendiri

• 1st pastikan foto/image yang ingin digunakan dalam saiz 1200 x 900 @ 1600 x 1200
• 2nd jika suka, buat lah editing ke atas photo.. kalo tak nak edit, guna original pun ok so tak perlu edit apa
• 3rd untuk foto editing, boleh guna macam2 software contoh photoscape, adobe photoshop, kakyong guna nero photosnap viewer *masa beli laptop memang dah ade software ni, so guna ajer lah*
• kemudian pergi ke website pyzam => http://www.pyzam.com/
• kemudian klik pada backgroung uploader , (dalam foto dibawah, yang di kotakkan merah)

  

• lepas klik situ, akan keluar sebegini

  

  klik pada yang ditanda anakpanah & upload foto yang dikehendaki

• ini adalah contoh nya, bila anda sudah upload foto, pastikan anda tanda @ tick pada item yang dikotakkan merah itu, sebelum copy code.

  

• kemudian copy code & pergi ke bahagian layout dan "add a gadget". Ini adalah contoh :

  

  jika begini background... hmm, akan jadi masalah bila buat entri, sebab latarfoto ini akan mengganggu pembacaan. Jadi masih perlu dibuat modifikasi. Maka perlu lah ruangan entri @ main post diedit @ diberi background berwarna, begitu juga dengan ruangan side-bar.

• contoh yang kakyong gunakan ini, menggunakan template minima. Jadi pergi ke Layout & edit html.
  #main-wrapper { width: 410px; background: #FFFFFF; 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 */ }
  #sidebar-wrapper { width: 220px; background: #FFFFFF; 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 */ }

• cari kod seperti yang diatas, untuk mudahkan carian klik shift-F3. dan taipkan kod yang dikehendaki. kemudian tambahkan kod yang berwarna merah. dan 'save'kan template.

  

• hasilnya adalah seperti ini

  

• jika berhajat untuk masukkan warna lain untuk main-wrapper & sidebar, boleh rujuk di sini => HTML Colors

note :

kakyong hanya belajar sendiri dan buat research sikit2 untuk belajar dan cuba-cuba untuk memahami kod html. Harap2 tutorial yang tidak seberapa ini dapat membantu.

kalo suka dengan n3 ni, sila tekan yer..!!