Kamis, 31 Juli 2008

Laptop lagi sakit dan harus di rawat inap..

Buat pembaca setia blog om maaf yah belum bisa update dulu berhubung laptop kesayangan om lagi sakit dah harus dirawat inap dipuskesmas terdekat. Kata pak dokter hardisk dan p.a powernya jebol, gimana tidak ya..wong laptop jaman bahari sudah om pake selama 6th dipaksa kerja keras layaknya server (benar2 dipaksa kerja rodi..kejam ya hehehe) yang bikin om BT semua info feed para sahabat dan bookmark yang tertata rapi jadi hilang..jadi ketinggalan berita terbaru nih om. Tapi ya sudahlah mau gimana lagi, mudahan saja omongan pak dokter bener, dalam waktu 3 hari kedepan laptop tercinta om bisa pulih dan bisa rawat jalan saja. Semoga dibalik kejadian ini ada hikmahnya. Mohon do'a kesembuhannya ya...

Minggu, 27 Juli 2008

New Launching - Blog Template For You

O-OM dan Kang rohman bekerja sama membuat satu blog yang khusus didesain untuk download blogger template. Isinya belum banyak sih, tapi ya sambil jalan saja. Semua kreasi template kang rohman dan oom akan di muat di blog http://www.blogtemplate4u.com, silahkan dikunjungi ya :)



Sabtu, 26 Juli 2008

New Blogger Layout : Almost Spring Blogger Version

Dapat kabar dari si Jacky via YM kalau Goggle bakal update PageRank langsung aja om cabut ke TKP, kemana lagi kalo bukan ke salah satu pentolan Google tepatnya blognya Mutt Cutts. Terinspirasi dari blog Mutt Cutts membuat om tertarik untuk membuat template yang sama. Template ini merupakan versi Wordpress buatan Becca Wei yang diberi nama Almost Spring , disini om mencoba melakukan converting dari wordpress ke Blogger. Ya sudah, tertarik mencoba Blog style yang sama digunakan Mutt Cutts di blogger anda?



 


Blogger Version


Demo
Template
|

Download


 


Wordpress Version


Demo Template
|
Download


Bonus terpasang :
CSS dengan mode kompresi, Read More, Embedded Comment Form, Meta Tag Include, SEO Title Tag, Favicon Include, Komentar berbeda untuk pemilik blog, Emoticon Include dll.


Cara installasi :
Disarankan untuk membackup template dan dan isi element halaman terlebih dahulu.
Agar semua fasilitas berfungsi dengan baik, sebaiknya dilakukan secara manual (tanpa di upload) dengan melakukan copy-paste kode melalui halaman Edit HTML. (jangan lupa beri tanda centang pada Expand Template Widget).


Rabu, 23 Juli 2008

Horizontal Menu Navigasi

Yang sering berkujung ke blog om pasti sudah tidak asing
dengan horizonal menu navigasi. Nah tutor kali ini kita mencoba membuat menu
navigasi yang sebenarnya meminjam salah satu widget dari bawaan standar blogger.
Dengan sedikit sentuhan pada CSS, widget Linklist yang semula banyak digunakan
sebagai blogroll secara vertikal akan kita modifikasi menjadi menu navigasi
secara horizontal
. Ya sudah, dari pada om cuap2 gak jelas langsung ke cara
pembuatan aja ya :)









Pertama masuk halaman Edit HTML, kemudian copi-paste semua
kode CSS dibawah ini lalu letakan diatas kode ]]></b:skin>




/*-- (Menu/Nav) --*/

#nav{background:#222; height:32px; padding:4px 0 0; margin-bottom:0px}

#nav-left{float:left; display:inline; width:600px}

#nav-right{float:right; display:inline; width:100px}

#nav ul{position:relative; overflow:hidden; padding-left:0px; margin:0;
font:1.0em Arial,Helvetica,sans-serif}

#nav ul li{float:left; list-style:none}

#nav ul li a, #nav ul li a:visited{display:block; color:#fff; margin:0 5px;
padding:5px 4px; text-decoration:none}

#nav ul li a:hover{color:#800000; background-color:#fff; margin:0 5px;
padding:5px 4px}

#nav ul li a.current, #nav ul li a.current:visited, #nav ul li
a.current:hover{margin:0 8px; background-color:#fff; color:#fff; padding:5px
7px}




/*-- (Search) --*/

#search{background:#f9f9f9 url(http://oom.blog.googlepages.com/search.gif) 6px
2px no-repeat; -moz-border-radius-bottomleft:10px;

-moz-border-radius-bottomright:10px;

-moz-border-radius-topleft:10px;

-moz-border-radius-topright:10px; border:1px solid #b3b3b3; float:right;
height:25px; margin:0 0px 0 0; width:180px}

* html #search{margin-right:8px}

#search input{font-family:Verdana,Arial,Helvetica,sans-serif;
background:transparent; border:0; color:#555; float:left; font-size:12px;
margin:5px 0 0; padding:0px 2px 2px 27px; width:140px}




Masih pada halaman Edit HTML kemudian cari kode 
<div id='outer-wrapper'><div id='wrap2'> biasanya
kode ini terletak di bawah html tag <body> kemudian copi-paste semua kode
dibawah ini, dan letakan kodenya dibawah kode warna hijau
diatas.




<div id='nav'>

<b:section class='header-tabs' id='header-tabs' preferred='yes'
showaddelement='no'>

<b:widget id='LinkList1' locked='true' title='Top Tabs' type='LinkList'>

<b:includable id='main'>

<div class='widget-content'>

<b:if cond='data:title'/>

<div id='nav-left'>

<ul>

<li><a href='/'>Home</a></li>

<b:loop values='data:links' var='link'>

<li><a expr:href='data:link.target'><data:link.name/></a></li>

</b:loop>

</ul>

</div>

</div>

</b:includable>

</b:widget>

<b:widget id='HTML3' locked='true' title='Search' type='HTML'>

<b:includable id='main'>

<div id='nav-right'>

<form expr:action='data:blog.homepageUrl + &quot;search&quot;' id='searchform'
method='get' name='searchform'>

<b:if cond='data:title'/>

<div id='search'>

<input class='s' id='s' name='q' onblur='if (this.value == &apos;&apos;)
{this.value = &apos;Cari artikel disini&apos;;}' onfocus='if (this.value ==
&apos;Cari artikel disini&apos;) {this.value = &apos;&apos;;}' type='text'
value='Cari artikel disini'/>

<input id='searchsubmit' type='hidden' value='Search'/>

<data:content/>

</div>

</form>

</div>

</b:includable>

</b:widget>

</b:section>

</div>






Silahkan disimpan dan lihat hasilnya. oh hampir lupa..rekan
bisa menyesuaikan warna latar dan textnya sendiri ya :)


 


Untuk menambah menu, silahkan buka kembali "Elemen Halaman"
kemudian perhatikan widget paling atas, disitu sudah terlihat witget baru dengan
title "Top Tabs" silahkan klik edit dan tambahkan menu yang ingin
ditampilkan. Selamat Mencoba :)




Senin, 21 Juli 2008

MyBrand (Pro) - Your FeedBurner Custom Domain



MyBrand (Pro) merupakan layanan gratis dari
Feedburner
, anda bisa menggunakan layanan ini sebagai alternatif domain pilihan menggantikan URL standar Feedburner anda, bagi yang terbiasa menggunakan jasa feedburner tentu sudah tidak asing lagi dengan format Feed standarnya. Sebagai contoh biasanya kita didipinjamkan dengan alamat 
http://feeds.feedburner.com/ooms-logs nah coba
sekarang bandingkan jika  menggunakan
http://feeds.o-om.com/ooms-logs
 tentu
terkesan lebih profesional dengan domain sendiri ya. Penarasan? lanjut....





Sebelum mencoba layanan ini, perlu anda diperhatian bahwa
mengganti alamat feed anda dengan domain sendiri bukan berarti anda kehilangan
pelanggan feed lama anda, setelah saya mencoba ternyata feed Url standar
feedburner masih bisa difungsikan, ini berarti anda memiliki dua alamat feed
pilihan dan anda bisa menggunakan salah satunya saja. Untuk setting pada
FeedBurner ikuti langkah dibawah ini:



  • Silahkan login dahulu ke
    Feedburner

  • Kemudian tuju ke My Account

  • Lalu pilih MyBrand (Pro)

  • Langsung tuju ke nomor 3, masukan nama alias domain anda (lihat contoh input
    di gambar)

  • Jangan lupa di klik Save






Agar bisa mengaktifkan layanan MyBrand (Pro) pastikan
anda sudah memiliki alamat domain sendiri (tidak terkecuali untuk domain
gratis). Yang di butuhkan hanya melakukan setting pada Nama Alias (Cname
Record)
pada DNS anda. Setting subdomain sudah pernah saya ulas pada
layanan Dnspark

disini
atau pada layanan Free DNS  lainya (EveryDNS
dan
XNAME). Untuk input Cname Record bisa menggunakan nama alias
"Feeds" atau nama yang lain dan pastikan
arah record tertuju ke

feeds.feedburner.com




Selamat mencoba, happy blogging with o-om.com


Jumat, 18 Juli 2008

Percepat loading page dengan CSS Compressor

Teknik kompresi pada CSS paling tidak mampu meningkatkan performa
loading page blog anda. Disini bukan dalam artian super cepat ya, tapi
cenderung ke arah optimalisasi CSS. Jika kita bicara masalah kecepatan
loading page
, CSS Compress ini cuma salah satu bumbu penyedap saja,
tidak ada cara sebagus apapun selain optimalisasi pada size image (jangan
dibandingkan dengan kecepatan koneksi internet dulu ya...kita anggap saja koneksi
yang kita gunakan sama).







CSS Drive - CSS Compressor
merupakan salah satu layanan gratis yang biasa om
gunakan untuk keperluan ini. Yang menarik, tools ini menyediakan 3 level mode
kompresi berbeda yaitu Light, nomal dan Compact. Cara kerjanya, metode
kompresi CSS
ini berusaha memperkecil ukuran dengan menghilankan spasi dan
komentar yang tidak diperlukan. Om sarankan untuk yang baru utak atik CSS jangan
langung mencoba mode Super Compact dan Strip All Comments..sebaiknya
gunakan mode Light dan don't strip any comments
terlebih dahulu. Untuk yang sudah mengerti bisa mencoba level kompresi
selanjutnya pada pilihan

Advanced mode
.




Selain fungsi Compress tentu kita juga mengenal
mode Uncompress
. Biasanya uncompress digunakan sebagai kebalikannya.
Sayang CSS Drive tidak memiliki fungsi ini, jadi om sarankan kita bisa
mencoba pada layanan ini
CSS
Optimizer
.






Cara Kompresi CSS pada Blogger:




(sebelumnya jangan lupa backup semua kode pada halaman Edit
HTML)




Pada halaman Edit HTML, Code CSS biasanya terletak diatara
kode <b:skin><![CDATA[ dan
]]></b:skin> silahkan copy-paste semua
kodenya kemudian lakukan kompress pada tools diatas, jika sudah..copy-paste lagi
kode yang sudah di compress ke halaman Edit Html pada posisi semula. Selamat mencoba :)


Rabu, 16 Juli 2008

New Blogger Template : Elegant Style & SEO Friendly

New Blogger Template dengan konsep Elegant Style dan SEO Friendly. Di desain dengan style sederhana serta memiliki kecepatan loading page yang mengagumkan. Secara default template ini hanya 20% menggunakan image, selebihnya didesain menggunakan permainan warna melalui koding.






Demo Template |

Download



Bonus terpasang :


CSS dengan mode kompresi, Read More, Embedded Comment Form, Meta Tag Include, SEO Title Tag, Favicon Include, Komentar berbeda untuk pemilik blog, Emoticon Include dll.



Cara installasi :


Disarankan untuk membackup template dan isi element halaman terlebih dahulu.
Agar semua fasilitas berfungsi dengan baik, sebaiknya dilakukan secara manual (tanpa di upload) dengan melakukan copy-paste kode melalui halaman Edit HTML. (jangan lupa beri tanda centang pada Expand Template Widget).


Minggu, 13 Juli 2008

Site Blocker "Anti Lendir" karya anak UGM

Hari ini jam 11 pagi perhatian om sempat tertuju pada acara
stasiun TV swasta yang menanyangkan masalah seputar Anti Perlendiran. Acara dengan
durasi 30 menit ini melakukan review pada salah satu putra bangsa yang mendapat
penghargaan atas keberhasilanya meraih Youth National Science and Technology
Award
dari Menteri Pemuda dan Olahraga.







Ahlul Faradish Resha
, merupakan programmer dibalik pembuatan software
Site blocker
yang meraih penghargaan diatas. Software buatan salah satu
mahasiswa UGM ini konon katanya mampu melakukan pemblokiran pada situs tertentu
terutama yang mengandung keyword Lendir.  Jika kita perhatikan, Sebenarnya Site
blocker
buatan Ahlul mungkin tidak jauh berbeda dengan software yang sudah
ada, namun Ahlul yakin software buatannya mempunyai kelebihan pada sistem
kerjanya.




Pada situsnya Ahlul juga mengatakan, software yang berkerja
sebagai Client-Server ini dilengkapi juga dengan sistem SMS yang akan
mengirimkan SMS kepada admin jika ada klien yang mengakses situs lendir. Tentunya
fasilitas ini akan sangat menarik sekali misal “Jika diterapkan di Lab Komp
Sekolah", menarik juga ya untuk software gratis sebagus ini, Sayangnya software ini belum ada manualnya dan om juga belum
mencoba keunggulannya, silahkan di coba dulu aja ya.




Yah...semoga saja dengan hadirnya Software Site blocker
ini paling tidak bisa "sedikit" mengurangi akses kesitus yang
mengandung keyword lendir,
terutama
bagi kalangan pelajar sekolahan dan orang tua yang memiliki akses internet
dirumah dan belum bisa mengawasi putra-putrinya secara langsung.


(yang penting asal situsnya
jangan diblokir langsung dari ISP kayak kemaren)




Software bisa download disini 

Program Server
|
 Program
Klien


Kamis, 10 Juli 2008

Selembar uang kertas dijadikan media promosi? Parah!

Promosi dengan menambahkan alamat blog pada brosur dan selebaran mungkin sudah biasa,
bagaimana jika anda
menemukan blogger yang melakukan promosi blognya dengan selembar uang kertas?


Om yakin kita pernah nemuin uang yang di corat-coret dengan
tulisan aneh, entah itu tanda tangan, nama pacar dan no HP cewek.
Tapi kali ini beda, lagi iseng aja om ngerapiin uang di dompet eh malah nemuin coretan alamat Blog pada selembar
uang Rp.10.000
. Kalau tidak salah seminggu yang lalu,
sayang om gak sempat ngambil gambarnya dan om juga lupa alamat blog yang ditulis.







Kurang lebih seperti ini ilustrasinya. Lihat alamat blognya ya, bukan gambar
monyetnya :)




Entah apa tujuan pelaku, yang jelas cara ini tentu saja
melanggar hukum (mungkin lho ya om juga kurang ngerti). Lain hal jika kita bicara teknik promosi, layaknya surat edaran mungkin cara ini
termasuk viral promotion yang hebat, bayangkan hanya dengan menulis alamat blog,
uang kertas ini akan terus beredar dan melanglang buana kesana kemari. Tidak
peduli siapa yang membacanya..kalo sampai ke tangan tukang becak dan tukang
sayur
mungkin gak ada untungnya, bila sampai ketangan blogger seperti kita
hehehe pikir aja sendiri, ibarat ada pesan "Don't Click Me" kok ya tetap
aja diklik, dasar manusia hihihi




Kira-kira dari tidakan dodol diatas pelaku bisa dilacak gak
ya? menurut om rada susah juga sih, sekalipun itu lewat sidik jari.
Silahkan aja kalo mau melacak jutaan sidik jari, tapi paling tidak bisa dilihat
langsung dari URL si target (ya..kalo gak hidden profile).




Ya sudahlah...lupakan cerita diatas, ini hanya pesan moral
aja, jangan pernah sekali kali mencoret-coret uang sendiri apalagi uang orang
lain :) nyarinya susah man!! kegiatan promosi itu untuk cari duit, bukan dengan
mencoret duit untuk promosi, sekali lagi jangan pernah mencoba teknik promosi dodol
ini.thanks o-om.com


Fitur lengkap dari Zoho Online Office


Sebagian rekan mungkin pernah mencoba aplikasi
Zoho Online Office, kalau
belum..coba kunjungi sekarang, pastinya banyak fitur menarik di dalamnya yang
bisa kamu gunakan.








Zoho merupakan aplikasi Online Office dengan
fitur terbilang sangat lengkap, kamu bisa menggunakan aplikasi zoho seperti
Word Processor, Spreadsheet, Presentatation, CRM
dan masih banyak lagi.
Selain user interface mudah diikuti, beberapa aplikasi yang membuat saya
tertarik tertuju pada Zoho Wiki, Zoho Chat dan Zoho
Project
Ketiga  aplikasi ini yang buat saya gak tidur tadi
malam, apalagi aplikasi chat dari zoho bisa juga di pasang diblog kamu, pastinya tambah cantik. Sambil otak atik sana sini, sempat ngantuk dan BeTe juga...untungnya
masih ditemani sahabat om
Kang Rohman dan
Mas Fariez jadi semangat
deh hehehe yuuu tunggu apa lagi segera ke TKP.



Selasa, 08 Juli 2008

Free DNS Hosting Service via Xname

Setting Cname Record pada Xname untuk Blogspot Custom domain.





Sebelumnya pernah saya jelaskan setting Cname Record dengan meminjam layanan
Free DNS Hosting pada
DNSPark dan
EveryDNS, kali ini
saya coba jelaskan pada layanan DNS Hosting gratis lainnya Xname.org. Sebenarnya
setting pada DNS hampir sama saja,
yang membedakan hanya arah tujuan server. Pada Xname kita menggunakan
zona host Primary ns0.xname.org dan secondary
ns1.xname.org |
ns2.xname.org.
Sedangkan untuk input Cname Record bisa menggunakan nama alias
"www"
dan pastikan arah record tetap tertuju ke ghs.google.com. Untuk lebih jelasnya ikuti langkah setting dibawah ini:





1. Buat user baru
disini




2. Silahkan mengisi form pendaftaran, lihat contoh dibawah:








 


3. Pilih menu "Create Zone" kemudian masukan nama domain, lalu pilih dengan
memberi tanda centang pada "primary" lalu tekan tombol create.


 








4. Bila input nama domain berhasil, klik link "modification interface",
sekarang tinggal melakukan input setting pada Cname Record.







 


Pada tahapan ini setting Cname Record Pada Xname sudah berhasil


 


Setting pada Domain Manage:




Setelah melakukan setting DNS, sekarang lakukan setting pada Domain
Manage
,  yang harus diingat setting pada domain manage biasanya berbeda,
namun rata-rata mempunyai setting untuk mengarahkan nama
domain ke server tujuan. karena saya menjelaskan menggunakan layanan
Xname.org
maka nama server tujuan seperti dibawah ini: 




ns0.xname.org.


ns1.xname.org.


 





Setting pada Blogger:


 


Pilih tab Pengaturan -> Publikasikan -> arahkan pada
"Domain Anda"
kemudian masukan nama domain. contoh : www.o-om.com atau
blog.o-om.com


Contoh setting pada blogger:








 


Pada tahapan ini semua proses telah selesai. Selamat
mencoba :)



Senin, 07 Juli 2008

Twingly "Spam - Free Blog Search"


Dari berbagai layanan spesialis blog search,
Twingly.com mengklaim
dirinya sebagai mesin pencari pertama yang bebas dari blog spam (Free
Spam Blog Search
). Twingly Blog search pertama kali diluncurkan pada Februari
2007 dengan beranggotakan 9 orang team. Dengan alasan yang sama, team ini
bekerja keras membangun mesin pencari yang inovatif dan sampai saat ini layanan
ini memfocukan diri menjadi layanan blog search engine terbaik di Eropa.








Jika membandingkan dengan
Google Blog Search,
layanan ini tentu masih kalah dalam jumlah index halaman. Namun twingly
memberanikan diri mengatakan jika jumlah blog yang diindex dalam database mereka
juga tidak sedikit. Terlebih kemampuan layanan ini dalam menyaring blog yang
dianggap sebagai spam
tentu terlihat lebih unggul. Bagi anda yang focus
mencari informasi pada blog berkualitas, layanan twingly layak di coba.




Hal menarik setelah mencoba Twingly, ternyata
kita diberikan hak untuk berpartisipasi memerangi spam, tentu saja sebelumnya
harus terdaftar sebagai anggota twingly. Selain itu anda juga dapat memberikan
vote/nilai  pada kualitas link yang anda temukan, terlebih anda juga bisa
melakukan subscribe to Rss berdasarkan keyword tertentu. Mantap :)




Bagi anda (blogger), layanan twingly jangan sampai
terlewatkan. Agar blog anda bisa terindex pada layanan ini caranya cukup mudah
yaitu dengan menginput alamat blog anda menggunakan
layanan Ping yang
sudah disediakan. Sebelum mem-Ping blog anda, saya sarankan sebaiknya coba search
dulu dengan keyword site:namablog.com (sample) jika blog sudah terindex lupakan ping
diatas, pada kenyataanya hampir semua blog yang saya kenal sudah ter-index di layanan ini.
Dengan twingly, kita (blogger) dapat juga memasang widget dari hasil pencarian
sesuai dengan index keyword yang ingin ditampilkan. Yuuk tunggu apa lagi langsung saja ke TKP :)


Jumat, 04 Juli 2008

Testimonial


Silahkan mengisi catatan
kecil pada halaman testimonial. Beri masukan pada kualitas artikel dan
mengapa sahabat blogger memilih o-om.com sebagai blog favorite. Terima kasih.



Selasa, 01 Juli 2008

Css Dock Menu ala Macintosh

Pernah mencoba Dock Menu di komputer Macintosh? atau
paling tidak anda sudah pernah melihatnya. Kalo belum yo wes, yang jelas seperti gambar dibawah inilah contoh tampilan icon
Dock Menu
. Dock menu layaknya di komputer MAC akan menampilkan efek icon bergaya aqua (Aquos), kita akan melihat perubahan size icon ketika mouse diarahkan ke bidang menu tersebut.










Ndesign-studio.com
merupakan salah satu situs yang menyediakan open source untuk Css Dock Menu.
Dari sekian banyak contoh koding Dock Menu layanan ini yang menurut om
paling mudah penerapannya. Untuk sample tampilan bisa anda lihat

disini
. Sebenarnya di situs ini sudah dijelaskan secara singkat tutorialnya,
tapi lebih baik om jelaskan saja lagi biar lebih mudah.






Ikuti langkah pemasangan Dock menu :





1. Download dulu file

CSS dock menu zip package
.





2. Kemudian Unzip filenya terlebih dahulu.





3. Dalam folder JS ada 2 file
javacript (interface.js dan
jquery.js
) dan pada folder images anda akan
menemukan file gambar, silahkan upload semua file tersebut ke host
directory masing-masing (om sendiri menyimpan filenya di Pages.google.com),
kalo sudah silahkan buka kembali folder css-dock-menu,
ulangi lagi seperti langkah sebelumnya yaitu dengan upload file
iepngfix.htc dan
style.css





4. Sampai disini proses upload sudah selesai, langkah
selanjutnya cara pasang di blogger.






Cara pasang di blogger:





1. Masuk ke menu Edit HTML, cari kode
<head>
dan letakan script ini di bawahnya seperti ini:





<head>

<script src='http://oom.blog.googlepages.com/jquery.js'
type='text/javascript'/>

<script src='
http://oom.blog.googlepages.com/interface.js'
type='text/javascript'/>

<link href='
http://oom.blog.googlepages.com/style.css'
rel='stylesheet' type='text/css'/>





Untuk warna pink diatas silahkan
sesuaikan dengan path directory masing-masing.





2. Masih pada halaman Edit HTML, cari code
</body> kemudian letakan file dibawah ini diatas
kode </body> seperti ini:





<script type="text/javascript">

$(document).ready(

function()

{

$('#dock').Fisheye(

{

maxWidth: 50,

items: 'a',

itemsText: 'span',

container: '.dock-container',

itemWidth: 40,

proximity: 90,

halign : 'center'

}

)

}

);

</script>


</body>

</html>






Langkah akhir tinggal ke proses pemasangan menu. Dock menu ini
bisa anda letakan diarea mana saja, bisa di elemen halaman blogger maupun di
halaman Edit Html. Untuk mudahnya anda bisa memasang langsung contoh penerapan
kode dibawah ini.





<div class="dock" id="dock">

<div class="dock-container">

<a class="dock-item" href="
http://www.o-om.com"><img
src="
http://oom.blog.googlepages.com/home.png"
alt="home" /><span>Home</span></a>

<a class="dock-item" href="
http://www.o-om.com"><img
src="
http://oom.blog.googlepages.com/email.png"
alt="contact" /><span>Contact</span></a>

<a class="dock-item" href="
http://www.o-om.com"><img
src="
http://oom.blog.googlepages.com/portfolio.png"
alt="portfolio" /><span>Portfolio</span></a>

<a class="dock-item" href="
http://www.o-om.com"><img
src="
http://oom.blog.googlepages.com/music.png"
alt="music" /><span>Music</span></a>

<a class="dock-item" href="
http://www.o-om.com"><img
src="
http://oom.blog.googlepages.com/video.png"
alt="video" /><span>Video</span></a>

<a class="dock-item" href="
http://www.o-om.com"><img
src="
http://oom.blog.googlepages.com/history.png"
alt="history" /><span>History</span></a>

<a class="dock-item" href="
http://www.o-om.com"><img
src="
http://oom.blog.googlepages.com/calendar.png"
alt="calendar" /><span>Calendar</span></a>

<a class="dock-item" href="
http://www.o-om.com"><img
src="
http://oom.blog.googlepages.com/rss.png"
alt="rss" /><span>RSS</span></a>

</div>





Warna merah diatas itu merupakan
link tujuan dan untuk warna pink diatas silahkan
sesuaikan dengan path directory masing-masing.






Untuk yang sudah mengerti programming tentu akan lebih mudah
lagi, anda bisa merubah sendiri code css dan javascipt maupun gambarnya sesuai
kebutuhan. karena ini tutorial untuk pemula jadi om jelaskan saja apa adanya.
Silahkan di kembangkan sendiri ya. thanks (o-om.com)