bujangGilo

Menuliskan Nama pada Taskbar

2010-10-01T09:21:00.000-07:00

Pengen nama Anda tertulis pada Taskbar Windows ? Anda bisa melakukannya !

Pertama, klik menu Start/Settings/Control Panel.
Setelah berada pada Control Panel, klik ganda icon Regional Settings.
Pindah ke tab Time.
Pada kolom AM symbol dan PM symbol, ketikkan nama Anda, tapi maksimal 8 karakter termasuk spasi.

Javascript untuk pemula bagian 2

2010-06-10T02:33:00.023-07:00

Beberapa Syntax penting untuk javascript

Suatu program mempunyai syntax yang khas yang kadang berbeda dengan program lainnya, dimana dengan perbedaannya tersebut seseorang dapat mengetahui dengan jelas menggunakan compiler apa suatu code tertentu. Setelah sebelumnya kita belajar sedikit tentang javascript, sekarang saatnya mengenal beberapa Syntax penting dari javascript, berikut syntax tersebut:

// : Menunjukkan bahwa semua baris sesudah tanda tersebut tidak akan diperhitungkan oleh program. Atau tanda itu digunakan untuk komentar.

/* awal dari komentar, tanda ini digunakan untuk komentar yang lebih dari satu baris.

*/ Akhir dari komentar lebih dari satu baris. Tanda ini juga bukan hanya digunakan untuk komentar tetapi juga untuk code yang kita tidak ingin menghapusnya secara permanen dan suatu saat akan kita gunakan lagi.

Curly bracket ({ dan }) digunakan untuk block dari code. Hal ini akan kita lihat banyak pada saat belajar if dan for serta fungsi.

Semicolon (;) digunakan untuk akhir baris dari suatu perintah, walaupun tidak harus tetapi sebaiknya selalu gunakan semicolon.

Berikut contoh dari penggunaan syntax di atas.

<script type="text/JavaScript">
// Satu baris komentar biasanya digunakan untuk menjelaskan code apa di bawahnya
/*
Multiline komentar
Biasanya digunakan untuk komentar ataupun code yang sedang diuji contoh Code di bawah tidak akan dijalankan oleh browser
document.write("Pelajaran pertama dari javascript");
*/

//Contoh penggunaan Curly bracket dan semicolon setelah satu baris perintah
for (var j = 1; j <= 1000; ++j) {
     document.write('Angka ke = '+ j+'<br/>');
}
</script>

Menu Navigasi dengan Teknik CSS Sprites

2010-06-10T02:33:00.022-07:00

Teknik CSS Sprites ini sangat berguna untuk template yang menggunakan banyak image. Dengan teknik ‘CSS Sprites’ ini akan mempercepat “loading” dan “http request” pada image, sebab beberapa image di template tersebut dikombinasikan dalam satu file image, oleh karenanya image tersebut hanya dipanggil satu kali.

Sebelum lanjut, lihat demo penggunaan teknik CSS Sprite pada menu navigasi. Arahkan mouse anda dan klik, untuk melihat hasil dari teknik tersebut.

Apabila anda menggunakan Browser Firefox, pada demo tersebut, klik kanan pilih view page info, kemudian klik media, untuk melihat image yang digunakan pada menu tersebut.

Penjelasan Teknik CSS Sprites dalam Membuat Menu Navigasi

Sesuai demo diatas, berikut ini tahapan pembuatannya:

1. Image Menu Navigasi

Gambar dibawah ini adalah image yang digunakan pada demo diatas. Gambar tersebut adalah gabungan dari beberapa image yang dibutuhkan untuk menu navigasi, yang nantinya dipilah-pilah dengan teknik CSS.

Berikut ini penjelasan gambar tersebut:

Gambar yang akan difungsikan sebagai menu navigasi ini terdiri dari tiga bagian, yaitu ‘home‘, ‘about‘ dan ‘contact‘. Masing-masing bagian tersebut memiliki lebar yaitu 80 pixel dan tinggi 30 pixel. Lebar dan tinggi image tersebut yang penting diperhatikan, sebab itu menjadi penentu dalam pembagiannya dengan teknik CSS.

Dari tiga bagian menu tersebut, kemudian dibagi lagi berdasarkan fungsinya yaitu untuk link hover dan link focus, yang dibedakan berdasarkan warna, sesuai gambar diatas.

2. Kode HTML Menu Navigasi

Kode HTML yang digunakan untuk menu navigasi ini ada tiga bagian, seperti dijelaskan pada gambar diatas, yaitu home, about dan contact. Maka penulisan kode HTML nya sebagai berikut:

<ul id="menu">
  <li class="home"><a href="#">Home</a></li>
  <li class="about"><a href="#">About</a></li>
  <li class="contact"><a href="#">Contact</a></li>
</ul>

Yang perlu diperhatikan pada kode html diatas, bahwa tiap menu tersebut menambahkan atribut seperti class(lihat kode yang berwarna biru diatas). Contoh pada menu ‘home’ diatas menggunakan class="home". Penambahan atribut tersebut yang nanti akan berfungsi untuk memilah bagian image tersebut di kode CSS.

3. Kode CSS Menu Navigasi dengan Teknik Sprites

Kode CSS ini adalah bagian penting dari teknik sprites, untuk memilah-milah image tersebut. Kata kunci dari teknik ini adalah pada property background position.

Sebelum masuk ke kode CSS keseluruhan. Berikut ini contoh penjelasan dari teknik ini. Misal pada menu ‘home‘, <li class="home"><a href="#">Home</a></li>, maka CSS nya sebagai berikut:

li.home a{
   width:80px;
   height:30px;
   display:block;
   text-indent:-9999px;
   background: url(http://lh5.ggpht.com/_dfnTVAxeWMI/S1EmPT3qI_I/AAAAAAAADFk/7x0VpNq7xjg/menu.png) 0 top no-repeat;
   }

Penjelasan kode CSS diatas:

width:80px; dan height:30px;, seperti pada penjelasan gambar diatas, bahwa lebar dan tinggi masing-masing image tersebut, seperti ‘home’, lebar 80 pixel dan tinggi 30 pixel.

display:block;, sebagai penegas untuk mem-block image tersebut yang memiliki tinggi dan lebar.
text-indent:-9999px;, untuk menyembunyikan text ‘home’, sebab dalam image tersebut sudah memiliki text home.

Sedangkan, background: url(http:../menu.png) 0 top no-repeat; :
url(http:../menu.png) ini adalah alamat image yang digunakan.
0 top, kode yang berwarna biru tersebut adalah value dari property background position dan ini kunci untuk memilah gabungan gambar tersebut yang memiliki tinggi dan lebar, seperti penjelasan diatas.
no-repeat;, ini adalah value dari property dari background-repeat, yang maksudnya image tersebut tidak diulang penggunaannya.

Pada background position 0 top itu bisa juga di tulis 0 0 atau juga left top, artinya image tersebut berada pada bagian kiri (senilai 0) atas (senilai 0). Jadi nilai pertama itu adalah koordinat x dan kedua adalah y. Ingat, angka atau value dari background position ini terkait perhitungan lebar dan tinggi image masing-masing menu diatas.

Kemudian untuk link:hover pada menu home kita cukup memanggilnya sebagai berikut:

li.home a:hover {
   background-position:0 -30px;
   }

background-position:0 -30px;, artinya memanggil image dibagian kiri (senilai 0) atas (senilai -30px). Angka -30px tersebut diperoleh karena masing-masing gambar memiliki tinggi 30 pixel, maka tempat image untuk hover (warna urutan kedua digambar atas) tersebut berada di -30 pixel dan untuk link focusnya nanti adalah senilai -60 pixel.

Anda dapat mempelajari dan menguji coba mengenai property background position ini di CSS background-position Property.

Maka keseluruhan kode CSS untuk menu navigasi dengan teknik “CSS Sprites” ini adalah:

ul#menu {
     /* isi sesuai penempatan atau posisi menunya */
  }

ul#menu li {
  float:left;
  margin-right:10px;
   list-style:none;
  }
ul#menu li a{
   width:80px;
   height:30px;
   display:block;
   text-indent:-9999px;
   background: url(http://lh5.ggpht.com/_dfnTVAxeWMI/S1EmPT3qI_I/AAAAAAAADFk/7x0VpNq7xjg/menu.png) 0 0 no-repeat;
   }
ul#menu li.home a{
   background-position:0 0;
}
ul#menu li.home a:hover {
   background-position:0 -30px;
   }
ul#menu li.home a:focus {
   background-position:0 -60px;
   }

ul#menu li.about a{
   background-position:-80px 0;
   }
ul#menu li.about a:hover {
   background-position:-80px -30px;
   }
ul#menu li.about a:focus {
   background-position:-80px -60px;
   }

ul#menu li.contact a{
   background-position:-160px 0;
   }
ul#menu li.contact a:hover {
   background-position:-160px -30px;
   }
ul#menu li.contact a:focus {
   background-position:-160px -60px;
   }

Penutup

Sip. Demikian keseluruhan penjelasan mengenai Menu Navigasi ini dengan tekniks CSS Sprites. Untuk pengembangannya lebih lanjut anda dapat mempelajari di artikel berikut:

CSS Sprites: What They Are, Why They’re Cool, and How To Use Them

CSS Sprites: Image Slicing’s Kiss of Death

The Mystery Of CSS Sprites: Techniques, Tools And Tutorials

Apabila anda kesulitan membuat image CSS Sprites ini, bisa menggunakan generator berikut:

CSS Sprite Generator 1

CSS Sprite Generator 2

Logika Pemograman Dasar Part III

2010-06-10T02:33:00.021-07:00

Javascript untuk pemula bagian 1

2010-06-10T02:33:00.019-07:00

Pendahuluan Javascript

Para blogger ataupun web designer pastinya mengenal javascript. Tapi masih banyak diantara kita hanya mengenal javascript dengan cara copy paste script ataupun hanya menggunakan plugin yang sudah jadi. Bahkan diantara para blogger dan webdesigner tidak tahu apa perbedaan dari raw javascript dan jquery. Javascript yang dijelaskan dalam tutorial ini adalah bahasa pemrograman yang terdapat dalam hampir semua web browser (firefox, safari, IE, chrome dan lain-lain), jadi kita tidak perlu download atau install atau membeli license untuk menggunakan dan mengembangkannya. Dan juga Javascript yang dijelaskan disini nanti hanya javascript yang bekerja pada client side.

Penjelasan tentang client-side programming :

Hanya dapat dilihat hasilnya setelah dibuka oleh web browser pada komputer pengguna.

Saat ini belum dapat dibaca oleh search engine (search engine hanya bisa membaca script tapi bukan hasilnya).

Yang dibaca oleh browser adalah script bukan output berupa html. Setelah browser membaca script kemudian browser akan execute script yang kemudian menghasilkan output berupa html atau hal lainnya sesuai yg diinginkan oleh pembuat script.

Cara Membuat script dengan javascript

Kebutuhan dalam membuat script menggunakan javascrript :

Web browser (sangat disarankan firefox, karena nantinya akan diajarkan menggunakan firefox untuk debugging).

Text editor (sangat disarankan menggunakan Notepad++)

Cukup dibutuhkan dua program tersebut diatas untuk belajar javascript, sangat mudah bukan ?

Berikut syntax yang digunakan untuk menulis javascript

<script type="text/javascript">
   // Script anda disini
</script>

pada syntax diatas anda dapat menulis script anda pada tulisan "Script anda disini". Agar tidak membingungkan yang baru belajar web programming saat ini saya tidak membahas tentang cara penulisan untuk HTML, strict XHTML atau lainnya. Sementara ini saya akan menerangkan secara sederhana saja. agar mudah difahami dan bisa dicoba.

Kelebihannya lagi tentang javascript adalah anda dapat membuat secara offline tidak perlu koneksi internet ataupun harus upload terlebih dahulu.

Baiklah untuk memulai pelajaran tentang javascript coba kita lihat code berikut ini

<script type="text/javascript">
    document.write("Pelajaran pertama dari javascript");
</script>

Demo Hasil

Cara membuat dalam file tersebut sebagai berikut :

Buatlah file html misal demo.html atau dengan notepad++ "new file" kemudian "save as" file menjadi demo.html (ingat akhiran dari file adalah htm atau html).

Isikan file tersebut dengan script di atas.

Dari code di atas menghasilkan output berupa tulisan "Pelajaran pertama dari javascript"

fungsi yang digunakan adalah document.write() untuk memberikan output pada browser apa yang kita tulis dalam kurung tersebut.

untuk mengakhiri satu baris script dari javascript dengan tanda semicolon (;)

Kenapa kita harus repot-repot menggunakan javascript kalau untuk menulis "Pelajaran pertama dari javascript" dalam html file cukup ditulis itu saja ?

Demo hanya menggunakan HTML, perhatikan link demo html dengan link demo javascript apakah hasilnya sama ?

kalau ingin melihat source file dari file itu bisa lihat dengan cara klik kanan pada browser dan pilih "View Page Source" maka akan terlihat perbedaan isinya tetapi hasilnya sama.

Untuk menunjukkan kemudahan penggunakan javascript mari kita lihat apakah anda sanggup menulis secara html tulisan berikut ini ? (angka tersebut ditulis berurutan sampai 1000)

Angka ke = 1
Angka ke = 2
Angka ke = 3
Angka ke = 4

.

.

Angka ke = 1000

Cukup lama mengetik content seperti di atas apabila menggunakan html, tetapi dengan menggunakaan javascript cukup beberapa baris berikut :

<script type="text/javascript">
    for (var j = 1; j <= 1000; ++j) {
        document.write('Angka ke = '+ j+'<br/>');
    }
</script>

Demo hasil

Penjelasan script di atas nanti saja setelah masuk bagian loop dalam javascript.

Demikian saja tutorial javascript pada artikel ini, semoga bermanfaat bagi kita semua.

Wassalamu'alaikum warohmatullahi wabarokatuh

Kandungan Gizi Pada Kacang Hijau

2010-06-10T02:33:00.018-07:00

Gak tau kenapa 4 minggu terakhir saya terbiasa sarapan dengan sebuah burjo (bubur kacang ijo) + roti tawar, kebetulan dekat kosan dah ada warung burjo, tapi setelah di pikir pikir , burjo baik untuk kesehatan gk ya, ada teman yang bilang banyak gizi yang terkandung di dalamnya tapi ada yang bilang malah membahayakan kesehatan karna bubur kacang ijo pake bahan pengawet.

Dan akhirnya saya mencoba mencari kebenarannya lewat brother google, dan ternyata bubur kacang ijo banyak manfaatnya, berikut sedikit penjelasannay :

Kacang hijau memiliki kandungan protein yang cukup tinggi, yaitu sebanyak 24 %. Di dalamnya terdapat sumber mineral penting antara lain kalsium dan fosfor yang bermanfaat untuk memperkuat tulang. Lemaknya merupakan asam lemak tak jenuh sehingga baik untuk jantung. Selain itu aman dikonsumsi oleh mereka yang memiliki masalah dengan berat badan karena kandungan lemahnya rendah.

Kacang hijau mengandung vitamin B1 yang berfungsi untuk mencegah penyakit beri-beri, membantu proses pertumbuhan, meningkatkan nafsu makan, memperbaiki saluran pencernaan, dan memaksimalkan kerja syaraf. Ada penelitian yang menyatakan bahwa pada sekelompok orang yang makanannya kurang cukup mengandung vitamin B1, seperti kacang hijau, dalam waktu singkat muncul gejala-gejala mudah tersinggung, tidak mampu memusatkan pikiran, dan kurang bersemangat. Gejala-gejala ini mirip dengan tanda-tanda orang stres.

Selain vitamin B1, kacang hijau juga mengandung vitamin B2 yang tugasnya membantu penyerapan protein dalam tubuh. Kehadiran vitamin B2 ini akan meningkatkan pemanfaatan protein sehingga penyerapannya menjadi lebih efisien.

Oh ya, sekedar informasi tambahan , selain kacangnya, kecambah kacang hijau juga punya manfaat tak kalah penting antara lain :

Antioksidan kecambah membantu memperlambat proses penuaan

Mencegah penyebaran sel kanker

Kandungan vitamin E-nya membantu meningkatkan kesuburan

Sangat baik untuk menjaga keasaman asam lambung dan melancarkan pencernaan

Berguna untuk kecantikan yaitu meremajakan dan menghaluskan kulit, menghilangkan noda-noda hitam pada wajah, menyembuhkan jerawat, menyuburkan rambut dan melangsingkan tubuh.

Wah, banyak sekali ya manfaat kacang hijau ini. So, buat teman teman yang belum pernah ato jarang mencobanya, mulailah mengkonsumsi kacang hijau sekarang juga :!: :wink:

Membuat Blog

2010-06-10T02:33:00.017-07:00

Salah satu free blog provider atau penyedia blog gratis yang populer saat ini adalah blogger.com atau blogspot, oleh karena id Tutorial akan menyuguhkan tutorial membuat blog di blogger.com.

Kenapa harus membuat blog di blogger.com bukan yang lainnya? Sebenarnya tidak ada keharusan untuk membuat blog di blogger.com, namun ada banyak kelebihan yang dimiliki blogger.com di banding dengan penyedia blog yang lainnya. Beberapa contoh kelebihan blogspot di banding yang lain yaitu mudah dalam pengoperasian sehingga cocok untuk para pemula, lebih leluasa dalam mengganti serta mengedit template sehingga tampilan blog anda akan lebih fresh karena hasil kreasi sendiri, custom domain atau anda dapat mengubah nama blog anda dengan nama domain yang dimiliki sedangkan hosting tetap menggunakan blogspot.
Perlu ditekankan dari awal bahwa internet itu sifatnya sangat dinamis, sehingga mungkin saja dalam beberapa waktu kedepan panduan membuat blog di blogger.com akan sedikit berbeda dengan apa yang anda lihat di blogger.com

Untuk mengurangi hal yang tidak perlu di tulis, berikut cara membuat blogger di blogger.com

Membuat Email

Salah satu syarat yang harus dipenuhi dalam membuat blog adalah anda memiliki alamat email yang masih aktif atau di gunakan. Jika anda belum mempunyai alamat email, silahkan baca tutorial tentang Cara membuat Email di Gmail, karena blogger adalah salah satu layanan dari Google maka ketika mendaftar ke blogger sebaiknya gunakan email gmail.

Daftar Blog di blogger.com

• Silahkan kunjungi situs http://www.blogger.com
• Alihkan perhatian kesebelah kanan atas, disana terletak menu drop down dan silahkan ganti penggunaan bahasa ke bahasa Indonesia agar lebih mudah untuk dipahami. Setelah itu klik tombol “BUAT BLOG”

• Setelah halaman pendaftran terbuka, ada dua opsi pilihan yaitu login dengan akun gmail atau mendaftar dengan email selain gmail. Karena tentunya anda telah mempunyai akun gmail, maka sebagai contoh silahkan pilih opsi login dengan klik link “Login terlebih dahulu”

• Silahkan login dengan alamat email gmail dan username anda.

• Isi nama tampilan yang akan muncul di blog nantinya. Beri tanda ceklis pada kotak kecil disamping Penerimaan Persyaratan, lalu klik anak panah bertuliskan LANJUTKAN.

• Isilah nama judul blog serta alamat blog yang di inginkan. Ingat! dalam membuat alamat blog harus benar-benar serius karena itu permanen tidak dapat digantikan lagi (kecuali nanti ganti dengan custom domain). Jika alamat yang diinginkan ternyata tidak bisa digunakan, masukkan kembali alamat lain yang masih tersedia. Jika alamat blog yang diinginkan masih tersedia, silahkan klik anak panah bertuliskan LANJUTKAN.

• Silahkan pilih template yang anda sukai ( template ini nanti bisa diubah lagi kapan saja anda mau), kemudian klik LANJUTKAN.

• Klik tombol MULAI BLOGGING

• Setelah masuk post editor, silahkan isi apa saja. Contoh : hello world, lalu klik tombol TERBITKAN ENTRI.
• Selesai.

Untuk tahap awal, blog anda sudah jadi dan bisa diakses dimana saja.

Kandungan Gizi Pada Kacang Hijau

2010-02-19T03:46:00.000-08:00

Gak tau kenapa 4 minggu terakhir saya terbiasa sarapan dengan seporsi burjo (bubur kacang ijo) + roti tawar, kebetulan dekat kosan dah ada warung burjo, tapi setelah di pikir pikir , burjo baik untuk kesehatan gk ya, ada teman yang bilang banyak gizi yang terkandung di dalamnya tapi ada yang bilang malah membahayakan kesehatan karna bubur kacang ijo pake bahan pengawet.

Untuk menjawab hal itu, saya mencoba mencari kebenarannya lewat brother google, berikut sedikit penjelasannya :

Kacang hijau memiliki kandungan protein yang cukup tinggi, yaitu sebanyak 24 %. Di dalamnya terdapat sumber mineral penting antara lain kalsium dan fosfor yang bermanfaat untuk memperkuat tulang. Lemaknya merupakan asam lemak tak jenuh sehingga baik untuk jantung. Selain itu aman dikonsumsi oleh mereka yang memiliki masalah dengan berat badan karena kandungan lemahnya rendah.

Kacang hijau mengandung vitamin B1 yang berfungsi untuk mencegah penyakit beri-beri, membantu proses pertumbuhan, meningkatkan nafsu makan, memperbaiki saluran pencernaan, dan memaksimalkan kerja syaraf. Ada penelitian yang menyatakan bahwa pada sekelompok orang yang makanannya kurang cukup mengandung vitamin B1, seperti kacang hijau, dalam waktu singkat muncul gejala-gejala mudah tersinggung, tidak mampu memusatkan pikiran, dan kurang bersemangat. Gejala-gejala ini mirip dengan tanda-tanda orang stres.

Selain vitamin B1, kacang hijau juga mengandung vitamin B2 yang tugasnya membantu penyerapan protein dalam tubuh. Kehadiran vitamin B2 ini akan meningkatkan pemanfaatan protein sehingga penyerapannya menjadi lebih efisien.

Di samping itu lemak yang terkandung dalam kacang hijau pun cukup rendah sehingga bagi mereka yang ingin melakukan diet makanan ini bisa menjadi pilihan yang tepat dengan beragam cara dan bentuk penyajian. Misalnya dibuat menjadi bubur kacang hijau, es, kue, atau sebagai bahan tambahan dalam jenis minuman tertentu seperti es campur atau es teler.

Oh ya, sekedar informasi tambahan , selain kacangnya, kecambah kacang hijau juga punya manfaat tak kalah penting antara lain :

Antioksidan kecambah membantu memperlambat proses penuaan

Mencegah penyebaran sel kanker

Kandungan vitamin E-nya membantu meningkatkan kesuburan

Sangat baik untuk menjaga keasaman asam lambung dan melancarkan pencernaan

Berguna untuk kecantikan yaitu meremajakan dan menghaluskan kulit, menghilangkan noda-noda hitam pada wajah, menyembuhkan jerawat, menyuburkan rambut dan melangsingkan tubuh.

Wah, banyak sekali ya manfaat kacang hijau ini. So, buat teman teman yang belum pernah ato jarang mencobanya, mulailah mengkonsumsi kacang hijau sekarang juga

Cara Pasang Emotion / Smilies Pada Worpress.com

2010-02-13T09:11:00.000-08:00

Break sejenak dari pekerjaan yang sedang lagi gawe website Penerbit MediaKom , nyambi liat liat kondisi blog, ternyata ada sebuah koment di halaman Sahabat dari eMtoeMcabee dan menanyakan tips buat pasang emot YM atau plurk di wordpress?.

Untuk menjawab pertanyaannya, berikut kode emot pada plurk. oia, bila anda memakai Wordpress.org caranya aktifkan dulu pada menu Settings -> Writing:

Convert emoticons like :-) and :-P to graphics on display

Atau dengan menginstall plugins caranya klik disini

NB : Hilangkan huruf x yang ada di belakang kode

:)x	:-)x	:smile:x
:Dx	:-Dx	:grin:x
:(x	:-(x	:sad:x
:ox	:-ox	:eek:x
8Ox	8-Ox	:shock:x
:?x	:-?x	:???:x
8)x	8-)x	:cool:x
:xx	:-xx	:mad:x
:Px	:-Px	:razz:x
:\|x	:-\|x	:neutral:x
;)x	;-)x	:wink:x
:lol:x
:oops:x
:cry:x
:evil:x
:twisted:x
:roll:x
:!:x
:?:x
:idea:x
:arrow:x
:mrgreen:x

Cara Pasang Emoticons Plurk Untuk Wordpress.Org

2010-02-13T09:07:00.000-08:00

Berikut cara instalasi emoticon Plurk di blog yang menggunakan WordPress.

1. Download Plugins smilies-themer dari wordpress.org
2. Upload plugin tersebut ke folder /public_html/wp-contents/plugins/. Kemudian ekstrak plugin tersebut.
3. Download Plurk Emoticon di sini
4. Upload Plurk.zip ke folder /public_html/wp-contents/plugins/smilies-themer/. Kemudian ekstrak file tersebut.
5. Aktifkan plugin smilies themer melalui dashboard, menu plugins.
6. Ganti emoticon standar wordpress melalui menu pengaturan, smilies themer. Pilih Plurk, kemudian klik update.

Jika anda memakai wordpress.com caranya ada di sini

Selamat Mencoba Semoga Berhasil

Daftar Daftar dan Link Blog Gratis

2010-02-12T02:00:00.000-08:00

Seperti yang di informasikan sebelumnya pada artikel sekilas tentang blog, postingan ini akan menuliskan alamat website penyedia blog gratis.

Website penyedia blog gratis saat ini jumlahnya sangat banyak, baik yang bertempat didalam negeri ataupun yang bertempat diluar negeri. Berikut daftar alamat website penyedia blog gratis yang mungkin anda ingin mencoba kehandalan layanan mereka.

Beberapa penyedia blog gratis dalam negeri :

http://blogdetik.com

http://dagdigdug.com

http://www.bloggaul.com

http://oggix.org

http://astalog.com

http://myblogrepublika.com

Beberapa penyedia blog gratis luar negeri :

http://blogger.com

http://wordpress.com

http://www.blogdrive.com

http://www.livejournal.com

http://www.typepad.com

http://edublogs.org

http://www.tumblr.com

http://www.xanga.com

http://www.weebly.com

http://www.blogr.com

http://www.opendiary.com

http://multiply.com

http://www.insanejournal.com

http://dreamhostapps.com

http://my.opera.com/community

http://www.journalfen.net

http://blogetery.com

http://blog.com

http://www.blogster.com

http://www.bravenet.com/webtools/journal

http://www.opendiary.com

http://www.netcipia.com

http://www.vox.com

http://www.zoomshare.com

http://www.tblog.com

Selain daftar web penyedia blog gratis diatas, masih banyak lagi penyedia yang lainnya. Yang ingin sharing tentang penyedia blog lainnya, silahkan di informasikan pada kotak komentar.
Semoga bermanfaat.

Blog What Is it ????

2010-02-12T01:58:00.000-08:00

Apa sih blog itu?

Mengutip dari id.wikipedia, Blog merupakan singkatan dari “web log” adalah bentuk aplikasi web yang menyerupai tulisan-tulisan (yang dimuat sebagai posting) pada sebuah halaman web umum. Tulisan-tulisan ini seringkali dimuat dalam urut terbalik (isi terbaru dahulu baru kemudian diikuti isi yang lebih lama), meskipun tidak selamanya demikian. Situs web seperti ini biasanya dapat diakses oleh semua pengguna internet sesuai dengan topik dan tujuan dari si pengguna blog tersebut.

Dalam halaman link id.wikipedia yang disertakan di atas, anda dapat pula membaca tentang Sejarah dari blog,komunitas blog, jenis-jenis blog, budaya populer blog, resiko kejahatan dan lain-lain.

Membuat blog, gratis atau bayar ?

Untuk hal ini ada dua pilihan, bisa gratis atau berbayar. Masing-masing pilihan tersebut tentu ada kelebihan serta kekurangannya.

Untuk blog yang berbayar, anda harus membeli nama domain atau hosting sendiri pada website penjual domain atau hosting. Blog berbayar lebih cenderung kepada mereka yang telah mahir dalam hal ngeblog dan ingin tampil lebih profesional.

Blog gratis lebih cenderung untuk mereka yang masih terbilang baru di dunia ngeblog atau mereka yang tidak mau dipusingkan dengan biaya yang harus dikeluarkan demi sebuah blog. Namun, membuat blog gratis lebih terikat dengan peraturan yang dibuat oleh penyedia blog yang bersangkutan.

Dimana bisa membuat blog gratis?

Web penyedia blog gratis atau free blog provider jumlahnya sangat banyak, namun saat ini yang sedang populer adalah blogger.com serta wordpress.com untuk layanan yang bertempat diluar negeri. Sedangkan penyedia blog populer yang ada didalam negeri yaitu blogdetik.com serta dagdigdug.com.

Daftar web penyedia blog gratis akan di tulis lebih lengkap pada posting berikutnya.

Semoga artikel sederhana ini dapat bermanfaat bagi anda yang baru mulai tertarik untuk membuat blog.

Logika Pemograman Dasar Part III

2010-02-12T01:31:00.000-08:00

Berikut adalah lanjutan dari tutorial sebelumnya yaitu tentang logika pemrograman tentang macam-macam operator. Sebelum baca tutorial berikut ini sebaiknya jawab dulu pertanyaan tutorial sebelumnya.
Pembahasan selanjutnya adalah Operator perbandingan yaitu operator untuk membandingkan antara dua persamaan atau variable. Yang hasilnya True atau false. Dari hasil true dan false tersebut nantinya akan dilaksanakan perintah yang diinginkan

Untuk lebih jelasnya dapat dilihat pada contoh berikut ini :

if x < y
{z = x + y}
else
{z = x – y}

if : Jika
else : lainnya

Penjelasan persamaan di atas :
Jika x < y benar (true) maka akan dilaksanakan z = x + y, jika salah (false) maka akan dilaksanakan z = x – y

Apabila nilai x = 10 dan y = 20, maka x<y adalah true(benar) maka akan dilaksanakan z = x + y
Apabila nilai x = 20 dan y = 10, maka x<y adalah false(salah) maka akan dilaksanakan z = x ? y
Apabila nilai x = 10 dan y = 10, maka x<y adalah false(salah) maka akan dilaksanakaan z = x – y

Contoh lain :

If x <= y
{z = x + y}
else
{z = x – y}

x <= y artinya adalah benar apabila dua kemungkinan yaitu
x < y atau x = y maka nilainya adalah true (benar)

Untuk jelasnya silahkan lihat contoh berikut
Apabila nilai x = 10 dan y = 10, maka x <= y adalah true (benar), maka akan dilaksanakan z = x + y

Contoh di atas juga bisa ditulis sebaagai berikut

If x < y or x = y
{z = x + y}
else
{z = x – y}

arti
or : atau

Sekarang kita akan lihat contoh lain :
if x<y and x=z
{z = x + y}
else
{z = x – y}

Arti :
And = dan
Apabila x = 10, y = 20 dan z = 10, maka x<y dan x=z adalah true (benar), maka akan dilakasanakan z = x + y
Apabila x = 10, y = 20 dan z = 30, maka x<y dan x=z adalah false (salah), maka akan dilakasanakan z = x – y.
Kenapa nilai di atas false(salah) padahal x(10) < y(20) tapi x = 10 tidak sama dengan z = 30
Jadi kalau menggunakan “and” semua harus benar apabila salah satu salah maka hasilnya adalah salah

Sekarang kita coba contoh di atas menggunakan or (atau)

If x < y or x = z
{z = x + y}
else
{z = x – y}

Apabila x = 10, y = 20 dan z = 10, maka x<y atau x=z adalah true (benar), maka akan dilakasanakan z = x + y
Apabila x = 10, y = 20 dan z = 30, maka x<y atau x=z adalah true (benar), maka akan dilakasanakan z = x + y
Apabila x = 20, y = 10 dan z = 30, maka x<y atau x=z adalah false (salah), maka akan dilakasanakan z = x – y

Dapat dilihat dari contoh di atas salah satu adalah benar maka hasilnya adalah benar.
Jadi kalau menggunakan “or” salah satu benar maka hasiknya menjadi benar.
Silahkan pahami contoh-contoh diatas, karena logika diatas sangat penting untuk melangkah kedalam sesi berikutnya.

Tips Thunderbird : Membuat Template Email HTML

2010-02-12T01:19:00.000-08:00

Sebenarnya kita bisa membuat email dalam bentuk seperti template dengan kode HTML melalui ‘email client’. Dengan kode html yang ditanam tersebut kita dapat membuat email tidak standar lagi, menjadi lebih bergaya dan berwarna sesuai kreatifitas anda.

Template Email HTML ini, bisa kita fungsikan untuk apapun, termasuk untuk tujuan marketing dengan menawarkan produk atau profil perusahaan anda.

Apa Saja yang Diperlukan ?

Tentunya ada sudah mempunyai akun email.

Contoh kasus disini menggunakan akun Gmail dengan ‘Email Clien’ adalah Thunderbird. Maka pelajari dan terapkan Setting POP/IMAP dan SMTP gmail pada Thunderbird 3.0. Sebab Thunderbird yang nanti kita gunakan sebagai fasilitas untuk mengirim email.

Persiapkan “code editor” yang biasa anda gunakan, notepad juga bisa digunakan. Untuk membuat atau mengedit kode Template ‘HTML Email’.

Gambaran Umum Struktur HTML yang Digunakan

Struktur HTML yang digunakan untuk Email ini menggunakan elemen table, dan CSS ditempatkan secara internal. Seperti berikut:

<html>
<head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <title> ... </title>
     <style type="text/css" media="screen">
         ...
     </style>
</head>

<body>

<table>
    <tr>
        <td>
           ........
        </td>
    </tr>
</table>

</body>
</html>

Tahapan Membuat Template HTML Email

Template Email disini hanya menggembangkan tiga bagian elemen yaitu ‘header’, ‘article’ dan ‘footer’. Dan Template Email ini sekedar mengambarkan isi update postingan Tutorialisme

Sebelumnya, lihat demo Pengembangan Template Email HTML, yang akan diterapkan.

1. Kode Halaman Template

Pada halaman template ini menggunkan lebar 560 px, anda bisa juga membuat dengan ukuran berbeda, biasanya standar lebarnya 600px.

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center">

      <table width="560px" border="0" cellspacing="0" cellpadding="0" class="page">
        <tr>
          <td>
             ........ Kode Elemen Header
             ........ Kode Elemen Article
             ........ Kode Elemen Footer
          </td>
       </tr>
     </table>

    </td>
  </tr>
</table>

2. Kode Elemen Header

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="header">
  <tr>
    <td>
       <h1><a href="http://tutorialisme.students.uii.ac.id">

        <img src="http://lh3.ggpht.com/_dfnTVAxeWMI/S0pJGIKkYGI/AAAAAAAADBU/DiNkLAYtQao/header.gif"

        width="560" height="77" alt="logo id tutorial"></a></h1>

    </td>
  </tr>
</table>

3. Kode Elemen Article

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="article">
  <tr>
    <td>

      <h2>Setting POP/IMAP dan SMTP gmail pada Thunderbird 3.0</h2>
      <p><small>kang Rohman | January 7th, 2010</small></p>
      <p><img src="mail.jpg"

 width="219" height="148" alt="Main Content Inline Small" align="left" hspace="10">

Sebelumnya pada artikel Sekilas tentang Email telah disinggung bahwa

untuk mengelola email bisa langsung melalui Webmail dimana

anda membuat email atau dapat pula diteruskan/download memakai

Software Email Client. Namun, sebelum anda meneruskan email ke software email client,

terlebih dahulu anda harus melakukkan Pengaturan / setting pada email client yang di gunakan.

Pengaturan terhadap email client ini lazim juga disebut sebagai setting POP (Post Office Protocol) /

IMAP (Internet Message Access Protocol ) dan SMTP (Simple Mail Transfer Protocol).

<a href="http://tutorialisme.students.uii.ac.id/cara-setting-popimap-dan-smtp-gmail-pada-thunderbird-30/#more-138">Selanjutnya</a></p>    

      <h2>Cara Membuat Email di gmail (Google Mail)</h2>
      <p><small>kang Rohman | January 6th, 2010</small></p>
      <p><img src="gmail.jpg"

 width="166" height="145" alt="Main Content Inline Small" align="left" hspace="10">

Jika sebelumnya telah dibahas tentang bagaimana cara membuat email di yahoo,

maka pada artikel iniTutorialisme akan mencoba membahas tentang Cara membuat Email di Gmail

(Google Mail).</p>
      <p>Ada beberapa alasan kenapa Tutorialisme menyarankan anda untuk mempunyai email

 (akun) di gmail : <a href="http://tutorialisme.students.uii.ac.id/review-mengenai-email-apa-itu-email/#more-76">

Selanjutnya</a></p>
    </td>
  </tr>
</table>

3. Kode Elemen Footer

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="footer">
  <tr>
    <td height="40" class="footer" align="center">
      <p><small>2009 <a href="http://tutorialisme.students.uii.ac.id">

tutorialisme.students.uii.ac.id</a>

| Design: Tutorialisme</small></p>
    </td>
   </tr>
</table>

3. Kode CSS

<style type="text/css" media="screen">
  body {margin: 0; padding: 0; color: #333333; background-color: #ddd;}
  a {color: #ce0316;}
  p {margin: 0; padding: 5px 0; line-height:20px; font-family: Arial; font-size: 12px;}
  h2 {margin:10px 0 0; padding: 0 0 10px; font-family:

Georgia; font-size: 20px; font-weight:normal;border-bottom:1px solid #999;}
  .page {background-color: #fff; padding:10px;}
  .article {border-bottom:1px solid #999; margin:5px 0 10px; padding: 0 0 10px;}
  .footer {background-color: #eee;}
</style>

Maka,
keseluruhan kode HTML ‘Template Email’ tersebut menjadi:

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>Demo Email HTML</title>
   <style type="text/css" media="screen">
		body {margin: 0; padding: 0; color: #333333; background-color: #ddd;}
		a {color: #ce0316;}
		p {margin: 0; padding: 5px 0; line-height:20px;

                font-family: Arial; font-size: 12px;}
		h2 {margin:10px 0 0; padding: 0 0 10px; font-family:

                 Georgia; font-size: 20px; font-weight:normal;border-bottom:1px solid #999;}
		.page {background-color: #fff; padding:10px;}
		.article {border-bottom:1px solid #999; margin:5px 0 10px; padding: 0 0 10px;}
		.footer {background-color: #eee;}
   </style>

</head>
<body>

<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td align="center">

    <table width="560px" border="0" cellspacing="0" cellpadding="0" class="page">
    <tr>
	<td>

	<table width="100%" border="0" cellspacing="0" cellpadding="0" class="header">
	<tr>
	<td>
	<h1><a href="http://tutorialisme.students.uii.ac.id/">

<img src="/header.gif"

width="560" height="77" alt="logo tutorialisme"></a></h1>
	</td>
	</tr>
	</table>

	<table width="100%" border="0" cellspacing="0" cellpadding="0" class="article">
	<tr>
	<td>
	<h2>Setting POP/IMAP dan SMTP gmail pada Thunderbird 3.0</h2>
	<p><small></small></p>
        <p><img src="/mail.jpg" width="219" height="148" alt="Main Content Inline Small" align="left" hspace="10"> Sebelumnya pada artikel Sekilas tentang Email telah disinggung bahwa untuk mengelola email bisa langsung melalui Webmail dimana anda membuat email atau dapat pula diteruskan/download memakai Software Email Client. Namun, sebelum anda meneruskan email ke software email client, terlebih dahulu anda harus melakukkan Pengaturan / setting pada email client yang di gunakan. Pengaturan terhadap email client ini lazim juga disebut sebagai setting POP (Post Office Protocol) / IMAP (Internet Message Access Protocol ) dan SMTP (Simple Mail Transfer Protocol). <a href="http://tutorialisme.students.uii.ac.id/cara-setting-popimap-dan-smtp-gmail-pada-thunderbird-30/#more-138">Selanjutnya</a></p>	

	<h2>Cara Membuat Email di gmail (Google Mail)</h2>
       <p><img src="/gmail.jpg" width="166" height="145"

alt="Main Content Inline Small" align="left" hspace="10">

Jika sebelumnya telah dibahas tentang bagaimana cara membuat email di yahoo,

maka pada artikel ini Tutorial akan mencoba membahas tentang Cara membuat Email di Gmail

Google Mail).</p>
<p>Ada beberapa alasan kenapa Tutorial menyarankan anda untuk

mempunyai email (akun) di gmail :

<a href="http://tutorialisme.students.uii.ac.id/cara-setting-popimap-dan-smtp-gmail-pada-thunderbird-30/">

Selanjutnya</a></p>

</td>
</tr>
</table>	

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="footer">
<tr>
<td height="40" class="footer" align="center">
<p><small>2009 <a href="http://tutorialisme.students.uii.ac.id">tutorialisme.students.uii.ac.id</a> | Design: Tutorialisme</small></p>
								</td>
							</tr>
						</table>						

					</td>
				</tr>
			</table>

	  </td>
	</tr>
</table>

</body>
</html>

Catatan: Untuk format HTML dengan menggunakan table, setiap image <img> di simpan di dalam kode HTML, seperti contoh diatas. Setiap image tersebut perlu anda upload, bisa ditempat hosting image gratisan, dan ambil url lengkapnya.

Apabila anda kesulitan membuat template email ini sendiri, anda dapat menggunakan kode template diatas dan anda sesuaikan dengan kebutuhan anda. Tapi anda juga dapat mencari penyedia jasa free template email lainnya apabila template diatas belum sesuai keinginan anda, seperti di 30 Free HTML Email Templates. Ada 30 pilihan disana, kemudian anda download dan modifikasi file ‘template-basic.html’ dengan ‘code editor’.

Tahapan Mengirim “Template Email HTML” dengan Thunderbird

Mengapa menggunakan “email client” seperti Thunderbird untuk menggirim template email ? Sebab Gmail danYahoo tidak menyediakan fasilitas untuk menyisipkan kode HTML.

Buka program Thunderbird anda yang telah di instal,

Klik ‘Write’, pada bagian atas, :

masukan alamat email yang akan anda kirim

tulis subject dari email anda tersebut

klik bagian halaman tersebut, maka tool insert diatas akan aktif

klik Insert dan pilih HTML, maka akan muncul layar baru

masukan kode HTML template email yang telah anda buat

klik insert,

Apabila anda telah yakin, langsung klik ‘Send’, dibagian atas.

Penutup

Demikian keseluruhan tahapan Membuat Template Email HTML. Anda dapat melakukan uji coba sendiri, mungkin dengan menggunakan kode template email diatas, dan kirim ke alamat email anda di Yahoo atau di Google.

Cara Setting POP/IMAP dan SMTP gmail pada Thunderbird 3.0

2010-02-12T00:57:00.000-08:00

Sebelumnya pada artikel Review Mengenai Email telah disinggung bahwa untuk mengelola email bisa langsung melalui Webmail dimana anda membuat email atau dapat pula diteruskan/download memakai Software Email Client. Namun, sebelum anda meneruskan email ke software email client, terlebih dahulu anda harus melakukkan Pengaturan / setting pada email client yang di gunakan. Pengaturan terhadap email client ini lazim juga disebut sebagai setting POP (Post Office Protocol) / IMAP (Internet Message Access Protocol ) dan SMTP (Simple Mail Transfer Protocol).

Untuk mendapatkan software email client tidaklah sulit karena banyak website yang memberikannya secara gratis, salah satu Email Client yang populer saat ini adalah Thunderbird besutan dari Mozilla. Thunderbird dapat anda download di situs resminya Mozillamessaging.

Pada dasarnya cara setting POP dan SMTP pada email client hampir sama, yang penting anda mengetahui alamat POP atau IMAP serta SMTP yang disediakan oleh penyedia email yang anda gunakan. Contoh POP untuk gmail (google mail) adalah pop.gmail.com dan untuk SMTP adalah smtp.gmail.com. Sedangkan POP untuk yahoo.co.id adalah pop.mail.yahoo.co.id dan untuk SMTP adalah smtp.mail.yahoo.co.id.

Sebagai bahan untuk inspirasi, Tutorialisme akan menuliskan bagaimana cara setting POP/IMAP dan SMTP untuk email gmail pada Thunderbird 3.0. Berikut langkah-langkah yang bisa anda jalankan:

Langkah 1 : Aktifkan POP di gmail

*    Silahkan login ke gmail dengan ID anda.
*    Klik tulisan Settings yang ada disebelah kanan atas layar monitor.
*    Klik Forwarding and POP/IMAP.
*    Pilih Enable POP for all mail or Enable POP for mail that arrives from now on.

Enable POP for all mail artinya seluruh email email yang ada akan di download semua ke email client anda, jika isi email anda sudah ada 1000 email, maka semua akan di download.

POP for mail that arrives from now on artinya email yang di download ke email client hanyalah email yang baru masuk ketika POP di aktifkan.

Klik tombol Save Changes.

Langkah 2 : Setting Thunderbirds

*    Bukalah Thunderbird yang telah anda install sebelumnya.
*    Klik menu Tools, lalu pilih Account Settings…
* Klik tombol Account Actions
*    Klik Add Account… untuk mengeluarkan Account Wizard.
*    Isilah formulir yang ada :

Your name : isi dengan nama anda, nama ini adalah nama yang muncul pada penerima email ketika anda mengirimkan sebuah email ke orang lain. Contoh : Tutorial is me

Your Email address : isi dengan alamat email anda yang di gmail. Contoh : tutorialisme@gmail.com

Password : isi dengan kata sandi sesuai dengan kata sandi email gmail anda.

Klik Tombol Continue.

*    Secara otomatis thunderbird mengenali setting email account anda.
*    Klik tombol Create Account.
*    Selesai.

Pada Thunderbird versi 3.0 sudah tidak perlu lagi setting manual sehingga anda tidak usah repot melakukan setting.

Untuk setting email client yang lain seperti Apple Mail 3.0, Outlook Express, Outlook 2002, Outlook 2003, Outlook 2007, Thunderbird 2.0, Windows Mail, dan lain-lain bisa anda baca secara lengkap pada halaman support mail google.

Semoga bermanfaat!

Jenis Jenis CSS : Css Inline Style

2010-02-12T00:45:00.000-08:00

CSS Inline Style‘ adalah CSS yang digunakan langsung pada elemen HTML, atau ’style’ yang berada di dalam ‘tag’ dari sebuah dokumen. Idealnya memang CSS itu berada terpisah (internal / ekternal) dengan HTML. Tapi terkadang pada kondisi tertentu kita membutuhkan style khusus, misal pada postingan. Nah ‘Inline Style‘ lah yang digunakan.

Pada pembahasan sebelumnya mengenai Belajar HTML dan CSS Tingkat Dasar, telah membahas ‘ekternal dan internal style’. Ada 3 jenis penulisan style CSS ini, yaitu external styles, internal styles dan inline styles.

Penulisan CSS Inline Style

Sebelum kita beranjak kepersoalan “CSS Inline Style” ini lebih jauh, berikut ini contoh penulisan “CSS Inline Style”:

<p style=" ..">ini text nya</p>

‘titik-titik’ tersebut adalah bagian style css-nya.

Misal style yang ingin digunakan adalah:

color:#fff; background:#c50;

maka penulisannya:

<p style="color:#fff; background:#c50;">ini text yang diberikan style</p>

Jadi ‘CSS Inline Style’ ini hanya berlaku untuk tag yang langsung diberikan style, seperti contoh diatas, style tersebut hanya diperuntukkan untuk paragraf yang bertuliskan “ini text yang diberikan style”.

Contoh pengembangan ‘Inline Style’, yang bisa kita gunakan di postingan

1. Membuat text berwarna berbeda dan menambahkan warna background

kode:

<p>Ini  contoh <span style="color:#fff; background:#c50; padding:0 5px;">CSS Inline Style</span> pada <span style="color:#c50; background:#fff;">postingan</span></p>

hasil / demo:

Ini contoh CSS Inline Style pada postingan

2. Gabungan style dan menambahkan gambar pada background

kode:

<div style="height:130px; width:350px; padding:10px; border:1px solid #666; background:#c50 url(http://localhost/idtutorial/wordpress/wp-content/uploads/2009/12/bfly015.gif) left bottom no-repeat;" >
<p style="font-size:18px;color:#111;">CSS Inline Style</p>
<p style="color:#fff;padding-left:80px;">Ini contoh kedua dari penggunaan CSS Inline Style, dengan kombinasi style dan image pada background</p>
</div>

hasil / demo:

CSS Inline Style

Ini contoh kedua dari penggunaan CSS Inline Style, dengan kombinasi style dan image pada background

Hal yang Perlu diperhatikan Dalam Penggunaan CSS Inline Style

Memang sebaiknya menggunakan ekternal CSS dibanding menggunakan ‘CSS Inline Style’. Tapi seperti pendahuluan tulisan ini, penggunaan ‘CSS Inline Style’ sebaiknya digunakan untuk kasus tertentu. Seperti pada postingan misalnya. Karena penggunaan style ini tidak digunakan secara berulang kali, misalnya hanya untuk demo di postingan.

Contoh pada postingan ini, di demo seperti diatas tersebut menggunakan ‘CSS inline style’. Memang sebaiknya kita buat halaman khusus untuk demo tersebut dalam format HTML, tapi apabila kita tidak mempunyai tempat hostingan untuk menyimpan berkas tersebut, kita dapat langsung membuat demo tersebut didalam postingan dengan ‘CSS inline style’, sebagai alternatif.

Kenapa tidak baik menggunakan ‘CSS inline style’ di dalam halaman template. Selain dapat merepotkan dari sisi pemeliharaan dan juga dapat memperlambat membuka sebuah halaman. Lebih lengkap mengapa kita perlu menghindari penggunaan CSS Inline Style dapat dipelajari di ‘Avoid Inline Styles for CSS’

Penutup

Penggunaan ‘CSS Inline Style’ sebaiknya digunakan sewajarnya, jangan terlalu berlebihan. Jadi digunakan memang untuk kondisi tertentu jika diperlukan. Selain itu sebaiknya jangan mengggunakan ‘CSS Inline Style’ pada template atau pada halaman weblog, kalau untuk dipostingan masih dimungkinkan.

Sip demikian. Selamat mencoba dan bermain ‘CSS Inline Style’ pada postingan.

Softlogica Social Bookmarks Manager Tools

2010-02-12T00:39:00.000-08:00

Pada kebanyakan blog terdapat ikon-ikon Social Bookmarking. Apakah anda tau kegunaanya ? Ikon-ikon gunanya untuk membantu pembaca mendaftarkan artikel saya pada acount social bookmarking-nya. Jika pembaca mendaftarkannya, maka akan membantu blog ini semakin naik rangking-nya. Walaupun terkadang saya was-was malah blog ini akan dianggap spam.

Untuk membuat script atau code seperti yang di taruh pada postingan cukup mudah. Silahkan gunakan software SoftLogica Social Bookmarking Manager, caranya seperti berikut :

Download instaler SoftLogica di www.socialbookmarksmanager.com/

Intall, dengan mengklik 2X file instalernya (sbmanger.exe).

Jika sudah buka aplikasinya, pilih menu Site info. Dan isikan informasi : site URL, site title dan site description.

Pilih menu Social Bookmarks. Centang web yang memberikan service social bookmarks (social bookmarks services)

Pilih menu HTM code, kemudian Select dan Copy Paste (Copas) di blog anda.

Selamat mencoba !!!

Belajar HTML dan CSS Tingkat Dasar

2010-02-12T00:28:00.000-08:00

HTML dan CSS sebenarnya adalah bahasa keseharian para pengguna internet. Halaman yang tampil dalam browser ketika kita berselancar itu adalah pengembangan dari kedua bahasa tersebut, yaitu bahasa ‘markup‘ (HTML) dan bahasa ‘stylesheet‘ (CSS), yang keduanya didefinisikan dan dikendalikan penggunaannya olehWorld Wide Web Consortium (W3C).

Para blogger, tentunya sangat berkaitan langsung dengan kedua bahasa tersebut, baik itu saat edit template maupun saat melakukan postingan. Kalau untuk para pengembang web itu santapan mereka.

Jika kita coba analogikan kedua bahasa tersebut sebagai sebuah bangunan, HTML itu adalah struktur dasar dari bangunan, dan CSS yang kemudian bertugas menata agar struktur bangunan tersebut tertata dengan baik dan mempercantiknya.

Garis Besar Bahasa ‘Markup’ / HTML

HyperText Markup Language (HTML) adalah sebuah bahasa markah (markup) yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi di dalam sebuah browser Internet. (id.wikipedia).

Bicara tentang HTML, maka kita berbicara mengenai versi dari HTML dan pengembangannya XHTML. Saat ini HTML telah dikembangkan versi barunya yaitu HTML5, dengan beberapa elemen barunya.

Bagaimana kita membedakan tiap versi HTML

Untuk dapat melihat versi apa yang digunakan sebuah weblog, itu dapat terlihat dari doctype yang digunakan pada bagian atas (klik kanan pada halaman kemudian “view page source”).

contoh, lihat text yang berwarna biru:

XHTML 1.0 Transitional:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML 4.01 Strict:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
         "http://www.w3.org/TR/html4/strict.dtd">

HTML 5 (lebih simpel dari doctype lainnya):

<!DOCTYPE html>

Lebih lengkap mengenai macam doctype anda dapat melihat di Recommended DTDs to use in your Web document diluar dari HTML 5.

Struktur Dokumen HTML

Struktur dokumen HTML dimulai dari doctype sebagai deklarasi jenis HTML yang digunakan, kemudian di dalam HTML terdapat elemen head dan body.

Contoh sebagai berikut:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
  <title> "Judul Weblog" </title>
</head>

<body>
  <h1>"Heading"</h1>
  <p>"Paragraph"</p>
</body>

</html>

Apabila kita lihat kode diatas, bahwa didalam head itu bisa kita masukkan, title, meta, stylesheet, dan juga script. Sedangkan bagian body adalah stuktur dari halaman yang akan dikembangkan, yang berisi informasi di dalam halaman web, baik itu di bagian header, navigasi, post, sidebar dan footer, dengan tag tertentu seperti<h1> dan <p>, dan lainnya.

Gambaran umum struktur dari elemen head sebagai berikut:

<head>
<title>Judul Weblog</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="/styles.css" type="text/css" media="all" />
<script type="text/javascript" src="/javascript.js"></script>
</head>

Gambaran umum struktur dari elemen body sebagai berikut :

<body>
<div id="header">
<h1>"Judul Blog"</h1>
</div>

<div id="nav">
<ul>
  <li>Beranda</li>
  <li>Tentang</li>
</ul>
</div>

<div id="post">
<h2>"Judul Postingan"</h2>
<p>"Paragraph dari isi postingan"</p>
</div>

<div id="sidebar">
<h3>"Judul Sidebar"</h3>
<ul>
  <li>List 1</li>
  <li>List 2</li>
</ul>
</div>

<div id="footer">
<p>Paragraph Credit</p>
</div>

</body>

Untuk HTML5, pengunaan div semakin berkurang, misal <div id="header"> bisa diganti atau diwakili dengan <header>, <div id="nav"> menjadi <nav>, <div id="post"> menjadi <article>, <div id="sidebar"> menjadi <aside>, <div id="footer"> menjadi <footer>. Anda dapat mempelajari lebih lanjut pengembangan HTML 5 di A Preview of HTML 5 (A List Apart).

Demikian garis besar gambaran struktur bahasa ‘markup’ HTML. Jika anda kemudian ingin mengecek atau menguji bahwa penulisan bahasa ‘markup’ anda telah baik dapat menggunakan Markup Validation Service.

Berikut ini bahan bacaan yang baik, berbahasa indonesia, untuk menambah pemahaman anda mengenai HTML:

Mengawali dengan HTML

Fitur – Fitur Lanjutan

1-HTML DASAR

DOCTYPE, apa itu ?

Garis Besar Bahasa ‘Stylesheet’ / CSS

Cascading Style Sheets (CSS) adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup. (id.wikipedia)

Seperti pengertian diatas, fungsi dari bahasa stylesheet adalah untuk menata dan mempecantik tampilan dari bahasa ‘markup’ /HTML, baik berupa warna, jenis huruf, tata letak, dan lainnya. Tanpa CSS atau sekedar HTML, sebuah halaman web hanya tersusun kebawah dengan background putih, tulisan hitam dan link berwarna biru. Nah dengan CSS ini yang akan menata halaman HTML tersebut, atau memperjelas bagian tiap elemen HTML, misal ‘header’, ‘content’, ’sidebar’ dan ‘footer’.

Bahasa stylesheet juga mengalami pengembangan versi atau level, sama seperti halnya HTML. Level terbaru dari CSS kini yaitu CSS3. CSS3 juga memiliki pengembangan baru yang fenomenal, yang semakin membuat sebuah halaman terlihat semakin lebih kreatif dan bergaya. Dengan adanya CSS3 ini mungkin suatu saat, jika semua browser atau perambah sudah mengadopsi, penggunaan image dan javascript akan sedikit berkurang. Mungkin CSS3.info bisa jadi salah satu alamat yang bisa dijadikan bahan belajar dan mengikuti perkembangan dari CSS3.

Penempatan Elemen Style CSS

Pada pembahasan diatas mengenai HTML, bahwa elemen ’style’ ditempatkan dibagian ‘head’. Ada dua cara penempatan elemen ’style’ ini, yaitu secara eksternal atau internal (ditanam langsung)

Secara eksternal, maksudnya disini file CSS tersebut terpisah atau tersendiri dengan file HTML, dan cara memanggil kode CSS tersebut dengan tag <link>. sebagai berikut:

<!DOCTYPE html>
<html>
<head>
    <title> "Judul Weblog" </title>
    <link type="text/css" rel="stylesheet" href="style.css" media="all">
</head>
<body>
</body>
</html>

Secara internal, maksudnya disini kode CSS langsung ditanam dengan menggunakan elemen style, sebagai berikut:

<!DOCTYPE html>
<html>
<head>
<title> "Judul Weblog" </title>
<style type="text/css">
       body {background:#fff;}
</style>
</head>
<body>
</body>
</html>

Cara membaca body {background:#fff;}, body ’selektor’ dari elemen HTML yang kan diberikan style,background adalah ‘property’, sedangkan #fff adalah ‘value’. Peran dari property dan value ini yang akan menata dan mempercantik tiap elemen HTML.

Anda dapat melihat contoh berikut, yaitu kaitan bahasa HTML dan CSS dalam menciptakan tampilan sebuah halaman. Dan di CSS Tutorial (w3schools) anda dapat melakukan uji coba dalam memberikan style sebuah elemen HTML.

Penulisan CSS untuk memberikan style elemen HTML

Setiap elemen HTML dalam penulisan CSS akan diterjemahkan sebagai berikut:

tag berikut <body>, <p>, <span>, <ul>, <li>, <h1>, dll, penulisan CSS sekedar ‘body’, ‘p’, ’span’, ‘ul’, ‘ol’, ‘li’, h1′. Sedangakan, tag dengan <div>, seperti <div id=" "> penulisan CSS adalah ‘#’ (pagar) dan <div class=" "> penulisan CSSnya adalah ‘.’ (titik).

Contoh

<div id="content">
  <h2>Judul Postingan</h2>
  <div class="post">
     <p>paragraph 1</p>
     <ul>
         <li>List1</li>
         <li>list2</li>
     </ul>
     <p>paragraph2</p>
   </div>  <!--end div post -->
</div> <!-- end div content -->

Maka penulisan kode CSSnya sebagai berikut:

#content {float:left;}
#content h2 {font-syze:18px;}
.post {letter-spacing:0.2px;}
.post p {line-height:14px;}
.post ul {list-style:circle; margin-left:20px;}
.post li {padding:5px;}

Jenis Media CSS

Dalam pengembangan style CSS disebuah halaman pun idealnya dibuat perbedaan jenis medianya atau media type (w3). Ada beragam jenis media ini, tapi yang umum atau lazim digunakan adalah media ‘screen‘, ‘print‘ dan ‘handheld‘. Jadi ada perbedaan tampilan halaman weblog kita untuk layar monitor komputer (screen), tampilan hasil cetak (print), serta tampilan pada small screen seperti halnya handphone (handheld).

Pada media ‘print’ dan ‘handheld’ tentunya harus dibuat lebih sederhana dari media ’screen’. Media print, layaknya sebuah hasil cetak print pada kertas umumnya. background putih, warna text hitam, pernak pernik blog tidak perlu ditampilkan, lebih hanya berupa artikel blog, yang berisi judul dan isi. Cara mengetes media print ini adalah lewat “print preview” pada file browser anda.

Contoh penulisan untuk membedakan tiap media:

@media print {
     body { font-size: 10pt }
 }
@media screen {
    body { font-size: 13px }
 }
@media handheld {
     body { font-size: 12px }
}
@media screen, print {
    body { line-height: 1.2 }
 }

Berikut ini 4 contoh penulisan jenis media CSS:

<link rel="stylesheet" type="text/css"
     media="print" href="print.css">

<style media="print"> ... </style>

@media print { p { font-size: 14pt;} }

@import url("print.css") print;

Demikian garis besar gambaran penggunaan bahasa “stylesheet” / CSS. Jika anda kemudian ingin mengecek atau menguji bahwa penulisan bahasa “stylesheet” anda telah baik dapat menggunakan CSS Validation Service.

Berikut ini bahan bacaan yang baik, berbahasa indonesia, untuk menambah pemahaman anda mengenai CSS, yaitu:

Panduan CSS

Menambahkan sedikit style

Berkenalan dengan CSS

Penutup

Tulisan ini sebagai sebuah pengantar. Pengenalan Dasar HTML dan CSS tentunya belum lengkap membedah kedua bahasa tersebut. Minimal dalam tulisan ini kita dapat membedakan kedua bahasa tersebut dan kaitannya. Mungkin pada tulisan berikutnya ada kontibutor lain yang bisa mengangkat kedua hal tersebut lebih detil, satu persatu dalam beberapa kasus.

Tapi apabila anda ingin langsung berkontribusi silahkan lewat komentar, baik itu berupa koreksi, tambahan atau masukan, agar kita dapat saling belajar.

Tampilan baru Facebook : Simple, Elegan dan User Friendly

2010-02-05T19:06:00.000-08:00

Sempat kaget ketika sembari istirahat saat bekerja menyelesaikan installasi warnet grace di kota solo, iseng iseng ngecek akun facebook, ternyata ada yang beda, sejenak terpikir kalo saya sedang membuka facebook lite , di lihat URL nya ternyata bukan litem, melainkan Facebook.com

Saya bertanya ke pada 3 rekan kerja yang satu divisi , anehnya akun facebook mereka mereka belum ada tampilan baru, masih tampilan faebook yang lama. Mudah mudahan akun facebook teman teman telah berganti dengan style yang baru , bagi yang belum sabar ya :), mungkin team facebook kewalahan upgrade akun yang jumlah nya jutaan ribu. Berikut sedikit review tentang tampilan baru facebook ini.

Tampilan Home, Gambar lebih jelas Klik disini

The Top Menu

Menu paling atas telah disederhanakan gunanya agar lebih user frendly memudahkan untuk mendapatkan hal yang terbaru, seperti requests, messages, and notification.

The Account Menu

berisi link ke halaman pengaturan ato setting. Disini juga terdapat menu help dan log out.

The Left Menu

Menu sebelah kiri telah disusun untuk memudahkan bagi Anda mencari dan menemukan konten dari teman-teman, membaca pesan, melihat apa yang teman-teman, mengakses aplikasi dan banyak lagi.

Core Features

Fitur-fitur inti seperti News Feed, Pesan dan Teman - berada di feed, sehingga lebih mudah untuk mengikuti perkembangan yang baru.

Applications

Aplikasi yang baru dan Permainan dashboard membantu Anda menemukan informasi yang baru dan menarik dari teman-teman Anda.

Chatting

Menyediakan link cepat untuk chatting dengan teman-teman Anda. Untuk mengedit pilihan Anda, Facebook Chat di bar bagian bawah.

Begitulah sedikit review tentang facebook terbaru dengan tampilan lebih User Friendly.

Pameran Seni Grafis Lama `Zuide Borneo` : Borneoisme Lets Go Here

2010-02-04T22:57:00.000-08:00

Waktu: 2 – 11 Februari 2010

Pembukaan :

2 Februari 2010 Pukul 19.30 WIB

Tempat: Bentara Budaya Yogyakarta, Jl.Suroto 2, Kotabaru, Yogyakarta Telepon/Fax: (0274) 560404

Keterangan:

Borneo atau Kalimantan, adalah pulau terbesar Indonesia kedua setelah Irian Jaya. Pulau yang dimiliki tiga negara yaitu Indonesia, Malaysia dan Brunei Darusallam ini, di masa lalu, banyak menyimpan misteri kebudayaan, yang sampai sekarang pun masih belum terkuak.

Tahun 1843, D.C.A.L.M. Schwaner.seorang peneliti dari Nederland Indie menulis dua buku tentang dua sungai besar di Kalimantan Selatan, yaitu Sungai Barito dan Sungai Kahayan. Dari dua sungai besar ini, dari hulu sampai hilir, dia menemukan cukup banyak kebudayaan asli orang Dayak yang dia susun secara menarik. Yang lebih menarik lagi dalam buku tersebut dilengkapi gambar-gambar grafis berupa lithografi yang berwarna atau lithochrom sebanyak 21 gambar yang dibuat oleh pegrafis asal Belanda C.W.Mieling.

Mieling berhasil membuat suasana yang dramatis sekaligus romantis dalam karya-karya grafisnya. Walau ukuran karyanya relatif kecil yaitu berukuran 13 x 23 cm, namun dia dengan jelas lewat torehan-torehannya mampu dengan sangat detail menggambarkan benda-benda dan gambaran suasana di tahun 1843 tersebut. Obyek karyanya antara lain pemandangan di danau, gunung, sungai, kampung air, pemukiman penduduk asli Dayak, Cina, dan Banjar. Selain itu, ada suasana upacara tradisional suku Dayak seperti upacara penyembuhan penyakit, perang, kematian, dan beberapa tentang Sultan, keraton, dan perburuan rusa.

Cara Menganti Tema Pada Blog Worpress Mu

2010-02-04T15:31:00.000-08:00

Lagi lagi posting ini untuk menjawab komentar dari salahsatu pembaca pada siang tadi dan juga demi melanjutkan posting sebelumnya tentang cara menambahkan page pada blog worpress, sekarang saya akan mencoba membahas cara menganti tema blog khususnya pada blog yang di sediakan UII ini.

Cara nya sangat lah mudah, berikut step by step :

Log in ke blog anda terlebih dahulu.

Lalu pilih menu Design. maka akan muncul tampilan seperti gambar di bawah ini

Kemudian pilih tema yang telah di sediakan, dengan cara mengklik judul tema. Sayang , UII hanya menyediakan 7 pilihan tema. Jadi kita hanya bisa mengkustom sendiri tema yang telah ada.

Setelah itu, silahkan liat blog anda , apakah tema sudah otomatis terganti ato belum.

Untuk mengkustom tema tsb, silahkan pilih menu menu yang ada pada bawah menu Design.

Demikian, Selamat mencoba, semoga berhasil.

Cara menambahkan page pada blog

2010-02-04T05:15:00.000-08:00

Barusan ada sebuah comment steman satu kampus , beliau menanyakan cara membuat menu / page di blog worpress khususnya wordpress yang di pakai oleh blog UII ini yaitu worpress mu. untuk menjawab pertanyaan beliau berikut sedikit tutorialnya.

Log in pada blog worpress anda

Setelah log in, klik menu Blog, pada menu Write terdapat menu Post, Page Dan Link

Untuk menambahkan url ato page pada menu blog anda silahkan klik menu Page , isi kan judul dan isi page, lalu klik tombol publish.

Terahir liat page pada menu blog anda secara otomatis akan bertambah.

Sangat mudah bukan, selamat mencoba semoga berhasil.

Cara Membuat Daftar Isi Pada Wordpress Berdasarkan Tanggal – Arsip

2010-02-03T11:25:00.000-08:00

Install Plugin WP-Archives dengan mencari plugin ini di bagian “Plugin – search“.

Setelah selesai instalasi, langsung aktifkan plugin WP-Archives dengan klik “activate plugin” di halaman setelah instalasi, atau di bagian “Plugins – Installed – WP-Archives“.

Buat halaman baru dengan nama “Daftar Isi” atau nama lain sesuka kita.

Copy-Paste kode berikut di bagian isi halaman dan yakinkan mode penulisan adalah HTML bukan Visual.

Publish halaman “Daftar Isi” tersebut dan cek hasilnya. Contoh: daftar isi blog berdasarkan tanggal atau arsip.

Contoh Curiculum Vitae / Riwayat Hidup

2010-02-02T10:00:00.000-08:00

Download Template CV disini

Daftar Riwayat Hidup

Data Pribadi

Nama
Jenis kelamin
Tempat, tanggal lahir
Kewarganegaraan
Status perkawinan
Tinggi, berat badan
Kesehatan
Agama
Alamat lengkap
Telepon, HP
E-mail

: (Nama)
: Laki Laki
: Sijunjung, 14 Febuari 1990
: Indonesia
: Belum Menikah
: 185 cm, 55 kg
: Sangat Baik
: Islam
: (alamat lengkap)
:
: (Email)

Pendidikan

» Formal

1996 - 2002
2002 - 2005
2005 - 2008
1997 - 2001

: SD
: SMP
: SMU
: Program Sarjana (S-1)

» Non Formal

2006 - 2008
2008 - 2009

: Kursus Komputer dan Internet di
: Kursus Bahasa Inggris di

Kemampuan

Proggramming

Kemampuan Komputer (MS Word, MS Excel, MS Power Point, MS Access, MS Outlook).

Kemampuan Internet.

*Pengalaman Kerja

Bekerja di PT. , Yogyakarta
Periode Status Posisi	: Agustus 2001 - Februari 2010 : Pegawai Tetap : Teknisi
Uraian singkat pekerjaan : Mengontrol persediaan dan pembelian peralatan kantor. Turut membantu pembuatan laporan keuangan perusahaan Mengatur jadwal pertemuan bisnis, pertemuan internal, dan perjalanan bisnis. Melakukan surat-menyurat bisnis dalam Bahasa Indonesia maupun Bahasa Inggris (via internet maupun non internet). Melakukan perhitungan pajak perusahaan. Menerbitkan dan menerima faktur dari pemasok. Turut membantu pelatihan pegawai baru.

Surat Lamaran Programmer saya

2010-02-02T09:44:00.000-08:00

Kepada Yth,
Bapak Kepala Bagian Personalia
PT. Scriptmedia
Jl. Rajawali No 80
Condong Catur, Yogyakarta

Dengan hormat,

Saya sangat tertarik dengan iklan Bapak dalam terbitan harian Kedaulatan Rakyat terbitan hari Sabtu, 6 Maret 2009 mengenai adanya lowongan untuk jabatan Web Programmer. Maka, bersama surat ini saya mengajukan diri untuk mengisi lowongan tersebut.

Saya berusia 19 tahun, dan sedang menyelesaikan kuliah jurusan Teknik Informatika di Universitas Islam Indonesia (UII), dengan IPK Semester terakhir 3.6. Selain kuliah, selama 6 bulan terakhir saya bekerja sebagai teknisi di Tridante Compuskill Yogyakarta .

Untuk keterangan lebih terperinci, bersama ini saya lampirkan juga surat keterangan pengalaman kerja, daftar riwayat hidup singkat, dan foto terbaru saya.

Saya berkeyakinan bahwa surat ini beserta lampirannya belum cukup untuk dijadikan bahan pertimbangan. Oleh karena itu, saya berharap Bapak akan memberikan suatu kesempatan wawancara kepada saya, sehingga dapat diperoleh keterangan mengenai diri saya secara lebih terperinci dan lengkap.

Hormat saya,

Andwi Prima Valentine