ULIL AMRI
1
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/purplebg1.jpg) repeat center; background-color: transparent; }
.............................. sampai
.infobox { background-image: url(http://i181.photobucket.com/albums/x204/Maryahlity/purplebg1.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
www.customizedthemes.multiply.com).
bebas Jadi
gak
(misalnya perlu
di
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 gambargambarnya, 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 bagianbagian 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 warnawarna "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.
penyempurnaan.
Tinggal
setelah
jadi
nanti
dilakukan
sediki
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 {backgroundcolor: 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 gambargambar 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-sheetversion-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
[email protected] 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)
