Cara mengubah template (tepatnya: skin) sesungguhnya tidak sulit. Terutama jika itu template bikinan Charmskin- Blogspot.Com.Memang, pada awalnya, baru-baru melihat kode template, daku udah stress duluan!
Tetapi, setelah menyempatkan sedikit waktu menyermati, ternyata tidak sesulit yang kubayangkan.
Malah, bagian tersulitnya terletak pada bagaimana cara memandang diri sendiri.
Kalau daku merasa seorang designer, tentu saja jadi beban berat. Maka, kulakukan sebizaku. Sedikit meniru, memancing inspirasi, bagiku bukanlah hal yang nista.
Di luar semua itu, daku merasa menghadapi game. Game ini mengingatkan daku waktu di Taman Kanak-kanak. Warnalah gambar ini! Ha..ha!
Mengasyik-kan,kok!
Mari kita cermati dulu struktur template dariku pada postinganku yang lalu, yaitu: Membuat Pola Dasar template.
Struktur template saya itu, terdiri atas beberapa bagian: Tiap-tiap bagian daku berikan keterangan yang memadai.
Body : Terdapat pada kode bagian awal. Bagian ini mengatur : warna layar komputer, warna link, default-font, border-image, dan sebagainya.
Outher-wrapper : Untuk menentukan lebar halaman.
Header : Untuk penempatan image/gambar head, judul blog
Main-wrapper : Untuk penempatan postingan.
Topmain-widget : Penempatan widget tambahan di atas postingan.
Sidebar-wrapper : Penempatan widget-widget, baik widget kiri maupun kanan.
Bottombar-wrapper : Penempatan widget-widget tambahan di bawah posting.
Heading : Untuk mengatur font, ukuran dan warna judul widget
Coment : Untuk mengatur kotak komentar
Footer : Penempatan catatan-kaki atau bisa identitas produk Anda
1. Menentukan lebar halaman
Temukan kode berikut:
#outer-wrapper {
width: 980px;
Tentukan angkanya dalam satuan ukuran pixel, misalnya 800px, atau 900px.
Khusus untuk template buatan saya, dengan mengubah satu angka tersebut (outer-wrapper), semua bidang akan menyesuaikan secara otomatis. Kecuali, sidebar left dan sidebar right. Ini otoritias Anda untuk menentukan secara manual sesuai selera. Yaitu:
2. Mengatur lebar sidebar left/right:
Temukan kode seperti ini. Lalu tentukan angkanya dalam satuan ukuran pixel, misalnya 180px
.sidebar-left {float:left; width: 180px;}
.sidebar-right {float:right;width: 150px;}
Lebar kedua sisi samping itu tidak harus sama, 'khan?
Demikian juga untuk bottombar, kiri, tengah dan kanan.
3. Mengatur warna latar belakang:
Anda tinggal menemukan kode seperti di bawah ini:
background : #FFFFFF; (putih)
Angka di belakang tanda pagar [#] adalah kode warna. Anda dapat memilih warna yang paling eksklusif menurut selera Anda. Dapatkan kodenya di postinganku yang ini: Kode warna eksklusif template-skin.
Anda juga dapat menggunakan image sebagai latar belakang dengan menambahkan di belakang warna background. Contoh:
background : # CCC url(alamat image/gambar anda );
4. Membuat sudut lingkar:
Tambahkan di bawah background : # ... ....
-moz-border-radius : 5px;
Makin besar angka, 10 atau 15, makin lebar sudut-lingkar (curva) yang terbentuk.
5. Menentukan tebal border garis pembatas.
Tambahkan di bawah background : # ... ....
border: 2px solid #ADBABA;
Tentukan ketebalan dalam ukuran pixel.Misalnya,1, 2, 3px dst.
Tentukan warnanya border dengan menulis, black atu green, atau blue. Misalnya,
border: 5px solid blue;
Untuk warna yang eksklusif gunakan #xxxxxx. Bagaimana kodenya, lihat di sini: Kode warna eksklusif template-skin..
Jika ingin template tampil tanpa pembatas (borderless), tinggal hapus saja kode border tersebut.
6. Menentukan landasan teks.
Landsan teks atau image,dinyatakan dengan istilah: padding, misalnya
padding: 5px 10px 10px 5px ;
Tentukan ukuran dalam pixel. Urutan angka di atas menunjukkan batas landasan atas, kanan, bawah dan kiri.
7. Menentukan lebar pinggiran bidang
Yang ini dinyatakan dengan istilah: margin, contoh:
margin: 5px 15px 10px 15px:
Tentukan ukuran dalam pixel. Urutan angka tersebut menunjukkan margin atas, kanan, bawah dan kiri.
Catatan: Daku pernah bingung membedakan antara padding dan margin.
Agar ga' bingung disarankan
a. Berikan dulu kode border pada sebuah bidang (nanti bisa dihapus).
b pinggiran di dalam border, disebut padding, sedangkan
c. pinggiran di luar border, disebut margin.
8. Font
Untuk menentukan font ini, tentunya Anda sudah akrap:
a. Color : Menentukan warna font, black, red atau warna eksklusif dengan kode #xxxxxx;
b. Text-align: left; pilihan lain: right, center; justify;
b. Font-size: 12px, (pixel) atau bisa dalam ukuran point (pt)
c. Font-weight atau Font-style:italic; pilihan lain:normal;
Dan sebagainya yang sudah Anda akrapi.
Catatan penting:
Hanya dua hal yang perlu diingat:
1. Jangan ubah, tanda-tanda baca seperti: titik-dua [:}, titik-koma[;] tanda {}, dsb. Mengubah atau menghilangkan tanda baca ini, tampilan halaman Anda bisa berubah secara mengejutkan atau ngacak, di luar kendali Anda!
2. Jika Anda belum menguasai bahasa HTML, jangan mengubah kode apa pun di bawah
<b:skin><![CDATA[ dan di atas ]]></b:skin> Sedikit kesalahan terjadi, perubahan Anda akan ditolak dengan pesan: not performed well! Ini bisa membuat Anda stress.
Selamat menikmati game- Anda!
With Love, Whienda.
Tidak ada komentar:
Posting Komentar