06 Januari, 2010

Cara mengubah template jadi eksklusif

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.





Artikel Terkait:

11 komentar:

  1. Perlu menguasai bahasa HTML ya? Whiendra punya stoks shot template gambar alam semesta misalnya gunung, lautan, orang sedang bermeditasi (kaya aku punya tapi beda versi)dan tentu saja pemandangan bawah laut? Bisa bantu ya? Trims.

    BalasHapus
  2. wah makasih banyak... kadang2 waktu edit2 malah error semua..

    BalasHapus
  3. terima kasih banyak,,,postingannya sangat lengkap rinciannya sangat cocok bagi saya sebagai orang awam yg mau belajar (trmks chayank)oh yah mungkin aku mondar mandir disini gk apa2 yah.

    BalasHapus
  4. mba whienda yang cantik, ilmu di blog ini yang saya cari dari dulu, tapi saya masih bingung untuk mengubah lebar template charmskins tipe terminal-black-xml ke ukuran lebar 1300px, setelah saya mencoba mengikuti langkah2 diatas hasilnya malah berantakan, jika mba berkenan tolong tuntun saya untuk merubah template tersebut ke ukuran yg saya inginkan via email ke anieza09@gmail.com, terima kasih sebelumnya

    BalasHapus
  5. @ Tante Arum:
    Kayaknya, menguasai bahasa HTML bukan keharusan untuk membuat template yang memuaskan.
    Whienda juga miskin gambar atau foto yang sehubungan dengan aktifitas meditasi, kok, Tante.
    Kalau sekadar image pemandangan alam, kayaknya punya!

    BalasHapus
  6. @Nurgiantoro
    Daku juga sering ngalami eror demikian, kalau pas utak-utik bahasa HTML-nya!

    @Azisoghi
    Mondar-mandir kemari? Tentu saja daku akan senang sekali...kita sharing, yuk!

    BalasHapus
  7. @Anieza
    Sama! Daku juga pernah ngalami hal serupa. Pengin mengubah template malah morat-marit. Ternyata, hal itu justru kelebihan design template dari Charmskin. Yaitu, dapat kita modifikasi penuh sesuai kehendak kita!

    Dengan template bikinan saya, Anda akan tidak mengalami morat-marit, Cukup mengubah ukuran outer-wrapper, semua wrapper di dalammnya akan menyesuaikan diri(dengan perbandingan yang daku tentukan). Namun demikian, Anda masih punya cukup peluang untuk lakukan modifikasi sesuai selera.

    Terimakasih.

    BalasHapus
  8. Menarik sekali mampir ke sini...thanks ya dah share-nya....

    BalasHapus
  9. hem, aq udah bolak balik ganti template loh, dan kali ini aq coba pake template ini. lumayanlah, soalnya templatenya gak terlalu berat..
    asyik...
    "makachi sayang"
    coba liat blog aq ya disini: www.masyhury.co.cc

    BalasHapus
  10. maksih infonya.. :-)

    BalasHapus
  11. infox keren skali, sebab sy sering utak atik tempte, tpi masih bingung mana yg pas

    BalasHapus

Whienda sampaikan hormat dan terimakasih atas apresiasi Anda. Semoga apresiasi Anda bukan hanya bermanfaat bagiku tapi juga untuk semua orang.

Nice Story

Ada cerita-cerita cantik di blog ini. Pendek, indah namun yang terpenting : inspiratif. Akan menjadi bagian dari pertimbangan Anda menentukan pilihan The Way of Live.

Karir

Mendukung Anda, meniti karir, mendaki langit meraih bintang. Ayo berbagi bersama saya di blog ini

Kisah Sukses

Mendukung Anda, meniti karir, mendaki langit meraih bintang. Ayo berbagi. Kita tengok cermati cara pandang, tokoh-tokoh sukses ini.

Hipnosis

Ayo, belajar hipnosis bersama saya di blog ini. Suatu yang sederhana dan alamiah yang akan membuat hidup menjadi lebih mudah untuk di jalani. Saya bantu Anda sebizaku.
Banyak cara membuat Slide Show di Sebizaku. Pasti berjalan baik. Gratis untuk Anda.

aneka slide show
Soft Transition Effect.
aneka slide show
Seperti Kompas.com punya.
aneka slide show
Random Square Transition Effect.