WEB : Free Online Icon Maker

Suka bikin icon? Atau pengen punya icon di blog? Icon biasa ditampilkan di bagian address bar, selevel dengan lokasi kita mengetikan alamat URL.Dengan kombinasi tag link rel=”SHORTCUT ICON” href=”blogku.com/eticon.ico” maka tampilan web kita makin menjadi cantik.

Banyak manfaat dari pemilikan ico, dari sekedar menambah gaya, icon ini juga menunjukkan kepemilikan sebuah web/blog.Anggap kita menggunakan browser Firefox yang dalam satu window memiliki kemampuan menampilkan beberapa web dalam kumpulan Tab.Maka icon kita akan lebih terlihat mudah dicari dalam browser.Lebih memudahkan kita untuk mencari web yang kita tuju kan?

Ada satu alamat… yang memberikan tawaran penciptaan icon secara gratis dan praktis.Alamatnya ada di chami.com .Kita hanya perlu mempersiapkan satu gambar baik di direktori lokal maupun gambar di web.Setelah digenerate, makakita bisa menyimpannya untuk kepentingan pribadi.
Coba aja deh!

HTML : HTML Tag on Vodafone, Au and Docomo

Bila beruntung mendapatkan file HTML yang bisa diakses oleh browser I-mode, seperti yang biasa diakses pengguna layanan Docomo, Au dan Vodafone (seperti yang pagi ini aku terima) maka ada beberapa tag HTML yang dipangkas penggunannya bila dibandingkan dengan HTML yang biasa kita akses melalui browser di PC/Mac. Hal ini bisa dimaklumi bila melihat kebiasaan teknologi Jepang saat ini yang mengkhususkan beberapa fiturnya untuk digunakan di hanphone.Jadi seperti layaknya PC, mereka biasa menggunakan browser di Hpnya untuk mengakses email, website, blogging, maupun bermain game.

Mulai dari aplikasi semacam Flash Lite yang diperuntukan bagi developer game maupun aplikasi lainnya yang hanya bisa digunakan di Hp yang berlangganan di provider Jepang hinga halaman web yang dikhususkan untuk browser I-mode.Berbeda dengan Flash yang pluginya dibenamkan di browser PC kita, Flash ini menggunakan action script 1.0 dan 2.0 dengan berbagai fitur yang dikurangi.Gunanya agar konsumsi memori yang digunakan dapat menyesuaikan dengan keterbatasan memori di Hp.

Sedangkan untuk HTML…, berita terbaru yang biasa diakses di website domoco, yakni browser versi 6.0 saja yang menggunakan Table, Caption, TR,Th dan TD. Sedangkan versi yang umumnya digunakan saat ini adalah versi HTML 2.0, yang hanya mendukung tag sederhana seperti Marquee, Blink, Select~Option,Body dan Font.Sedangkan atribut untuk tag tersebut masih berkutat pada pewarnaan untuk font, body juga direction untuk Marquee.Tag sederhana lainnnya yang masih digunakan yakni Center, Br.Untuk tag selengkapnya bisa dilihat disini.

Sepertinya bukan masalah besar untuk tag seperti ini.Untuk editornya, kita bisa menggunakan Maruo, dan browser untuk mengeceknya selain I-mode HTML Simlator II yakni Sleipnir.Untuk menggunakan browser ini, kita mesti memasukan parameter user agent untuk mengidentifikasi layana operator yang akan kita akses.Ini untuk memudahkan server untuk memilah milah versi HTML yang akan diakses.Sebagai contoh untuk layanan docomo, kita bisa menggunakan parameter DoCoMo/2.0 P902i(c100;TB;W24H12).

Setelah berhasil, kita tutup browsernya lalu kita panggil sekali lagi.Untuk mengeceknya apabila kita masukan alamat URL http://yahoo.co.jp, maka akan diredirect ke halaman http://mobile.yahoo.co.jp/index.html.

Ada beberapa gambar yang dijadikan sebagai e-moji untuk menggantikan peran gambar ke dalam tag HTML.Anggap saja seperti avatar di Yahoo Messenger.Menarik ya untuk dipelajari.

WEB : Email Icon Generator

Bila sering browsing di alamat-alamat blog pasti tidak asing lagi dengan icon yang membubuhkan alamat email.Icon ini berbentuk gambar, yang artinya tidak dimungkinkan untuk melakukan copy paste alamat email tersebut untuk hal-hal yang kita tidak diketahui penggunaanya.Spam? ya….maksud saya seperti itu.

Banyak spamer yang mendapatkan alamat email secara acak dengan menggunakan mesin pencari alamat email.Mesin ini secara simultan mencari alamat email ke seluruh mesin pencari yang sudah ada.Jadi jangan heran kalau kita yang tidak mengetahui hal ini biasanya dengan enteng mencantumkan alamat email (terlebih dengan tag mailto di blognya.So becareful guys!

Ada beberapa trik yang biasa digunakan, seperti menggunakan javascript untuk mengacak penampilan alamat email kita agar lebih sulit untuk dicari, atau cara yang paling mudah yakni menggunakan icon (dengan catatan jangan menambahkan tag mailto didalamnya).

Buat kalian yang tidak terbiasa mengguanak software editor gambar, ada satu web yang menyediakan alat bantu untuk menciptakan icon kita secara cepat dan mudah.Masuk ke sini.Lalu masukan alamat email dan pilih email hostingnya.lalu klik Generate.Beres.

WEB : RSS Blog Reader

gentawilAda kalanya kita malas untuk mengaktifkan browser atau menyeting RSS aggregator di blog kita meskipun kita merasa perlu untuk mengupdate konten dari blog atau artikel yang sering kita kunjungi.Kita-kira gimana hasilnya kalo kita bayangkan menyedot artikel dengan teknologi RSS tersebut seperti halnya menggunakan Outlook atau The Bat.

Nah, kini ada tawaran menarik dari Tristana.

Berbentuk software ringan,software ini bisa didownload gratis di sini.Dengan software ini, kita bisa selalu mendapatkan artikel terbaru dari web yang kita kunjungi hanya dengan satu aplikasi.Semua akan terdownload secara otomatis setelah memasukan parameter tertentu, dan kita pun bisa membacanya dalam kondisi internet offline setelah semuanya kita download di hardisk kita.

Berikut spesifikasinya :
- Bisa membaca semua format XML feed (RSS 2.0 and Atom 1.0)
- Bisa dijalankan di Windows 98/2000/XP/Me/NT
- Program ini bersifat FREEWARE and tidak mengandung SPYWARE ataupun ADWARE
- Ukuran filenya 1.2 MB
- 100% FREE UNLIMITED DOWNLOAD (ini yang asik kan!)

WEB : Translate your Page with Excite

Masih ingat excite? Bagi yang pernah browsing di era 90-an pasti masih inget kehebatan web ini.Mau email gratis? bisa didapat disini.Kalau pengen cari sesuatu di internet juga bisa disini (walau sekarang kadang kita menemukan hasil pencarian di Excite didapat dari mesin pencari Google).Hampir semua keunggulan Yahoo! saat itu bisa ditandingin di Excite.

Sekarang bagaimana kabarnya ya?

Wah, ternyata dari hasil tanya sana sini ke temen yang masih menggunakan Excite, ada satu fitur disitu yang sekarang praktis digunakan untuk menterjemahkan halaman web ke bahasa yang kita inginkan.Misalnya kita punya halaman web yang menggunakan Bahasa Inggris, lalu klien kita di Jepang ingin mengakses dan membacanya, kita bisa tinggal berikan alamat URL mereka untuk diterjemahkan melalui web Excite.Menarik ya?

Kalo ingin mencobanya, tinggal buka URL http://www.excite.co.jp/world/english/web/?wb_url=URL kamu]&wb_lp=JAEN.(Note:ganti text [URL kamu] dengan alamat website yang ingin diterjemahkan.)

Lalu apa salah satu keuntungan dengan fitur ini? Bagi kamu yang ingin memiliki website dengan pilihan ragam bahasa, kamu bisa gunakan mesin Excite ini.

Seperti webnya winstudio, dulu teman di Jepang ingin mengetahui isinya.Maka tinggal masukan satu tambahan link agar bisa diredirect ke halaman Excite dan hasilnya bisa dilihat di halaman yang sama.Very exciting bukan?

Dan ketika aku coba dengan bantuan Excite untuk menterjemahkan blog ini, hasilnya sebagai berikut :

WEB : Adding Categories on Blogger

Bila ditanya kenapa memilih Blogger sih sebenarnya karena alasan kedekatan emosional dengan Goggle sebagai mesin pencari # 1 di dunia.Tanpa embel-embel lain? Yup.Tentu.Meski fiturnya sangat minim? Iya!

Coba bandingkan dengan WordPress ataupun Blogsome, selain mereka memiliki pilihan template yang bisa di share bersama-sama, mereka juga punya fitur untuk menambahkan kategori ke dalam blog.

Tapi, tetap saja bukan Google namanya kalo mereka punya jurus tertentu untuk digunakan.Misalnya saja buka netcf2 yang salah satu triknya memuat cara membuat kategori imitasi dengan menggunakan mesin pencari blogsearch di Google.Mau tahu triknya? begini penuturannya :

1. Tentukan kategori yang akan digunakan.
Kategori ini mesti mudah dicari di mesinBlogger.Salah satu caranya dengan memasukan ‘tag’ tertentu sesuai nama kategori di tiap-tiap subyek postingan kita.Misalnya ditambahkan tag WEB di postingan kali ini.

2. Selanjutnya kunjungi halaman ini.

3.Di kolom pertama, masukan alamat URL kita.

4. Isikan nama kategori di kolom selanjutnya.(Bila kategori kita lebih dari satu, tinggal tambahkan kolom dengan cara klik add more textboxes sebanyak kategori yang kita perlukan)

5. Terakhir, klik Generate Code.Lalu kopi ke dalam template blogger kita.

Kalau ingin mencoba trik lain, banyak pilihan triknya dengan membaca artikelnya disini.

Catatan penangkapan Google:
- Berada di posisi pertama dengan kata kunci ‘add categories to new blogger’ di Google Indonesia pada tanggal 17 April 2007.

CSS : Small Banner for Friend Links

Kutemukan satu gambar dengan ukuran, warna dan bentuk yang cocok untuk dijadikan banner di halaman blog.Perhatikan disini:

Namun sepertinya akan menjadi lebih banyak waktu yang dibutuhkan untuk meload semua banner kecil-kecil ini apabila linknya bertambah banyak (dan aku yakin ini sangat besar kemungkinan terjadi.)Jadi aku pikir kenapa tidak kotak ini aku jadikan background untuk banner saja,dan text di dalamnya saja yang berubah sesuai dengan keperluanya.

Untuk itu aku tutup aja bagian tulisan di dalamnya dengan warna putih #FFFFFF, dan hasilnya seperti berikut ini :

Ok, kita lanjutkan.Untuk itu aku perlu menyiapkan CSS style untuk itu, ini dia :

#banner {

letter-spacing:.1em;
float: left;
background: #D8DADC ;
margin:2px;
padding: 0px;
width:93px;
height:33px;
font:bold 95%/1em “Trebuchet MS”,Trebuchet,Verdana,Sans-serif;
background:#ffffff url(http://photos1.blogger.com/blogger/4452/1518/1600/bgbutton.jpg) no-repeat;
}

Perhatikan Url gambar tersebut diupload di blogger pribadi agar lebih mudah dicari. (Tipsnya : kita bisa upload di satu post terpisah dalam status draft agar mudah dicari untuk di copy kode Urlnya suatu saat bila diperlukan). Lalu kita gunakan tag paragrap agar mudah mengendalikan posisi textnya ditengah, untuk itu ditambahkan dengan :

#banner p {
margin:0 15px;
color:#8c8639;
}

dan terakhir, karena sifatnya yang akan menjadi banner maka akan dipergunakan tag link.

#banner a {
text-decoration:none;
color:#8c8639;
}

ok, selanjutnya di dalam HTML akan kita tambahkan beberapa link banner.

hasilnya akan terlihat seperti banner kan?

CSS : Using WordPress Background Header to Blogger

Begitu menarik melihat template wordpress milik Andreas Viklund, sayang sekali meilhat tampilan header dan font yang tertata rapi bagaiman gambar utuh itu hanya tersedia di wordpress.
Coba perhatikan teman kita di wordpress yang blognya menggunakan template ini :

http://andress.wordpress.com/
http://backupdelicious.wordpress.com/

Saya ingin sekali mengambil template headernya untuk ditampilkan di blogger.Untuk itu saya coba view source di backupdelicios untuk mencari file CSS nya.
Ini dia :

#container {
color:#303030;
margin:0;
min-width:770px;
padding:0;
text-align:left;
width:100%;

} #sitename {
color:#ffffff;
height:92px;
margin:0 20px 10px;
text-align:left;
}
#sitename h1,#sitename h2 {
font-weight:400;
margin:0;
padding:0;
}
#sitename h1 {
font-size:2.4em;
padding-top:20px;
}
#sitename h1 a {
color: #ffffff;
text-decoration: none;
letter-spacing: 10px;
}
#sitename h2 {
font-size:1.6em;
}

ok, untuk itu saya cari CSS serupa yang ada di blogger saya ;

#header {
width:660px;
margin:0 auto 10px;
border:1px solid #ccc;}
#blog-title {
margin:5px 5px 0;
padding:20px 20px .25em;
border:1px solid #eee;
border-width:1px 1px 0;
font-size:200%;
line-height:1.2em;
font-weight:normal;
color:#666;
text-transform:uppercase;
letter-spacing:.2em;
}
#blog-title a {
color:#666;
text-decoration:none;
}
#blog-title a:hover {
color:#c60;
}

dan hasil dari penggabungan ini yaitu :

#header {
width:660px;
margin:0 auto 10px;
border:1px solid #ccc;
background:#f0f0f0 url(http://backupdelicious.wordpress.com/wp-content/themes/andreas09/images/bodybg-blue.jpg) repeat-x;
}
#blog-title {
color:#ffffff;
height:92px;
margin:0 30px 10px;
text-align:left;
}
#blog-title h1,#blog-title h2 {
font-weight:600;
margin:0;
padding:0;

}
#blog-title h1 {
font-size:2.4em;
padding-top:18px;
}
#blog-title h1 a {
color: #ffffff;
text-decoration: none;
letter-spacing: 10px;
}
#blog-title h2 {
font-size:1.2em;
color: #ffffff;
text-transform:lowercase;
}

sedang dibawah [body] saya ganti menjadi :

dan hasilnya….bisa anda lihat disini

CSS : Mouse Over with Image Background

setelah disodorin dengan template layout menggunakan photoshop, tentu gampang ditebak button kali ini menggunakan gambar.disitu terpampang 4 button yang masing-masing akan disambungkan dengan halaman HTML lain.sebagai situs restauran, buttonnya juga memiliki icon dengan setiap gambar sebagai penampilnya.

sepertinya akan mudah untuk mengeditnya

tapi permintaan tentu harus lebih banyak dari sekedar mengubah ke HTML .

setiap button yang muncul mesti berubah setiap mouse melewatinya (on mouse over). masih inget kan kalo untuk memberikan background warna di button di CSS dapat menggunakan ;

a:hover{color:black;background:peach url(image url)}

tag ini hanya berlaku kepada semua button yang aktif, bagaimana bila ingin setiap button bersifat unique? artinya setiap button memiliki over button yang berbeda beda….ini ada triknya :

a img {height: 42px; width: 99px; border-width: 0; background: top left no-repeat;}

a#satu img {background-image: url(images/menu3.gif);}
a#dua img {background-image: url(images/menu2.gif);}
a#tiga img {background-image: url(images/menu1.gif);}
a#empat img {background-image: url(images/menu4.gif);}

a#satu:visited img {background-image: url(images/menu3visited.gif);}
a#dua:visited img {background-image: url(images/menu2visited.gif);}
a#tiga:visited img {background-image: url(images/menu1visited.gif);}
a#empat:visited img {background-image: url(images/menu4visited.gif);}

a#satu:hover img {background-image: url(images/menu3over.gif);}
a#dua:hover img {background-image: url(images/menu2over.gif);}
a#tiga:hover img {background-image: url(images/menu1over.gif);}
a#empat:hover img {background-image: url(images/menu4over.gif);}

a#satu:active img {background-image: url(images/menu3active.gif);}
a#dua:active img {background-image: url(images/menu2active.gif);}
a#tiga:active img {background-image: url(images/menu1active.gif);}
a#empat:active img {background-image: url(images/menu4active.gif);}

perhatikan pada a img {height: 42px; width: 99px;….ukuran width dan heightnya harus disesuaikan dengan button yang ada, untuk itu pastikan ukuran tinggi dan lebar masing2 button harus sama.

dan di HTML pada buttonya, kasih style idnya, misalnya /a href=”kesana.html” id=”satu”/, maka button tersebut akan tunduk pada CSS yang telah ditentukan sebelumnya.

untuk contoh bisa buka disini

CSS : setting backgound image on friendster

siapa yang ga kenal friendster?, situs komunitas yang kabarnya terbesar di dunia (bahkan pernah dengar isu yang menyebut indonesia dan filipina sebagai pengguna terbanyak?) ini memang smakin rame penggunanya.

salah satu yang menarik adalah adanya penyetingan background gambar yang bisa disesuaikan dengan penggunanya.teknologi yang digunakan adalah CSS.dengan kemampuan ini, penggunanya dapat mengubah font type, color, serta background. pilihan yang terahir inilah yang tentu paling banyak digunakan.

untuk melakukannya tinggal ikuti langkah berikut :
1. masuk ke edit profile
2. pilih submenu Customize
3. masuk ke bagian Advanced users: Personalize your profile with CSS
4. isi dengan tag CSS berikut ; body { background-color:#ffffff; background-image:url(http://www.domainku.com/images/gambar.gif); background-attachment:scroll; }
5. save

setelah itu akan ada notifikasi bahwa editan kita telah berlaku dengan Success! You have successfully updated your profile. View your profile now.

ok, selanjutnya coba perhatikan apakah ada perubahan di tampilan friendsternya, kalopun masih sama seperti sebelumnya, coba refresh beberapa kali untuk menghilangkan chache di temporarty filenya.atau bisa pula tutup browswernya lalu panggil sekali lagi.

buat yang belom terbiasa dengan tag CSS, ada tawaran menarik dari cubancouncil.com untuk mendapatkan pilihan warna, background, cursor dsb.fitur ini disebut dengan “Friendster Profile Editor v3.2 (Simple)”,cukup mengisi form yang tersedia disini lalu tinggal copy tag CSSnya ke dalam langkah ke 4 yang telah disebutkan diatas.

selamat mencoba.

artikel lainnya : Set Your Friendster Profile Here

Hasil penangkapan Google :
- Berada di posisi 6 pada tanggal 13 April 2007 dengan kata kunci ‘edit friendster’ di Google Indonesia.

Hasil penangkapan Yahoo :
- Berada di posisi 5 pada tanggal 13 April 2007 dengan kata kunci ’setting background friendster’ di Yahoo.