Kamis, 31 Mei 2007

Template baru VS Template Klasik

Sudah dua hari ini saya tidak menelorkan tulisan baru ( emangnya ayam pake bertelor segala ) mungkin buat sobat yang rajin datang ke sini merasa bosan karena tulisannya itu-itu melulu. OK, biar ga basi langsung aja.Menanggapi banyaknya pertanyaan yang di ajukan melalui shoutbox beberapa waktu lalu seputar masalah mengganti template, maka kali ini saya akan membahasnya agar bagi sobat yang masih bingung dapat mempunyai gambaran seputar template ini.

Sebenarnya tentang masalah template ini sudah saya posting, jika mau iseng-iseng baca silahkan klik di sini, tapi biar lebih jelas akan saya bahas lebih dalam.

Mungkin ada diantara sobat semua masih bingung dengan yang namanya template klasik sama template baru. Di blogger.com saat ini template yang di gunakan ada dua pilihan yaitu template klasik dan baru. Bagaimana caranya kita membedakan apakah kita menggunakan template klasik atau template baru? Ada beberapa ciri untuk mengenal apakah yang kita pakai template baru atau klasik, diantaranya yaitu :

Template baru :

Pada menu dashboard (menu yang dijumpai pada saat kita baru login) akan terlihat menu seperti ini :

Manage : Posts, Settings, Layout

Jika kita klik menu Layout, akan ada menu seperti ini :

Page Elements | Fonts and Colors | Edit HTML | Pick New Template

Jika kita klik menu Edit HTML maka akan muncul beberapa ciri khas, yaitu :

Tulisan --> download Full Template

Tombol bertuliskan --> Browse..., Upload

Ada kotak kecil di samping tulisan Expand Widget Templates

Tombol bertuliskan ---> CLEAR EDITS, PREVIEW, SAVE TEMPLATE

Dibagian bawah terdapat tulisan :

• Revert to Classic Template

• View Classic Template

Itu tadi sedikit ciri apabila kita memakai template baru.

Apabila memakai template klasik, cirinya adalah :

Pada menu dashboard (menu yang dijumpai pada saat kita baru login) akan terlihat menu seperti ini :

Manage : Posts, Settings, Template

Jika kita klik menu Template, akan ada menu seperti ini :

Edit HTML | Pick New | customize Design | Adsense

Jika klik menu Edit HTML akan muncul beberapa ciri :

terdapat tulisan --> Change the Blogger Navbar

Tombol bertuliskan ---> Save Template Changes, Preview, Clear

Itu tadi beberapa ciri jika kita memakai template klasik.

Dari kedua contoh ciri diatas, tentu saja kita dapat mengetahui template apa yang sekarang kita pakai.

Apa kelebihan atau kekurangan dari kedua template tersebut?

Template baru

Terdapat menu : Page Elements

Dengan menu ini kita dapat dengan mudah menambahkan element tanpa harus mengerti bahasa HTML. Element-element yang bisa ditambahkan bisa berupa Newsreel, Video Bar, List, Links List, Picture, Text, HTML/JavaScript, Feed, Labels, Logo,
Profile, Blog Archive, serta Page Header.

Sistem Drag & Drop

Dengan sistem ini kita dapat dengan mudah memindahkan setiap element yang telah kita buat dimana saja yang kita sukai.

Terdapat menu : Fonts and Colors

Dengan menu ini kita dapat dengan mudah merubah warna serta bentuk huruf tanpa harus repot-repot merubah style sheet dan tentunya tidak memerlukan kemampuan berbahasa HTML

Itu tadi beberapa keuntungan memakai template baru, dan kekurangannya yaitu :

bagi sobat yang suka otak-atik kode HTML, pada template ini agak susah tuk di otak-atik (khusus buat pemula seperti saya, lain halnya bila sobat sudah expert).

Sekarang apa kelebihan dari template klasik :

Kode HTML sangat mudah untuk di otak-atik, jadi bagi sobat yg suka bermain dengan HTML sangat cocok memakai template ini.

Kekurangan :

Tidak tersedia menu Page Elements, sehingga bagi sobat yang masih bingung dengan HTML akan menemui kesulitan.

Tidak tersedianya menu : Fonts and Colors, sehingga menyulitkan dalam mengatur Font serta warna hurup.

Nah itu tadi beberapa keunggulan serta kekurangan dari kedua template, silahkan pikirkan mana yang mau sobat pilih.

Cara Migrasi Template

Setelah menimbang-nimbang, tentunya sobat tertarik dengan salah satu diantara keduanya. jika ternyata sobat tertarik untuk bermigrasi(pindah) template dan belum mengtahui caranya silahkan ikuti langkah berikut:

Dari Template baru ke template klasik :

Klik menu Layout

Klik menu Edit HTML

Klik tulisan yang ada di bagian bawah layar yaitu : Revert to Classic Template

Bila muncul kotak dialog, klik OK aja
Selesai, sobat memasuki dunia baru yaitu template klasik.

Dari template klasik ke template baru :

Klik menu Template

Klik menu Customize Design

Klik tombol bertuliskan UPGRADE YOUR TEMPLATE

Pilih template yang di sukai, lalu klik tombol SAVE TEMPLATE

Selesai. sobat sudah memasuki alam baru, yaitu Template Baru.

Cara mengganti Template

Ada dua kemungkinan, yaitu mengganti template dengan buatan blogger dan mengganti template bukan buatan blogger.

Ganti template dengan template buatan blogger

Untuk template Klasik, ikuti langkah-langkah berikut :

Klik menu Template

Klik menu Pick New

Pilih template mana yang paling cocok, lalu klik tombol bertuliskan Use This Template yang berada di bawah gambar
template

Selesai. Blog sobat sudah punya wajah baru.

Untuk template baru, ikuti langkah-langkah berikut :

Klik menu Layout

Klik menu Pick New Template

Pilih template mana yang sobat sukai, lalu klik tombol SAVE TEMPLATE

Selesai.Blog sobat sudah mempunyai wajah baru

Ada yang perlu di ketahui yaitu jika kita mengganti template dengan template buatan blogger sendiri, maka data-data semisal link, shoutbox, image dan lain-lain. Data ini tidak akan hilang. Lain halnya apabila kita mengganti dengan template buatan bukan blogger.com, maka semua data-data yang di sebutkan tadi akan menghilang (kecuali postingan artikel tidak akan hilang) dan tentunya harus di input ulang,
dan judulnya Caaaaapppppee deeeeehhhhh .....

Ganti template dengan template bukan buatan blogger

Hal pertama yang harus di ingat adalah semua data-data yang ada seperti yang saya sebutkan tadi, maka apabila kita mengganti template dengan template bukan buatan blogger sendiri, kita harus mengcopy dulu seluruh data tersebut, dan kemudian nanti setelah kita sudah mengganti template, data-data tadi kita input ulang.

Template baru

Klik menu Layout

Klik menu page Elements

Klik tulisan Edit pada masing-masing Element, lalu copy seluruh datanya

Jika semua data di pastikan sudah di copy, maka langkah selanjutnya adalah klik menu edit HTML

Klik tulisan --> download Full Template, save dalam komputer. Ini di maksudkan apabila nanti sobat berubah pikiran dan ingin kembali lagi, sobat masih punya data template tersebut

Beri tanda centang dulu pada kotak kecil disamping tulisan Expand Widget Template

Klik tombol Browse..., lalu masukan data Template baru yang ingin di masukan

Klik Tombol Upload

Biasanya keluar peringatan bahwa data-data yang kita punya seperti link, shoutbox dan lain-lain akan ter delete (terhapus)

Klik tombol --> Confirm & Save, dengan asumsi bahwa sobat sudah mengcopy data-data tadi

Selesai. Blog sobat sudah mempunyai wajah baru.

Template Klasik

Klik menu Template

Klik menu Edit HTML

Tandai (highligh/blok) semua data template yang ada, sorot pada tulisan yang sudah di tandai, klik kanan Copy,lalu paste pada program notepad, save dan beri judul dengan nama yg mudah di ingat. Ini dimaksudkan untuk backup data untuk nanti input ulang data-data seperti link,shoutbox dll

Delete semua data template yang lama

Copy seluruh data template yang baru yang mau di masukan, lalu paste pada kotak data template yang sudah di delete tadi

Klik tombol Preview, lihat perubahan yang ada (biasanya preview ini agak berbeda dengan tampilan blog aslinya), Jika sudah cocok, klik tombol Save Template Changes

Selesai. blog sobat sudah mempunyai wajah baru.

Bagaimana sobat? mudah-mudahan keterangan diatas dapat menjawab semua pertanyaan mengenai ganti template.

Selamat mencari dan menemukan template yang sobat suka.

Senin, 28 Mei 2007

Menu Navigasi dengan CSS

Update : Tutorial ini khusus pagi anda yang masih memakai template klasik

Hallo sobat, bagaimana kabarnya hari ini? mudah-mudahan sehat selalu ya, biar baca ni artikel semangat, ga loyo gitoe.

Ok, biar ga terlalu garing sedikit demi sedikit kita mulai memasuki topik bahasan, yoi kali ini saya mau membahas tentang cara membuat menu navigasi menggunakan CSS.
Untuk melihat demo Navigasi yang akan saya terangkan, silahkan klik tombol di bawah ini:

Bagaimana sobat, sudah mendapat gambaran apa yang akan saya sampaikan? pasti jawabnya iya. Dengan adanya menu navigasi seperti di atas, tentunya akan lebih menarik perhatian para pengunjung blog kita di banding dengan hanya menu biasa, dan selain itu pula menu ini lebih memperjelas bahwa tulisan atau tombol tersebut merupakan sebuah tombol navigasi yang bisa di klik oleh para pengunjung.

Sekarang timbul pertanyaan bagaimana cara membuatnya? bagi yang belum tahu dan berminat untuk mengetahuinya silahkan sobat terus membaca sampai akhir artikel. Untuk membuat menu seperti yang terlihat di atas tadi, kita perlu menambahkan beberapa kode tambahan pada blog kita.

Seperti pada contoh tadi di atas, ada dua jenis menu navigasi yang akan saya bahas yakni yang tidak menggunakan Image backround serta yang menggunakan Image backround, silahkan simak langkah-langkah berikut ini :

buatlah dua buah tombol navigasi yang bentuknya sama persis, akan tetapi berbeda warna, ini di maksudkan agar ketika tombol mouse menunjuk tombol tersebut tombolnya akan berubah warna. Bagaimana cara membuat tombol? Tentu saja untuk membuat sebuah tombol, kita bisa menggunakan berbagai program komputer semisal adobe photoshop, coreldraw ataupun berbagai program lainnya.

Upload gambar tombol-tombol tersebut pada hosting penyimpan semisal www.photobucket.com
untuk cara upload gambar sudah saya terangkan pada pembahasa yang lalu , jika sudah lupa silahkan klik Di sini

.

Agar ada contoh, umpamanya kita mempunyai alamat tombol sebagai berikut :

http://i162.photobucket.com/albums/t253/rohman24/tombol_03.gif

http://i162.photobucket.com/albums/t253/rohman24/tombol_06.gif

Langkah selanjutnya adalah menambahkan kode, ada dua contoh yakni yang tidak memakai gambar tombol dan yang memakai gambar tombol. contoh yang tidak memakai gambar tombol :

Tambahkan kode berikut sesudah kode <style type="text/css"> dan sebelum kode </style>, ya di mana saja asalkan di antara kode tadi.


.unyil{

text-align:left;

display:block;

width:180px;

height:20px;

background:#f0f0f0;

padding:3px 4px 3px 8px;

margin:7px 10px 7px 0;

}



.unyil:hover{

background:#97A4B9;

text-decoration:none;

}

copy kode di bawah ini, lalu paste di tempat yang sobat inginkan, bisa di sidebar, footer atau dimana saja, kemudian rubahlah dengan link yang sobat punya :


<a class="unyil" href="http://rubrik-elektronik.blogspot.com">Rubrik Elektronik</a><span class="hide"> | </span>
 


<a class="unyil" href="contoh-blog.blogspot.com">Blog Menu D'Tree</a><span class="hide"> | </span> 



<a class="unyil" href="http://rohman-freeblogtemplate.blogspot.com">Free Blog Templates</a><span class="hide"> | </span>



<a class="unyil" href="http://kolom-authorized.blogspot.com">Authorized Service</a><span class="hide"> | </span>

biar tidak telalu bingung, sedikit saya uraikan :

.unyil --> kata .unyil bisa diganti apa saja yang penting harus sesuai dengan kode berikutnya.

text-align:left; --> kata left artinya tulisan akan berada di sebelah kiri, ini bisa di ganti dengan kata center atau right

display:block; --> kata block artinya di tampilkan di layar monitor.

width:180px; --> angka 180px adalah lebar dari tombol navigasi sebesar 180px, nah ini bisa di rubah sesuai dengan kondisi blog sobat masing-masing.

height:20px; --> angka 20px adalah tinggi dari tombol navigasi sebesar 20px, ini bisa di ganti sesuai dengan keinginan sobat.

background:#f0f0f0; --> tulisan #f0f0f0 adalah kode warna dari background, ini bisa di rubah sesuai dengan ke sukaan sobat.

padding:3px 4px 3px 8px; --> nilai padding ini adalah untuk mengatus jarak tulisan pada tombol navigasi, bisa di rubah sesuai kebutuhan.coba-coba aja rubah sendiri.

margin:7px 10px 7px 0; --> margin ini untuk jarak antara satu tombol dengan tombol yang lain, bisa di rubah, coba aja.

.unyil:hover{ --> .unyil:hover artinya yaitu ketika mouse berada pada tombol .unyil akan berubah menjadi seperti yang di definisikan pada kode ini.

background:#97A4B9; --> #97A4B9 adalah kode warna yang dinginkan ketika mouse berada pada tombol .unyil

text-decoration:none; --> text dekorasi jangan di rubah.

Bagaimana sudah jelas? mudah-mudahan jelas.

Contoh yang kedua adalah yang memakai background image, dalam hal ini saya ambil contoh dengan image milik saya dan mempunyai alamat seperti ini :

http://i162.photobucket.com/albums/t253/rohman24/tombol_03.gif

http://i162.photobucket.com/albums/t253/rohman24/tombol_06.gif

prinsipnya kode-kode ini sama dengan diatas, yang membedakan adalah penambahan image doang, coba lakukan langkah berikut ini :

Tambahkan kode berikut sesudah kode <style type="text/css"> dan sebelum kode </style>, ya di mana saja asalkan di antara kode tadi.


.cuplis{

text-align:left;

display:block;

width:180px;

height:20px;

background:#f0f0f0 url(http://i162.photobucket.com/albums/t253/rohman24/tombol_03.gif) top right no-repeat;

padding:3px 4px 3px 8px;

margin:7px 10px 7px 0;

}



.cuplis:hover{
background:#97A4B9 url(http://i162.photobucket.com/albums/t253/rohman24/tombol_06.gif) top right no-repeat;

text-decoration:none;

}

copy kode di bawah ini, lalu paste di tempat yang sobat inginkan, bisa di sidebar, footer atau dimana saja, kemudian rubahlah dengan link yang sobat punya :


<a class="cuplis" href="http://rubrik-elektronik.blogspot.com">Rubrik Elektronik</a><span class="hide"> | </span>
 


<a class="cuplis" href="contoh-blog.blogspot.com">Blog Menu D'Tree</a><span class="hide"> | </span> 



<a class="cuplis" href="http://rohman-freeblogtemplate.blogspot.com">Free Blog Templates</a><span class="hide"> | </span>



<a class="cuplis" href="http://kolom-authorized.blogspot.com">Authorized Service</a><span class="hide"> | </span>

Yang membedakan hanya pemasangan URL image saja, yang lainnya sama persis. Kata cuplis adalah untuk membedakan dengan perintah menu navigasi unyil, jadi kalau dua efek ini mau besamaan ada dalam satu blog, ya harus berbeda.

Selamat mencoba !

Minggu, 27 Mei 2007

Daftar Mybloglog

Bagi para sobat yang baru membuat blog, pada kesempatan kali ini saya mau menambahkan perbendaharaan blog tools nya, yakni pasang MyBloglog.

Apa itu Mybloglog ?

Bingung kalau harus mendifinisikan apa itu mybloglog

biar kita tidak sama-sama bingung, silahkan alihkan perhatian sobat ke bagian sidebar sebelah kanan layar monitor, di bawah tulisan Tamu terdapat photo yang ganteng-ganteng serta cantik-cantik.

Nah itu bukanlah photo saya ataupun my family, tapi itu merupakan tamu yang pernah berkunjung ke blog ini dan beliau-beliau inipun sama-sama anggota dari mybloglog, atau barangkali photo sobat sudah terpampang disana? selamat kalau iya, karena sobat
akan mulai jadi orang terkenal. Ko bisa? Ya iiyya...lah, karena tercatat tak kurang dari lima puluh pengunjung setiap harinya yang mampir kemari dan selalu melihat photo sobat, keren kan! makanya sering-sering main kemari biar cepat terkenal..he..he..(wuyyy...udah dong ngelanturnya

).

Bagaimana sobat sudah dapat gambaran? saya yakin sudah. Atau belum? kalau belum bolehlah saya yang mendefinisikan, tapi tentunya dengan versi saya sendiri. Mybloglog adalah suatu situs yang menyediakan layanan untuk melacak (tracking) para pengunjung blog/website dimana apabila pengunjung tersebut merupakan anggota situs mybloglog maka dapat secara otomatis terdeteksi dan di cantumkan dalam menu Recent Reader nya (pembaca terbaru).

Apa manfaat bergabung di mybloglog?

Ada beberapa manfaat kita bergabung dengan mybloglog yaitu :

Untuk menambah traffic ke blog kita

Dengan adanya photo kita terpampang di blog orang lain, maka ada kemungkinan banyak yang akan berkunjung ke blog milik kita, sekurang-kurangnya dari pemilik blog itu sendiri.

Mengetahui link mana yang banyak di klik

Di mybloglog ada fasilitas tracking untuk memberi peringkat terhadap link-link yang kita pasang, link mana yang banyak di klik pengunjung, maka peringkat link itu semakin baik.

Mempererat tali silaturahmi antar pemilik blog

Tak bisa di pungkiri dengan adanya otomatisasi photo kita terpampang tanpa harus menuliskan pesan seperti halnya buku tamu, ini tentunya akan lebih memungkinkan saling kunjung mengunjungi antar pemilik blog.

Dan tentu saja masih ada manfaat-manfaat yang lainnya yang bisa di dapat, akan tetapi untuk menghemat pembahasan hanya itu saja dulu. Nah sekarang bagaimana cara bergabung dengan mybloglog, silahkan ikuti langkah-langkah berikut ini :

Silahkan buka situs http://www.mybloglog.com

Isi form yang telah di sediakan di bawah tulisan Sign Up Now

Screen name --> Isi dengan nama yang ingin di tampilkan. Contoh : Amen24

Email --> Isi dengan email sobat ( yang valid)

Passwor --> Isi dengan password yang di inginkan. Contoh : ranggalawe

Blog/Site URL --> Isi dengan alamat blog sobat. Contoh : http://rubrik-elektronik.blogspot.com

Klik Tombol Register

Terlihat beberapa form yang harus diisi lagi

Blog/Site Title --> Isi dengan judul blog sobat

Blog platporm --> pilih blogspot.com

Dibagian bawah ada dua radio buttun, silahkan pilih yang sobat sukai

Klik tombol yang bertuliskan Complete Registration

Klik tulisan Go to Your page

Klik tombol yang bertuliskan Edit profile yang berada di sebelah kanan atas

Isi semua data diri sobat (tidak saya sebutkan satu2 karena terlalu banyak)

Jika sudah selesai di isi semua, klik tombol bertuliskan Update my profile

Klik tulisam MY HOME untuk kembali ke home

Klik tombol yang bertuliskan Get Widget

Klik kotak di samping tulisan c_color_heading_bg kemudian pilih warna yg di sukai pada panel warna untuk
merubah warna background heading

Klik kotak di samping tulisan c_color_heading kemudian pilih warna yg di sukai pada panel warna untuk
merubah warna tulisan heading

Klik kotak di samping tulisan c_color_link_bg kemudian pilih warna yg di sukai pada panel warna untuk merubah
warna backround link

Klik kotak di samping tulisan c_color_link kemudian pilih warna yg di sukai pada panel warna untuk merubah warna tulisan link

Klik kotak di samping tulisan c_color_link kemudian pilih warna yg di sukai pada panel warna untuk merubah warna backround bottom

Tulis ukuran lebar yang sesuai dengan sidebar blog sobat (kalau mau di tempatkan di sidebar) contoh : 160

Di samping tulisan Show Screen Names ada dua radio button, sebaiknya pilih yes, pilih No juga boleh

Di samping tulisan Image Size ada dua radio button, sebaiknya pilih Full-Size, pilih half-Size juga boleh

Disamping tulisan Rows, pilih berapa baris yang ingin muncul (terserah)

Disamping tulisan Title, tulis kata yang sobat suka. contoh : pembaca terbaru, yang mampir, tamu blog ini, atau apa saja

Di bagian bawah, ada tulisan Stat Tracking Script, copy kode script yang di berikan lalu paste pada program notepad, silahkan save terlebih dahulu

Kembali ke bagian atas

Klik tombol bertuliskan Preview and Get Code

Copy seluruh kode yang berada di bawah tulisan Recent Readers Widget Display & Code, lalu paste ke dalam notepad

Silahkan klik tulisan Logout yang berada di bagian atas untuk keluar dari account sobat

Silahkan close window situs tersebut.

Langkah selanjutnya adalah memasukan kode yang sudah di copy pada notepad tadi kedalam blog kita, karena kode ini merupakan Java Script, maka cara memasukan kodenya sama dengan memasukan kode HTML, dan ini sudah saya bahas pada postingan terdahulu. Jika sudah lupa silahkan baca lagi di sini. Selesai.

Selamat menikmati photo-photo ganteng dan cantik dari tamu blog sobat.

Sabtu, 26 Mei 2007

Pasang Icon Yahoo ! Messenger

Menanggapi pertanyaan sobat takdir yang di ajukan melalui shoutbox beberapa waktu yang lalu,
beliau menanyakan tentang bagaimana cara menampilkan status online Yahoo ! Messenger pada halaman blog. Barangkali ada di antara para sobat juga berkeinginan yang sama namun belum mengetahui caranya,ada baiknya menyimak beberapa penjelasan yang akan saya utarakan.

Sebenarnya jika saya pikir-pikir, kayanya agak merasa malu menerangkan ini, mungkin bagi para sobat yang sudah beberapa kali mengunjungi blog ini hampir atau bahkan belum pernah melihat Icon Yahoo ! Messenger saya menyala tanda sedang online chatting. Memang benar saya sangat jarang sekali ber chatting ria di dunia maya, paling-paling kalau ada perlu dan itupun janjian terlebih dahulu baru saya chatting
(lho ko jadi cerita...kelamaan), oh iya lupa

Untuk menampilkan icon status online yahoo ! messenger, kita bisa memilih sebanyak 5 pilihan, yakni style id 1, style id 2, style id 3, style id 4, serta style id 5, Apa perbedaan dari style id ini? perbedaannya adalah ukuran dari icon itu sendiri, untuk melihat perbedaan style id, silahkan sobat perhatikan gambar berikut :

Style ID 1
Style ID 2
Style ID 3
Style ID 4
Style ID 5

masing-masing gambar mempunyai URL adddress sendiri yaitu :


http://opi.yahoo.com/online?u=YahooID&m=g&t=1   
 Untuk Style ID 1



http://opi.yahoo.com/online?u=YahooID&m=g&t=2   
 Untuk Style ID 2



http://opi.yahoo.com/online?u=YahooID&m=g&t=3   
 Untuk Style ID 3



http://opi.yahoo.com/online?u=YahooID&m=g&t=4   
 Untuk Style ID 4



http://opi.yahoo.com/online?u=YahooID&m=g&t=5   
 Untuk Style ID 5

itu tadi adalah URL address masing-masing Style ID, maka agar tampil menjadi gambar, kita harus menambah kode yaitu :


<img src="URL address">

Sehingga untuk menampilkan URL address di atas menjadi sebuah gambar, maka kodenya akan seperti ini :


 <img src="http://opi.yahoo.com/online?u=YahooID&m=g&t=1" border="0">  
 Untuk Style ID 1



 <img src="http://opi.yahoo.com/online?u=YahooID&m=g&t=2" border="0">  
 Untuk Style ID 2



 <img src="http://opi.yahoo.com/online?u=YahooID&m=g&t=3" border="0">  
 Untuk Style ID 3



 <img src="http://opi.yahoo.com/online?u=YahooID&m=g&t=4" border="0">  
 Untuk Style ID 4



 <img src="http://opi.yahoo.com/online?u=YahooID&m=g&t=5" border="0">  
 Untuk Style ID 5

Penambahan kode border="0", agar gambar yang di hasilkan terhindar dari adanya garis tepi atau bingkai. Tapi tentu saja kode diatas adalah hanya untuk menampilkan gambar icon YM nya dan belum bisa bereaksi walaupun sudah di klik oleh para pengunjung.

Ada beberapa pilihan yang bisa kita terapkan ketika pengunjung mengklik icon YM kita, yaitu :

Kirim Instant Messenger.

Kodenya sebagai berikut :


<a href="ymsgr:sendIM?YOURID">Kirim IM</a>

Sehingga untuk kode lengkapnya jadi seperti ini :


<a href="ymsgr:sendIM?YOURID"><img src="http://opi.yahoo.com/online?u=YourID&m=g&t=StyleID" border="0"></a>

Kirim Instant Messenger dengan pesan

Kodenya sebagai berikut :


<a href="ymsgr:sendIM?YOURID&m=YOUR+MESSAGE">Kirim IM</a>

Sehingga untuk kode lengkapnya jadi seperti ini :


<a href="ymsgr:sendIM?YOURID&m=YOUR+MESSAGE"><img src="http://opi.yahoo.com/online?u=YourID&m=g&t=StyleID" border="0"></a>

Menambahkan link ke chat room favorit

Kodenya sebagai berikut :


<a href="ymsgr:addfriend?YOURID">Masukan ke daftar teman sobat</a>

Sehingga untuk kode lengkapnya jadi seperti ini :


<a href="ymsgr:addfriend?YOURID"><img src="http://opi.yahoo.com/online?u=YourID&m=g&t=StyleID" border="0"></a>

Bagaimana jelaskan? biar lebih jelas lagi saya beri contoh.

Karena email saya adalah amn_tea@yahoo.co.id maka id saya adalah amn_tea, Sehingga kode untuk mengirimkan Instan Message dengan pilihan Style ID 2 adalah sebagai berikut :


<a href="ymsgr:sendIM?amn_tea"><img src="http://opi.yahoo.com/online?u=amn_tea&m=g&t=2" border="0"></a>

dan yang akan tampil seperti ini :

Icon di atas benar-benar Live, jadi tentunya icon nya akan menyala apabila saya sedang online di Yahoo ! Messenger .

Mudah-mudahan jelas. Selamat mencoba !

Jumat, 25 Mei 2007

Pasang Image pada judul Artikel

Image. Kalau berbicara masalah image/gambar, memang sangat seru dan menyenangkan.
Dengan adanya image maka blog kita akan tampil lebih menarik untuk di lihat,walaupun tentusaja apabila berlebihan akan berakibat buruk yaitu blog kita akan susah untuk di aksesoleh para pengunjung karena beban kapasitas data yang berlebihan dan bila itu terjadi maka para pengunjung akan menjadi malas untuk berkunjung. Memang segala sesuatu kalau berlebihan akan berakibat tidak baik, jalan keluarnya ya wajar-wajar saja Re....

Ok sobat, biar ga terlalu banyak berimpropisasi, langsung saja pada topik bahasan. topik yang akan kita bicarakan saat ini yaitu memasang image/gambar pada judul artikel. Artikel ini saya buat bagi yang senang akan pernak-pernik gambar,bagi yang tidak senang, ya sebagai pengetahuan saja lah.

Untuk memasang sebuah image pada judul artikel, ada beberapa tahapan yang harus dilakukan, antara lain :

Langkah pertama

Langkah pertama yang harus dilakukan adalah membuat image ataupun logo yang di inginkan. jika sobat mahir dalam program grafik & design semisal adobe photoshop ataupun coreldraw, ya tinggal buat saja yang nyentrik. Tapi kalau tidak bisa atau males bisa gunakan layanan di internet, ini sudah saya bahas pada artikel terdahulu,
silahkan klik disini untuk membacanya kembali.

Langkah kedua

langkah kedua yaitu sobat harus upload image atau logo tersebut, bisa ke blogger ataupun ke hosting lain. Misalkan biasanya saya menyimpan setiap image yang saya punya di www.Photobucket.com
untuk masalah upload gambarpun sudah saya bahas pada postingan yang lalu, kalau mau baca-baca lagi silahkan klik di sini.

Langkah ketiga

langkah ketiga adalah mengatur ukuran dari image tersebut agar sesuai dengan yang di inginkan, karena jika terlalu besar atau terlalu kecil maka tentu saja akan tidak enak dipandang mata. Misalkan saya mempunyai URL image seperti ini :


http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif

Sebagaimana kita ketahui untuk membuat sebuah image bisa online maka kita tambahkan kode :


<img src="URL image">

Sehingga kodenya akan jadi seperti ini :


<img src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif">

dan yang akan tampil adalah image dengan ukuran yang sebenarnya. contoh image tersebut adalah seperti ini :

tentu saja bila kita memajang image sesuai ukuran image yang aslinya, ini menjadi kurang enak di lihat jika di padukan dengan tulisan judul posting. Untuk mengakalinya kita bisa menambahkan beberapa atribut kedalam kode image tersebut, antara lain atribut width="..." untuk lebar,
height="..." untuk tinggi, dan border="..."
untuk bingkai, dan dalam hal ini yang dipakai adalah border dengan nilai 0 (nol) agar terhindar dari setting template yang
memakai nilai border. Saya ambil contoh kode image tadi jadi seperti ini :


<img src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif" width="45" hight="45" border="0">

sehingga image yang tadi akan berubah jadi seperti ini :

Bagaimana sudah jelaskan cara merubah ukuran gambar? jika sudah, kita beranjak ke langkah selanjutnya.

Langkah keempat

langkah keempat yaitu memasukan kode gambar yang sudah kita modifikasi tadi ke dalam kode template blog milik kita. Silahkan ikuti langkah-langkah berikut ini :

Untuk yang memakai template klasik :

Klik menu Template

Klik menu Edit HTML

Copy 'n paste seluruh kode HTML ke dalam notepad, ini dimaksudkan untuk mengurangi resiko apabila terjadi kesalahan pada saat kita melakukan editting kode template

Cari kode berikut pada kode HTML sobat :

<$BlogItemTitle$>

Edit

Find

<$BlogItemTitle$>

judul postingan

 
<img src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif" width="45" hight="45" border="0">&nbsp;&nbsp;<$BlogItemTitle$>

Klik tombol Preview untuk melihat perubahan yang dilakukan

Jika sudah OK, klik tombol Save Settings

Selesai

Maka setiap sobat posting artikel, secara otomatis image yang kita pasang tadi akan muncul tanpa harus di tuliskan kembali. Untuk contoh nyata silahkan lihat judul postingan ini.

Untuk yang memakai templat baru :

Catatan awal bagi yang memakai template baru yaitu setiap tag yang kita pakai harus selalu di tutup tidak seperti template klasik, contoh kode gambar yang tadi kita pakai adalah :

 
<img src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif" width="45" hight="45" border="0">

kode image tersebut tag nya harus ditutup dengan tag penutup :


</img>

Sehingga kode image jadi bertambah menjadi :

 
<img src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif" width="45" hight="45" border="0"></img>

Untuk memasukan kode gambar yang sudah di tambahi tag penutup tadi, silahkan ikuti langkah berikut :

Klik menu Layout

Klik menu Edit HTML

Klik tulisan Download Full Template

Silahkan save dulu template sobat, ini untuk back up data apabila terjadi kesalahan editting

Beri tanda centang pada kotak disamping tulisan Expand Widget Templates. Sekali lagi jangan lupa beri
tanda centang, sebab kalau tidak, nanti tidak akan sesuai dengan langkah selanjutnya

Tunggu beberapa saat sampai proses selesai

Cari kode berikut pada template sobat :



<a expr:href='data:post.url'><data:post.title/></a>


<b:else/>

Sisipkan kode gambar yang kita miliki diantara kode :



<a expr:href='data:post.url'> dan kode <data:post.title/></a>


<b:else/>



<a expr:href='data:post.url'> <img src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif" width="45" hight="45" border="0"></img> &nbsp;&nbsp;<data:post.title/></a>


<b:else/>

Klik tombol PREVIEW untuk melihat perubahan

bila sudah OK, klik tombol SAVE TEMPLATE

Selesai

Untuk melihat contoh template baru yang memakai image pada judul postingan,
silahkan klik di sini :

Bagaimana sudah di coba? mudah-mudahan saja berhasil. Selamat mencoba !

Kamis, 24 Mei 2007

Rabu, 23 Mei 2007

User Online Status

English Version

How many people is online at your blog? you know that or don't?
If you don't know how many people is online at your blog, you can use
a free tracker to know it. That is much site provide this service. Once
of them is www.histats.com. If you
use them tool, you can know how many people online at your blog, how
many people was visited to your blog, and any function. This is
once of example :

How to get it? please following the steps :

Please visit www.histats.com.

If you was on the histats site, click Register at the top tab.

Content the form with your information, such as email, password, your blog url and etc.

Click Continue button.

Choose the style of histats counter, click Choose a counter from this category.

Please mark the radio button beside the counter style you wanted.

Click Continue button at the bottom of page.

Click at the drop down menu, choose the category which to display at your counter. the choice is : visitor today,
Page views today, User online, Total visitors, and total page views. Choose empty
if you want not to display them.

Click Continue button.

Wait a moment, your counter is updating.

Until the process is done, copy your counter code and paste to the Notepad or
other text editor. Save into your computer.

Logout and close your internet browser.

Done. Now you has have a counter code to add at your blog.

Next step is add your counter code to your blog, please following the steps :

After entering the dasboard page , click Layout.

Click at Page Element tab. See the picture below :

Click at Add a Page element.

After emerging pop up window , Klik add to blog button for the things HTML/JavaScript. See the picture following :

Open your Counter code, copy and then paste into available column.

Click

Done. Please see the result.

Now you have a Counter, and you will know how many people online at your blog.

If you don't like with this counter, you can get at the other site, this
is several site provide the same service :

http://www.neoworx.net

http://www.webfooted.net

http://www.fastonlineusers.com

See you next time at my new tips. Happy blogging.

Versi Bahasa Indonesia

Berbicara masalah blog tools, kayanya saya jarang sekali membahasnya. Dari sekian banyak artikel yang telah saya posting, tercatat baru dua artikel yang membahas tentang blog tools. Untuk itu dalam postingan kali ini akan di bahas salah satu blog tools yang banyak di gunakan oleh para blogger yakni tool untuk mengetahui berapa banyak pengguna/user yang sedang online pada blog milik kita.

Disamping berfungsi sebagai blog tools, tool ini berfungsi juga sebagai aksesori blog yaitu untuk menghiasi halaman blog milik kita agar tampak lebih cantik dan menarik untuk dilihat oleh para pengunjung. Oleh karena alasan tadi banyak penyedia tool ini yang menawarkan tampilan-tampilan yang unik serta menarik di samping fungsi utamanya yakni melacak user yang sedang online di blog kita.

Ok, biar ga bosan baca intermezo yang terlalu panjang dan garing, langsung saja pada topik bahasan utama.Untuk mendapat tool user online status, salah satunya kita bisa mendapatkan dari www.Geovisite.com,
untuk langkah-langkahnya silahkan ikuti langkah berikut :

Silahkan buka www.geovisite.com

Klik tulisan Register yang berada di bawah gambar Geo counter Flash

Tulis alamat email sobat pada kotak kosong di samping tulisan Email

Tulis address blog milik sobat disamping tulisan URL. Contoh : http://rubrik-elektronik.blogspot.com

Tulis kata untuk login di samping tulisan Login (4/12). Contoh : amen24

Tulis password yang di inginkan disamping tulisan password (4/8). Contoh : kinoy

Pilih waktu yang sesuai dengan daerah sobat disamping tulisan Location. contoh :untuk daerah jakarta adalah Asia/Jakarta (GMT+7)

Pilih kategori yang sesuai dengan blog sobat di samping tulisan Category. Contoh : Internet

Pilih bahasa yang sesuai dengan blog sobat di samping tulisan Language of your site. Contoh : English (soalnya kalo indonesia ga ada,
belum di akui bo)

Pilih judul blog sobat disamping tulisan Title. Contoh : Rubrik Elektronik

Tulis deskripsi dari blog milik sobat pada kotak di samping tulisan Descriptioan. Contoh : All about Electronic, tips, maintenance, until how to
service the equipment of electronic

Klik tombol yang berlogo disket

Copy salah satu kode HTML yang dinginkan, antara lain : GEOGLOBE, GEOCOUNTER, GEOMAP lalu paste pada program notepad

Silahkan close window browser sobat

langkah selanjutnya adalah memasukan kode HTML tersebut pada kode HTML milik sobat, nah untuk langkah ini sudah saya bahas, silahkan klik di sini untuk membacanya

Selesai.

Agar sobat bisa menentukan pilihan mana yang harus di pilih apakah GEOGLOBE, GEOCOUNTER, atau GEOMAP ? Silahkan klik di sini untuk melihat secara nyata gambar dari ketiga pilihan tadi, tunggu beberapa saat,loadingnya lumayan sedikit lama. Kenapa tidak saya cantumkan di sini,alasannya yaitu agar halaman blog ini tidak terlalu berat untuk di akses makanya sengaja saya pisahkan.

Sebagai tambahan, situs penyedia yang lainnya sobat bisa kunjungi di :

http://www.neoworx.net

http://www.webfooted.net

http://www.fastonlineusers.com

http://www.histats.com

Selamat menikmati tool baru...

Selasa, 22 Mei 2007

Membuat Read More (2)

Update : saya telah membuat artikel yang lebih mudah untuk di praktekan dalam membuat read more, silahkan baca di sini!

Bagi para sobat yang menggunakan template baru tentu saja akan mengalami kebingungan ketika membaca tutorial terdahulu yang membahas tentang membuat menu Read more.. atau menu Baca selengkapnya.., karena tutorial tersebut memang di peruntukan bagi para sobat yang menggunakan template klasik. Nah bagi sobat yang menggunakan template baru dan ingin menggunakan menu Read more.. juga silahkan ikuti langkah-langkah berikut :

Klik Setting

Klik Formatting

Pada layar paling bawah, ada text area kosong disamping tulisan Post Template, isi tesxt area kosong tersebut dengan kode di bawah ini :

<div class="fullpost">




</div>

Klik tombol yang bertuliskan Save Settings

Langkah selanjutnya yaitu menambahkan kode pada template, silahkan ikuti langkah berikut :

Klik menu Dasboard

Klik menu Layout

Klik menu Edit HTML

Klik tulisan Download Full Template

Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template,
kita masih punya back up data untuk mengembalikannya seperti semula

Beri tanda centang pada kotak di samping tulisan Expand Widget Template, sekali lagi jangan lupa beri tanda centang dulu yah,
sebab kalau tidak, nanti akan tidak sesuai dengan langkah selanjutnya

Tunggu beberapa saat ketika proses sedang berlangsung

Silahkan Sobat cari kode berikut pada kode template milik sobat :


<div class='post-body'>

Copy kode HTML di bawah ini kemudian paste di bawah kode tadi


<b:if cond='data:blog.pageType == "item"'>



<style>.fullpost{display:inline;}</style>



<p><data:post.body/></p>



<b:else/>



<style>.fullpost{display:none;}</style>

Kemudian lihat kebagian bawah sehingga terlihat kode berikut ini :


<p><data:post.body/></p>

Copy kode HTML di bawah ini kemudian paste di bawah kode tadi


<a expr:href='data:post.url'>Read More......</a>



</b:if>

klik tombol bertuliskan Save Template
Selesai.

Cara Posting Artikel

Klik menu Posting

Klik menu Edit HTML, maka secara otomatis tampak kode yang telah kita setting tadi, yakni :


<div class="fullpost">




</div>

Tulisankan artikel yang ingin tampak pada blog sebelum kode :


<div class="fullpost">

Tulis keseluruhan sisa artikel sesudah kode di atas tadi dan sebelum kode :


</div>

Klik tombol bertuliskan PUBLISH POST

Klik tulisan Open New Window untuk melihat hasil dari postingan kita,
kemudian lihat apakah hasilnya sukses atau tidak. Jika tidak, mungkin ada bagian yang terlewatkan. Coba lihat kembali langkah diatas

Selamat mencoba !

Minggu, 20 Mei 2007

Tutorial HTML (2)

Melanjutkan posting yang terdahulu setelah terselang oleh beberapa artikel tentang blog tutorial maka kali ini saya akan membahas tentang tutorial HTML kembali.Sebelum menginjak kepada topik bahasan ada baiknya para sobat mengikuti bahasan kali ini dengan langsung memfraktekannya agar lebih cepat mengerti. Caranya siapkan terlebih dahulu program notepadnya lalu tuliskan kode HTML seperti dibawah, kemudian apabila telah selesai mempraktekan simpan file tersebut dengan extensi .htm (dot htm). Contoh file : latihan.htm kemudian jalankan dengan internet explorer. silahkan tulis kode-kode berikut :

<html>

<head>

<title>latihan</title>

<body>

Tulis apa-apa yang saya terangkan di sini !

</body>

</html>

Kita langsung ke topik bahasan aja ya biar ga bosan.

Elemen dasar HTML

Ada beberapa elemen dasar HTML yaitu :

Elemen Blok Level

Elemen blok level yaitu tingkatan besarnya hurup yang akan di tampilkan pada browser. Elemen blok level yang paling sering di gunakan adalah Heading (h1 sampai h6).Tag heading
ini ini berupa <h1>...</h1> sampai dengan <h6>...</h6>.

Contoh :


<h1>Ini heading 1</h1>


<h2>Ini heading 2</h2>


<h3>Ini heading 3</h3>


<h4>Ini heading 4</h4>


<h5>Ini heading 5</h5>


<h6>Ini heading 6</h6>

Hasilnya akan seperti ini :

Ini heading 1

Ini heading 2

Ini heading 3

Ini heading 4

Ini heading 5

Ini heading 6

Sebenarnya ada cara lain untuk menampilkan berbagai ukuran hurup, yakni memakai
tag <font size="...">.....</font>.

Contoh :

<font size="1">Ini font size 1</font>

<font size="2">Ini font size 2</font>

<font size="3">Ini font size 3</font>

<font size="4">Ini font size 4</font>

<font size="5">Ini font size 5</font>

<font size="6">Ini font size 6</font>

<font size="7">Ini font size 7</font>

Hasil yang akan tampil seperti ini :

Ini font size 1

Ini font size 2

Ini font size 3

Ini font size 4

Ini font size 5

Ini font size 6

Ini font size 7

Itu adalah contoh untuk menampilkan huruf dalam berbagai ukuran.

Untuk kesempatan kali ini, kaya nya udah dulu sobat soalnya belum mandi nih, mo berangkat kerja

hiii.....pantesan dari tadi ada yang bau aneh

Nantikan seri berikutnya!

Jumat, 18 Mei 2007

Buat Logo & Image Button

Bagi para sobat yang sudah mahir menggunakan program desain grafis semisal adobe photoshop ataupun coreldraw serta teman-temannya yang lain, membuat sebuah logo bukanlah sebuah pekerjaan yang sulit, dan mungkin tutorial ini menjadi tidak menarik untuk di baca. But barangkali ada sebagian dari para sobat sekalian yang satu nasib dengan saya, sebenarnya saya pun boleh di katakan tidak awam banget dengan program-program desain grafis tersebut, akan tetapi tak cukup hanya menguasai tentu saja di perlukan suatu daya kreasi atau imajinasi yang tinggi untuk menciptakan sebuah logo.

Nah kalau ada diantara sobat sekalian yang senasib dan sepenanggungan seperti saya (lho ko jadi ngawur ngomongnya)jangan dulu berkecil hati, seperti biasa ada pepatah mengatakan banyak jalan menuju Roma ((irama)kaya postingan dulu...dah basi)untuk membuat logo kita bisa memakai jasa situs di internet, salah satunya yaitu cooltext.com, Silahkan ikuti langkah-langkah berikut ini :

Silahkan buka alamat http://cooltext.com
Lalu klik tulisan Design a Logo
Klik gambar contoh logo yang sobat sukai
Tulis tulisan yang ingin di jadikan logo di sampimg tulisan Logo Text. Misal : Blog Tutorial
Tulis ukuran yang di inginkan di samping Tulisan Text Size. Misal : 50
Klik logo warna-warni disamping kotak yang ada tulisan Text Color untuk memilih warna tulisan (text).silahkan pilih warna yg sobat sukai
Pilih format image disamping tulisan file format. sebaiknya .JPG atau .GIF
Klik tombol yang bertuliskan Render Logo Design
Tunggu beberapa saat ketika proses pembuatan logo berlangsung
Lihat hasil logo, sudah cocok apa belum? bila belum cocok, klik tulisan Edit this logo ulangi langkah diatas, rubah yang sobat inginkan. Jika sudah cocok, klik tulisan Download Image untuk kita simpan di PC kita
Selesai. Sobat sudah mempunyai sebuah logo.

Agar logo yang kita buat tadi bisa tampil di blog, sobat harus upload gambar tersebut ke blogger.com atau melalui situs lain. Tapi saya lebih suka menyimpannya di situs lain misal www.photobucket.com.

Untuk proses upload di photobucket.com, silahkan ikuti langkah-langkah berikut :

Silahkan buka alamat http://www.photobucket.com,
Jika belum terdaftar di situs ini, silahkan daftar dulu (gratis bo) dengan meng klik tombol yang bertuliskan Join Now pada sudut kanan atas layar
Sekarang saya asumsikan sobat sudah terdaftar (pastilah cara daftarnya bisa kan)
Silahkan Sign In dengan Id sobat
Bila sudah berada pada halaman Account sobat, Klik tombol yang bertuliskan Browse... Silahkan pilih logo yang tadi di buat
Klin tombol yang bertuliskan Upload
Tunggu beberapa saat ketika proses upload berlangsung
Setelah upload selesai, akan di perlihatkan gambar logo serta kode HTML nya
Copy kode HTML yang ada di sebelah tulisan URL Link. Paste pada program notepad
Silahkan klik tulisan Log Out untuk keluar dari account sobat. tutup layar browser sobat

Nah sekarang sobat tinggal memasukan kode gambar tadi ke blog ke blog sobat, cuma ada sedikit kode yang harus di tambahkan, karena kode tadi baru berupa Link Image saja. Contoh kode link image : http://i162.photobucket.com/albums/t253/rohman24/logoblogtutorial.jpg. Disini sobat harus menambahkan kode <img src="Link URL logo">, sehingga kode tadi menjadi seperti ini :

<img src="http://i162.photobucket.com/albums/t253/rohman24/logoblogtutorial.jpg">

Maka contoh hasilnya akan seperti ini :

Untuk cara memasukan kode HTML kedalam blog sudah sering di bahas, jika lupa silahkan klik di sini.

Sebagai tambahan, kode HTML di atas adalah kode untuk menampilkan image dengan ukuran yang sebenarnya. Apabila sobat ingin memperbesar atau memperkecil image tersebut, sobat bisa menambahkan beberapa atribut ke dalam kode HTML nya. Contoh : image tadi ingin saya tampilkan dalam ukuran 100px X 40px , maka kode tersebut menjadi seperti ini :

<img src="http://i162.photobucket.com/albums/t253/rohman24/logoblogtutorial.jpg" width="100" height="40" alt="ini contoh saja">

sedikit clue, kode width="..." yaitu untuk ukuran lebar image, jadi untuk memperbesar atau memperkecil image, sobat tinggal menambah atau mengurangi nilainya. kode height="..." yaitu untuk ukuran tinggi image, sobat tinggal menambah atau mengurangi nilainya. Untuk alt="..." yaitu untuk menampilkan tulisan ketika mouse berada pada image tersebut.

Sebagai contoh, hasil dari kode diatas adalah sebagai berikut, silahkan sorot image tersebut untuk melihat efek kode alt="..." :

Bagaimana sudah bisa kan? pasti bisa, kan sudah di coba. Sekarang bagaimana cara membuat image button? langkahnya sama saja dengan langkah-langkah di atas, cuma pada saat berada di situs cooltext.com yang sobat klik adalah tulisan Desiggen a Button bukan Design a Logo, contoh image button :

Ok sobat, selamat menikmati hasil karyanya

Senin, 14 Mei 2007

IE + FireFox dalam satu komputer

Topik ini saya tulis bermula dari pengalaman saya beberapa bulan yang lalu. Sekarang saya mau flash back sebentar mudah-mudahan tidak membosankan. Ceritanya begini para sobat, di kantor tempat saya bekerja sekarang nih mempunyai beberapa buah komputer, yaitu buat orang-orang bagian akunting, resepsionis, teknisi, serta si bos sendiri. Ya kalo di itung-itung ada 8 buah komputer. Dari dulu, yang namanya browser internet pasti saya selalu memakai Internet Explorer dari Microsoft, tidak pernah browser yang lain.

Saat itu pekerjaan rada dikit, tentunya saya bisa sedikit bersantai ria. Iseng-iseng
saya pinjem tuh kompi nya si mba tukang akunting temen saya, mau liat technorati barangkali ada yang nge link baru ke blog saya.
setelah di buka ntuh kompi, eh saya lihat ada dua browser dalam ntuh kompi yaitu Internet Explorer plus Mozilla FireFox. Wah nyobain ah pake FireFox, katanya sih lebih cepat dan aman di banding dengan Internet Explorer yakni si FireFox ini lebih
kebal terhadap virus-virus semacam Trojan dan teman-temannya.

Aku buka deh langsung ntuh si FireFox, hasilnya lumayan emang rada cepet sih, tapi kayanya rada - rada ada yang beda pada tampilan gambarnya, aku hiraukan saja ga mau mikir panjang-panjang and langsung aja ke www.technorati mau cek yang nge -link ke blog saya. Sesudah di cek, benar saja ada yang pasang link baru tanpa memberi tahu, aku langsung aja di klik ntuh linknya, betapa kagetnya daku saat itu, lho ko gambarnya begini acak-acakan nih blog ada gambarnya yang kepinggir, melorot dan lain sebagai, pokoknya pemandangan yang tidak mengasikan, apa pemilik blog ini ga sadar
apa, blognya ancur begitu. Setelah kejadian yang kurang mengenakan tadi, buru-buru deh aku lihat blog ku, takutnya kaya kejadian tadi. Hasilnya sedikit melegakan, wah untung blogku tidak berantakan, cuma ada sedikit perbedaan saja. Karena penasaran, aku tutup tuh si FireFox dan langsung buka browser pake IE, dan aku balik lagi ke blog yang berantakan tadi, dan ternyata hasilnya sungguh mengherankan juga, yang tadinya aku lihat di FireFox sangat berantakan kalo di lihat pake IE sangat tersusun rapi dan menarik.

Itu tadi pengalaman pertama, pengalaman yang kedua, aku pake IE seperti biasa. yah yang namanya blogger musti rajin-rajin blog walking biar banyak temen. ceritanya saya mampir di suatu blog, wah ini blog berantakan banget (menurut saya lho). Trus baca-baca tuh isi blog, eh ada sedikit artikel dari sang pemilik blog itu sendiri, sedikit penggalan isi artikel tersebut kira-kira ada kata-kata begini :
Buset deh, kebiasaan pake FireFox pas dilihatdi IE, blog ku ancur begini ya.

Menanggapi dua pengalaman tadi, saya mempunyai kesimpulan bahwa sebaiknya bagi para blogger mempunyai banyak browser internet dalam satu komputer, ini tentunya untuk memaksimalkan hasil dari blog kita, terutama bagi para sobat yang blognya berupa blog untuk bisnis, satu pengunjung ke blog sobat, berati satu peluang untuk mendapatkan keuntungan. Nah jika blog para sobat tidak menarik karena sebab tadi dari
perbedaan pemakaian browser, tentunya jangankan mau membaca artikel penawaran bisnis dari sobat baru sampaipun langsung kabur. Ingat, di luar sana ribuan orang atau bahkan jutaan orang memakai browser yang berbeda dengan kita, maka itu tadi sobat harus mempunyai banyak browser pada komputer sobat, minimal dua browser paling terkenal di dunia yakni Internet Explorer dan Mozilla FireFox.

Bagi para sobat pengguna template buatan bukan dari blogger sendiri, coba cek blog sobat, barangkali blog sobat berantakan kalau di lihat di browser lain. Bagi para sobat pecinta program HTML text berjalan <marquee>, hati-hati karena program ini tidak di mengerti oleh FireFox, jadi jika sobat menyimpan text terlalu banyak dalam marquee, jangan-jangan blog sobat jadi melorot atau melebar kesamping karena kelebihan quota space. Bagi yang suka pake kode <BLINK> untuk mengedipkan hurup buat narik perhatian pengunjung, kode sobat tidak di mengerti oleh IE tapi di mengerti oleh FireFox. Tentunya dari masing-masing Browser ada kelebihan dan kekurangannya, ya pandai-pandailah kita mensiasatinya.

Kalau di baca-baca, kayanya artikel kali ini bukan blog tutorial ya, lebih cenderung ke tips gitu. biarin aja ya, supaya ga bosen baca tutorial terus, cari yang beda gitu. Oke, thanks ya sobat, selamat mendownload FireFox nya.

Minggu, 13 Mei 2007

Membuat foto animasi

Lagi-lagi saya berbicara tentang animasi, memang dengan animasi bisa bikin hidup
jadi hidup ( kaya iklan aja ). Ya dalam kesempatan kali ini akan coba di bahas tentang
bagaimana cara membuat animasi gambar ataupun foto. Bagi para sobat (mulai sekarang saya
akan membiasakan diri menyebut anda menjadi sobat, biar lebih familier ya) yang sudah
terbiasa menggunakan program animasi semisal MacroMedia Flash Player ataupun teman-temannya
sudah barang tentu bukan hal yang wah ataupun aneh, tapi bagi sekelompok orang seperti saya ini,
membuat animasi foto adalah suatu hal yang sangat sulit sekali.

Adakah diantara para sobat blogger yang seperti saya? jika jawabannya ada ya kita emang senasib (hiduplah senasib),
tapi jangan dulu patah semangat sobat blogger, pepatah bilang banyak jalan menuju rhoma (irama).. dalam hal inipun
sama ada jalannya yakni kita bisa menggunakan jasa situs-situs pembuat animasi. Di internet buaanyak
sekali situs pembuat animasi foto, jumlahnya ribuan atau bahkan jutaan. Nah sebagai contoh yaitu http://www.slide.com.
Untuk membuat sebuah foto animasi di slide.com, silahkan ikuti langkah-langkah berikut :

Silahkan buka situs www.slide.com

Langkah pertama yaitu sobat harus daftar dahulu pada situs tersebut

Klik tulisan Sign Up untuk melakukan pendaftaran (daftar gratis)

Masukan alamat email sobat pada kolom yang disediakan. isi juga password yang diinginkan

Jika sudah, silahkan klik tombol sign Up, dan otomatis sobat sudah masuk ke halaman account sobat

Langkah selanjutnya adalah melakukan pembuatan animasi

Klik style, untuk memilih gaya dari animasi

klik skin, untuk memilih bingkai animasi

klik Size untuk memilih ukuran

Klik Tombol Select Image, lalu masukan foto/image yang ingin sobat masukan

klik tombol Upload untuk melakukan proses upload foto

Jika proses upload selesai, klik tombolSave

Copy kode HTML yang di berikan, lalu paste pada program notepad

Klik tulisan Log Out untuk keluar dari situs tersebut. Silahkan tutup halaman browser

Langkah selanjutnya adalah memasukan kode HTML animasi tersebut ke dalam blog sobat, nah untuk cara memasukan kode HTML sudah sering saya bahas
pada postingan terdahulu, jika lupa silahkan klik di sini

Contoh gambar animasi :

Ada pula contoh animasi dari http://www.picturetrail.com :

Get Your Own!

Atau para sobat bisa juga daftar di http://www.flickr.com

Selamat mencoba !

Sabtu, 12 Mei 2007

Tutorial HTML

Bagi kawan-kawan yang sudah pernah berkunjung ke blog ini, mungkin tahu bahwa hari ini blog ku ada banyak perubahan, yo'i.. yang tadinya sangat anti gambar sekarang tiba-tiba jadi lautan gambar, coba saja lirik kebawah, tadinya banner yang terpasang hanya beberapa buah saja tapi sekarang jadi ngebaris kaya tentara mau berangkat perang. Yups..tadinya cuma iseng-iseng masukin banner dari teman-teman blog lain, eh keterusan.. ya udah sekarang semua gambar dari feedburner.com aku masukin semua..sekalian biar rame..

Dan mulai hari ini topik bahsan pun akan ada sedikit perubahan, yakni ga cuma ngebahas blog tutorial doank tapi ngebahas juga soal HTML, ini saya lakukan karena ada diantara sahabat saya yang hoby obrak-abrik template blognya tapi masih menemui kesulitan karena masih bingung soal perintah-perintah HTML, ya ngga jauhlah dari saya yang setiap edit HTMl musti inga inga dulu perintah HTML nya ma'lum baru belajar jadi belum pada hapal.

Baiklah sobat, kita kembali ke (laptop) bahasan utama artikel ini yaitu mengenai HTML.

Apa itu HTML ?

HTML (Hypertext Markup Language)adalah merupakan suatu standar bahasa program yang di gunakan untuk menampilkan dokumen-dokumen web. (itu menurut saya bro, kalo salah ya mohon di maafkan).

Mengenal Tag HTML

Perintah-perintah dalam HTML biasa di sebut dengan TAG. TAG ini kebanyakan mempunyai pasangan, yakni TAG pembuka dan penutup. Misal <b>...</b>, <i>...</i> dan lain sebagainya, dan TAG yang mempunyai pasangan ini juga bersifat Override yakni dapat menimpa fungsi TAG sebelumnya. Contoh : sebuah teks yang sudah di buat miring oleh tag <i> ... </i>, dapat di timpa oleh tag <b> ... </b> sehingga akan melahirkan dua hasil perintah yang berbeda sekaligus yakni kombinasi hurup miring dan hurup tebal, contoh :

ini hanya <b><i>contoh </i></b> saja sobat

yang akan tampil di browser adalah :

ini hanya contoh saja sobat

di samping TAG yang mempunyai pasangan, ada juga tag yang tidak memerlukan pasangan, misal TAG <hr> , <br> , ataupun <input>

Sebuah Tag tidaklah sensitif terhadap Case (hurup besar atau kecil), jadi mau di tulis hurup besar ataupun huruf kecil akan menghasilkan fungsi yang sama. Sebagai contoh : fungsi Tag <b>....</b> akan sama dengan Tag <B> ....</B>.

Struktur dokumen HTML

Sebuah dokumen HTML terbagi kedalam tiga bagian utama, yakni HTML, HEAD, serta BODY.

HTML

Sebuah dokumen HTML haruslah diawali dengan tag <HTML> dan di tutup dengan </HTML>, Tag ini adalah sarana untuk memberikan informasi kepada browser bahwa apa-apa yang di tulis di dalamnya merupakan sebuah dokumen HTML.

HEAD

Bagian header dari sebuah dokumen HTML diawali oleh tag <HEAD> dan di tutup oleh tag </HEAD>, dan di dalam header di isi pula dengan tag title yakni judul dari dokumen, tag title ini di tulis dengan tag pembuka <TITLE> dan di tutup oleh tag </TITLE>, contoh : title dari blog ini adalah Blog Tutorial jadi untuk tittle nya di tulis seperti ini <TITLE> Blog Tutorial </TITLE>, akan tetapi di blogger.com untuk penulisan title tidak harus di tulis langsung pada tag title karena sudah di otomatisasi, alamatnya yaitu <$BlogPageTitle$>. Dalam pengisian title ini seyogya nya jangan asal-asalan, karena title merupakan hal pertama yang di lihat oleh search engine.

Di dalam Header pun di isi pula dengan tag META, tag META ditulis dengan tag <META>, tag META ini biasanya memuat informasi mengenai dokumen HTML. dengan tag META kita bisa menentukan keyword, content,refresh, dan lainnya sebagainya. Khusus tentang tag META keyword akan di bahas lebih lanjut pada postingan selanjutnya.

BODY

Semua dokumen HTML yang di simpan di dalam BODY semisal teks, image, link, dan lain sebagainya akan di tampilakan dan bisa di lihat di dalam browser.

Ok sahabat, mungkin pengenalan pertama mengenai HTML di cukupkan sekian dulu dan akan di teruskan pada postingan-postingan selanjutnya

Catatan Galung

Kamis, 31 Mei 2007

Template baru VS Template Klasik

Senin, 28 Mei 2007

Menu Navigasi dengan CSS

Minggu, 27 Mei 2007

Daftar Mybloglog

Sabtu, 26 Mei 2007

Pasang Icon Yahoo ! Messenger

Jumat, 25 Mei 2007

Pasang Image pada judul Artikel

Kamis, 24 Mei 2007

Blogroll Alternatif

Blogroll

Rabu, 23 Mei 2007

User Online Status

Selasa, 22 Mei 2007

Membuat Read More (2)

Minggu, 20 Mei 2007

Tutorial HTML (2)

Ini heading 1

Ini heading 5

Ini heading 6

Jumat, 18 Mei 2007

Buat Logo & Image Button

Senin, 14 Mei 2007

IE + FireFox dalam satu komputer

Minggu, 13 Mei 2007

Membuat foto animasi

Sabtu, 12 Mei 2007

Tutorial HTML