Artikel ini dipublikasikan oleh albri pada tanggal 08 June 2009 pukul 1:23 PM dibawah kategori Template, Tips Bloging | Sampai saat ini telah ada 18 komentar, semoga memberikan inspirasi bagi Anda.
Capek basa-basi lagi langsung saja pada topik bagaimana belajar CSS tanpa guru. Tapi sebelumnya anda perlu file praktek untuk melakukan hal ini, karena telah saya bilang bahwa file yang anda download dari seri tutorial ini menggunakan susunan CSS terpisah dimana hal ini saya lakukan agar cepat dan mudah, tapi dalam tutorial ini tidak saya pakai cara saya karena tidak
semua kawan memiliki hosting sendiri yang bisa diakses via FTP tapi sebagai informasi, dengan memiliki hosting sendiri kita bisa hemat waktu 50% lebih dan pembuatannya lebih mudah 30%. Kita tetap pakai saja file sebelumnya hanya kita edit dulu agar sesuai dengan template blogspot pada umumnya.
Agar anda tidak bingung sekarang buka file "Homepage_edit_image" yang telah anda download dengan macromedia dreamweaver dan temukan kode dibawah ini dengan menekan Ctrl+F:
Hapus kode tersebut, lalu anda masuk pada folder "Image" dan temukan file "ateonsoftcom.css" dan buka juga dengan dreamweaver. Copy semua yang ada di file "ateonsoftcom.css" dan paste di file "Homepage_edit_image" pada bagian seperti dibawah ini:
* -----------------------------
Name: Duro simple great
Designed by: Albri
URL: http://www.ateonsoft.com/
Slogan: ya hayyu, ya qayyum, ya razzaaq, ya rahman, ya rahiim, ya Allah
Allahumma shalli ala muhammad waala ali muhammad
-------------------------------- */
Maksudnya ganti kode diatas dengan kode yang ada di file "ateonsoftcom.css". Coba anda simpan file "Homepage_edit_image" sekarang, dan refresh di browser. Apa yang terjadi? semua image tidak tampak dan jadi jelek. Untuk mengembalikan tampilan silahkan tambahkan kode "image/" pada tiap kode yang memanggil image, seperti dibawah ini:
body {background: #ccc url('bg_bodyHj.gif');font: 70%/1.5em Tahoma, arial, Verdana, sans-serif;color: #333;text-align:center;}
Ganti dengan:
body {background: #ccc url('image/bg_bodyHj.gif');font: 70%/1.5em Tahoma, arial, Verdana, sans-serif;color: #333;text-align:center;}
Ganti semua yang mengandung image, umumnya ada pada struktur kode yang diawali "background" atau "backgound-image", lakukan sampai tampilan di browser kembali seperti semula. Jika ini sudah dilakukan maka struktur HTML sudah sama dengan template blogspot pada umumnya. Coba anda buka template anda sendiri pasti anda akan menemukan kode serupa tapi alamat gambarnya adalah absolute address yaitu disertai http://....
Nah sudah, sekarang trik belajar CSS sendiri adalah anda bisa mengubah nilai-nilai di CSS untuk percobaan dan lihat hasilnya dengan me-refresh di browser. Misal coba anda ganti kode dibawah:
#content-wrapper {clear: both;width: 760px;padding: 0;margin: 0 auto;}
Ganti dengan:
#content-wrapper {clear: both;width: 800px;padding: 0;margin: 0 auto;}
Info Kampanye Anti Bokep
Kampanye anti bokep yang telah didengungkan ternyata mendapat respon dari penyedia bokep asli dengan membuat blog yang menggunakan subdomain kampanyeantibokep, tapi pada konten yang ada justru berisi cerita bokep asli.
Rupanya mereka gerah juga ingin dikalahkan, dan mencoba melawan dengan memutar-balikkan kampanye anti bokep ke bokep tulen, andai saja kampanye ini didukung banyak blogger tentu mereka tidak akan berdaya, sayang tidak banyak insan SEO yang mendukung, entah apa mereka suka bokep juga barangkali, hiks....
Saya tahu saat ngecek keyword diatas di SERP, saya pikir dukungan, ternyata jueder... lha kok asli, hihihihi... akhirnya saya jadi korban mereka.
Informasi SEO
Lihat apa pengaruhnya di browser. Jika anda tidak mengerti kode silahkan ganti nilai kode tersebut dan lihat perubahan apa yang tampak, dengan begitu anda akan mengerti maksud dari perintak kode tersebut. Semakin banyak anda mencoba semakin anda banyak mengerti kode-kode CSS. O iya kalau anda bingung mana bagian yang berubah silahkan baca kembali cara mengetahui lokasi kode CSS yang ada di body di artikel sebelumnya. Atau silahkan anda cari dengan Ctrl+F kode content-wrapper dibagian body (ada dibagian bawah).
Kode CSS yang diawali tanda # adalah untuk ID dan kode CSS yang diawali . (titik) adalah CLASS. Silahkan diamati, sabar ya memang tidak mudah kawan.
Anda bisa ganti dengan warna dll terserah anda, kalau sudah bisa coba praktekkan pada template anda sendiri dengan memakai urutan yang sama.
Nah pada seri tutorial berikutnya semoga yang terakhir adalah memasang kode pada file yang sudah diedit pada template XML sehingga bisa digunakan pada blog, dan apa yang anda buat saat offline bisa tampak saat online.
Sampai jumpa lagi.
Tidak ada komentar:
Posting Komentar