jendelablog.wordpress.com

budiscyan weblog area's

Cara Cepat Membuat Simple Themes (update 31 oktober 2011 )

Berbicara tentang multiply tidak bisa dipisahkan dengan yang namanya desain. walaupun multiply lebih dikenal sebagai situs jejaring sosial dan marketing tetapi multiply juga banyak digunakan untuk personal atau bisnis. Sisi baik lainnya adalah, multiply memberikan keleluasaan bagi member baik yang Premium maupun yang Freemium untuk merubah tampilan situsnya selama tidak melanggar aturan.

Di sini saya ingin menunjukkan betapa mudahnya customisasi dasar untuk merubah tampilan multiply. Pada dasarnya mayoritas susunan bagian dari theme multiply sama dengan situs pada umumnya yaitu header, wrapper, dan footer. Bagian lain yang sering di custom adalah navigasi, rail dan konten.

Untuk membuat situs yang menarik, selain kelihaian dalam memainkan CSS dan HTML anda juga perlu menguasai beberapa software dan aplikasi desain grafis. Ini berguna untuk membuat background untuk situs anda. Namun jangan khawatir, masih ada jalan bagi anda yang tidak mahir atau bahkan belum mengerti sama sekali tentang ilmu grafis, anda tetap bisa belajar mendesain multiply, yaitu membuat situs anda simple namun tetap terlihat elegan dengan menampilkan sisi sederhana namun rapi. sisi positifnya adalah, dengan memakai theme yang simple maka anda akan terhindar dari over load page, karena dengan css dan tampilan yang simpel maka browser juga akan menerjemahkan situs anda.

Baik kita mulai, usahakan tampilan situs anda adalah Boxes View. kita ambil contoh untuk Base Theme Shadowbox.

1. Merubah BaseTheme
Sebelum melaukan editing CSS, kita pilih Base Theme Dulu. Masuk ke alamat ini http://multiply.com/setup/pages/themes


lalu pilih Theme Shadow Box.

2. Memasukkan CSS Dasar ke CSS Box
Untuk Memudahkan Anda dalam mempelajari CSS dari Base Theme ini anda bisa mengkopi dan menyimpannya ke CSS Box.

3. Merubah Tampilan Situs Dengan Pola Sederhana
Bagian awal Customisasi kita mulai dengan merubah Lebar, Warna, Background, dan Tata Letak. Custom bagian-bagian paling penting berikut, gunakan CTRL+F untuk memudahkan anda mencari selector-selector yang akan kita custom.

  • Custom Body
body {               <===tampilan terluar situs
background: none; <===latar belakang isi dengan kode warna
color: #666; <=== Warna Fonts
margin: 0; <=== untuk menggeser body
width: auto; <==== untuk mengatur lebar body
}

  • Custom Header
div[id^="header"] {
width: 960px; ===>bisa di sesuaikan
margin: auto;
}
  • Custom Navigasi
div.owner_nav {
width: 770px; ubah ke 960px
margin: 0 auto;
margin-top: 20px; ubah nilainya ke 0px
height: 95px;
border: none; ubah ke 1px solid #999
border-top: none;
border-bottom: none; <=== Tambahkan ini.
background: url(http://..); ubah dengan kode warna
}

div#subnav {
padding: 1px 0 0 20px;
margin-bottom: 5px;
border: none;
background: none; hapus saja!
height: auto;
}
a.topt, a:visited.topt, a:link.topt {
line-height: 1.2em;
display: block;
float: left;
height: auto;
text-align: center;
background: none; ubah ke transparent
font-size: 13px;
color: #aaa;
padding: 1px 7px 1px 7px;
font-weight: bold;
width: auto;
border: 1px solid #666; ubah ke none}
a.toptsel, a:visited.toptsel, a:link.toptsel {
line-height: 1.2em;
display: block;
float: left;
height: auto;
text-align: center;
background: none;
font-size: 13px;
font-weight: bold;
color: #aaa;
background: none; ubah ke transparent
background-color: #333; Hapus saja!
border: 1px solid #666; ubah ke none
padding: 1px 7px 1px 7px;
width: auto;
}

  • Custom Title
h1#page_owner_title {
padding: 16px 0 6px 30px;
font-size: 30px; ubak ke 0pt
height: 42px;
background-color: #ddd;
background-color: #ecf2f9; hapus saja semuanya
background-color: none;
background: none; <=== ubah ke transparent
color: #ddd ;
border: none;
font: 26pt Arial; hapus saja ini!
font-weight: bold;
}

  • Custom Wrapper
div#page_start_wrapper {
width: 770px; ubah ke 960px
margin: 0 auto;
background: url(http://...); ubah dengan kode warna
border: 1px solid #999; tambahkan ini.
}

  • Custom Wide Rail
div#rail {
text-align: left;
width: 159px; ubah ke 349px
}

tambahkan selector dibawah ini dibawahnya :
div#custom_rail_html{width:340px;
margin:10px 0 0 -10px;
}
.railbody p, .railbody h4 {
display: none;
}

  • Custom Footer
div#ownedfooterc {
background: url(http://...); ubah dengan kode warna
width: 770px; ubah ke 960px
height: 40px;
margin: 0 auto;
border-right: 1px solid #aaa;
border-bottom: 1px solid #aaa;
border-left: 1px solid #aaa;
tambahkan ini!
}
div#ownedfooter {
border: none; hapus saja!
border-right: 1px solid #aaa;
border-bottom: 1px solid #aaa;
border-left: 1px solid #aaa;
tambahkan ini!
background: none; <=== ubah ke transparent
color: #999;
padding: 0;
text-align: center;
font-size: 10px;
border-top: 1px solid #ddd;
margin: 0 15px 0 15px;
}







Proses pembentukan situs selesai, save dulu theme anda.
sekarang adalah waktunya rapi-rapi setelah bekerja keras.

Sekarang kita lihat railnya masih berantakan.
siderail list seperti:
  • Upgrade account
  • Cuztomized themes
  • Promoted my Site
dll masih belum pas.
kita akan menggesernya ke samping headshot.
tambahkan selector ini :

ul.sidelist{
overflow:hidden;
border: 1px solid #ddd;
background:#fff;
display:block;
width:150px;
height:125px;
margin:-150px 0 0 160px;
}
ul.sidelist li{
margin-left:-14px;
width:150px;
list-style-type:none;
}


Save kembali template anda.
sekarang anda tinggal mengotak-atik warna dan background site anda.
tinggal kreatifitas masing-masing.
Semoga bermanfaat.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

Information

This entry was posted on 27 April 2011 by in artikel.

Kategori

Blog Statistic

  • 21,292 hits

Contact

%d blogger menyukai ini: