• Enter Slide 1 Title Here

    This is slide 1 description. Go to Edit HTML of your blogger blog. Find these sentences. You can replace these sentences with your own words.

  • Enter Slide 2 Title Here

    This is slide 2 description. Go to Edit HTML of your blogger blog. Find these sentences. You can replace these sentences with your own words.

  • Enter Slide 3 Title Here

    This is slide 3 description. Go to Edit HTML of your blogger blog. Find these sentences. You can replace these sentences with your own words.

  • Enter Slide 4 Title Here

    This is slide 4 description. Go to Edit HTML of your blogger blog. Find these sentences. You can replace these sentences with your own words.

  • Enter Slide 5 Title Here

    This is slide 5 description. Go to Edit HTML of your blogger blog. Find these sentences. You can replace these sentences with your own words.

Tuesday, April 2, 2013

Bermain dengan CSS

  1:17 AM   No comments   Edit

Assalamualaikum Wr. Wb.
Selamat malam kawan – kawan semua, kali ini kita bertemu lagi dalam pembahasan pembuatan web sederhana dari css, Saya waktu perkuliahan Pemrogaman Berbasis Web itu mendapatkan tugas dari dosen saya, tetapi tugas itu bukan untuk membuat mulai nol web tersebut melainkan Cuma mengeditnya menjadi yang di inginkan oleh dosen saya, ya berikut ini saya share sourcode sebelum di edit dengan hasilnya pula

Dan untuk hasilnya webnya dengan source code diatas adalah seperti dibawah ini.
Dan untuk selanjutnya source code diatas di edit dengan kriteria – kriteria seperti dibawah ini :
  1. Ubahlah teks dalam list (kandungan susu) sehingga property font (warna, jenis font, ukurannya sama dengan paragraf pertama)
  2. Ubahlah teks dalam panel menu atas menjadi link dan ketika disorot dengan kursor, warna teks dan background-nya berubah.
  3. Isilah bagian sebelah kiri halaman (bagian berwarna biru) dengan suatu konten (misalnya daftar artikel, dsb). Dan percantiklah dengan kreasi CSS anda (tidak ada CSS berarti juga TIDAK ADA NILAI)
  4. Tambahkanlah teks/ tulisan yang proporsional di bagian header halaman (diatas gambar warna oranye)
Untuk menuhi kriteria yang pertama kita tambahkan sourcode ini..
·         Yang fungsinya untuk index ul fontnya dibuat sama dengan font yang ada di index p, yaitu dengan type font 11px Candara, Arial, Tahoma dan padding-bottom 5px.
·         Untuk kriteria yang kedua yang di inginkan pak dosen adalah mengubah teks dalam panel menu atas menjadi link dan ketika disorot dengan kursor, warna teks dan background-nya berubah.
Dengan cara menambah beberapa source code agar menu tersebut menjadi link yang bisa di klik tetapi setelah diklik akan menuju ke halaman depan karena tidak saya arahkan ke link, dengan menambah <a href>.
·         Setelah itu menu yang ketiga yang di minta adalah Isilah bagian sebelah kiri halaman (bagian berwarna biru) dengan suatu konten (misalnya daftar artikel, dsb). Dan percantiklah dengan kreasi CSS anda (tidak ada CSS berarti juga TIDAK ADA NILAI).
·         Dan saya mengisi halaman sebelah kiri atau barwarna biru dengan kalimat seperti ini Selamat Datang di WEB Sederhana ini, “Assalamualaikum Wr. Wb. Selamat Pagi, Siang, Sore  Lagi Ngapain kawand - kawand semua.....??”, dan saya menambahkan animasi blits di bagian tersebut, berikut potongan source codenya.
·         Sehingga setelah kita tuliskan seperti itu maka hasilnya yang ada pada halaman sebelah kiri atau bagian yang berwarna biru hasilnya seperti dibawah ini.
·         Dan untuk kriteria ke empat adalah menambahkanlah teks/ tulisan yang proporsional di bagian header halaman (diatas gambar warna oranye).
Dan untuk potongan source codenya seperti ini.

· 
·         Disana saya menggunakan style warna biru dengan tulisan yang tebal dengan ukuran 12, dan dengan menuliaskannya rata tengah dengan tulisan arial.
Dan hasilnya seperti ini.
·         Dan untuk yang terakhir sendiri saya iseng – iseng edit juga di bawah halaman sendiri yang di bagian warnakuning dengan tulisan  DI EDIT OLEH INTAN_MAMEN,
Dengan Source codenya seperti ini.
·         Disana saya menggunakan style style warna biru dengan tulisan yang tebal dengan ukuran 12, dan dengan menuliaskannya rata tengah dengan tulisan arial.
Sehingga hasil potongan source code di atas seperti ini.
Dan untuk hasil keseluruhan source codenya setelah di edit dan setelah ditambahi potongan source codenya adalah seperti ini
   Oia menambahkan sedikit jangan lupa di ingat CSS disini menggunakan teknik Embedded CSS yang disisipkan menjadi satu dalam file, sehingga memungkinkan kita untuk lebih mudah merubah source code css kita. Syntax CSS tepatnya diletakkan diantara tag <head></head>.
Oia gan Fungsi CSS juga untuk mendesain blog kalian agar nampak lebih indah dan berkualitas dan juga dapat mempersempit source code yang digunakan pada template.
CSS juga dapat digunakan untuk meringkas pekerjaan, oiya daritadi kok ngomongin CSS melulu, ada yang tau gak sebenarnya singkatan dari CSS itu apa hayyoo?
CSS itu adalah Cassading Style Sheets.

Disini ada KELEBIHAN dan KEKURANGAN CSS


   Kelebihan :
·         Di sponsori oleh Google
·         Mudah dalam penempatan google adsense
·         Pilihan gadget sangat banyak
·         File CSS dan HTML bisa diedit dan dimodifikasi sesuka kita
·         Dapat memposting melalui E-mail dan MMS di Hp
·         Kemudahan dalam mengatur page elements
·         Kemudahan dalam merubah warna themes dan lainya melalui kode HTML
·         Bisa dipasang kode HTML sendiri dan Javascript
·         Blogspot lebih cepat di-index oleh Google
·         Sangat cocok untuk bisnis
·         Gratis
   Kekurangan :
·         Tidak ada tags keyword
·         Desain tempalate sedikit
·         Blogspot hanya menyediakan file upload untuk gambar-gambar saja
·         Tampilan dashboard sederhana.
   Terimakasih mungkin itu saja penjelasan dari kami bila ada salah kata atau kekurangan saya minta ma’af faskho..





























Subscribe to: Comments (Atom)