Tuesday, March 31, 2009

Menambahkan Copyright pada Footer

Copyright + copyright = ?

Maksudnya menambahkan kalimat kita pada copyright, contoh "pein&konan by zhekho.multiply.com" pada copyright, itu yg ada dibawah, masih kurang jelas, mari liat gambarnya :


tulisan pein&konan theme by zhekho.multiply.com sudah terpampang dengan manis :D



Tanpa panjang lebar, Langsung aja ini caranya, masukin css ini :

span#copyright:before {
color: #0d0;
color: #9bf;
content:"Pein&Konan Theme by zhekho.multiply.com ";
}

Ket :

tulisan yg dibold adalah tambahan pada copyright, silahkan diganti sesuai keinginan, begitu juga warnanya, terserah
before menunjukan tulisan yg muncul terletak sebelum copyright asli, kalo mau muncul setelah copyright asli silahkan ganti jadi after

n.b. :

sebenernya tambahan tulisan ini ga cuma bisa di copyright aja, cuma di tutorial ini segini dulu aja,
trick ini bisa masih ditangguhkan kesahannya mengingat ada aturan mp yg melarang mengitak-ngatik bagian ownedfooter itu, jadi tanggung jawab sendiri yo


Sunday, March 29, 2009

Tips Pasang Google Translate di Multiply

Google saat ini telah menyediakan fasilitas penterjemah situs Web yang dapat dimanfaatkan pengguna Internet di seluruh dunia untuk menterjemahkan halaman Web manapun kedalam banyak bahasa.

Saya akan memberikan penjelasan dasar pemasangannya. Pengembangan lebih lanjut diharapkan datang dari Anda guna membuat Google-Translate tampil lebih baik di halaman Multiply Anda.

Kita mulai.

Google-Translate bisa diakses dengan beberapa cara.
  • Cara pertama dengan memasang gadget yang bisa didapat di halaman Google-Translate di tab Tools Google
    Hanya saja, tools tersebut dalam bentuk kode Javascript, yang saat ini masih tidak diperkenankan oleh Multiply.com untuk dipasang di manapun di lingkungan Entry data MP.
  • Cara kedua adalah dengan memanfaatkan pemakaian kode HTML, yang masih diperkenankan oleh System Multiply.com.
Kita akan membahas cara kedua saja.

HTML dasar untuk mengakses Google-Translate guna menterjemahkan Web-page kita adalah dengan memanfaatkan tag <a href="URL google translate + parameters web page, home language, source language and target language><img src="source image or image flag"></a>

Maksudnya adalah, apabila user mengklik image bendera, browser akan menjalankan pemanggilan halaman kita dengan bahasa yang telah diterjemahkan sesuai dengan parameter yang disampaikan.
Sebagai catatan, Google adalah user yang mewakili khalayak umum yang tidak mempunyai account di Multiply. Sehingga, halaman yang bisa diterjemahkan adalah halaman yang bisa diakses umum. Dengan kata lain, Anda harus memberikan Access for Everyone agar Google bisa masuk ke dalam halaman yang anda maksud.

Kode dasarnya :
<a href="http://translate.google.com/translate?prev=hp&hl=en&u=http%3A//dangdutkoplo.multiply.com&sl=id&tl=en"><img src="http://images.boardhost.com/flags/gb.png"></a>

Jika halaman anda berbasis bahasa Indonesia dan ingin diterjemahkan kedalam bahasa Inggris, maka source language sl=id, target language tl=en .

Akan sedikit rumit, apabila halaman Anda berbahasa Indonesia dan ingin diterjemahkan kedalam bahasa Jerman, maka parameternya adalah hl=en, sl=id dan tl=de. Google-Translate akan menterjemahkan page anda kedalam bahasa Inggris terlebih dahulu sebelum pada akhirnya diterjemahkan kedalam bahasa Jerman.

Ubah dangdutkoplo.multiply.com dengan ID Anda dan tl=en dengan bahasa tujuan ( en adalah kode untuk bahasa Inggris ).
Anda hanya perlu merubah en dengan de untuk bahasa Jerman, en dengan ja untuk bahasa Jepang, en dengan tl (tl = bahasa tagalog dan bukan tl Timor Leste karena ada kemungkinan Timor Leste memakai Portuguese atau pt dan bukan tl) untuk Pilipina.

Untuk mencari kode masing-masing bahasa ( bukan negara ), silahkan anda ke http://translate.google.com/translate_t#id|en|terjemahkan  perhatikan en yang berada di address bar browser akan berganti dengan kode bahasa setiap anda menterjemahkan text "terjemahkan" kedalam pelbagai bahasa.
Berikut ini contoh beberapa kode bahasa yang dikenali :
Inggrisen
Arabic ar
Chinese (Traditional) zh-TW
Chinese (Simplified) zh-CN
Dutch (Netherlans) nl
Filipino (Tagalog) tl
French fr
German de
Japanese ja
Russian ru
Thai th
Vietnamese vi

Group kode berikut ini akan memberikan sedikit gambaran tentang bagaimana kode tersebut bereaksi.

<table cellspacing="5" style="background-color:#CCCCCC;width:auto;border:1px solid gray;"><tbody>
<tr>
<td><a href="http://translate.google.com/translate?prev=hp&hl=en&u=http%3A//dangdutkoplo.multiply.com&sl=id&tl=en"><img src="http://images.boardhost.com/flags/gb.png"></a></td>
<td><a href="http://translate.google.com/translate?prev=hp&hl=en&u=http%3A//dangdutkoplo.multiply.com&sl=id&tl=de"><img src="http://images.boardhost.com/flags/de.png"></a></td>
<td><a href="http://translate.google.com/translate?prev=hp&hl=en&u=http%3A//dangdutkoplo.multiply.com&sl=id&tl=fr"><img src="http://images.boardhost.com/flags/fr.png"></a></td>
<td><a href="http://translate.google.com/translate?prev=hp&hl=en&u=http%3A//dangdutkoplo.multiply.com&sl=id&tl=ja"><img src="http://images.boardhost.com/flags/jp.png"></a></td>
</tr>
</tbody></table>
Nantinya kode tersebut akan ditampilkan seperti berikut ini :


Image bisa Anda ganti dengan image yang lebih besar :

<table cellspacing="5" style="background-color:#CCCCCC;width:auto;border:1px solid gray;"><tbody>
<tr>
<td>
<a href="http://translate.google.com/translate?prev=hp&hl=en&u=http%3A//dangdutkoplo.multiply.com&sl=id&tl=en"><img src="http://www.google.com/images/flags/uk_flag.png"></a></td>
<td><a href="http://translate.google.com/translate?prev=hp&hl=en&u=http%3A//dangdutkoplo.multiply.com&sl=id&tl=de"><img src="http://www.google.com/images/flags/de_flag.png"></a></td>
<td><a href="http://translate.google.com/translate?prev=hp&hl=en&u=http%3A//dangdutkoplo.multiply.com&sl=id&tl=fr"><img src="http://www.google.com/images/flags/fr_flag.png"></a></td>
<td><a href="http://translate.google.com/translate?prev=hp&hl=en&u=http%3A//dangdutkoplo.multiply.com&sl=id&tl=ja"><img src="http://www.google.com/images/flags/jp_flag.png"></a></td>
<tr>
</tbody></table>



Kode tersebut bisa Anda modifikasi sesuai dengan keinginan Anda.
Jika Anda menginginkan link Google-Translate ini berada pada banner, sisipkan kode tersebut pada Page Title.
Atau jika Anda merasa cukup untuk meletakkannya di Welcome Box, sisipkan kode tersebut pada Welcome Box Anda.

Semoga bermanfaat.
Enjoy.

Wednesday, March 25, 2009

Tutorial Membuat Banner Bergerak

atas saran & dorongan dari :

3snahouse
3sna
maka postingan di mupengml saya posting ulang disini dengan harapan bisa lebih berguna bagi kita semua.
hokeehhh..kita mulaiii...
berhubung cara buat dasaran pink udah dibahas di sini....maka dalam tutorial ini langsung dibahas cara memasukkan gambar bergerak kedalam banner dasar yg sudah dibuat buat.
siapkan banner pink bergaris yg udah kita buat kmaren













bongkar file gif yang akan kita masukkan ke banner dengan cara, klik kanan file *.gif > Open With > Image Ready


















simpan gambar *.gif (yang udah dibongkar) menjadi fiple *.psd (dalam hal ini saya simpan dengan nama goyang2muter.psd)
























kembali ke dasar bannerpink dengan photoshop yang sudah aktif, sekarang buka file goyang2muter.psd, hasil dari proses pada point sebelumnya (file ini punya 9 layer) dan lakukan copas (copy-paste) ke layer baru pada bannerpink dengan menggunakan magic wand. caranya, sorotkan / klik menggunakan magic wand pada bidang kosong dalam layer, tekan ctrl + shift + i (gunanya untuk membalik seleksi yang kita buat sehingga seleksi bisa pas mengikuti bentuk bidang yang kita inginkan) tekan ctrl + c

untuk mengcopy isi seleksi dan paste-kan pada layer baru di dalam file bannerpink yang sudah aktif




























ulang proses diatas untuk layer ke 2 sampai dengan layer 9, hasilnya sesuai gambar  di bawah ini (terdapat 9 layer baru pada bannerpink yang berisi layer hasil "copas" dari goyang2muter.psd).























sekarang buka file mashimaro.gif dengan klik kanan > Open With > Image Ready, dan simpan ke format *psd (dalam hal ini disimpan jadi mashilari.psd)

lakukan proses copas setiap layer seperti sebelumnya


















































lakukan free transform (ctrl + t) pada masing2 layer hasil copas dari mashilari.psd sehingga diperoleh efek gerakan mashimaro berjalan ke kiri.

























lakukan duplicate layer pada layer mashilari1 - mashilari 4 dan beri nama berbeda (dalam hal ini "mashilaribalik1-5). lakukan free transform (ctrl + t) pada layer mashilaribalik1-5 hingga diperoleh kebalikan / pencerminan dari mashilari1-4






























tambahkan layer2 lain berisi dekorasi (termasuk gambar Vic zhou pake baju kelinci), tampilan lengkapnya seperti pada gambar dibawah ini. simpan (ctrl + s)dan pilih edit with Image Ready.



















































pada gambar diatas (yang sudah aktif di Image Ready), masih terdapat 1 frame animation, atur visibility (gambar mata) tiap layer seperti pada gambar diatas.
lakukan penggandaan frame animation menjadi 9 frame (kita pakai 9 frame karena 2 gambar bergerak *mashimaro & cewek muter2* yg sudah ada di banner tadi sama2 memiliki 9 layer), aktifkan frame 2 dan atur tampilan layer seperti pada gambar di bawah ini.


























lakukan proses setting frame seperti diatas pada frame 3 sampai dengan frame 9 sesuai dengan gambar2 dibawah ini. jangan lupa mengatur durasi per frame menjadi 0,1 sec.







































































































































langkah terakhir, lakukan save seperti pada gambar dibawah ini.




































dan hasil dapat dilihat seperti pada bannerpink(tut).gif.
sekian tutorial seadanya dari saya..
tutorial ini juga saya posting di sinigambar gif sebagai bahan sudah saya attach-kan

kalo ada yag kurang jelas, saya minta maap....
semoga berguna..amiienn

Attachment: 24770.gif
Attachment: mashimaro.gif
Attachment: bannerpink(tut).gif

Tuesday, March 24, 2009

Tips Berganti Background Saat Pointer Mengarah ke Comment Box (Hovering)

Melanjutkan tutorial tentang background image di area comment box reply, yang telah saya sampaikan di Tips memberi background image pada comment box reply .

Maksud dari hovering adalah, saat pointer mouse kita arahkan ke comment box reply maka background atau gambar yang melatar belakangi box tersebut akan berganti, menjadi gambar lain.
Tehnik ini kadang diperlukan agar box reply tidak terlalu sesak dengan gambar dan bisa memperlihatkan text yang diketik oleh pemakai / user.

Kita mulai.

Pertama, siapkan gambar atau image untuk background standart display.
Kedua, siapkan juga gambar yang akan ditampilkan saat pointer berada di atas box (hovering).

Contoh, saya akan siapkan dua buah gambar berikut ini :

Background asal
.



Background saat hovering




Dan jika saya pasang di box comment reply :
Dan apabila pointer hovering :

CSS nya :

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;
}textarea#body:hover {
background: #FFFFFF url(http://img14.imageshack.us/img14/2956/mousecatgw2.gif) no-repeat scroll right bottom;
}

Dan jika saya menginginkan agar saat hover box reply menjadi bersih, saya tinggal meniadakan image background nya saja.

textarea#body:hover {
background: #FFFFFF none repeat scroll 0 0;
}

Anda bisa mencobanya dengan meng-klik button berikut ini :

 

Semoga bermanfaat.
Enjoy.


Monday, March 23, 2009

Cara Bikin Blinkie Animasi

Saya cuma kasih pencerahan buat yang belum tau...
Pertama-tama, buka Adobe Photoshop. Kalo proses udah selesai, klik File<New, dan isi seperti di bawah ini. Sebenernya sih, terserah mau segimana ukurannya, tapi biasanya orang ukurannya segitu buat ngirit ruangan sitenya, dan para theme makers segitu ukuranna(tips dari Dyana, makaci...). Masalah nama, isi ikut kesukaan .

Kalo sudah, akan keluar windows kecil seperti tampilan di bawah ini.
Perhatikan!!!
Nah lo, mau ngapain lagi sekarang? Sekarang, kita cari gambar buat background blinkienya. Klik File<Open. Nah, kamu tinggal pilih gambar yang udah kesimpen di kompimu yang mau dijadikan background. Disini, aku pake background si polkadot kuning itu.
GYAAA!!!!
Nah, karena ukuran image yang mau kita pake buat backgroundnya jauh lebih besar, kita harus samakan dulu. Caranya, klik Image<Image Size (si polkadot kuning itu harus aktif/windownya masih kebuka). Buat ukurannya sama seperti si putih. Cukup ubah bagian WIDTH-nya. Nanti ukurannya bakalan lebih kecil dari pada yang putih.
@adebunga
Nah, kita sampai ke tahap penyatuan 2 buah background. Sementara window polkadot kuning masih kebuka, klik Select<All. Jadinya si polkadot itu terseleksi dehh.... Kalo polkadot itu udah diseleksi, klik MOVE TOOL, atau langsung aja klik V di keyboard masing-masing. Geser polkadot ke rumahnya si putih.
f
Nah, kalo udah pindahin begronnya ke rumah si putih, sekarang kita cari gambar buat kitnya. Ukuran gambar kit itu harus lebih kecil dari begronnya. Kalo lebih bede, kecilin dulu. Di tutorial ini, aku pake gambar jeruk =krennzzz.
Nah, karena latar belakang si jeruk itu gak sama dengan polkadot, kita harus bikin dia terlihat seperti transparant. Caranya pake lasso(ato langsung pencet L di keyboard masing-masing). Buat lingkaran di tepian gambar jeruk(kalau bentuk kitmu bukan jeruk, bunga misalnya, bentuk lassonya jangan lingkaran kalo bisa. Ikutin aja bentuk gambar kitmu dengan hati-hati). Seharusnya sih pake Magic Wand, tapi karena yang buat nih tutorial gak tau caranya, jadi pake lasso aja. Kayak gambar di bawah....
dfggdf
Abis itu, geser JERUKNYA(bukan begron putihnya) pake move tool, atau langsung pencet V di keyboard masing2 ke tempat polkadot kuning. Mau tao di tengah, kanan, ato kiri, terserah.... Seperti inilah, kenampakan sang jeruk.

Sekarang, kita taro teks di calon banner itu. Klik Type Tool (bisa langsung teken T di keyboard), trus klik di bagian mana kamu mau pasang teksna. Pas banget di jeruk, misalnya. Atau, di samping jeruk. Buat ngeganti fontnya, perhatiin image di bawah ini.

Nah, di tutorial ini, teksku Eka. Kayak itu tuh, yang dibawah...

Sebelum kita mulai tahap animasi, kita buat dulu para layers invisible, kecuali layer background putih. Letak mereka di kotak layer di kanan bawah. Kayak itu tuh. Cara invisible-in mereka, klik di ikon mata sampe matanya ilang.
  menjadi
Kalo udah dibuat invisible(kecuali background) klik tombol Jump to Image Ready (teken Ctrl+Shift+M) bersimbol .
Akhirnya, sampe ke tahap animasi. Kita kebuka di jendela baru "Adobe Image Ready".

Yang tampak di atas adalah kertas kosong halaman pertama. Kosong melompong belom ada apa-apanya. Dihalaman pertama ini, klik ikon mata yang ada di samping tulisan "Layer 1" di Layer Pallates. Kira-kira seperti yang ada di gambar:

Nah nanti di kotak animasi(bawah) akan jadi seperti ini:
Sekarang buka kertas kosong baru lagi. Caranya teken  dan klik ikon mata yang ada di samping tulisan "Layer 2" di Layer Pallates. Kira-kira seperti yang ada di gambar:

Nah, nanti bakalan ada gambar polkadot sama jeruk.
Buat kertas kosong baru dan klik ikon mata textmu(paling atas). Nah, nanti bakalan ada gambar polkadot, jeruk, dan text Eka yang jadi satu.
Sekarang, klik tombol PLAY buat mainin animasimu. Simbolnya =.
Dalam kondisi ini, bannermu tadi itu masih terlalu cepat jalannya. Untuk ngatur kecepatannya, liat gambar ya... Tapi, disini aku pake 1.0 (1 sec). Tapi, sebelum atur kecepatan, klik tombol pausenya dulu ().

Kalo udah diatur, pasti perlu dicoba-coba dulu khan? Klik tombol PLAY buat muter ulang, klik PAUSE buat berentiin. Kalo kecepatannya kurang pas, diatur lagi, sampe pas.

Nah, ini nih kenamppakan punyaku:

Segitu aja, sebenernya simple kalo kamu udah lancar, nanti kamu bisa buat variasi lainnya, misalnya backgroundnya yang ganti2, kitnya yang ganti2, atau semuanya.
Oh iya, supaya bisa di-publish, pasti musti di save dulu kan! Caranya, klik File<Save Optimized.
Saya juga post di Siteku.
++kalo masih bingung, tanya aja. sumber kubelajar++