1
PENGANTAR
Nah, salah satu blog yang bisa kita buat sendiri theme nya adalah
multiply.com. Melalui e-book ini akan dijelaskan tahap demi tahap
bagaimana menghasilkan theme multiply. Selamat berkreasi.
Penyusun
DAFTAR ISI
Pertama kita klik My Account (yang ada di pojok kanan atas). Kemudian
pilih My Site. Atau kita bisa mengklik Costumize site (yang ada di bawah
headshot). Dibagian atas halaman akan terlihat bagian Site
Customization yang berwarna kuning. Didalamnya ada beberapa pilihan
link. Yaitu Choose a Theme, Custom CSS, Page Layouts, Add Tagged
Content Box.
Kali ini kita pilih Choose a Theme. Kemudian akan tampil halaman berisi
jenis-jenis theme. Untuk mengaktifkan theme yang kita inginkan sebagai
theme blog kita, tinggal klik saja gambar theme tersebut.
Selain theme yang tersedia disini, kita juga bisa memodifikasi theme
yang ada agar sesuai dengan keinginan kita. Kita juga bisa menggunakan
berbagai theme hasil modifikasi dari orang lain. Kumpulan theme hasil
modifikasi ini bisa kita lihat di blog www.customizedthemes.multiply.com.
Setelah itu, kembali ke halaman home multiply kita. Klik costumize site
atau My account > my site. Akan muncul kotak kuning di bagian atas.
Pilih costum css
Setelah itu akan muncul halaman tempat kita meletakkan kode css yang
kita dapat dari customizedthemes tadi.
body {
background:
url(http://i181.photobucket.com/albums/x204/Maryahlity/purplebg-
1.jpg) repeat center;
background-color: transparent;
}
.............................. sampai
.infobox { background-image:
url(http://i181.photobucket.com/albums/x204/Maryahlity/purplebg-
1.jpg); }
div.infobox .boxbody {
color: #F4D0FF;
border: 3px solid #000E10;
}
/*Theme Author http://maryahlity.multiply.com The Purple Rose
}
Setelah itu klik Save untuk mengaktifkan themes baru tersebut. Perhatikan
kesesuaian jenis themes antara yang asli dengan themes hasil modifikasi.
Misalnya kalau themes asli yang kita gunakan adalah avlack, maka
themes modifikasi yang kita pilih juga harus dari themes avlack. Biasanya
di bagian awal kode, si pembuat themes akan memberitahukan themes
asli yang dia gunakan.
Selain dua hal diatas theme multiply juga cuma bisa di ganti gambar-
gambarnya, warna huruf dan background, ukuran dan jenis huruf, ukuran
dan warna garis pinggir pada tiap kotak. Untuk tata letak gambar, dan
jumlah kolom gak bisa di ubah. Setiap theme mempunya layout (tata letak)
yang sudah baku yang gak bisa di ubah kecuali dengan kerja yang ekstra
keras lagi :).
Selain itu, hal lain yang perlu diperhatikan tentang theme MP adalah lebar
halamannya. Ada dua jenis theme MP jika dilihat dari lebar halamannya.
Pertama, theme yang lebar halamannya tertentu/ tetap. Dan theme yang
lebarnya mengikuti lebar layar monitor computer
.
Theme MP yang lebarnya tetap/tertentu contohnya seperti pada gambar.
Jadi pertama, kita harus punya gambaran dulu tentang theme yang kita
inginkan, lalu pilih theme multiply yang sesuai. Kemudian tentukan bagian-
bagian mana saja yang harus di ubah. Kalau perlu buat sketsanya.
Setelah itu kerjakan!
Sekali lagi yang perlu di perhatikan dalam memilih theme yang cocok
pertama, lebarnya mau yang tetap atau yang penuh selebar layar monitor,
dan yang kedua letak dan jumlah gambar yang ada pada themes aslinya.
Jangan lupa juga perhatikan dan tentukan dari awal komposisi warna
yang sesuai.
MEMBUAT THEME MULTIPLY: TIPS MEMILIH KOMPOSISI
WARNA
Setelah kita coba membahas tentang sketsa, maka salah satu hal penting
yang harus ditentukan dari awal dalam membuat sketsa adalah komposisi
warna seperti apa yang akan kita gunakan.
Salah satu alasan kita membuat theme sendiri mungkin adalah ingin
menonjolkan identitas. Misalnya seorang pemilik toko online, agar tokonya
mempunya ciri khas tersendiri, maka dia menggunakan komposisi warna
tertentu, atau sebuah organisasi menyesuaikan warnanya dengan warna
khas organisasi tersebut. Atau bahkan seorang individu ingin menjadikan
theme blognya sebagai cerminan pribadinya, blognya diwarnai dengan
warna favoritnya.
Tapi harus kita ingat bahwa blog kita bukan hanya dinikmati oleh kita
sendiri tapi juga oleh para pembaca lainnya. Jadi penggunaan warna,
selain memperhatikan selera pribadi juga harus memperhatikan
kenyamanan mata yang membaca (misalnya tidak menggunakan warna-
warna "nge-jreng" yang membuat mata sakit) dan keterbacaan teks yang
tertulis. Dan juga jangan terlalu banyak menggunakan komposisi warna
dalam satu desain. 4-6 warna mungkin sudah lebih dari cukup.
Lalu bagaimana cara menentukan komposisi warna yang baik? Coba lihat
alam sekita kita, bagaimana komposisi warnanya? Serasi kan? Yup,
komposisi warna alam adalah komposisi warna terbaik yang bisa kita
jadikan patoka. Tapi bagaimana cara mengambil warnanya? Kita bisa
memanfaatkan software bernama website color schemer
(http://www.coffeecup.com/color-schemer/download/). Dengan software ini
kita bisa mengambil komposisi warna dari sebuah foto. Misalkan kita ingin
blog berwarna dominan hijau, kita bisa mengambilnya dari foto atau
gambar hutan atau gunung. Kalau mau dominan biru bisa dari gambar laut
atau langit. Kalau mau merah dan kuning bisa dari gambar api. Atau bisa
juga dari komposisi warna bunga.
Atau bisa juga menggunakan software lainnya yang lebih sederhana yaitu
color scheme designer (http://www.snapfiles.com/get/csdesigner.html).
Kalau yang ini kita sendiri yang menentukan warnanya. Kita juga bisa
langsung melihat contoh tampilan dari hasil kombinasi warna tersebut.
Kemudian, selain warna, ada beberapa hal lain yang perlu kita tentukan
terlebih dahulu ketika kita merancang theme untuk mengefisienkan kerja
dan menghasilkan tampilan blog yang enak dilihat.
MEMBUAT THEME MULTIPLY: BEBERAPA HAL YANG
PERLU DI PERSIAPKAN
Selain masalah warna, beberapa hal yang harus kita persiapkan dan kita
pikirkan matang-matang sebelum mulai mendesain:
1. Gambar. seperti halnya warna, dalam menentukan gambar yang
akan dipakai kita juga harus memperhatikan pembaca, tidak
semata mengikuti selera kita. pertama, ukuran gambar jangan
terlalu besar sehingga memperlambat akses web (maksimal 40-70
KB per potongan gambar). kedua, gambarnya jangan terlalu "rame"
sehingga mengganggu keterbacaan teks yang ada di blog
(khususnya untuk gambar backgournd halaman).
2. Font. Beberapa hal tentang font, pertama, pilihlah jenis yang sesuai
tema blog. Misalnya kalau blognya resmi jangan gunakan comic
sans. Kedua, atur ukuran font agar sesuai dengan hirarki penulisan
di blog. Misalnya ukuran judul utama blog lebih besar dari ukuran
sub judulnya dan ukuran sub judul lebih besar dari ukuran isi
tulisan.
Setelah berbagai persiapan akhirnya kita akan masuk ke bagian inti dari
membuat theme, yaitu pembahasan mengenai CSS. Dalam beberapa
tulisan sebelumnya sudah cukup sering di singgung masalah CSS. Ini
karena untuk bisa membuat theme multiply memang harus menggunakan
CSS.
Tapi CSS itu sendiri apaan sih? Pertama, CSS itu kepanjangan dari
Cascading Style Sheet . Kemudian, kalau dilihat dari kegunaannya css itu
adalah kumpulan kode-kode yang dipakai buat mengatur tampilan
halaman situs atau blog kita. Bisa dipakai untuk memperindah bisa juga
untuk memperburuk. Tergantung citarasa seni kita. Dengan css kita bisa
mengatur background halaman web, huruf, tampilan link, jumlah dan
posisi kolom pada halaman web/blog, dll.
Dari bagian-bagian ini lah kita bisa mengatur tampilan theme kita. Kita
bisa mengatur warna, font, panjang dan lebar, jarak, jenis dan ukuran font,
ukuran dan bentuk border, posisi tulisan dan gambar, dll.
Jadi, setelah kita tau nama tiap selectornya kita bisa mengganti warna
latar belakangnya, mengganti jenis huruf, menghilangkan border atau
garis pinggir dan lain-lain. Yang perlu kita lakukan adalah mengetahui dulu
property dan valuenya.
Setelah paham CSS secara umum, kemudian tau selector tiap bagian css
di MP, tau juga properti dan value untuk mengatur/merubah tampilannya,
selanjutnya kita tinggal mengubah Kode css dari theme yang kita pilih
agar sesuai dengan desain yang kita inginkan.
Untuk melihat kode css suatu theme caranya: Klik View > Page source.
Akan muncul jendela baru yang berisi link ke kode CSS dari theme yang di
gunakan.
Link yang memuat kode css itu:
1. http://multiply.com/style/site/64.css
2. http://multiply.com/style/local/22.css
3. http://multiply.com/style/custom/clean/24.css
4. http://panduan.multiply.com/style-custom/panduan/20/custom.css
Link 1 dan 2 adalah link dasar dari multiply. sama untuk semua theme.
Link no. 3 adalah link untuk css masing-masing theme. Link no. 4 adalah
link dari kode css theme hasil modifikasi. Jadi kalau theme kita masih asli,
link no. 4 gak akan ada.
Untuk melihat kode cssnya, langsung saja buka masing-masing link. Nah,
dari kode-kode css yang ada disinilah nantinya kita mencari letak selector
yang ingin kita ubah. Pencarian ini memakan lumayan banyak waktu.
Makanya harus sabar. Terus jikalau selectornya udah ketemu, baru kita
mulai mengganti property dan valuenya untuk menghasilkan theme yang
kita mau.
Selain melihat daftar selector di lampiran 1, ada juga cara lain buat
mencari nama selectornya. Pertama, kita seleksi bagian yang ingin kita
ubah, terus klik kanan dan pilih View selection source.
Misalnya kita mau tau nama selector untuk judul utama blog kita. Tinggal
di seleksi judulnya, klik kanan dan klik view selection source. nanti akan
keluar jendela baru. Nah, tulisan yang berwarna biru (page_owner_title)
itulah nama selectornya.
Untuk mencari kode CSS dari bagian itu, buka salah satu link css (coba
link no.3). terus klik CTLR + F untuk memunculkan fasilitas pencarian kata
di halaman web. masukan nama selectornya, klik Next atau previous.
Nah ketemu tuh kode CSS untuk mengubah bagian nama blog. Tinggal di
edit valuenya.
Kalau suda selesai urusan dengan CSS, mungkin selanjutnya kita coba
aja langsung buat theme.
Karena temanya palestina, berarti warna yang pas mungkin merah, putih,
hijau dan hitam. Kita tentukan bagian-bagian mana saja yang mau di ganti
warnannya. Terus kita bisa cari gambar pendukungnya melalui
www.google.com. Setelah itu gambarnya kita potong sesuai ukuran dari
gambar-gambar yang ada di theme aslinya. terus gambar hasil editan
tersebut kita simpan di internet (coba di www.flickr.com).
Kalau kita lihat theme avlack, kemudian kita bandingkan dengan
kebutuhan warna kita, sepertinya beberapa bagian sudah mendukung.
sudah ada warna hijau, putih dan hitam. Kita tinggal menambahkan unsur
merah dan gambar pendukungnya saja.. Kemudian untuk melihat gambar-
gambar yang ada di theme avlack caranya, buka link css themenya
(http://multiply.com/style/custom/avlack/24.css). Nah, coba lihat link-link
berikut ini adalah gambar-gambar yang ada di theme avlack.
http://images.multiply.com/multiply/style/avlack/bg_main.png
http://images.multiply.com/multiply/style/avlack/search.png
http://images.multiply.com/multiply/style/avlack/top.png
http://images.multiply.com/multiply/style/avlack/arrow.png
Setelah itu kita lihat, nama-nama dari selectornya. Lalu tentukan bagian
mana saja yang mau di ubah. Cari kode cssnya. Ubah value atau
tambahkan propertynya (pake notepad). Lalu di masukan ke CSS multiply.
Mengatur guestbook
#home_guestbook {overflow: auto;
height: 200px;
}
Bagian-bagian yang berwarna merah adalah yang di ubah dari kode css
aslinya. Hasilnya:
Setelah itu pilih theme yang mau di edit apakah clean atau andros. Saya
akan mencoba dengan clean. Lalu pada bagian background image klik
dan cari gambar di computer kita yang akan di jadikan background
halaman blog.
Setelah itu, pada bagian costumize color, kita bisa memilih warna yang
kita inginkan. Bisa memilih sesuai tema yang di sediakan atau
menggantinya sesuai keinginan kita. Bisa juga membuatnya transparan
dengan menandai/ ceklist pada bagian yang diinginkan.
Untuk mengetahuio bagian-bagian mana saja yang berubah lihat di
lampiran 3. Setelah selesai, klik save, atau jika ingin dilihat dulu sebelum
di save, klik preview.
Setelah itu jika masih ingin di edit, kita masih bisa masuk ke costum css
untuk mengedit cssnya.
MEMBUAT THEME MULTIPLY: SETELAH THEME SELESAI
LALU?
Setelah itu tinggal diupload sebagai foto di multiply dan diberi keterangan
seperti yang dijelaskan di atas dan disertakan kode CSS nya.
SELESAI
A = 12 (site title font) L = 15 (item box title font)
B = 2 (navigation bar background ... this M = 17 (item box contents background)
element may also have a border, defined by N = 16 (item box contents font)
3, navigation bar border) O = 9 (right rail font)
C = 4 (navigation bar links. when selected, Q = 11 (right rail background)
the links take on the colors defined by 5,6,7) R = 10 (right rail links)
D = 1 (body background) S = multiply automatically formats this to try to
E = 13 (page title font ... I assume E is meant fit your color scheme, but still have the ads
to designate 'Home') viewable
F = 14 (item title box background) T,U = multiply controls these
G = 16 (item box contents font) V = see 'I'
H = 17 (item box contents background) W = see 'M'
I = 8 (links) X = see 'N'
J = 15 (item box title font) Y = see 'K' and/or 'L'
K = 14 (item title box background) Z = see 'B'
SUMBER LAMPIRAN:
Ulil Amri
www.panduan.multiply.com
www.lilblog.multiply.com
ulil.amri@gmail.com
YM: amri.ulilamri
HP: 0812.8000.1648
Ya Allah, aku berlindung kepada Mu dari ilmu yang tidak bermanfaat, hati yang tidak khusyu,
diri yang tidak pernah puas, dan do’a yang tidak dikabulkan.
(HR. Muslim)