Behind The Screen “O_09H Template”-part 2

Seperti judul diatas artikelini merupakan artikel bagian kedua, mengenai proses modifikasi blog ini, khusus di bagian ini saya akan membahas mengenai: Konsep 1 Mengubah Ukuran Template Standart

Disini saya tidak akan membahas mengenai bagaimana mengubah ukuran lebar main wrapper dan menambah sidebar menjadi dua karena sebelumnya sudah pernah diposting di sini dan disini.

Sehingga saya sisa melanjutkan saja kepembahasan bagaimana mengubah agar sidebar tersebut tampil di bagian kanan template yang perlu anda perhatikan adalahmengubah posisi pemunculan kedua sidebar tersebuttampil disebelahkananyaitu dengan mengubah kode html template berikut ini, kode dibawah ini terletak di bawah kode:

/* Header
---------------------------------- */

Setelah itu cari kode dibawah ini

#sidebar-wrapper {
width: 300px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;/* fix for long non-text content breaking IE sidebar float */
}
#newsidebar-wrapper {
width: 180px;

float: left;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;/* fix for long non-text content breaking IE sidebar float */
}

Ganti kode warna merah pada newsidebar wrapper dari float: left; menjadi float: right; agar nantinya sidebar baru (newsidebar) muncul disebelah kanan. Hingga kode newsidebar menjadi:

#newsidebar-wrapper {
width: 180px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Konsep 2, Template Color
Selanjutnya menentukan warna pada blog ini, bagi saya (dan mungkin juga anda) warna tidak hanya sebuah pemanis, tapi memiliki arti lebih karena warna mewakili karakter dan tujuan dari si pemilih warna tersebut, warna putih sengaja dipilih sebagai background posting dan sidebar karena menurut saya tulisan diatas latar belakang putih lebih mudah dibaca dan warna abu-abu sebagai background template untuk mempertegas wilayah template itu sendiri.

Sedangkan jika diperhatikan warna lain yang dominan sudah tentu adalah warna orange. Warna orange adalah warna favorit saya, alasan pastinya belum tahu tapi yang jelas orange bikin saya lebih senang dan bikin otak saya ini selalu menemukan ide-ide dalam menulis.

But yang tidak kalah pentingnya adalah bagaimana mengetahui kode warna yang akan kita letakkan ke dalam kode template nantinya, saya sendiri menggunakan photoshop untuk mengetahui kode warna tersebut.

Dan berikut ini kode warna yang saya gunakan:

Latar warna main wrapper dan sidebar : Putih= #ffffff
Latar warna template: Abu-abu= #cccccc
Warna Header dan footer: Orange= #ff6600
Warna Header dan footer: Hitam= #000000

Kemudian saya ganti kode warna lama dengan mengedit template blog saya yang sudah di download sebelumnya

Konsep 3, 3d Effect for templates

Program edit gambar seperti photoshop memang sangat membantu terutama dalam mewujudkan kesan 3 dimensi secara instan pada template maupun image screen capture serta mengetahui kode warna, tentu sebelumnya dibantu oleh campur tangan corel draw diawal penataan layout.

Berikut ini caraku setting layout di coreldraw (versi.13) agar template layout yang dibuat sesuai dengan ukuran yang direncanakan sebelumnya:

Buka corel draw dan lakukan setting layout pada drawing units pilih pixel dan paper width And height masukkan ukuran template, yang perlu diperhatikan adalah lebar template sedangkan tingginya terserah saja, lebih jelasnya lihat screen shoot berikut:


Setelah menentukan draft layout kemudian simpan dalam extensi *.png , caranya denganklik file pilih export for office dan setelah muncul kotak dialog jangan lupa untuk pilihan Graphics Should be best suited for: pilih editing.

Untuk image dasar saya sudah jadi sisa member efek dan memotongnya menggunakan program editor gambar dalam hal ini photoshop. Image tadi akan di ubah menjadi template berefek drop shadow dan efek-efek lain yang dianggap perlu, tapi berhubung sekarang sudah ngantuk dan mau tidur jadi insya allah postingan bagian tiga menyusul..

Semoga bermanfaat dan selamat berblogging ria.

NB: Jika suka dengan artikel ini silahkan berlangganan via email anda, widgetnya silahkan lihat di sidebar blog ini.

Artikel yang masih terkait dengan pembahasan ini:
Modifikasi ukuran lebar posting dan sidebar.
Mengubah template 2 kolom menjadi 3 kolom.
Behind The Screen “O_09H Template”-part 1