tag:blogger.com,1999:blog-29803984430494180272008-04-29T05:28:28.528+07:00Ipul Anwarhttp://www.blogger.com/profile/14475852311236566877noreply@blogger.comBlogger19125tag:blogger.com,1999:blog-2980398443049418027.post-80315624145536708392008-04-26T03:58:00.036+07:002008-04-29T05:28:28.604+07:00
Selain sebagai pelopor era portal di Indonesia sampai saat ini saya belum liat ada yang menandingi kiprah portal yang satu ini, tapi di Indonesia maksudnya.. :) kalau di luar mah banyak.
Portal? hehehe ... diliat2 kok gak beda ama blog kita yah tampilannya :) yang menampilkan postingan baru di homepage-nya gitu... sama pasang banner2 di sidebar-nya.. boleh tukeran link ga' boos? hehehe... Ayo boos yang punya detik.com di kembangin lagi dong Portalnya...
heyaah... Apa hubungannya dengan buat banner pake Flash? yaa.. coba liat di detik sekarang pemasangan banner-nya hampir semua sudah menggunakan flash, karena selain lebih menarik dan bisa interaktif penampilannya, di era sekarang ini relatif lebih enak dibanding dulu2. Maksudnya untuk pemasangan banner dengan flash dulu pengelola website masih mikir2 karena pertimbangan user yang akan akses website tersebut ada flash-nya ga'? dan banyak yang belum familiar dengan ini, begitu liat website yang 'bolong2' karena gak keluar tampilan flash-nya dibilang 'jelek banget sih nih website'? hehehe..
Sebelum saya kasih Trik membuat banner dengan flash ini, mungkin perlu tau juga kalau buat banner ataupun animasi untuk keperluan di website dengan flash usahakan menggunakan versi 1 atau 2 dibawah dari versi yang sedang beredar sekarang, ini untuk menghindari banner kita kelewat 'canggih' :) yang mengakibatkan gak akan muncul juga kalau di buka menggunakan flash versi dibawahnya, yaa kalau yang sedang beredar sekarang adalah versi 9, kita buatnya pakai versi 7 atau 8 aja (di save ke versi tersebut maksudnya kalau buatnya sih terserah mau pakai versi berapa..)
Dan Tips-nya adalah karena objeknya akan bergerak, supaya menarik dan informasinya masuk dengan banner yang kita buat ini, kita buat satu layout 'akhir' apa informasi yang akan kita sampaikan dari banner yang akan kita buat tersebut.
Misal kita akan membuat banner dari sebuah 'logo', kita pisahkan satu objek dengan objek yang lainnya, seperti text title dengan objek logo tersebut dan dibuat satu persatu yang diakhiri dengan terbentuknya sebuah logo tersebut.
Untuk jelasnya coba ikuti langkah2 berikut, saya akan coba membuat banner animasi untuk logo millis 'blogger-indonesia@yahoogroups' yang ada di blog saya... heyaah.. kok logo millis blogger-indonesia mas yang dicoba? bilang aja mau nginvite ya mas? :) daripada logo yang lain nanti malah disangka jualan lagi.... hehehe
Tapi kalo yang mau join ya ga' dilarang dan semua tips dan trik saya pasti di posting disana... :)
Berikut langkah2-nya:
Langkah-1
Buat file flash baru dengan nama 'banner'
Langkah-2
Tentukan ukuran banner yang akan kita dibuat.
Saya akan coba banner dengan ukuran 200 x 100 px. Untuk merubah ukuran tersebut bisa melalu toolbar 'modify' | 'document', dan untuk fps (frame per second) gunakan standard aja yaitu 12 fps.
Langkah-3
Setting file flash menjadi versi dibawahnya, karena yang akan saya coba tidak membutuhkan animasi yang aneh2 atau dengan fitur yang ada di flash versi terbaru yaa.. saya coba dengan setting ke flash versi 7 aja, caranya dari:
'File' | 'Publish Settings' atau melalui menu 'setting' yang ada di bawah lembar kerja anda.
Dari window masuk ke tab 'flash' kemudian pilih 'version' dari menu option yang ada , rubah menjadi version 7.Langkah-4
Bagi yang baru mencoba flash kenali lembar kerja flash anda, flash menggunakan 'time line' dengan kontek 'frame by frame' untuk membuat objek bergerak. Jadi ibarat kita menyusun gambar dari satu frame ke frame berikutnya yang kalau dijalankan akan membuat sebuah gerakan. Lihat gambar mana yang dimaksud dengan frame yang ada di atas lembar kerja anda.Langkah-5
Buat objek satu demi satu dari logo yang akan dibuat banner dengan tool yang ada di sebelah kiri lembar kerja anda yang tidak berbeda dengan program pengolahan grafis seperti 'Photo Shop', 'Firework' dll.
Kebetulan yang saya buat adalah semua attributnya adalah text, tapi bila ada objek gambar tinggal diimport dahulu gambar tersebut melalui 'file' | 'import' | 'import to library' yang selanjutnya untuk memasukkan di lembar kerja tinggal di drag saja image yang ada di library-nya yang ada di sebelah kanan lembar kerja anda.Langkah-6
Pisahkan satu objek dengan objek lainnya dengan layer dan menggunakan 'timeline' sendiri-sendiri, untuk memisahkannya coba dengan 'select all' (Ctrl-A) kemudian klik kanan pada objek tersebut 'distribute to layer' (lihat perubahan pada 'timeline' diatas lembar kerja anda). Hapus layer yang tidak digunakan dengan klik pada layer dan cklik icon 'del' yang ada di bawahnya.
Langkah-7
Untuk membuat suatu objek gerakan di flash kita buat sebuah 'keyframe'
Dari layer title 'blogger' dan pada 'timeline' klik pada frame 30 'insert keyframe' (F6)
Kemudian klik layer 'blogger' untuk 'menyorot' semua objek yang ada di 'timeline' tersebut,
lalu klik kanan dan 'Create Motion Tween'
Langkah-8Anda telah membuat pergerakan objek title 'blogger' sekarang,
tapi karena terletak di tempat yang sama jadi pergerakannya tidak dapat terlihat, coba pindahkan objek yang ada di 'frame 1' ke tempat lain, dengan cara klik pada 'frame 1' kemudian klik dan drag objek 'title blogger' ke tempat yang anda inginkan, seperti pada gambar berikut.
Setelah itu 'Enter' untuk mencoba melihat pergerakan objek tersebut...Yaa.. anda sudah membuat sebuat animasi sederhana menggerakkan objek di flash...
Ulangi langkah-7 dan 8 untuk membuat pergerakan objek yang lainnya 'indonesia', '@', dan 'yahoogroups', supaya tidak monoton coba buat pergerakan lainnya seperti pergerakan sebaliknya atau tidak hanya di drag tapi di perbesar objeknya yang akan membuat anmasi pergerakan objek dari besar ke kecil.
Sedangkan untuk pemunculan objek yang tidak bersamaan bisa di geser saja yang ada di 'timeline', dengan cara select 'timeline' objek klik dan geser ke timeline yang akan anda pindahkan, lihat gambar untuk jelasnya.
Langkah-9Sampai sini anda telah membuat sebuah banner logo dengan flash, untuk langkah terakhir adalah mem-publish file flash anda ke format 'swf' supaya bisa dijalankan di website dari file editor flash-nya dengan format 'fla'.
Simpan file flash anda kemudian untuk membuat file 'swf' bisa dari:
'File' | 'Publish' yang akan disimpan di satu folder dengan file 'fla' flash anda.
Coba file banner anda, dan silahkan berkreasi dengan membuat banner2 yang menarik lainnya.
Selamat Mencoba!
Untuk yang ingin memperdalam flash atau bagaimana membuat animasi yang lainnya bisa coba2 disini: http://flashkit.com
"Blog Saya pindah ke Wordpress Berbayar mas..", tiba2 message YM saya muncul. "Oo bagus..." saya jawab sekenanya :) karena emang lagi tanggung baca2 email masuk dan yang saya tau udah beberapa bulan ini teman saya nge-blog menggunakan alamat domain sendiri yang di re-direct ke Blogspot-nya, yang mengikuti Trik "Mengalihkan Halaman Website (Re-Direct Page)" dari blog saya katanya.Dari email yang masuk ada email dari temen saya ini yang dikirim ke millis mengenai perpindahan blog-nya itu, gak lama dia manggil lagi "OK mas.. saya mau kasih tau yang lain lagi nih.." katanya lagi, walah.. yang saya tau blog-nya itu kan udah cukup rame dan lumayan "kondang" yang di blogspot dengan link dari blog2 lain yang mungkin udah ratusan, trus harus kasih tau ke semua gituh? Walah... Tape Deech!!! :)
Pindah Ngeblog ke Wordpress dengan hosting sendiri memang lebih safety dari sisi pengamanan data postingan kita di blog, tapi kalo blog kita udah terlanjur "kondang" seperti kasus diatas ya mending dialihkan langsung aja dari blogspot secara otomatis, gak perlu pemberitahuan lagi jadi kalau orang akses alamat blog kita yang di blogspot akan langsung masuk ke alamat domain kita yang baru itu.
Begini Triknya:
Dari Blogspot masuk ke Menu "Layout" | "Elemen Halaman"
Kemudian "Add a Page Element" | "HTML/javascript"
Di Kotak yang lebih besar halaman "HTML/Javascript" masukkan script javascript berikut:
<script language="JavaScript">
<!-- //ReverseFrameBuster
if (self == top) top.location.replace("[Alamat Pengalihan]");
//-->
</script>
Keterangan:
[Alamat Pengalihan] : URL domain anda (contoh: http://riristore.com)
Selamat Mencoba!
Waktu lagi nge-cek banner2 di Blog-Indonesia.com yang juga kunjungan wajib untuk melihat perkembangan postingan dari para "Blogger Indonesia".... heyaah.
Kok ya.. beberapa postingan baru disana nyebut "Dian Sastro nge-blog" - "Mboke.. Dian Sastro nge-blog" di judul-nya, saya pikir aach.. isue... paling orang iseng pakai domain Dian Sastro tapi sambil coba cari tau juga sich... hehehe ke URL-nya.. kan bener kan gak ada... alias blank!!
Tapi akhirnya ketemu juga URL-nya, baca postingan disana akhirnya percaya juga kalo ini beneran blog-nya Dian Sastro, "Yes! It is the real me!" katanya di salah satu postingannya ngeyakinin pengunjung kalau ini beneran blog-nya Dian Sastro.
Yang bikin geli dan senyam-senyum itu dari isi komentar2-nya walah "Indonesia Banget!!" hehehe... ada yang nyuri2 perhatian supaya ada kunjungan balik, sampai ada yang girangnya minta ampun sambil jungkir balik :) blog-nya dikunjungi ama 'celeb' yang satu ini... hahaha
".... aku lalu merasakan cinta yang sangat tulus, entah dari mana, aku rasanya disayaaaang banget, dan itu semua hanya..." dari postingan ini di blog-nya Dian Sastro yang komen.. ampun!!!
Belum lagi postingan2 di blog-nya masing2, seperti postingan dari para "Celeb Blog" ini... eee walah bener2 bikin ketawa sendirian dari komentar2nya, seperti disini: Sastro Pecas Ndahe, Blog Pemuas Dahaga ituh.., Lagi lagi blog pemuas dahaga dan masih banyak lagi... silahkan blog walking yang mau ikut senyam senyum sendiri :)
Selamat meramaikan dunia Blogsphere Dian!!
Konon Dian Sastro juga udah ngajak Titi Kamal dan Luna Maya tuk nge-blog juga katanya... halah.. eeh URL blog-nya Dian Sastro dimana yah? cari sendiri dech... huehehe
Saya beruntung akhirnya bisa menghadiri Acara Milad-2 TDA 2008 hari minggu lalu tanggal 27-January-2008 di Gedung Bank Syariah Mandiri (BSM) lantai 11, yang dihadiri hampir sekitar 500 Member dari Komunitas TDA (Tangandiatas) termasuk beberapa Media yang meliput acara tersebut. Dan Acara Milad ini merupakan acara puncak dari sederetan kegiatan2 selama setahun komunitas ini, dari Seminar, Workshop, Bedah Buku, Buka Kios Bareng, sampai Mastermind Group.
TDA (Tangandiatas) sendiri merupakan komunitas para pengusaha, dengan istilah Tangandiatas "Lebih Baik Memberi daripada Menerima". Sedangkan Cikal Bakal komunitas ini adalah diawali dari pertemuan Talk Show oleh Pak Haji Alay di RM. Sederhana yang dihadiri oleh sekitar 30 members pada awal tahun 2006 lalu, yang di prakarsai oleh Pak Rony Yuzirman Sang Jendral TDA yang menjadi Founder dari Komunitas ini. Kemudian ditetapkanlah tanggal 22-january-2006 merupakan tanggal berdirinya komunitas ini yang selanjutnya ditunjuk ada 17 Member sebagai Co-Founder Komunitas TDA ini,
Mereka Adalah:
Iim Rusyamsi, Agus Ali, AR. Hantiar, Zahratul W. (Waru), Joko Purwanto, Yulia Astuti, Hertanto Widodo, M. Abduh, Bambang Sugiharto, Ari Sudradjat, Purwantiko Yunaryo, Hasan Basri, Purwoko Widodo, Khairul Yanis, Joseph Hartanto, Febby Rudiana, dan Budi Rachmat.
Diantara Co-founder ini adalah peserta Talk Show Pertama tersebut yang ikut 'take action' dan menerima tawaran dari Pak Haji Alay di ITC Mangga Dua dan Metro Tanah Abang, atau ada beberapa dari mereka yang tidak ikut tawaran tersebut tapi tetap aktif di TDA sampai sekarang.
Di usia yang relatif masih 'bayi' ini dengan Kurikulum BDSA-nya (Belief, Dream, Strategy, and Action) komunitas ini patut di acungi jempol dengan pergerakan yang sangat Dahsyat dan Fuuntastic, yang pada saat Milad-2 2008 ini menginjak usia 2 Tahun-nya sudah hampir 1.700 Member bergabung didalamnya.Rasa Kebersamaan dan Kekeluargaan di antara para member memang sangat terasa kental di Komunitas TDA ini, selain adanya rasa saling berbagi diantara para member untuk saling 'support' dan mengingatkan.
Dan saya patut bersyukur bisa berada di dalam Komunitas ini, bergabung-nya saya di komunitas ini sekitar bulan Juni 2007 lalu melalui Millis Tangandiatas, walaupun sampai saat ini baru hanya dapat memberi sedikit kontribusi saja untuk Komunitas yang FUUNTASTIC ini, seperti memberi kemudahan para member untuk saling ber-silaturahmi di media 'Blog' berupa 'Blogroll TDA', memberi sedikit pengetahuan tentang membangun 'Blog' ataupun 'Website' bagi member yang membutuhkan, karena media ini merupakan 'kendaraan' bagi para member untuk 'menjual' atau 'mempublikasikan' produk2nya, dan membantu kegiatan 'Workshop' yang diadakan oleh komunitas ini.
Di Acara Milad-2 TDA kali ini selain dari acara2 yang hampir semua berbobot saya salut dengan penampilan Pak Isdianto (Pemilik Majalah Wirakeusahaan dan Keuangan) yang men-support untuk para member TDA ini diberi kesempatan untuk mempublikasikan produk2nya di majalah yang dia miliki bahkan di media lain, yang tidak sedikit dari peran Pak Isdianto ini beberapa member bisa lebih dikenal produk2nya di masyarakat dan terjual laris manis tentunya. Menurut saya memang pantas beliau mendapat anugrah sebagai "Inspiring Supporter" dari Sang Jendral TDA Pak Roni Yuzirman.Selain itu saya bisa bertemu dengan ciri 'kehangatan' dari para member TDA ini yang sebelumnya hanya dapat bertegur sapa melalui 'dunia maya', dari Pak Wuryanano yang 'Selalu Prima', Pak Bams 'Sang Pendekar Joglo', Pak Harmanto yang 'Cool', Pak Hadi 'Sang Raja Selimut yang Kekar' dan banyak lagi para member yang lainnya. Di acara ini benar2 terasa berbeda bila dibandingkan dengan pertemuan2 di Komunitas lain.
Memang di acara ini dari asiknya bertemu rekan2 TDA serta suguhan acara yang selalu Segar dan berbobot di setiap sesi-nya saya harus 'Bertempur' dengan rasa kantuk yang luar biasa, sampai2 istri saya Riri Rianawati harus beberapa kali menyenggol tangan saya pada saat saya 'melenggut'... halah.. kok bisa... hehehe.Mungkin 3 hari sebelum Acara Milad ini hanya bisa tidur beberapa jam kali yah... :) karena maklum mendapat tugas 'last minute' dari Sang Ketua Acara Milad Pak Faif Yusuf dan Pak Rosihan untuk membuat 'Opening Multimedia' di Acara tersebut, yang sebelumnya saya ragu bisa selesai tepat sebelum acara dimulai. Dari perkiraan saya pekerjaan ini harus dikerjakan dengan team selesai dalam waktu minimal 2-3 minggu.
Dari Pemilihan Materi yang akan ditampilkan yang biasanya akan mempengaruhi sebuah event, pencarian Back Sound yang sesuai, Sound Effect, Animasi, Title, Image, Video, dsb harus benar2 sesui event yang akan diadakan, inipun kalau mau bener2 Dahsyat loh... :)
Tapi Alhamdulillah tugas ini selesai juga tepat jam 6 pagi 'Teng Tong!' di Hari Minggu yang 'Cerah' ini.. hehehe... walaupun masih ada sedikit beberapa ganjalan sana sini untuk menyelesaikannya, yang besok-nya saya coba kembali kok ya.. bisa selesai... hehehe sudah termasuk 3d di Bumper Opening tersebut, Video, Sound Effect, Animasi, Image Gallery dsb dsb... sebuah keajaiban dan berkah untuk Milad-2 TDA ini.
Terima Kasih Pak Faif Yusuf dan Pak Rosihan untuk tantangan ini, setidaknya saya masih bisa memberi sedikit kontribusi di Acara Milad-2 TDA kali ini.
Selain itu Alhamdulillah juga saya mendapat urutan ke-5 dari Pemilihan Blogger Favorit di 'TDA Blogger Award' walaupun yang mejeng dan mendapat Piala sampai Urutan ke-3.. hehehe
Banyak2 Terima Kasih yah.. yang sudah susah2 pilih dan dukung Blog Saya ini. Urutan Pertama sendiri untuk Award ini di tempati oleh Sang Begawan yang 'Selalu Prima' Pak Wuryanano, disusul 'Sang Pendekar Joglo' Pak Bams dan di urutan ke-3 oleh Bu Yulia Astuti 'Moz5'.
Sukses Terus TDA!!!
Salam Fuuntastic!
Sebenarnya bagus mana sih nge-blog dengan menggunakan Blogspot atau wordpress?
Pertayaan ini hampir terus keluar entah dari yang baru mau nge-blog, sudah punya blog, bahkan seorang 'Blogger' sekalipun.. hehehe emang-nya ada yah Blogger? kedengerannya serem aja seperti mahluk apa gitu yang turun dari UFO? :)
Apalagi setelah kasus di 'hapus'-nya Blog sang Blogger Kondang A.Fatih Syuhud dari Blogspot tempo hari, berduyun2 para Blogger pindah dari yang sekedar untuk backup data blog-nya sampai permanen pindah ke Wordpress.
Tapi setelah pindah banyak juga yang bingung sampai2 kalau ada yang tanya: Alamat blog-nya dimana mas? "Kalau mau lihat blog saya yang di Blogspot silahkan masuk di http://blablaableeh.blospot.com sedangkan kalau yang di Wordpress silahkan akses di alamat berikut http://wowowyeaah.wordpress.com" begitu dibuka kok isinya sama ya mas? " ya iya... kan cuma di export isinya dari blogspot dengan fitur yang ada di Wordpress".... hehehe sambil nyengir kuda si mas-nya.
Nah loh kalo udah begini gimana dong? mau nge-blog apa mau koleksi blog nih mas? :)
Memang untuk kategori ‘Free’ keduanya Blogspot maupun wordpress mempunyai kelebihan dan kekurangan dari masing-masing penyedia jasa blog kondang ini.
Banyak orang bilang kalau nge-blog di Wordpress lebih cepat aksesnya, template-nya lebih enak dipandang dan pilihanpun berfariasi. Memang ini salah satu alesan kenapa banyak orang pilih nge-blog di Wordpress ke timbang di Blogspot (biar kelitan keren dan elegant lah.. hehehe). Tapi begitu mau pasang 'Shoutbox' kok gak bisa yah? ya iya lah di Wordpress kan banyak tag HTML yang Not Allowed termasuk tag -iframe - yang biasa di pakai para pembuat 'free shoutbox' (termasuk saya juga pakai tag -iframe- untuk membuat TDA Blogroll untuk komunitas Tangandiatas), begitu juga kalau mau menggunakan 'Javascript' gak dibolehkan di Wordpress, mau pasang Flash atau Video apalagi harus dari URL referensi dari Wordpress, walaupun salah satunya Youtube boleh sih.. yang gak bisa seperti kita pakai URL dari domain yang kita punya atau dari free hosting yang kita punya.
Kok gitu yah? ya iya namanya juga orang jualan dan Wordpres kan pakai system SSL (Sok Secure gitu Looh) hehehe... atau alesan simple-nya ya biar aman.
Tapi kalau di Blogspot mau pasang Shoutbox tinggal copy script dari penyedia jasa shoutbox tinggal paste di element baru HTML/Javascript-nya, begitu juga kalau kita ingin menggunakan Javascript kita tinggal ambil dari sembarang 'free javascript' aja, dan untuk tag HTML-nya hampir semua diloloskan, belom lagi kalau mau pasang animasi flash hasil kresi kita sendiri atau video yang kita link ke domain sendiri OK aja dan gak harus dari referensi seperti di Wordpress.
Ya itu semua beberapa kelebihan dan kekurangan kalau nge-blog dengan Blogspot atau wordpress, yang pasti kelebihannya adalah sama-sama kasih free untuk menggunakan fasilitas ini :). Tapi untuk Wordpress yang dimaksud adalah Wordpress dengan hosting yang gratisan yah.. dengan domain .wordpress.com bukan Wordpress yang Open Source.
Jadi menurut saya dan sekedar saran saja...
Bagi yang ingin nge-blog dan untuk pengguna pemula sampai menengah yang ingin FUN untuk nge-blogging sebaiknya anda pilih Blogspot untuk itu, karena tidak akan terlalu banyak batasan-batasan untuk berkreasi dan mempercantik blog anda, tapi bila anda ingin ke arah profesional blog dan sudah memikirkan keamanan data yang ada di blog anda sebaiknya migrasi ke Wordpress tetapi bukan yang Free melainkan dengan Wordpress yang Open Source yang di install di hosting milik kita sendiri, dijamin akan Power Full blog anda dan bebas untuk berkreasi.
Untuk Aplikasi Wordpress Open Source bisa di download disini
Selamat Berkreasi!
Selamat Datang Tahun 2008
Dengan Semangat dan Gairah yang baru semoga harapan-harapan yang belum terwujud di tahun-tahun sebelumnya akan tercapai di tahun 2008 ini.
Haparan untuk lebih baik dari sebelumnya adalah harapan paling utama saya di tahun 2008 ini. Lebih baik dalam berkeluarga, beribadah, bersosialisasi, berbisnis, maupun berkarya.
Ada beberapa catatan penting di tahun 2007 yang lalu, antara lain:
Bergabungnya saya di Komunitas TDA (Tangandiatas), tepatnya pada bulan Juni 2007 lalu. Sebuah komunitas yang belum saya temukan di tempat lain, adanya kekeluarga dan saling berbagi diantara sesama anggotanya.
Rencana membuat sebuah bisnis online memang sudah lama ada, terlebih setelah tidak online-nya bisnis portal yang saya bangun bersama rekan2 di tahun 2001 lalu. Sebuah Portal dengan adanya 'Bisnis Center' didalamnya yang sudah mendapat kepercayaan untuk mempublikasikan setiap PRESS RELEASE dari sebuah Badan PBB, Sekretariat ASEAN dll harus tidak online dikarenakan faktor internal.
Bergabungnya di Komunitas TDA meng-inspirasikan saya juga untuk mewujudkan kembali sebuah bisnis online yaitu Webstore pada bulan Juli 2007 lalu, tepatnya Pada Tanggal 07-07-2007 07:07 PM dengan nama Riristore Web Store yang sekarang dikelola oleh istri saya Riri R. Terima Kasih untuk komunitas TDA.
Blog ini juga lahir pada tahun 2007 lalu dengan nama "Blog Pencerahan Asli Indonesia Blogger", tepatnya di bulan Juni 2007 tetapi baru aktif pada bulan Oktober 2007 tepat akan diselenggarakannya "Pesta Blogger 2007" yang pertama lalu. Sebelumnya saya tidak terpikir untuk nge-blog di sela-sela kesibukan pekerjaan saya dan belum lagi apa sempat untuk update data-nya nanti.
Dimulai dari mas Iman Brotoseno (sutradara film iklan) yang sebelumnya telah buat website dengan saya minta bantuan untuk di utak-atik dan dipercantik blog-nya hehehe... yang kebetulan masuk dalam nominator "Pesta Blogger 2007" untuk kategori "Current Issue Blog". Dari nge-rombak template sampai pasang video di blog-nya. Alhasil video-nya membuat Bandwidth-nya jebol mencapai 24GB pada bulan itu, walah... untung gak sampe di 'drop' website-nya mas hehehe...
Saya lihat menarik dan banyak yang bisa saya buat di blog, ya salah satunya untuk memberi sedikit-nya ilmu yang saya miliki yang mudah2an bermanfaat untuk orang banyak. Akhirnya saya putusin nge-blog juga dech... :)
Mungkin banyak yang mengira Blog saya ini sudah lama ya? :) padahal belum loh... tapi karena trik nge-blogging gak beda dengan membuat website yang jadi kerjaan saya setiap hari ya... jadi asik2 aja... hehehe
Tapi di tahun 2007 tidak ada website yang mendapat 'Design Award' di Coolhomepages seperti tahun sebelumnya Website christyshowreel.com bisa masuk disana bertengger dengan wesite2 'cool' lainnya hehehe..., mudah2an tahun 2008 ini ada yang masuk lagi yah... do'a-in aja... :)
Selain ada kepuasan tersendiri masih jarang juga website2 dari Indonesia di approve disana, dan bisa jadi tolok ukur dan tantangan untuk bisa membuat sebuah website harus lebih bagus lagi dari sebelumnya.
Selamat Tahun Baru 2008
Inspiration, Dream, and Creativity
The Way of The Future
Busana Model Mix 03
Busana By: Zulfa Collection @ Riristore Web Store
)
)
)
)
)
Menjual sebuah produk dengan menggunakan Blog sekarang ini sudah menjadi 'Trend' baru di dunia internet, karena selain relatif lebih mudah dalam hal pembuatannya kita tidak perlu mengeluarkan biaya untuk membuat Blog tersebut alias 'gratis' dibandingkan harus membuat sebuah Web Store yang akan membutuhkan biaya yang tidak sedikit, belum lagi masalah waktu pembuatan dan customize sebuah Web Store yang tidak akan seperti layaknya di 'sulap' bila menggunakan Blog barang kita sudah dapat dengan cepat ditampilkan dan siap untuk ditawarkan.
Uniknya menjual produk dengan menggunakan blog seperti ini adalah pembeli bisa lebih 'familiar' dengan si pemilik 'toko' di blog yang biasanya mencantumkan kata 'Pemilik' lengkap dengan alamat dan kontak person-nya, bahkan dapat berkomunikasi langsung melalui 'shoutbox' yang di pasang di blog tersebut ataupun dengan status YM yang berwana 'kuning' yang siap di 'Add' bila dibutuhkan, tentu ini bisa dimanfaatkan oleh calon pembeli untuk menanyakan barang yang akan dibeli dengan harapan bisa mendapat 'diskon' dari si Pemilik langsung mungkin hehehe...
Kondisi ini kan tidak beda dengan bila kita belanja di toko offline yang dilayani oleh si Pemilik langsung akan berbeda dengan dilayani oleh si penjaga toko yang belum lagi kalau si 'mbak'-nya dengan bete melayani kita untuk berbelanja :)
Tapi memang sampai saat ini saya belum menemukan sebuah produk terkenal seperti Nike, Nokia, Levi's, Etienne Aigner dll yang sejenis menjual produk2-nya menggunakan blog, biasanya blog digunakan untuk 'product support' ataupun untuk keperluan lainya.
Di postingan ini saya ingin memberi sedikit trik bagi yang menjual produk2-nya menggukanan sebuah blog, yaitu Membuat sebuah Gallery Product yang simple untuk di Blog dengan menggunakan Javascript.
Selain akan menghemat tempat, Gallery ini juga tidak membutuhkan scroll yang panjang kebawah untuk melihat product yang kita tampilkan di blog, dan dari 'Thumbsnail' gallery ini akan menampilkan gambar detail product tersebut tanpa harus me-'refresh' halaman blog, dengan demikian si calon pembeli akan lebih leluasa melihat2 product yang kita tawarkan.
Berikut langkah2 pembuatan simple Gallery Product dengan menggunakan Javascript tersebut:
Langkah-1
Masukkan bagian Kontrol Panel blog anda kemuadian masuk ke halaman
Template | Elemen Halaman
Pada bagian footer template anda masukkan script javascript dibawah ini, dengan cara click Tambahkan sebuah Elemen Halaman | HTML/Javascript
<script type="text/javascript">
//-->
// Javascrip By: http://ipulanwar.blogspot.com
// Function Name: Change Image Display
function changeImg(id,iTitle,iScr,iWidth,iHeight){
var ie4=document.all
var ns6=document.getElementById
if (ie4||ns6)
var imageView=document.getElementById? document.getElementById(id): document.all.id
var imageTitle=document.getElementById? document.getElementById(id+"Title"): document.all.id+imgTitle
if (ie4||ns6){
imageView.innerHTML='<img vspace="0" border="0" hspace="0" width="'+iWidth+'" src="'+iScr+'" height="'+iHeight+'">'
imageTitle.innerHTML=iTitle
}
else if (document.layers){
document.id.document.write('<img vspace="0" border="0" hspace="0" width="'+iWidth+'" src="'+iScr+'" height="'+iHeight+'">')
document.id+Title.document.write(iTitle)
document.id.document.id+Title.document.close()
}
else
alert('You need NS 4+ or IE 4+ to view the images!')
}
//-->
</script>
Penjelasan Umum Script Javascript diatas adalah:
Dibuatnya sebuah fungsi program javascript untuk mengganti isi (image, text) sebuah elemen halaman HTML dengan 'id' yang kita tentukan dengan isi (image, text) yang baru.
Dengan aturan penggantian (syntax) yang akan dimasukkan sebagai perintah link dari sebuah image ataupun text, Berikut contoh membuat link yang mengganti image di area 'display' dengan image yang baru:
syntax:
<a href="javascript:changeImg(id,iTitle,iScr,iWidth,iHeight)"><img src="image.jpg" /></a>
id : Area yang akan diganti
iTitle : Judul image
iScr : URL image
iWidth : Lebar image
iHeight : Tinggi image
Contoh lengkap-nya sbb:
<a href="javascript:changeImg('display','Busana Model Mix 03','http://4.bp.blogspot.com/busana-1.jpg','300','375')"><img style="cursor: pointer; width: 60px; height: 75px;" src="http://4.bp.blogspot.com/busana-1.jpg" border="0" /></a>
Langkah-2
Membuat Gallery pada postingan baru anda, dengan langkah awal adalah membuat sebuah area display untuk image anda.
Upload image baru seperti biasa yang anda lakukan dengan pilihan posisi image layout 'kosong', dari editor mode 'HTML' blogger akan mendefinisikan image anda sbb:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRrA48oedPX9ftPVknVxptI-M8CgUqdB_Kfct1sVqsjf_gzBJeTSV1hUTzoOGEc0JSn-w9HIk0YrfdtLV_xXisE14_IcxW9FJq-X5bbLZx-QPqJc4ebSxpqfR5gFpOVDlMJJRKsjnilfE/s1600-h/busana-1.jpg"><img style="cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRrA48oedPX9ftPVknVxptI-M8CgUqdB_Kfct1sVqsjf_gzBJeTSV1hUTzoOGEc0JSn-w9HIk0YrfdtLV_xXisE14_IcxW9FJq-X5bbLZx-QPqJc4ebSxpqfR5gFpOVDlMJJRKsjnilfE/s200/busana-1.jpg" alt="" id="BLOGGER_PHOTO_ID_5147306986194292898" border="0" /></a>
Kemudian hapus text yang berwarna merah pada HTML diatas untuk menghilangkan link dan atribut yang tidak kita inginkan dari image tersebut.
Selanjutnya adalah menentukan lebar dan tinggi image yang diinginkan untuk display image tersebut dan menentukan 'id' area 'display' dengan tag div, lihat text berwarna biru HTML dibawah ini untuk perubahannya:
<div id="display" align="center"><img style="width: 300px; height: 375px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRrA48oedPX9ftPVknVxptI-M8CgUqdB_Kfct1sVqsjf_gzBJeTSV1hUTzoOGEc0JSn-w9HIk0YrfdtLV_xXisE14_IcxW9FJq-X5bbLZx-QPqJc4ebSxpqfR5gFpOVDlMJJRKsjnilfE/s200/busana-1.jpg" border="0" /></div>
Langkah-3
Membuat Area 'Title' untuk setiap image display, dengan menggunakan tag div (tidak perlu di enter bila tidak ingin jarak antara image display dan title terlalu jauh), dan berikut contoh Title untuk image display pertama anda:
<div id="displayTitle" align="center">Busana Model Mix 03</div>
Langkah-4
Membuat Area atribut dari semua gallery anda seperti spesifikasi barang atau yang lainnya yang tidak akan berubah dari gallery ini, contoh yang saya masukkan adalah koleksi barang tersebut sbb:
<div align="center">Busana By: Zulfa Collection @ <a href="http://riristore.com/" target="_blank">Riristore Web Store</a></div>
Langkah-5
Membuat sebuah 'Thumbsnail' gallery untuk navigasi image display anda yang bila di click akan mengganti image yang ada di area display.
Enter untuk memberi jarak antara text diatasnya dengan 'Thumbsnail' gallery ini, dan beri tag div supaya image anda terlihat rapih. Untuk image pertama anda bisa copy HTML image yang ada di area display kemudian rubah ukuran yang lebih kecil, lihat text dibawah yang berwarna biru:
<div align="center"><img style="cursor: pointer;width: 60px; height: 75px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRrA48oedPX9ftPVknVxptI-M8CgUqdB_Kfct1sVqsjf_gzBJeTSV1hUTzoOGEc0JSn-w9HIk0YrfdtLV_xXisE14_IcxW9FJq-X5bbLZx-QPqJc4ebSxpqfR5gFpOVDlMJJRKsjnilfE/s200/busana-1.jpg" border="0" /></div>
Kemudian untuk image selanjutnya upload image berikutnya atau dengan cara sama seperti Langkah-2 yang di hapus atribut link dan yang tidak perlu, berikut contoh 'Thumbsnail' gallery dengan 5 image:
<div align="center"><img style="width: 60px; height: 75px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRrA48oedPX9ftPVknVxptI-M8CgUqdB_Kfct1sVqsjf_gzBJeTSV1hUTzoOGEc0JSn-w9HIk0YrfdtLV_xXisE14_IcxW9FJq-X5bbLZx-QPqJc4ebSxpqfR5gFpOVDlMJJRKsjnilfE/s200/busana-1.jpg" border="0" /> <img style="cursor: pointer; width: 60px; height: 75px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg28b3ECItEkk_RibuvjVfZch_Ke7smvQ6mlirCvYp1UiPfe_jQdU5mAaRod9oaqXKwmgE8ScTDU2RTypZMT0zg_p3mUB42GxPJ5V8A8zzaCrkCo6rYAQYxWi8EKSZzUu5l1Isvvq2lclA/s200/busana-2.jpg" border="0" /> <img style="cursor: pointer; width: 60px; height: 75px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfbhwu75Aa-dUmyHodGD3wibu1YHxuW1MHCrgv3AF8MYVpfydwKQgVJzHb6P66w-_SmO31giPy5Dqk_DNYr6hXUssEmVeUaxkbLg8fPeQgb5VI4yr6C8WKjvhj2L9-cjT9O6DSFjlqpOY/s200/busana-3.jpg" border="0" /> <img style="cursor: pointer; width: 60px; height: 75px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKRliqKRpgRJGEkNREBaRcnRuiHtB56D0U6-ohtWe_UGRk3NYtA_yIGgty_0I4bDC2pULEHm6qbTi0ce7bqKbzRDBVdntd_OQnn-s14maFn3zd2y0OM6Mq5Rfvq_uZ4fdCawACdQYcacY/s200/busana-4.jpg" border="0" /> <img style="cursor: pointer; width: 60px; height: 75px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnr9PvIPUu5oQv9AdyFpO7t5bvWJLVe-UrdSuo4VjK1l-moSxMbZgzLU-iSz0IMjzfqvExYn4UAtcUTx2IJVKZkcqiliYz5f9tSSQ8hlbuwVRqWFnhfGt5n4kmGDZTN020RdE4-lxtxJU/s200/busana-5.jpg" border="0" /></div>
Langkah-6
Langkah terakhir adalah dengan memberi perintah link untuk masing2 image yang ada di 'Thumbsnail' Gallery anda, tapi anda harus tau terlebih dahulu alamat/URL dari masing2 image yang ada di 'Thumbsnail' Gallery tersebut. Lihat contoh URL di langkah-5.
Kemudian masuk Editor pada mode 'Compose', click image pertama anda dan click icon 'link' yang ada di editor anda.
Selanjutnya masukkan perintah javascript pada link tersebut, seperti ini:
javascript:changeImg('display','Busana Model Mix 03','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRrA48oedPX9ftPVknVxptI-M8CgUqdB_Kfct1sVqsjf_gzBJeTSV1hUTzoOGEc0JSn-w9HIk0YrfdtLV_xXisE14_IcxW9FJq-X5bbLZx-QPqJc4ebSxpqfR5gFpOVDlMJJRKsjnilfE/s200/busana-1.jpg','300','375')
Maka image pertama bila dilihat dengan mode HTML editor anda adalah sbb:
<a href="javascript:changeImg('display','Busana Model Mix 03','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRrA48oedPX9ftPVknVxptI-M8CgUqdB_Kfct1sVqsjf_gzBJeTSV1hUTzoOGEc0JSn-w9HIk0YrfdtLV_xXisE14_IcxW9FJq-X5bbLZx-QPqJc4ebSxpqfR5gFpOVDlMJJRKsjnilfE/s200/busana-1.jpg','300','375')"><img style="width: 60px; height: 75px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRrA48oedPX9ftPVknVxptI-M8CgUqdB_Kfct1sVqsjf_gzBJeTSV1hUTzoOGEc0JSn-w9HIk0YrfdtLV_xXisE14_IcxW9FJq-X5bbLZx-QPqJc4ebSxpqfR5gFpOVDlMJJRKsjnilfE/s200/busana-1.jpg" border="0" /></a>
Catatan: Lihat Syntax Javascript pada Langkah-1, untuk menentukan image URL dan Title yang diinginkan untuk ditampilkan.
Kemudian Ulangi langkah memasukkan link di atas untuk image ke-2 dan seterusnya.
Image gallery ini juga bisa anda gunakan untuk gallery2 yang lain seperti Gallery Event, Gallery Keluarga dan yang lainnya.
Bila anda mengalami kesulitan, script lengkap untuk Trik gallery diatas berupa file .txt anda bisa download di URL ini: Free-Script Simple Gallery
'Save As' halaman tersebut menjadi simpleGallery.htm dan coba jalankan di browser anda.
Selamat Mencoba!
Ayo tebak siapa yang tau foto Luna Maya ini lagi di mana? dan bersama siapa? eeit... maksudnya lagi dimana gak pake dengan siapa tar ada wartawan infotainment jadi gosip lagi :)
Wah itu sih Luna Maya lagi di kamar ngadem dengan kesejukan udara AC, udara pegunungan, atau...
Iya benar kalau liat foto itu memang bener kesannya seperti itu, tapi kalau dari foto aslinya gak seperti itu lah... Ini hanya salah satu trik pengolahan gambar dengan menggunakan Photo Shop.
Memang trik ini yang banyak dipakai selain trik-trik lainnya untuk memotong sebuah objek gambar di Photo Shop dan mengabungkannya dengan objek atau gambar lainnya, dan ini yang bisa bikin artis-artis jadi kebakaran jenggot biasanya :)
Ya tapi untuk yang buat dan jago komputer grafis kok ya tega bikin seperti itu.. hehehe, mbok... ya kalo punya ilmu coba digunain untuk yang positif kenapa? misalnya dengan trik ini bikin simulasi 'Monorel' yang dipadukan dengan gambar situasi Jakarta, jadi sebelum Monorel-nya jadi bisa tau kira2 situasinya seperti apa.
Tapi itu urusan yang buat dech..
Saya disini hanya ingin kasih trik bagaimana membuat foto Luna Maya itu bisa seperti itu. Dan ini juga bisa dipakai untuk yang berbisnis Web Store dengan menampilkan barang2 yang di tawarkan supaya lebih menarik lagi untuk di tampilkan.
Sebagai langkah awal mungkin sebelum memotret objek gambar, bila ingin menggunakan trik ini untuk menampilkan di Web Store usahakan waktu pemotretan menggunakan latar belakang yang polos dengan warna yang bertolak belakang dengan objek yang akan di foto.
Contoh:
Kita mempunyai produk busana dengan warna putih, maka latar belakang kasih kain polos dengan warna biru. Ini akan lebih memudahkan pemotongan gambar tersebut. kalau yang pernah tau atau dengar trik 'Blue Screen' di Film2 menggunakan layar belakang polos untuk syuting sebuah peperangan misalnya, dan setelah jadi layar biru itu di ganti dengan film padang pasir misalnya... halah kayak orang film aja.. :) iya ini yang saya liat waktu acara 'Behind The Scene' untuk film '300' kok di tv.. hehehe
Nah kalo udah tau gitu, jadi gak perlu deh tuh si model busana foto di taman2 segala :) cukup dengan latar belakang seperti itu kalaupun ingin kesan ada di taman ya tinggal foto pemandangannya aja sendiri nanti tinggal dipadukan.
Berikut adalah langkah2 untuk memotong objek gambar tersebut:
Langkah-1
Di Photo Shop buka file objek yang akan di potong dengan cara File | Open
Nah ini foto aslinya Luna Maya untuk iklan Zestea :)
yang saya pinjem dari Gallery Produksi-nya Website APFII (Asosiasi Pekerja Film Iklan Indonesia) yang saya buat.
Langkah-2
Selanjutnya buka menu Filter | Extract yang akan keluar window seperti di bawah ini:
Langkah-3
Dari tools yang ada di sebelah kiri gambar, dari icon Edge Highlighter Tool (area) atau icon yang ada di paling kiri atas (lingkaran merah) click untuk menentukan objek yang akan kita potong.Caranya, lihat gambar diatas lingkaran hijau adalah batas potongan objek yang akan kita potong dengan gambar di belakangnya.
Click tarik mouse anda untuk membuat lingkaran tersebut, catatan lingkaran hijau tersebut harus menyatu antara ujung yang satu dengan ujung yang lainnya.
Langkah-4
Selanjutnya adalah kita beri 'Fill' pada objek yang akan kita ambil, dengan cara click icon 'Fill' pada tool yang ada di sebelah kiri gambar (lihat lingkaran merah pada gabar di atas) kemudian click di objek yg akan kita potong.
Kalau disini click pada gambar Luna Maya-nya.
Langkah-5
Setelah mendapat objek gambar tersebut, selanjutnya tinggal 'Preview' dengan click pada tombol 'Preview' yang ada di sebelah kanan gambar.
Yaa... sekaranng sudah jadi objek gambar dengan latar belakang ransparan. Click 'OK' untuk keluar dari window 'Extract' ini.
Langkah-6
Untuk mengabungkan dengan objek atau gambar lain buka file yang akan kita gabungkan.Dan untuk tambahan saya akan kasih effect blur pada gambar latar belakang tersebut dengan cara masuk menu:
Filter | Blur | Motion Blur
disini click 'OK' saja untuk effect standard-nya yang bila ingin effect lain silahkan ber-experiment sendiri.
Langkah-7
Langkah terakhir adalah anda tinggal click n' drag foto objek yang sudah di potong tadi ke objek latar belakang yang sudah dibuat blur tersebut.
Lihat gambar di atas untuk lebih jelasnya.
silahkan simpan file tersebut yang menjadi file master Photo Shop dengan extention .PSD, dan bila ingin digunakan untuk di website... yaa... jangan file .PSD-nya tapi 'save as' ke file format .jpg atau .gif
Selamat mencoba!
Bila nanti ada foto artis beredar di internet yang dimanipulasi hasil dari tutorial ini saya tidak akan pernah bertanggung jawab untuk itu! :)
Workshop "How to design your webstore with Blogger" Gelombang-1 yang diadakan oleh Komunitas Tangandiatas (TDA-IT) akhirnya terlaksana juga pada hari sabtu yang lalu tanggal 01-Desember-2007 di Ayola Cybernet Cafe Mangga Dua Square Lantai 2 Hall B, Jalan Gunung Sahari Raya No. 1 Jakarta Utara.
Workshop kali ini saya ditunjuk sebagai Pembawa Materi di Workshop tersebut, yang sudah lama juga saya tidak membawakan Materi di Workshop serupa seperti ini. Terakhir saya sebagai Pembawa Materi Workshop pada bulan Juni 2007 lalu untuk Materi "Pelatihan Flash Programming dan Animasi" di Pustekkom (Pusat Teknologi Informasi dan komunikasi Pendidikan) Departemen Pendidikan Nasional dengan peserta pelatihan dari para dosen senior STSI (Sekolah Tinggi Seni Indonesia) Bandung
Workshop TDA ini diikuti oleh 40 orang para member TDA, yang sebelumnya sempat diadakan pooling untuk memilih kira-kira materi apa yang diminati oleh para member TDA ini, dengan Materi pilihan Membuat Webstore dengan Joomla atau dengan Blog dan pooling ini sendiri diadakan di Blog-nya Pak Iim Rusyamsi (Koordinator TDA-IT).Dari hasil pooling tersebut lebih banyak dari para member untuk diadakannya Workshop dengan Materi Membuat Webstore dengan Blog, sebenernya sempat kaget juga saya melihat hasil pooling ini dan yang lebih kaget lagi setelah dibukannya pendaftaran 2 minggu sebelum Workshop ini diadakan, baru 2 hari saja dibuka sudah melebihi target peminat untuk 30 peserta Workshop ini. Sampai hari pelaksanan memang akhirnya dibatasi untuk hanya 40 orang peserta saja yang bisa ikut workshop gelombang-1 ini yang selebihnya mungkin akan dipertimbangkan sebagai peserta untuk gelombang berikutnya. Dan dari informasi terakhir list peserta yang daftar sudah 60 orang. Wah... hebat antusias peserta untuk Materi Workshop kali ini.
Terus terang sebelumnya saya agak sedikit kuatir dengan antusias peserta kali ini, bukan karena dari banyaknya peminat untuk mengikuti Workshop ini (kalau untuk ini patut di syukuri), tapi karena saya agak kuatir akan mengecewakan peserta nantinya. Selain saya belum siap dengan Materi yang akan disajikan di Workshop tersebut, kebetulan saya juga sedang ada kesibukan di minggu yang sama untuk deadline mengeluarkan Design Layout untuk beberapa Website client untuk di Approval. walah...Tapi Allhamdulillah... akhirnya semua selesai juga, walaupun untuk materi Workshop baru bisa saya selesaikan tepat 1 hari sebelum pelaksanaan Workshop tersebut.
Di hari pelaksanaan karena ada tools yang tidak dapat di install ditempat Workshop tersebut seperti Dreamwever dan Firework, yang merupakan kunci untuk praktek bagi para peserta jadi ada beberapa materi yang harus dilewatkan. Tapi syukur Dreamwever dapat di install pada sesi setelah break makan siang jadi peserta bisa aktif untuk mempraktekkan teknik-teknik HTML, CSS, dan Menyisip Program Javascript yang saya berikan, walaupun ada materi yang terlewatkan disini yaitu Membuat Website Sederhana dengan Dreamwever karena keterbatasan waktu. Selain itu memang ada beberapa Materi yang tidak dapat disajikan di Workshop ini. Selain sofware, ini dikarenakan keterbatasan waktu di Workshop tersebut yang begitu singkat.
Untuk Kondisi ini saya secara pribadi mohon maaf bila mengecewakan peserta Workshop, tapi seperti yang saya katakan di akhir sesi yang saya bawakan "Kalau Workshop ini bukanlah menjadi sebuah akhir pertemuan, tapi menjadi sebuah awal yang selanjutnya bisa dilanjutkan melalui millis atau yang lainnya".
Selamat untuk para peserta Workshop "How to design your webstore with Blogger" Gelombang 1 ini semoga bermanfaat apa yang sudah didapat dari Workshop ini."Selayaknya Standard Internasional sebagai acuan dalam berkarya dan berkreasi untuk menghasilkan sebuah karya yang barkualitas, agar dapat dinikmati oleh dunia Internasional yang tidak hanya berskala Nasional"
Selamat Berkarya!
Pinjam Banner Riristore Web Store
Banner mungkin sudah tidak asing lagi bagi yang sudah malang melintang di dunia internet, karena setiap kita mengunjungi sebuah website pasti ada banner disana dan hampir semua website memasang banner.
Dan dari fungsinya sendiri banner ini bermacam2, ada yang hanya sebagai pemanis website saja sampai sebagai media untuk promosi dari website maupun produk-produk yang ditawarkan.
Pemasangannya sendiri dari yang hanya sekedar tukeran banner untuk sekedar promosi gratis ataupun untuk menambah trafik pengunjung ke website kita sampai ada banner-banner yang dijadikan bisnis dari sebuah website yang akan diperhitungakan bila kita memasang banner di website tersebut, seperti detik.com misalnya, kita akan di tarif jutaan rupiah untuk memasang banner disana.
Di postingan ini saya tidak untuk membahas bisnis banner dan peluang-peluang bisnis banner di internet :) tapi hanya memberikan sedikit trik bagaimana membuat 'banner animasi' dengan format .gif yang sederhana tapi menarik untuk website kita. Sebagai tools-nya saya menggunkan Adobe Fireworks, sedangkan untuk banner format lain seperti Adobe Flash mungkin di postingan selanjutnya.
Memang sekarang sudah tidak ada aturan khusus lagi untuk ukuran dalam hal pembuatan image banner, lain dengan dulu kalau buat banner kecil pasti ukuran yang diminta adalah 90 x 45 pixel atau kalau untuk main page sebuah website pasti 468 x 60 pixel... halah... bete. :)
Sudah lihat banner produk yang saya buat di Web Store yang saya buat di Riristore Web Store? atau banner yang ada di header postingan ini. ya saya akan coba sharing bagaimana membuat banner tersebut. Daripada bayar menggunakan jasa pembuat banner? :) lebih baik coba berkreasi sendiri kan?
Berikut langkah-langkah pembuatan banner tersebut :
Langkah-1
Buat file baru di Adobe Fireworks dan tentukan ukuran banner yang akan dibuat, untuk banner yang saya buat disini dengan ukuran 410 x 60 pixelsKarena image yang kita buat adalah untuk keperluan website, jadi untuk resolusi cukup dengan 72 pixels/inch saja.
Langkah-2
Setting file tersebut dengan format 'Animated Gif' dari properties yang ada pada bagian bawah lembar kerja.
Langkah-3Buka file image yang akan kita gunakan di banner yang akan kita buat ini, kemudian 'drag' atau tarik ke file image animasi yang akan dibuat.
Langkah-4
Sebagai atribut tambahan masukkan Text melalui 'Tool' 'Text' yang ada di sebelah kiri lembar kerja.
Sampai sini kita telah selesai membuat image pertama dari banner animasi yang kita buat, untuk membuat image berikutnya adalah dengan membuat 'frame' baru.Bagaimana membuatnya? coba anda lihat sebelah kanan lembar kerja anda dari deretan window yang ada buka window frames atau bila belum ada coba buka melalui
'Window' | 'Frames'
Langkah-5
Buat Frame baru untuk penempatan image berikut yang akan kita buat, dari tombol 'New/Duplicate Frame' yang ada di bawah Window Frame.
Langkah-6
Langkah selanjutnya dari frame yang baru ulangi Langkah-3 dan Langkah-4 dengan image dan tampilan yang berbeda tentunya.Dan bila ingin ada beberapa tampilan di banner yang anda buat silahkan buat frame baru lagi untuk itu.
Langkah-7
Langkah terakhir adalah mengatur waktu tampilan (frame delay) dari setiap image yang ada di masing2 frame tersebut, dan untuk mengatur ini melalui window frame, click angka yang ada di sebelah kanan dari list frame yang ada kemudian rubah angka sesuai keinginan anda. Di banner yang saya buat saya setting dengan angka '300'
Untuk animasi model lain silahkan dicoba, dengan:
Select Object yang akan dibuat animasi
kemuadian dari menu Modify | Animation | Animate Selection
Silahkan atur pergerakan animasi yang diinginkan!
Selamat Mencoba!
Waktu Pak Herizaly (Raja Celana Jean Pria Tanah Abang) menghubungi saya minggu lalu untuk minta bantuan tentang pembuatan Web Store-nya, akhirnya kita janjian ketemu di Java Net Cafe, Ratu Plaza Hari Selasa minggu lalu tanggal 13 November 2007.
Alhasil setelah ketemu kita malah asik diskusi, sharing berbagai hal dari Pak Heri menceritakan bisnis Celana Jean Pria-nya yang sudah melanglang buana ke berbagai daerah khususnya Sumatra, begitu juga sebaliknya saya sharing mengenai website, IT, sampai Web Store istri saya Riri Anwar yang saya buat di Riristore dsb.
Wah yang jelas jadi asik... bayangin aja saking asiknya kita ketemu dari jam 2 siang sampai 'bubaran' jam 1/2 8 malam :) Di tengah pembicaraan tersirat "Eeee sekarang kan lagi rame Mastermind di TDA, Kita bikin aja yuk Pak Heri?" begitu kira2 saya tanya ke Pak
Heri dan Pak Heri ternyata setuju.
Mastermind kan gak harus satu daerah atau wilayah kata Jendral TDA Pak
Roni Yuzirman dan Moderator Pak Eko Jun, begitu juga M1-nya para founder ini yang semuanya TDA gak satu daerah kan?
Yaa udah akhirnya kita sepakat untuk Mastermind, yang pasti kita akan ikut seperti para founder yg semuanya sudah TDA, bukan begitu Pak Heri? karena pertemuan2-nya lebih banyak siang atau jam kantor... hehehe
Besoknya saya pikir namanya apa yah? ada Mastermind Jaksel, Mastermind Bekasi dll... Ooo iya karena pertemuan pertama ini di area Sudirman, ya udah kasih nama 'Mastermind Sudirman' aja... yang diusahakan pertemuannya di area itu atau kalo yang ikut yg mudah akses ke area Sudirman... Sudirman bisa kesana dikit lah... Blok-M, Fatmawati... Ciputat, Depok... Tomang... Grogol... Tangerang... Bekasi... halah... :)
Saya SMS Pak Heri dan 'Setuju' untuk 'Mastermind Sudirman' ini. Jadi mulai tgl 13-Nov-2007 ini sudah ada 'Mastermind Sudirman'
Sampai ketemu di pertemuan berikutnya 'Mastermind Sudirman'
Mastermind Sudirman
1. Ipul Anwar (http://ipulanwar.blogspot.com)
2. Herizaly (http://herizaly.blogspot.com)
Pasti sering mendapat email dengan tawaran-tawaran yang menarik dan murah untuk Hosting Web, tapi hampir semua dari penawaran itu gak ada yang kasih tau apa sih hosting itu kan? mangkanya emailnya biasanya langsung masuk ke 'trash' :)
Sama waktu ada yang ingin membuat website ke saya, ditanya "Mau di Hosting dimana Pak Website-nya, dan Apa Domain-nya sudah ada?" dijawab "Ya Pokoknya atur aja lah gimana bagusnya, pokoknya saya punya website gitu lah..", "OK berarti nanti saya email proposalnya kalau gitu" dijawab "Nanti email ke sekertaris saya aja ya.."
Halah si Bapak gak punya email juga gak taunya...
Biasanya saya kasih pengertian begini supaya si Bapak gak tambah pusing.
Email sesuai dari namanya adalah surat elektronik, yang gak beda dengan surat biasa cuma beda media aja ditulis dan dikirim melalui internet, mungkin ibarat punya PO BOX di kantor pos kali yah... yang kalau kita mau ambil isinya bisa kapan aja, Click Login buka kunci INBOX kita kebuka.
Sedangkan untuk Nama Domain adalah alamat rumah kita di Internet yang gak mungkin sama antara domain yang satu dengan yang lainnya, begitu juga dengan alamat rumah kan? mana ada alamat rumah yang sama. Salah tulis alamat aja bisa nyasar surat kita sama dengan salah tulis URL website kan? bisa masuk ke website orang.
Hosting sendiri adalah tempat untuk menyimpan data-data website kita di server (Komputer) supaya bisa di akses melalui internet, atau kalau saya simple-kan adalah gak beda menyimpan file di folder2 komputer kita. Datanya bisa berupa file2 HTML atau script program, image, dokumen pdf, sampai video juga bisa, yang biasanya penyimpanan ini keroyokan untuk satu server (komputer) untuk beberapa website sekaligus.
Terus apa gunanya orang kita cuma nge-blogging aja kok? buat apa sewa hosting?
Begini justru saya ingin memberi Trik bukan dengan sewa hosting yang bayar tapi dengan hosting yang 'free hosting', Pernah update image profile di blogspot dan minta URL image-nya? atau udah pernah liat video yang ada di postingan saya 'Membuat Flash Video Player sendiri'? ya itu video-nya saya simpan di tempat free hosting...
Yang kedepannya juga banyak trik-trik yang akan saya pakai untuk menggunakan file external dari tempat hosting seperti ini, untuk trik seperti: Bagaimana Membuat Gallery Image sendiri yang simple, atau membuat Shoutbox sendiri dll. Selain itu bisa dipakai untuk experimen sendiri memasang file flash hasil kreasi sendiri misalnya.
Kita gak perlu ambil 'free hosting' itu untuk buat website kita yang biasanya seperti 'sirkus' dengan banner dimana2 :) tapi untuk mendukung blog kita yang sudah ada aja.
Disini saya ada referensi untuk tempat hosting yang fasilitasnya komplit, dengan didukung:
PHP/MySql, FTP (File Transfer Protocol, atau untuk upload/Download file), PHP GD (fasilitas untuk manipulasi image dengan script PHP) dengan kapasitas 1GB (walah hosting tempat saya yang bayar aja gak sampe segitu..), bisa di coba di alamat ini : http://www.tripod.lycos.co.uk
Silahkan Mencoba!
Dari beberapa blog yang saya temuai sudah banyak blog yang dialih fungsikan sebagai sarana untuk menjual barang / produk sekarang ini. Blog-blog ini bukan hanya blog personal saja yang memanfaatkan sarana ini, tapi ada juga blog-blog perusahaan diantaranya.
Dari barang-barang yang ditawarkannya pun bermacam-macam dari produk rumahan sampai elektronik sudah ada di blog, bahkan ada yang di-design layaknya sebuah Web Store
Untuk itu saya coba memberi trik bagaimana membuat 'daftar harga' di blog model seperti ini, yaitu dengan menggunakan tag table HTML.
Berikut adalah format standar tag tabel di HTML, jadi bila ada masalah waktu editing bisa di update secara manual dari lembar 'editing' dengan mode 'Edit HTML'
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>No</td>
<td>Nama Barang</td>
</tr>
<tr>
<td>1</td>
<td>Baju Bagus</td>
</tr>
</table>
*HTML diatas merupakan tabel dengan format 2 kolom dan 2 baris
Keteranga:
<table></table> = Tabel
<tr></tr> = Baris pada tabel
<td></td> = Kolom pada tabel
Tapi untuk membuatnya tidak perlu repot-repot untuk mengetikkan kode HTML tersebut, karena editor yang ada di blogspot merupakan program 'javascript' atau kalau yang pernah menggunakan 'Lotus Wysiwyg', ini adalah model yang sama.
Jadi anda tinggal copy <Ctrl-C> dari MS.Excel dan Paste <Ctrl-V> di lembar editor di blogspot saja, maka tabel akan langsung membuat kode HTML-nya, tapi untuk mode editor-nya harus pada posisi 'Compose' dan setelah itu masih bisa di edit besar kecil tabel tersebut seperti table yang ada di Ms.Word.
Hasilnya mungkin tidak sama persis dengan tampilan yang ada di Ms.Excel, seperti garis tidak akan muncul disini masih perlu edit manual untuk itu.
Untuk lebih jelasnya ikuti langkah-langkah berikut untuk membuat table dibawah ini berikut garisnya:
| No | Nama Barang | Harga (Rp.) |
| 1 | Mac. Director MX 2004 | 11,390,500.00 |
| 2 | Mac. Firework MX | 2,840,500.00 |
| 3 | Mac. FreeHand MX | 3,790,500.00 |
| 4 | Adobe Photoshop CS2 | 5,690,500.00 |
| 5 | Adobe Illustrator CS2 | 4,740,500.00 |
| 6 | Adobe Premiere Pro 1.5 (Windows XP) | 6,640,500.00 |
| 7 | Adobe After Effects 6.5 Professional edition | 9,490,500.00 |
Langkah-1:
Buka lembaran posting (editor) pada blogspot, dan pastikan pada posisi 'Compose'
Langkah-2:
Buka file 'daftar harga' yang ada di Ms.Excel anda lalu select (sorot) cell tabel yang ingin ditampilkan dan copy <Ctrl-C>, kemudian kembali ke lembaran editor blogspot anda dan paste <Ctrl-V> disana.
Langkah-3:
Langkah terakhir adalah membuat garis tabel tersebut, pindahkan mode editor anda ke mode 'Edit HTML. Rubah angka border yang ada di dalam tag tabel tersebut menjadi border="1" dan untuk lebih rapih tampilan tabel tersebut beri spasi antara garis dengan text didalamnya dengan merubah cellpadding="4"
Seperti ini: <table ... border="1" ... cellpadding="4" ..>
Selamat Mencoba!
Kalau tidak dari rasa penasaran saya tentang perkembangan para blogger di Indonesia mungkin saya tidak akan datang di Pesta Blogger 2007 ini, selain saya tidak mendapatkan 'tiket gratis' :) untuk masuk karena telat register yang akhirnya harus rela merogoh kocek Rp.100.000,- untuk menyaksikan ajang ini, siapa tahu saya mendapat sesuatu yang baru dari 'pesta' ini seperti 'Bagaimana cara Melek Internet untuk nge-Blog' yang mungkin saya dapat membantu melalui trik-trik yang akan saya berikan melalui blog saya.
Tapi seperti yang saya duga sebelumnya acara ini gak beda dengan acara-acara 'kopi darat' dari millis-millis yang pernah saya ikuti sebelumnya, selain silaturahmi para blogger terlihat sibuk untuk saling tuker kartu nama dan foto bareng dimana-mana.
Poin yang menarik dari ajang ini adalah dicanangkannya tangal 27 Oktober secara sepontan sebagai 'Hari Blogger Nasional' oleh Menkominfo Mohammad Nuh yang hadir di acara tersebut, tapi yang sedikit aneh kok ya... pak menteri menantang para blogger untuk berlomba bikin lagu, jangan-jangan nanti lagunya akan menjadi lagu wajib di 'Indonesia Idol' berikutnya lagi... :)
Belum lagi Dirjen Aplikasi Telematika, Cahyana Ahmadjayadi yang akan membuat program 'Laptop for Teacher'' untuk "Bagaimana kalau kita canangkan juga, tahun depan itu kita mencapai angka sejuta blogger", katanya. yang pada saat ini tercatat ada sekitar 130 ribu blogger.Kalau saja tantangan Pak Menteri ini dengan memberi akses internet murah misalnya, wah... ini pasti lebih menghebohkan :) gak perlu kecepatan tinggi, sama saja dengan dial-up (64kbps) atau dibawahnya juga gak masalah asal unlimited dengan biaya 50 ribu/bulan misalnya dan kalau para guru dikasih laptop terus akses internetnya gimana yah? :) walah yang ada jangan-jangan malah dipake maen game aja lagi laptop-nya dirumah... hehehe.
Akses Internet murah mungkin bisa dengan DPLC (Distribution Power Line Communication) akses internet melalui jaringan listrik punya anak perusahaan PLN, ICON+ (memang program ini hampir tak terdengar yah...) Jadi bukan cuma guru aja kan yang bisa nge-Blog? sodara2 kita yang ada di gunung-gunung pun bisa ikutan... siapa tau... seandainya... halah...
Dan dari Pesta Blogger 2007 ini pula kayaknya panitia gak rela kalau nantinya jadi hanya 'Pahlawan Tanpa Tanda...', terlihat dari blog-blog favorit di ajang ini hampir didominasi oleh blog-blog milik panitia saja, sampai blog pendatang barupun kayaknya juga yah...Dan yang gak jelas, cara penilaiannya itu gimana yah? bisa milih sampe 5 nominator terpilih itu? masalahnya yang menang aja bingung... hehehe seperrti Jennie S.Bev yang terpilih sebagai 'Celebrity Blog'. "Celebrity Blogger? Saya agak bingung juga dengan kategori ini sebenarnya, kok bukannya kategori “learning” atau “motivasi”? Tapi ndak apa-apalah, yang penting partisipasi.)" begitu Kata Jennie di blog-nya.
"Acara utama kita tetap kumpul2x blogger dalam Pesta Blogger 2007, acara pemilihan blog favorit ini hanya sebagai tambahan atau side-dish aja..." kata Enda (Ketua Panitia) di salah satu komentar di blog "Pesta Blogger 2007" yang juga menerima 'laptop' untuk terpilih sebagai blog ter-favorit di ajang ini, tapi secara spontan Enda menyerahkan laptop ini ke pemenang ke-2.Tapi secara keseluruhan saya akui acara ini cukup bagus untuk cikal bakal perkembangan para Blogger di Indonesia untuk lebih meningkatkan kualitas nge-Blognya.
Maju Terus Blogger Indonesia!!!
Sebenarnya kalau kita sedikit saja mau tau apa isi yang ada di kode html template blogspot kita mungkin akan lain ceritanya bahkan akan timbul ide lebih luas lagi bukan sekedar cuma menambah kolom saja, tapi bagaimana kita merapihkan tampilan yang ada di kolom-kolom tersebut misalnya, dan lagi kode template-template ini relatif pendek walaupun kalau di copy ke MS.Word jadi kurang lebih 10 halaman :) gak percaya? coba aja.
Trik yang saya mau coba kasih disini bukan sekedar copy kode HTML dan paste di editor template milik kita, atau uploud dan replace file .xml-nya (walaupun di akhir tulisan ini bisa di download template file .xml yang saya pakai), karena selain sudah banyak yang memberikan trik ini kita tidak pernah tau kalau misalnya ada sisipan tag (program) yang di link ke website pembuat template tersebut.
Template yang ada di blogspot merupakan program HTML walaupun dibungkus dengan XML supaya bisa difungsikan sebagai data, disini saya tidak membahas mengenai XML tapi HTML-nya.
Apa sih HTML? Nah noh katanya mau buat template kok malah ngebahas HTML? Iya ini hanya untuk yang masih remang2 aja tentang HTML, jadi yang sudah paham bisa dilewatkan poin ini, dan paling beberapa baris saja sekelumit tentang HTML-nya.
HTML merupakan singkatan dari HyperText Mark-up Language yaitu bahasa standard yang digunakan untuk mengatur atau menampilkan materi-materi informasi yang akan di terjemahkan oleh browser (Firefox, IE, dll).
Untuk simple-nya di HTML itu hanya ada 2 bagian yaitu:
bagian 'head' dan bagian 'body'
di bagian 'head' untuk mendefinikan sesuatu yang akan dipakai di 'body' (ini juga kalau ada), sementara di 'body' untuk menampilkannya.
<html>
<head></head>
<body>Ini Isi Body</body>
</html>
Coba copy kode HTML di atas dan paste di 'notepad' simpan dengan nama file test.html jalankan di browser, ya... itu udah file html. Sedangkan untuk memasukkan kode lain, masukkan saja di antara kedua tag body.
Setiap kode HTML harus ada tag pembuka <nama tag> dan tag penutup </nama tag>, dan kalau ada yang masih pernah merasakan memakai program Pengolahan Kata WS (WordStar) versi 4 atau 5 untuk membuat tebal (bold) text di program itu kan kita harus kasih tag seperti ini <b>ini text</b> atau untuk memiringan (italic) text <i>ini text</i>, tag ini sama saja di html.
Mau tes? silahkan buka dengan 'notepad' file HTML (test.html) yg disimpan tadi dan edit text yang didalam body menjadi:
Ini <b>Isi</b> Body
Simpan dan jalankan di browser!
Mungkin itu pengertian simple tentang HTML, dan yang ingin mengetahui lebih lanjut tentang HTML atau tag-tag apa saja yang bisa digunakan silahkan masuk ke website w3schools
Langkah-langkah Menambah Kolom
Trik yang saya coba untuk membuat menjadi 3 kolom pada template blogspot ini adalah dengan menduplikasi kolom kecil yang ada di template tersebut, dari definisi (variable dan css) sampai tampilan yang ada di body html-nya.Sebagai experiment template yang saya gunakan adalah Template No. 897 Oleh: Douglas Browman, dan karena hampir semua template blogspot yang ada untuk pembagian dari definisi sampai tampilannya hampir semua relatif sama, untuk model lain silahkan ber-experiment sendiri.
Berikut Pembagian umum yang ada di template blogspot:
- header (bagian header atau image banner yang ada di atas halaman)
- main (kolom posting-an)
- sidebar (kolom yang lebih kecil)
- footer (kaki halaman)
Nah Pembagian diatas saya coba menduplikasi semua definisi yang ada di head dan penempatan di body untuk bagian 'sidebar' menjadi 'leftbar'
Berikut Langkah-langkahnya:
Langkah-1
Masuk Menu 'Template' | 'Edit HTML'
Sebelum mencoba sebaiknya back-up template anda yang sekarang, 'copy' (Ctrl-C) kode HTML yang ada di editor dan 'paste' (Ctrl-V) di notepad. Apabila terjadi error atau kegagalan dalam pengeditan anda tinggal paste kode tersebut di editor otomatis template anda akan kembali lagi.
Langkah-2
Duplikasikan definisi penentuan warna dari 'sidebar' menjadi 'leftbar', untuk mempermudah cari (Ctrl+F) pada editor dengan kata kunci: 'sidebarBgColor' dimana letak tag definisi dimaksud.
<Variable name="leftbarBgColor" description="Leftbar Background Color"
type="color" default="#556655" value="#EBE6E0">
<Variable name="leftbarHeaderColor" description="Leftbar Title Color"
type="color" default="#889977" value="#4c4c4c">
<Variable name="leftbarTextColor" description="Leftbar Text Color"
type="color" default="#ccddbb" value="#666666">
<Variable name="leftbarLinkColor" description="Leftbar Link Color"
type="color" default="#ffffff" value="#7f7f7f">
<Variable name="leftbarVisitedLinkColor"
description="Leftbar Visited Link Color"
type="color" default="#aabb99" value="#333333">
Copy (Ctrl+C) tag di bawah ini yang merupakan duplikat dari tag diatas tetapi sudah diganti semua text yang berwarna biru dari 'sidebar' menjadi 'leftbar' dan Paste (Ctrl+V) dibawah dari tag diatas.
Langkah-3
Duplikasikan definisi penentuan font dari 'sidebar' menjadi 'leftbar', untuk mempermudah cari (Ctrl+F) pada editor dengan kata kunci: 'sidebarHeaderFont' dimana letak tag definisi dimaksud.
<Variable name="sidebarHeaderFont" description="Sidebar Title Font"
type="font" default="normal bold 125% Helvetica, Arial, Verdana, Sans-serif" value="normal bold 124% Trebuchet, Trebuchet MS, Arial, sans-serif">
Lakukan seperti Langkah-2 untuk duplikasi dibawahnya.
Langkah-4
Duplikasikan definisi konfigurasi kolom dari 'sidebar' menjadi 'leftbar', untuk mempermudah cari (Ctrl+F) pada editor dengan kata kunci: 'sidebar-wrapper' dimana letak tag definisi dimaksud.
#sidebar-wrapper {
background:$sidebarBgColor;
width:185px;
float:right;
padding:0;
border-top: 1px solid $frameColor;
border-bottom: 1px solid $frameColor;
color: $sidebarTextColor;
font-size: 83%;
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 */
}
#sidebar {
margin:0;
padding:2px 12px 10px;
}
Lakukan seperti Langkah-2 untuk duplikasi dibawahnya.
Langkah-5
Duplikasikan definisi Warna Link dari 'sidebar' menjadi 'leftbar', untuk mempermudah cari (Ctrl+F) pada editor dengan kata kunci: 'sidebar a:visited' dimana letak tag definisi dimaksud.
#sidebar a {
color: $sidebarLinkColor;
}
#sidebar a:visited {
color: $sidebarVisitedLinkColor;
}
#sidebar a:hover {
color: $sidebarVisitedLinkColor;
}
Lakukan seperti Langkah-2 untuk duplikasi dibawahnya.
Langkah-6
Duplikasikan definisi Pengaturan Posisi Element didalamnya dari 'sidebar' menjadi 'leftbar', untuk mempermudah cari (Ctrl+F) pada editor dengan kata kunci: 'sidebar a:visited' dimana letak tag definisi dimaksud.
/* Sidebar
----------------------------------------------- */
.sidebar h2 {
margin:1em 0 .25em;
line-height: 1.4em;
font: $sidebarHeaderFont;
color: $sidebarHeaderColor;
text-transform:lowercase;
}
.sidebar .widget {
margin:0 0 1.5em;
padding:0;
}
.sidebar ul {
list-style:none;
margin: 0;
padding: 0;
}
.sidebar li {
margin:0;
padding:0 0 .25em 20px;
text-indent:-20px;
line-height:1.4em;
}
Lakukan seperti Langkah-2 untuk duplikasi dibawahnya.
Langkah-7
Penambahan untuk Struktur Halaman
untuk mempermudah cari (Ctrl+F) pada editor dengan kata kunci: 'Page structure' dimana letak tag definisi dimaksud.
/** Page structure tweaks for layout editor wireframe */
body#layout #outer-wrapper {
margin-top: 0;
}
body#layout #main,
body#layout #sidebar {
padding: 0,
body#layout #leftbar {
padding: 0;
}
body#layout #main-wrapper,
body#layout #sidebar-wrapper {
height: auto,
body#layout #leftbar-wrapper {
height: auto;
}
Tambahkan perintah text yang berwarna merah yang sebelumnya tidak ada.
Langkah-8
Menempatkan Posisi kolom baru (leftbar) di Body Template.
Ada 2 model pilihan untuk menyisip kolom baru yang kita buat, yaitu :
Model-1: 2 kolom kecil berada pada sisi kiri dan kanan halaman atau
Model-2: 2 kolom kecil berada pada sisi kanan saja (seperti template yang saya gunakan)
Untuk Model-1 copy dan paste tag dibawah berikut:
Sebelum tag berikut (cari dengan keyword 'div id='main-wrapper'') :
<div id="'main-wrapper'"> <b:section class="'main'...
Sedangkan untuk Model-2, letakkan Sebelum tag (cari dengan keyword 'div id='sidebar-wrapper''):
<div id="'sidebar-wrapper'"> <b:section class="'sidebar'...
Langkah-9
Langkah terakhir adalah menentukan/merubah besar kolom dari ke-3 kolom yang telah kita buat:
Rubah angka lebar (width) dari masing-masing class dibawah ini!
angka (warna biru) berikut adalah konfigurasi yang digunakan pada template yang saya gunakan (cari dengan nama class untuk merubahnya, contoh '#outer-wrapper').
Silahkan rubah sesuai kebutuhan template anda.
// Lebar Keseluruhan template, standard yang digunakan untuk screen 800x600px
#outer-wrapper {
...
width:779px;
...
// Lebar Kolom Kiri, atau kolom yang baru dibuat
#leftbar-wrapper {
...
width:146px;
...
// Lebar Kolom main (Postingan)
#main-wrapper {
...
width:420px;
...
// Lebar Kolom Kanan
#sidebar-wrapper {
...
width:185px;
...
Untuk memastikan kalau template kita sudah berubah coba masuk ke halaman
'Template' | 'Element Halaman' bila berhasil kolom yang anda buat akan muncul disana, dan untuk merubah warna sesuai selera anda kolom, font, dll seperti biasa tetap bisa di update melalui halaman 'Template' | 'Font dan Warna'.
Jadi secara customize tidak ada yang berubah sama sekali dari kebiasaan anda untuk meng-update blog anda.
Bagi yang ingin langsung memakai template di atas tanpa harus pusing mengikuti langkah diatas :)
Silahkan Downlaod di URL berikut : Blogspot Free Template
Dari Menu 'Template' | 'Edit HTML' | 'Backup/Restore Template' Upload file .xml tersebut dan 'save'.
Jangan lupa untuk mem-backup template anda sebelum melakukan langkah diatas, atau untuk experiment silahkan buat sebuah blog baru.
Selamat Mencoba!
Tahun ini kita masih bisa menikmati ketupat lebaran lagi, entah tahun depan bila masih diberi umur yang panjang oleh-Nya.
Jangan sia-siakan waktu terbuang untuk tidak mengingat kepada-Nya.
Semoga di hari yang Fitri ini kita senantiasa diberikan berkah yang melimpah serta keselamatan selalu dari Allah SWT, Amin....
Saya dan Keluarga Mengucapkan:
"Minal Aidin Wal Faidzin Mohon Maaf Lahir Bathin"
Selamat Idul Fitri 1428H
Dengan Harapan Hari Esok lebih baik dari hari ini.Ipul Anwarhttp://www.blogger.com/profile/14475852311236566877noreply@blogger.comtag:blogger.com,1999:blog-2980398443049418027.post-66629930731130496352007-10-02T06:41:00.000+07:002007-10-15T13:49:17.088+07:00
Apa itu navbar?
Navbar adalah baris navigasi yang ada di bagian atas blogspot dengan tinggi 40 pixel yang berfungsi untuk mencari konten blog yang sedang dikunjungi atau untuk mencari blogger lainnya dengan button 'next blog', dan akan beralih fungsi sebagai personal dasboard setelah kita log-in di blogspot tersebut.
Dari blogspot yang menggunakan template dari 'free template' sekarang ini hampir semua blogspot tersebut dari penyedia template otomatis dihilangkan dengan berbagai alasan. Lalu bagaimana kalau pengguna template standar dari blogspot, apa bisa dihilangkan?
Bagi pengguna template standar blogspot bisa tidak menampilkan navbar tersebut dengan trik berikut:
Masuk pada menu 'Template' | 'Edit HTML'
Kemudian pada bagian editor sisip code css 'berwarna merah' dibawah ini di baris setelah keterangan pembuat template tersebut :
-----------------------------------------------
Blogger Template Style
Name: 565
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 28 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */
#navbar-iframe {
display: none !important;
}
/* Variable definitions
====================
kemudian simpan hasil editing anda.
Selamat mencoba!
| pinjem video dari: Iman Brotoseno |
Sudah banyak video yang di pasang di website-website maupun web blog setelah popularnya Youtube dan Google belakangan ini. Video-video ini dipasang dengan menggunakan free player yang disedikan oleh mereka. Jadi kita dapat sharing video milik kita yang ditampung di server mereka untuk dipasang di website milik orang.
Nah sekarang gimana kalau kita menggunakan player milik sendiri?
asyik juga kali ya... bisa pasang logo di player itu dan kita juga bisa sharing seperti Youtube dan Google punya.
Disini saya mencoba kasih sedikit trik membuat player sendiri yang simple yang dapat memutar file flash video (flv) sendiri dari mana saja dan trik ini juga saya gunakan di beberapa project pembuatan website multimedia yang saya buat.
Player yang coba dibuat ini menggunakan Flash v.8 dan berikut langkah-langkahnya:
Langkah-1
Buat file flash baru dengan nama 'player'
Langkah-2
Karena document file yang akan kita buat adalah sebuah player, kita set ukuran document ini sesuai dengan player yang kita inginkan melalui toolbar 'modify' | 'document'
Disini saya coba setting dengan ukuran referensi video dari flash (320x240 pixels), kita tambahkan ukuran untuk tinggi menjadi 280 karena space untuk 'playback' video-nya.
Langkah-3
Setting fps (frames per second) dengan 12 standard flash dan supaya video yang dijalankan tidak terlalu berat untuk dimainkan.
Langkah-4
Atur lembar kerja layer menjadi 2 beri nama 'action' dan 'player' seperti gambar dibawah:
Langkah-5Tarik component Playback yang ada di window components, letakkan pada layer 'player'
Beri nama instance name-nya dengan 'player_mc'Setelah itu rubah angka parameter untuk 'Buffer Time' menjadi 5 (untuk memberi kesempatan playback untuk buffering video sebelum dimainkan dari parameter standarnya adalah 0.1).
Karena dengan parameter 0.1 hampir tidak memungkinkan dengan koneksi yang ada di Indonesia sekarang ini, video akan tersendat-sendat waktu dimainkan.
Langkah-6
Masukkan action script berikut pada layer 'action' melalui window 'action'
Tentukan variable yang bersifat global dengan nama 'file',
variable ini bisa juga difungsikan sebagai URL variable yang dapat dikirim dari luar flash movie
_global.file;
masukkan script ini dibawahnya, yaitu script sebagai playback video yang dibuat:
import mx.video.*;
var listenerObject:Object = new Object();
listenerObject.stateChange = function(eventObject:Object):Void {
if(player_mc.buffering){
_root.buffering_mc._visible = true;
} else {
_root.buffering_mc._visible = false;
}
};
player_mc.addEventListener("stateChange", listenerObject);
Tentukan file video yang akan dimainkan
player_mc.contentPath = _root.file;
Langkah-7
Publish file flash anda dengan nama 'player.swf'
Langkah-8
Langkah terakhir adalah memainkan dan memanggil flv file melalui HTML file (player.html)
Buka file html anda dengan 'dreamweaver', tambahkan parameter nama flv file berikut pada object flash anda:
player.swf?file=namafile.flv
Untuk memanggil file yang ada di web masukkan lengkap dengan nama URL anda sepert:
player.swf?file=http://mediasolusindo.com/player/telkomsel.flv
Silahkan berkreasi untuk digabungkan dengan PHP script misalnya atau yang lainnya, trik ini sudah saya coba di beberapa web multimedia yang saya buat seperti:
- Visi Caldecott
- Iman Brotoseno Film Director and Underwater Photography
Selamat Mencoba ...!!!
Pernah lihat website dengan alamat domain .com tapi isinya blog yang ada banner blogspot-nya atau yang lain? ini juga jadi pertanyaan client saya waktu ingin membuat website dengan dana seminim mungkin tapi selain bisa menggunakan email dengan nama domain sendiri juga dengan website dengan alamat tersebut, "Namanya juga perusahaan baru berdiri" katanya. Emang sih gak enak juga kedengeranya kalau ada yang komentar "Bisnis kok pake gratisan?" yang akhirnya kridibilitas bisnis kita jadi dipertanyakan.
Untuk kasus diatas diluar bisnis perlu gak-nya perusahaan memiliki website yang profesional, saya coba kasih trik yang sebenernya sudah lama dilakukan oleh web designer maupun web programmer dengan tujuan pengunjung website tidak perlu mengetahui alamat fisik selama dia 'surfing' di website tersebut.
Trik yang digunakan biasanya menggunakan 'javascript' dengan framing halaman website tersebut, trik ini juga saya pakai di hampir semua website yang saya buat. Karena selain dapat mengecoh pengunjung untuk tidak dapat mengetahui file fisik yg digunakan (tapi tetep aja sih kalo di uprek ketauan juga... :)) untuk saya lebih mudah unuk me-manage file-file website tersebut.
Berikut Langkahnya:
Buat atau Edit file index dari website kita, kemudian ganti isinya dengan ini:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>[Nama Website]</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="[Keterangan Website]" />
</head>
<frameset rows="100%">
<frame name="top" src="[Alamat Pengalihan]">
<noframes>
<body>
<p>This page uses frames, but your browser doesn't support them.</p>
</body>
</noframes>
</frameset>
</html>
Keterngan:
[Nama Website] : Isi judul Website anda
[Keterangan Website] : Isi dengan Keterangan Website Anda yang akan menjadi keterangan di 'search engine' seperti google bila website anda muncul.
[Alamat Pengalihan] : isi dengan alamat pengalihan yang diinginkan seperti : http://ipulanwar.blogspot.com
Selamat Mencoba!
Dar blog nya kang ipulanwar.blogspot.com
