Fiuhh.. akhirnya rampung juga ngerjain themes-nya oopshey.com disela kesibukkan saya yang padat merayap.

Sepertinya pengerjaan kali ini lebih lama dari biasanya karena bulan2x kemarin saya terus saja di himpit pekerjaan rutin yang membuat saya ngga bisa menyentuh kerjaan lain.. apalagi untuk blogwalking/browsing2x iseng… bener2x ngga sempet, waktu terasa timeless banget..jadi mohon maaf bagi teman2x blogger kalo saya belom sempet jalan2x mengunjungi kediaman teman2x.

Beruntung yang punya blog (Mas Firman) sudi menunggu sampai saya agak longgar untuk mengerjakannya. Terhitung kira2x waktu aktif pengerjaannya sekitar seminggu saat design telah diapprove.

Beberapa hal yang menyangkut teknik dan konsep pembuatan oopshey.com saya torehkan secara singkat disini.

Konsep Layout

Theme oopshey direquest dengan nuansa Vista (windows Vista) berbalut warna pastel. Wahh ini termasuk konsep yang luar biasa untuk dituangkan dalam bentuk nyata.. Anggapan saya tentu saja bahwa nuansa window vista itu berupa warna solid gelap yang memiliki transparansi setengah sehingga backroundnya agak terlihat samar-samar dan foregroundnya menimbulkan efek glossy. bagaimana dengan warna pastel..?

Setelah lama bermeditasi (kira-kira seminggu-an) akhirnya saya mencoba komposisi gradasi warna solid yang pada area transparannya akan menjadi warna pastel(walaupun ngga pastel2x amat sihh, tapi agak mendekati pastel lahh..), Objek itulah yang kemudian saya jadikan sebagai batasan atas navigasi dan panel search box seperti pada gambar dibawah ini:

Selanjutnya tinggal membubuhkan variasi warna pastel di dalam keseluruhan area seperti background , panel sidebar bawah , footer area dan widget box.

Bagian header juga ditambahkan sedikit flash animasi yang biasa-biasa aja mengingat saya bukan flash animation artist. Terlihat menarik juga sihh..bahkan saya jadi kepikiran untuk mengganti theme saya sendiri nih jadinya

Suasana ‘work and fun’ saya kreasikan dengan objek gedung perkantoran (work banget) di flash header dan smile (fun banget) di bagian judul widget.

.. selesai sudah rancangan layout yang diminta. Tinggal ke step converting HTML tableless dan Wordpress Theme

Wordpress Themenya

Oopshey Theme ini menggunakan 3 sidebar. 2 di sebelah content artikel.. 1 lagi dibagian bawah footer. Untuk membuat Tambahan sidebar ini buka file functions.php lalu tambahkan code berikut di dalamnya :

if ( function_exists(’register_sidebars’) )
register_sidebars(3, array(
‘before_widget’ => ‘<!–sidebox start –><div id=”%1$s” class=”widget-box %2$s”>’,
‘after_widget’ => ‘</div></div><!–sidebox end –>’,
‘before_title’ => ‘<h3 class=”judul”>’,
‘after_title’ => ‘</h3><div class=”isi”>’,
));

Kalo udah gitu maka ketiga sidebar itu bakalan kebaca di admin backend untuk di kasi widget satu-persatu dan tinggal di kasi “include” tags di dalam div yang mengambil sidebar tersebut pada template, contohnya :

include_once(”sidebar-left.php”);
atau
include_once(”sidebar-right.php”);
atau
include_once(”sidebar-bottom.php”);

Hal lain yang ‘baru’ buat saya adalah menambahkan floating object pada header animasi flash-nya.. sempet gagal berkali2 juga dalam mengaplikasikan trik ini.. tapi berkat oom google saya akhirnya bisa juga. Untuk membuat objek floating di flash kira2 dilakukan dengan cara :

Tambahkan didalam tags flashnya :
name=”wmode” didalam tags <param…..>
dan
wmode=”transparent” didalam tags <embed…>

dengan begitu object flashnya akan menjadi urutan paling bawah pada area div yang ditempatinya. selanjutnya gunakan stylesheet berikut untuk membuat object gambarnya mengambang diatas flash :

.box{
position: absolute;
width: 366px;
height:140px;
z-index: 100;
float:right;
margin-left:600px;
margin-top:30px;
overflow:hidden;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
line-height: 16px;
background-image: url(images/box.png);
padding-bottom:-20px;
}

Beres dehh.. object box itu sudah mengambang diatas flash.. sekarang tinggal membangkitkan post randomnya wordpress dengan code :

<div class=”box”>
<?php
$lastposts = get_posts(’numberposts=1&orderby=rand’);
foreach($lastposts as $post) :
setup_postdata($post);  ?>
<ul id=”bx”><li><a href=”<?php the_permalink(); ?>” id=”post-<?php the_ID(); ?>”><?php the_title(); ?></a></li></ul>
<div id=”ct”>
<?php
the_excerpt(); ?></div>
<div class=”boxread”><a href=”<?php the_permalink(); ?>” id=”post-<?php the_ID(); ?>”>Read More</a></div>
<?php endforeach; ?>

Dengan theme tags  : get_posts(’numberposts=1&orderby=rand’) , itu bakalan menghasilkan postingan artikel yang random yang diset excerpt (petikan artikelnya saja/ sampai ada tags read more didalam artikel).

karena isinya dinamis atau bisa berubah2x.. saya set secara manual pada stylesheet class box :

overflow:hidden;

Tricky aja sihh biar kata2x atau huruf excerpt yang melebihi batas padding class box disembunyikan dan tidak merusak layout.

Lain-lainnya

Walaupun ngga direquest, saya menambahkan model custom halaman 404 nya (dibuat pada file 404.php), sehingga jika tidak terdapat artikel yang sesuai pada url address bar akan muncul gambar seperti ini :

Begitu diklik tulisan ‘back’ nya akan kembali ke halaman sebelumnya dengan menggunakan javascript:

javascript:history.back()

yang di masukkan kedalam tags <a href=….>

Selain itu saya juga menambahkan separasi tiap artikel dengan gambar :

Selesai sudah pengerjaan saya untuk theme oopshey.com ,Thx untuk mas Firman pemilik oopshey.com yang mempercayakan custom themenya pada saya.. selamat menikmati , semoga suka dan makin semangat untuk posting dengan theme barunya.

satu kerjaan selesai masih ngantri kerjaan2 lain.. waduhh harus tetep semangat nihh !