Tips Customize Submit & Preview button

Maksudnya "Customized submit & preview botton" adalah memberikan tampilan lain untuk tombol :

dan di Guestbook

Serta :

dan di box-reply

Mari kita coba costomize tampilan masing-masing.

Petama, mari kita telaah * wedew * bersama deklarasi CSS untuk seting tombol-tombol tersebut.
Selector untuk tombol Submit dan Submit (Ctrl+Enter) adalah input.submit
Sedangkan Preview dan Preview & Spell Check adalah input#preview_spellcheck_btn

Dengan demikian, apabila saya ingin merubah warna tulisan beserta background-nya menjadi seperti gambar di bawah ini :


Block CSS nya akan seperti berikut ini :

input.submit {
background: #000000 none 0 0 scroll no-repeat;
color: #FFFFFF;
padding: 4px;
}

input#preview_spellcheck_btn {
background: #000000 none 0 0 scroll no-repeat;
color: #FFFFFF;
padding: 4px;
}

Apabila saya ingin menambahkan backbround pada tombol, seperti berikut ini :


Maka saya akan menambahkan property untuk background dan penebalan font ( jika tidak ditebalkan, akan sedikit sulit dibaca ) :

input.submit {
background: transparent url(http://img7.imageshack.us/img7/97/benderarinm3.gif) center center scroll no-repeat;
color: #000000;
padding: 4px;
}

input#preview_spellcheck_btn {
background: transparent url(http://img7.imageshack.us/img7/97/benderarinm3.gif) center center scroll no-repeat;
color: #000000;
padding: 4px;
}

Dan apabila saya akan memberikan icon yang berbeda kepada dua tombol tersebut, seperti tampilan berikut ini, yang menurut saya lebih kelihatan profesional * halah *


Kodenya :

input.submit {
background: #DEDEDE url(http://images.multiply.com/common/misc/indicator-small.gif) 6px center scroll no-repeat;
padding: 4px 4px 4px 22px;
}

input#preview_spellcheck_btn {
background: #DEDEDE url(http://images.multiply.com/multiply/icons/clean/16x16/smiley.gif) 6px center scroll no-repeat;
padding: 4px 4px 4px 22px;
}

Note : Semua URL gambar, bisa Anda ganti dengan alamat URL gambar sesuai selera Anda.

Tambahan.
Ada satu button lagi, pasangan dari kedua button di atas, yaitu tombol Cancel yang muncul saat kita me-reply comment.


Untuk tombol terakhir, "Cancel Reply" selector-nya adalah input#cancel_reply_btn


Block CSS-nya adalah :

input#cancel_reply_btn {
background:#DEDEDE url(http://images.multiply.com/multiply/icons/clean/16x16/x.png) 6px center scroll no-repeat;
padding: 4px 4px 4px 22px;
}

Semoga bermanfaat.
Enjoy.

Tips Memberi Background Image pada Comment/Replies Box

Menambahkan latar belakang atau background pada comment box reply di halaman multiply anda sangatlah mudah.
Hanya diperlukan 1 (satu) block selector saja untuk memungkinkan hal ini terjadi.
Tutorial ini, sekali lagi diperuntukkan bagi mereka yang belum paham tentang masalah ini.
Bagi anda yang telah mampu melakukannya, saya sampaikan terima kasih apabila anda dapat memberikan masukan, agar tutorial ini membuahkan manfaat yang lebih baik.

Untuk menambahkan background pada comment-box reply ( textarea, tempat kita ngetikkan komen ), buka Custom CSS anda dan tambahkan block CSS berikut ini :

/* Basic selector to add background into textarea */
textarea#body {
background: #FFFFFF url(URL-alamat-gambar-anda) repeat scroll left top;
color: #000000;
}

penjelasan :

1. textarea#body adalah selector untuk box isian dengan tag HTML <textarea /> yang berada pada ID body (ditulis #body), untuk merujuk ke textarea yang berada di body, ditulislah textarea#body . Maksudnya adalah, apabila ada perintah textarea yang berada di body maka
2. muatlah gambar / image (background:) yang berada di alamat berikut ini  url(URL-alamat-gambar-anda))dengan
3. warna latar belakang putih (#FFFFFF) yang
4. diulang, sehingga memenuhi semua latar belakang tempat ngetikkan komen (repeat) dan
5. ikut scroll saat beserta foreground (text) saat text menggulung
6. mulai pasang gambar pada posisi pojok kiri (left) atas (top)
7. warna text, setel pada warna hitam (#000000)

Demikianlah pola dasar penempatannya.
Block selector ini, dapat anda kembangkan sehingga textarea (comment-box reply) anda sesuai dengan keinginan anda, seperti pengaturan border, besar font, type font dan lain sebagainya.

Contoh :
textarea#body {
-moz-border-radius: 8px;
background: #FFFFFF url(http://img527.imageshack.us/img527/1750/bluewater.gif) repeat scroll left top;
border: 2px solid #000000;
color: #000000;
}
akan menghasilkan :

textarea#body {
-moz-border-radius: 8px;
background: #000000 url(http://img410.imageshack.us/img410/2496/langitmalam.gif) repeat scroll left top;
border: 2px solid blue;
color: #FFFFFF;
}
akan menghasilkan :

textarea#body {
-moz-border-radius: 8px;
background: #000000 url(http://img15.imageshack.us/img15/7165/yingyanglw8.gif) no-repeat scroll left bottom;
border: 2px solid grey;
color: #FFFFFF;
}
akan menghasilkan :

textarea#body {
-moz-border-radius: 8px;
background: #FFFFFF url(http://img24.imageshack.us/img24/8265/beruangmo9.gif) no-repeat scroll center bottom;
border: 2px solid blue;
color: #000000;
}
akan menghasilkan :

textarea#body {
-moz-border-radius: 8px;
background: #FFFFFF url(http://img14.imageshack.us/img14/2956/mousecatgw2.gif) no-repeat scroll right bottom;
border: 2px solid blue;
color: #000000;
}
akan menghasilkan :

Selamat bereksperiment, semoga sukses.
Enjoy.

Ubah Date & Time, Allow Replies dan Send To Multiply Inbox

hei... tahukah kamu wahai kawan...??
kalau tanggal dan waktu di postingan kita itu bisa diubah..??
hah! bagaimana caranya..??

sabar dulu yah... intronya dulu neh.... xixixixi

Jadi benar, kalo date and time (biar keren dikit, dikit aja kok gak banyak²) pada postingan (blog/journal) kita itu bisa diubah². Saya sendiri sebenernya baru tahu secara tidak sengaja dan saya pikir belum banyak yang tau juga mengenai hal ini. Oleh karena itu saya ingin memberitahu kepada Anda semua (halah, belibet amat sih)

Jadi tuh, setelah gw coba² dikit, ternyata perubahan tanggal dan waktu pada blog kita itu memepengaruhi posisi urutan blog tersebut. Jadi tuh, MP mengurutkan blog kita bukan berdasarkan nomor ke berapa blog tersebut (dapat dilihat pada URL blog tersebut)

Semisal gw kasih contoh gini nih. Postingan gw yang ini diposting pada tanggal 28 Desember 2007, dan akan gw ubah menjadi tanggal hari ini. Perhatikan URL, Prev dan Next pada postingan tersebut. Setelah diubah tanggalnya, URLnya tetap, tapi Prev sama Next-nya berubah kan?? itu berarti urutannya berubah. Sudah mengerti kan..??

sebelum diubah:

setelah diubah:
Entah hal ini bermanfaat buat lo apa nggak, mudah-mudahan sih bermanfaat :D. Klo gak bermanfaat segera close blog ini, tapi kalo bermanfaat silahkan terusin bacanya karena gw akan ngasih tau cara ngubah tanggal di blog kita.

Caranya gampang kok, setiap lo posting blog atau edit blog tinggal atur tanggal dan waktu yang lo pengen di kolom Date & Time.
 Mungkin lo bingung, kolom Date & Time yang mana...?? kok klo gw gak ada sih kolom itu?? Tenang ajah... ikutin langkah berikut:

cari tahu disini: Ubah Date & Time, Allow Replies dan Send To Multiply Inbox

Tutorial Menampilkan Gambar di Comment dan di Web-Page

Tutorial ini diperuntukkan bagi mereka yang belum begitu paham tentang bagaimana memasang gambar / image di Reply-box Comment maupun di Web Page ( halaman Website ), atau menyegarkan kembali ingatan tentang dasar pemikiran pemasangan Image, bagi yang lupa-lupa ingat.
Perintah / command untuk pemasangan image ini cukup sederhana, yaitu :

<img src="http://images.multiply.com/multiply/splash/headerlogo.gif"/>

dan browser akan menampilkannya sbb :

<img disebut sebagai "Tag dari perintah bahasa HTML" untuk menampilkan gambar / image di layar kamputer melalui Browser Internet.
Tag ini akan dikenali oleh browser sebagai perintah apabila disebelah kiri tulisan img diberi tanda < . Jika kode img tidak diberi tanda <, browser akan mengartikannya sebagai text saja, dan akan ditampilkan di layar sebagai tulisan img, tanpa mengandung arti apapun.
Semua Tag atau perintah pada HTML selalu mempunyai pasangan tanda < dan >.
Maksudnya adalah, browser harus diberi pengertian perintah dimulai dari mana dan berakhir di mana.
Jadi, perintah / tag <img src="http://images.multiply.com/multiply/splash/headerlogo.gif"/> mempunyai arti sbb:
Tampilkan image ( <img ) yang source-nya ( src= ) berasal dari server http yaitu http://images.multiply.com di subdirectory ./multiply/splash/ dengan nama file headerlogo yang ber-extension .gif dan perintah selesai ( /> )

Dengan demikian maka, jelaslah bahwa perintah ini akan dilaksanakan oleh browser di seluruh dunia yang terhubung / connected dengan jaringan Internet untuk menampilkan gambar yang berada di server multiply.com
Gambar / image acapkali tidak berhasil ditampilkan apabila pada saat itu, secara real komputer kita tidak terhubung ke Internet, atau server multiply.com sedang ngadat dan tidak merespons permintaan browser. Semua hubungan, koneksi dimulai dari komputer kita yang berada di sudut ruangan, melewati Modem, melewati Routers, Backbone Asia, kabel bawah laut antar benua, melewati Backbone Amerika Utara dan seterusnya sampai ke server Multiply.com harus terhubung pasti dan tidak ada error 1 (satu) bit-pun agar perintah sederhana di atas terlaksana dengan baik.

Permintaan untuk menampilkan gambar / image tersebut, seperti yang telah saya sebutkan di atas, yaitu ditulis dengan bahasa HTML atau HyperText Markup Language.
Karena berupa text, maka kode perintah-perintahnya dapat kita kenali serta gampang dipahami. Text-nya sendiri berupa singkatan dari bahasa Inggris. Kita tidak perlu lagi berkomunikasi dengan browser memakai bahasa mesin 0100 0110 biner, yang mana 1 diwakili tegangan +5volt dan 0 dengan -5volt pada CPU berbasis tegangan 5volt.

Perintah sederhana seperti <img src="http://images.multiply.com/multiply/splash/headerlogo.gif"/> bisa diganti dengan source dari site / server manapun. Apakah dari Multiply.com, Google.com atau Photobucket.com dan lain sebagainya.
Apabila kita menginginkan gambar / image yang berada di hardisk komputer bisa dipanggil oleh browser yang terhubung ke jaringan World Wide Web ( sekarang cukup disebut Web saja ) dengan protocol TCP/IP atau Internet, maka gambar kita harus kita Upload ke server yang selalu terhubung 24 jam sehari, 7 hari seminggu.
Mengapa demikian ?
Jawabannya adalah, karena kita tidak bisa memperkirakan, kapan gambar akan diminta oleh user di seantero bumi ini untuk ditampilkan, pagi, siang, sore atau malam.
Gambar harus siap selama 24 jam sehari, 7 hari seminggu tanpa istirahat ( kecuali saat maintenance / perawatan ) atau dengan kata lain, siap dipanggil kapanpun.
Semoga bermanfaat.
Enjoy.