1

ULIL AMRI

PENGANTAR

Membuat sendiri theme/template blog kita memiliki beberapa keuntungan:

1. Jadi terasa kalau blog itu benar-benar milik kita karena cuma ada

satu-satunya blog yang tampilannya seperti itu.

2. Buat yang menggunakan blog 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 dimilikinya.

3. Bisa juga buat nyari duit. Bikin themes yang bagus-bagus,

dipromosiin, terus kalau ada yg mau pesen, kan bisa buat nambah

pemasukan. Atau bisa diikutkan dalam perlombaan dan mendapat

hadiah.

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

Merubah tampilan multiply

Cara menggunakan themes di customizedthemes.multiply.com

Membuat theme multiply: buat apa sih bikin themes sendiri?

Membuat theme multiply: pertama-tama harus ngapain nih?

Membuat theme multiply: mengenal theme yang ada di mp

Membuat theme multiply: mengenal theme menghasilkan sketsa

Membuat theme multiply: tips memilih komposisi warna

Membuat theme multiply: beberapa hal yang perlu di persiapkan

Membuat theme multiply: saatnya belajar tentang css di multiply

Membuat theme multiply: berburu bagian-bagian css

Membuat theme multiply: saatnya praktek

Membuat theme multiply: buat theme tanpa css

Membuat theme multiply: setelah theme selesai lalu?

Lampiran 1: Nama-nama selector CSS

Lampiran 2: Ringkasan Value dan Property CSS

Lampiran 3: Bagian-bagian theme tanpa CSS

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 THEME 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 THEME 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.

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.

MEMBUAT THEME MULTIPLY: SETELAH THEME SELESAI

LALU?

Tahapan membuat theme telah kita lewati. Sekarang setelah themenya

jadi, kita bisa memakainya sendiri dan bisa juga membagikannya pada

MP'ers lain. Bahkan, theme bisa dijadikan sebagai sarana

mengkampanyekan isu-isu tertentu (misalnya palestina atau lingkungan

hidup).

Bagaimana cara membagikan theme tersebut? Prinsipnya mudah, kita

tinggal mengambil gambar dari MP kita yang sedang menggunakan theme

tersebut kemudian gambartersebut di upload sebagai foto di multiply.

Diberi penjelasan singkat misalnya:

1. Nama dan tema atau cerita yang melatar belakangi pembuatan

theme.

2. Theme asli yang digunakan

3. Data pelengkap: nama dan alamat blog pembuat, versi theme (jika

ada perbaikannya),

4. Sumberdari gambar-gambar yang di pakai dalam theme (jika bukan

gambar karya kita sendiri)

5. Panduan ringkas memasang theme tersebut.

Ok, sekarang bagaimana mengambil gambar tampilan multiply kita

darilayar komputer? Mudah kok, tinggal tekan keyboard PRINT SCREEN.

Setelah itu Buka software pengolah gambar seperti photoshop atau

microsoft paint (start > all program > accesoris > paint). Setelah itu di

copy kan ke paint (tekan CTLR + V ). Lalu di save dalam bentuk .JPEG.

Setelah itu tinggal diupload sebagai foto di multiply dan diberi keterangan

seperti yang dijelaskan di atas dan disertakan kode CSS nya.

Kita bisa menyimpannya di multiply kita sendiri, atau menyimpannya di

group-group multiply yang memang khusus untuk mengumpulkan themes.

Yang paling terkenal adalah http://customizedthemes.multiply.com. Atau

kalau anda membuat theme bernuansa islami, bisa di posting di

http://muslimthemes.multiply.com. Anda bisa mendaftar menjadi

membernya (klik join this group!). Kemudian pada bagian foto di

halaman depannya (home) klik add photo untuk mulai memasukan

gambar contoh theme kita tadi.

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

Untuk perbaikan dan penyempurnaan ebook ini, silahkan kirimkan saran, kritik, pertanyaan ke:

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)