Membuat Theme Multiply
-
Upload
perpustakaan-al-hurriyyah-ipb -
Category
Documents
-
view
4.877 -
download
3
description
Transcript of Membuat Theme Multiply
PANDUAN
MEMBUAT THEME
MULTIPLY.COM
ULIL AMRI
www.panduan.multiply.com
www.lilblog.multiply.com
MERUBAH TAMPILAN MULTIPLY
Multiply memberikan kita fasilitas untuk menikmati berbagai tampilan
(theme) yang bebas kita pilih dan bisa kita modifikasi. Kali ini akan
ditunjukan bagaimana cara menggunakan berbagai theme yang sudah
disediakan oleh multiply.
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.
CARA MENGGUNAKAN THEMES DI
CUSTOMIZEDTHEMES.MULTIPLY.COM
Seperti yang sudah dijelaskan sebelumnya, selain mengubah tampilan
blog kita dengan themes yang sudah di sediakan oleh multiply.com, kita
juga bisa menggunakan themes lain. Salah satu blog yang khusus
menyediakan themes hasil karya blogger multiply (mp’ers) lain adalah
www.customizedthemes.multiply.com. Di blog ini kita bisa mendapatkan
banyak sekali koleksi themes hasil modifikasi mp'ers lain.
Adapun cara untuk menggunakan themes yang ada di customizedthemes,
agak berbeda dengan cara menggunakan themes yang telah disediakan
multiply. Pertama, kita masuk dulu ke
www.customizedthemes.multiply.com. Kemudian klik Join This Group!
untuk ikut bergabung di grup ini.
Setelah menjadi anggota, masuk ke menu Photo. Pilih salah satu gambar
themes yang disukai.
Akan muncul kode CSS seperti gambar ini.
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.
Copy pastekan kode CSS tadi dari mulai
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.
MEMBUAT THEMES MULTIPLY: BUAT APA SIH BIKIN
THEMES SENDIRI?
Sebenarnya sih, themes yang disediakan multiply cukup banyak dan
beragam bentuknya. Ditambah lagi themes hasil ubahan MP'ers lain yang
bisa di pakai secara bebas (misalnya di
www.customizedthemes.multiply.com). Jadi gak perlu capek-capek
ngutak-ngatik juga MP nya udah bisa tampil bagus. Tapi mungkin masih
ada saja keinginan untuk membuat themes yang "gue banget" :).
Dan memang membuat theme sendiri menurut saya ada beberapa
kelebihannya:
1. Jadi terasa kalau MP itu benar-benar milik kita karena cuma ada
satu-satunya MP yg seperti itu :)
2. Buat yang menggunakan MP sebagai sarana "menampilkan" diri di
dunia maya (misalnya buat yg jualan, atau untuk organisasi)
tentunya dengan membuat themes sendiri bisa menjadi pembeda
dan bisa memperkuat ciri khas dari toko online atau organisasi
yang dimilikintya.
3. Bisa juga buat nyari duit. Bikin themes yang bagus-bagus,
dipromosiin, terus kalau ada yg mau pesen, kan bisa buat nambah
pemasukan ;p.
4. Apa lagi ya? ada yg mo nambahin?
Yah, pokoknya membuat themes sendiri itu seru deh, apa lagi kalau lagi
gak ada kerjaan ;p. Nyari-nyari CSS perbagian, diedit, dilihat hasilnya,
kalau kurang sesuai di edit lagi, dst... setelah selesai rasanya puas
banget.
MEMBUAT THEMES MULTIPLY: PERTAMA-TAMA HARUS
NGAPAIN NIH?
Setelah kita menemukan alasan yg tepat untuk membuat theme sendiri,
sekarang saatnya kita mulai beraksi. tapi sebelumnya, bekal apa saja sih
yang harus disiapkan untuk membuat theme multiply? Pertama, paham
dulu karakteristik theme-theme asli
dari multiply. Kedua, bisa CSS, dan
ketiga bisa mendesain gambar (bisa
dengan photoshop, freehand atau
GIMP).
Pertama, tentang karakteristik themes
di multiply. Kenapa kita harus paham
hal ini? karena di multiply ini untuk
mengedit theme nya gak bisa sebebas
di blogspot. Beberapa hal yang harus
kita ketahui dari themes multiply yaitu:
Terkait dengan perjanjian yang kita
setujui ketika mendaftar di MP, maka
ada beberapa bagian dari theme yang
gak boleh di hapus atau di
sembunyikan. Yaitu bagian bagian atas yang ada logo MP dan link-link
yang ada di sana, bagian samping yang ada iklan dan headshotnya,
bagian bawah yang berisi copy right (pada gambar ditandai dengan
lingkaran merah).
Ada juga bagian yang walaupun kita ingin sekali menggantinya tapi
ternyata gak bisa di ubah yaitu link bagian atas: home, blog, photos, dll.
(di gambar dilingkari kuning).
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 :).
MEMBUAT THEME MULTIPLY: MENGENAL THEME YANG
ADA DI MP
Setelah sebelumnya kita sedikit menyinggung theme MP. Sekarang
saatnya berkenalan lebih dalam :). Pada dasarnya, theme MP itu seperti
kotak-kotak yang di susun sehingga menjadi tampilan theme yang kita
lihat. Nah, kotak-kotak inilah yang bisa kita ubah-ubah. Bisa kita ganti
warna latar belakangnya atau kita tambahin gambar sebagai
backgroundnya, bisa kita ganti ukuran dan warna serta bentuk garis
pinggir kotaknya, bisa kita ganti jenis, ukuran dan warna huruf yang ada di
dalam kotak itu juga bisa kita ubah-ubah. Untuk lebih jelasnya coba liat
gambar di bawah ini.
Dari theme aslinya yaitu avlack, kemudian kotak-kotak merah itu di ubah
isinya (gambar, warna, huruf, garis) menjadi theme baru yang saya
namakan Ayo menanam. Bagaiamana cara menggantinya, nanti akan
kita bicarakan di bagian pembahasan tentang CSS.
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.
Sedangkan theme MP yang lebarnya penuh/mengikuti lebar layar monitor
contohnya
Bagaimana cara membedakannya? cara mudahnya tinggal dilihat saja
gambar headnya (yg paling atas) kalau gambarnya penuh dari ujung ke
ujung layar monitor berarti theme itu lebarnya penuh. Sedangkan kalau
lebar gambar headnya tertentu, berarti lebar themenya tertentu.
Bentuk website yang resizeable (lebarnya mengikuti layar monitor) akan
lebih tepat digunakan jika desain blog secara keseluruhan lebih banyak
berupa text dan sedikit melibatkan gambar. Dan jika kita ingin header
yang menggunakan gambar pada bentuk resizeable ini, pastikan titik yang
tepat untuk pengulangan gambar agar tidak mengurangi keindahan
desain.
MEMBUAT THEME MULTIPLY: MENGENAL THEME
MENGHASILKAN SKETSA
Sebelumnya kita udah coba mengenal layout theme yg ada di multiply.
Tujuan dari mengenal layout ini sebenarnya untuk mengefektif dan
efisienkan kerja kita dalam membuat theme. Sebelum membuat theme
mungkin kita punya bayangan mau membuat theme seperti apa. Setelah
mengenal theme yang ada di MP kita kemudian bisa memperkirakan
theme mana yang paling cocok untuk di ubah agar hasilnya sesuai
dengan apa yang kita bayangkan tadi. Setelah itu kita bisa membuat
sketsa kasarnya di atas kertas, atau kalau sudah bisa bisa langsung
digambarkan di kepala kita tentang gambar apa saja yang mau diubah,
tentang warna-warna, huruf, garis pinggirnya, dll.
Misalnya, ketika saya mau membuat theme newspaper. Inspirasi awalnya
dari theme-theme yang digunakan oleh koran-koran online. Yang ada
dikepala saya waktu itu adalah theme dengan warna dominan putih
dicampur sedikit hitam dan abu, tanpa menggunakan gambar sebagai
penghias dan lebar themenya menyesuaikan dengan lebar layar
komputer. Kemudian setelah dicari dari theme multiply, akhirnya saya pilih
theme dasarnya yaitu skyline. Kenapa? karena menurut saya theme ini
yang paling sesuai bentuk layoutnya, dan kemungkinan paling sedikit
memerlukan perubahan. Ternyata setelah dikerjakan hasilnya cukup
membuat saya puas :). Sudah sesuai dengan apa yang ada dalam
bayangan saya.
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!
Ini contoh gambar sketsanya
Terus setelah itu kita pilih theme dasar yang sesuai dan buat gambaran
secara kasarnya bagian-bagian yang perlu diubah
Kira-kira ada 10 bagian utama yang harus diubah:
1. Gambar yang ada di headernya.
2. Jenis dan warna huruf dari judul utama blog
3. Judul dan background kotak
4. warna background kotak
5. warna link
6. warna background halaman utama blog
7. footernya
8. warna link paling atas
9. garis-garis pinggir (border) pada kotak-kotak
10. guestbooknya
Nah, ini gambar hasil akhir setelah dikerjakan.
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.
Ketika membuat sketsa atau rancangan theme hal-hal di atas perlu di
perhatikan dan di jadikan pertimbangan. Ukuran gambar yang akan di
gunakan dan dimana saja letaknya dan jenis, warna, dan ukuran font.
Sehingga ketika mulai membuat kode css nya pekerjaan jadi lebih cepat
karena sudah tinggal menuliskan kodenya tanpa perlu memikirkan
desainnya lagi. Tinggal setelah jadi nanti dilakukan sediki
penyempurnaan.
MEMBUAT THEME MULTIPLY: SAATNYA BELAJAR
TENTANG CSS DI MULTIPLY
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.
Sebenarnya, si css ini mengibaratkan tampilan halaman blog kita itu
seperti sebuah kotak.
Kotak-kotak ini lah yang di susun menjadi tampilan theme. Kotak ini terdiri
dari beberapa bagian yang bisa kita atur sesuai dengan theme yang ingin
kita buat. bagian-bagian itu adalah:
• Padding: jarak tepi kotak dengan isi bagian dalamnya
• Margin: jarak dengan kotak lain diluar kotak
• Border: garis tepi dari komponen
• Width: lebar kotak
• Height: tinggi kotak
• Background: latar belakang kotak
• Font: teks yang menjadi isi dari kotak
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.
Format penulisan css contohnya seperti ini:
body { color: red; background: black; }
h1{font:25px helvetica;font-weight:bold;}
h2{font:23px helvetica;font-weight:bold;}
h3{font-size:16px;}
h4{font-size:14px;}
a{color:#333;text-decoration:none;}
a:hover{color:#666;}
Untuk memudahkan membacanya bisa juga dituliskan dalam bentuk
seperti ini
h1 {
color:blue;
font-family:arial;
font-size:14px;
}
Untuk menjelaskannya kita buat permisalan saja seorang bos dan
karyawannya. Si bos (yaitu kita) ingin memberikan perintah pada
karyawannya (maksudnya halaman blog kita). Nama karyawan yang akan
di tuju adalah body,h1, h2, h3, h4, dan a. Sedangkan isi perintahnya
adalah yang ada di antara {…}. Body tugasnya mengatur tampilan
halaman web secara umum, h1 tugasnya mengatur tampilan judul utama,
h2 dst mengatur sub judul, dan si a untuk mengatur tampilan link yang
ada pada halaman web. Untuk kode di atas si bos bermaksud
memerintahkan si body supaya menggunakan huruf berwarna merah
(color: red;) dan warna backgroundnya harus hitam (background:
black;). Untuk h1 si bos memerintahkan dia supaya menampilkan judul
utama dengan huruf helfitica dengan ukuran 25 px dan ditampilkan
dengan efek tebal (font:25px helvetica;font-weight:bold;). Dan begitu
seterusnya.
Kalau di mp nama karyawannya sudah di tentukan dari sananya, jadi kita
tinggal menuliskan pesan yang sesuai untuk masing-masing "karyawan"
itu. Mau tau nama beberapa karyawannya, liat aja di lampiran 1 atau di
www.multiplydesign.multiply.com/photos/album/96.
Oh iya, karyawan tadi sebutan aslinya adalah selector. kalau width,
background, color, border, dkk itu namanya property. kalau bold, red,
50 px, dkk namanya value. Property dan value harus ditulis di antara {...}.
antara property dan value di kasih tanda : dan diakhiri dengan tanda ;
Sekali lagi, ini contoh penjelasannya:
• color:red; artinya warna teksnya merah
• font-weight: bold; artinya teksnya di bold
• width: 500px; artinya lebar kotak 500 px
• padding-right: 50px; artinya batas teks dengan sisi kanan kotak
adalah 50 px
• background: black; artinya warna backgroundnya hitam
• border: solid red 1 px; artinya ada border dengan bentuk solid
berwarna merah dengan ukuran 1 px
• margin-left: 200px; artinya jarak kotak dari sisi kiri halaman adalah
200 px
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.
Untuk mengubah-ubah background kita bisa menggunakan property:
• background-color untuk mengganti warna. misalnya {background-
color: red;}
• background-image untuk mengganti gambar. Contohnya
{background-image: url (http://alamatgambar.com/namafile.jpg) ;
Untuk garis kotak kita bisa mengubah:
• border untuk mengubah tampilan garis tepi. Misal {border: 1 px}
atau {border: none}
• border-color untuk mengganti warna border misal {border-color:
red}
Untuk mengatur huruf:
• font-family untuk mengubah-ubah jenis huruf. Misal {font-family:
arial}
• font-size untuk mengubah ukuran huruf. Misalnya {font-size: 12 px}
• color untuk mengganti warna huruf. Misalnya {color: black;}
Untuk melihat property dan value selengkapnya bisa lihat di lampiran 2
atau kunjungi www.quackit.com/css/properties. Kalau mau belajar css
yang mudah bisa baca-baca di www.quackit.com/css/tutorial (dilengkapi
dengan contoh hasilnya).
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.
MEMBUAT THEME MULTIPLY: BERBURU BAGIAN-BAGIAN
CSS
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.
MEMBUAT THEME MULTIPLY: SAATNYA PRAKTEK
Setelah semua teorinya lengkap, sekarang saatnya buat praktek
langsung. Kita coba dari yang mudah saja dulu. katanya sih yang mudah
di ubah-ubah itu theme Avlack. Kita akan membuat theme dengan tema
Palestina. Pertama, kita tentukan dulu warna apa saja yang akan di pakai,
terus siapkan gambar-gambarnya. Baru diedit CSSnya.
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
Nah, coba buka link-link di atas. Akan keliatan gambar-gambarnya. Lalu
gambar tersebut di save ke komputer kita. Kita buka dengan photoshop
atau software lainnya. Lalu lihat ukuran panjang dan lebarnya. Kemudian
kita buat gambar baru dengan ukuran panjang dan lebar yang sama. Kita
simpan di internet. Nah, link dari gambar baru tersebut kita pakai untuk
menggantikan link-link yang ada di atas.
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.
Berikut ini contohnya:
Mengganti gambar background
body {
background:
url(http://farm4.static.flickr.com/3326/3192744951_12eff2bfc4_o.pn
g);
}
Mengganti gambar di atas headshot
.railstart {
margin-top: 10px;
height: 27px;
width: 159px;
background:
url(http://farm4.static.flickr.com/3533/3192744965_8da16c2531_o.p
ng) no-repeat top left;
background-position: -30px 0;
z-index: 1000;
position: relative;
}
Mengganti gambar header
div.owner_nav {
border: none;
margin: 0 auto;
margin-top: 20px;
height: 310px;
height: 130px;
width: 760px;
border: 10px solid #fff;
border-bottom: none;
padding: 113px 0 0 0;
background:
url(http://farm4.static.flickr.com/3358/3192744967_29e5619511_o.p
ng) no-repeat top left;
background-color: #fff;
background-position: 0 -10px;
}
Mengganti icon list
ul li { list-style-image:
url(http://farm4.static.flickr.com/3508/3192744955_54f58cfc6d_o.jp
g); }
Menambahkan gambar pada footer
div#ownedfooter {
margin: 0 auto;
padding: 10px 0 10px 0;
width: 780px;
height: 50px;
border: none;
border-top: 1px solid #999;
font-size: 10px;
color: #666;
background-color: #ddd;
background:
url(http://farm4.static.flickr.com/3256/3192744959_42bae885a3_o.p
ng) no-repeat top left;
}
Mengubah kotak sub judul
.itemboxsub {
color: #7c9606;
color: #000;
font-weight: normal;
font-size: 24px;
font-family: serif;
border: none;
padding: 0;
background: #E0E0E0;
border-bottom: solid 2px green;
max-width: 550px;
}
Mengubah warna link
a, a:visited, a:link { color: green; }
Mengatur guestbook
#home_guestbook {overflow: auto;
height: 200px;
}
Bagian-bagian yang berwarna merah adalah yang di ubah dari kode css
aslinya. Hasilnya:
Ternyata, gak serumit teorinya. Selamat berkreasi.
MEMBUAT THEME MULTIPLY: BUAT THEME TANPA CSS
Ternyata, ada cara buat menghasilkan theme multiply tanpa perlu
menggunakan css. Tapi hanya bisa untuk theme clean dan andros. Dan
perubahannyapun hanya pada warna dan gambar background.
Caranya, masuk ke pemilihan theme multiply. Pilih costum color
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.
Hasilnya seperti ini
Setelah itu jika masih ingin di edit, kita masih bisa masuk ke costum css
untuk mengedit cssnya. SELESAI.
A = 12 (site title font) B = 2 (navigation bar background ... this element may also have a border, defined by 3, navigation bar border) C = 4 (navigation bar links. when selected, the links take on the colors defined by 5,6,7) D = 1 (body background) E = 13 (page title font ... I assume E is meant to designate 'Home') F = 14 (item title box background) G = 16 (item box contents font) H = 17 (item box contents background) I = 8 (links) J = 15 (item box title font) K = 14 (item title box background)
L = 15 (item box title font) M = 17 (item box contents background) N = 16 (item box contents font) O = 9 (right rail font) Q = 11 (right rail background) R = 10 (right rail links) S = multiply automatically formats this to try to fit your color scheme, but still have the ads viewable T,U = multiply controls these V = see 'I' W = see 'M' X = see 'N' Y = see 'K' and/or 'L' Z = see 'B'
Sumber lampiran:
• Lampiran 1: http://multiplydesign.multiply.com/photos/album/96/ dan
http://multiplythemes.com/wp-content/uploads/2008/03/pageandcss.jpg
• Lampiran 2: http://www.addedbytes.com/cheat-sheets/css-cheat-sheet-
version-1
• Lampiran 3: http://multiplydesign.multiply.com/photos/album/10
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)