Rabu, 10 September 2008

Dasar Dasar HTML

Sebuah Web atau Blog tidak bisa lepas dari yang namanya HTML (Hyper Text Mark up Language) karena HTML inilah yang mendasari sebuah web/blog. Walaupun sekarang kita bisa membuat web/blog hanya dengan klak-klik mouse tapi setidaknya kita harus sedikit mengerti tentang dasar-dasar HTML, ya tho?. Dalam tutorial kali ini kita tidak akan membahas tentang semua dasar-dasar HTML tapi kita akan mempelajari tag-tag atau kode-kode penting yang sering digunakan dalam membangun sebuah web/blog misalnya cara membuat link, menampilkan gambar, mengganti warna font, membuat barus baru dll. Ok marikita mulai pelajaranya :


* CARA MEMASUKKAN GAMBAR
kode :

<img src="http://url Gambar" border="0" height="17" width="90">

keterangan :
yang warna biru adalah url lokasi gambar yang akan muncul.
height="17" width="90" adalah ukuran lebar dan tinggi gambar

* CARA MEMBUAT LINK
Kode :

<a href="http://hanifspd.co.cc" >Forum ITC Center</a>

Keterangan :
Text warna biru adalah link yang dituju.
Tulisan "Forum ITC Center" adalah tulisan yang ditampilkan.
Jika pingin yang dikasih link bukan tulisan melainkan gambar maka ganti tulisan tersebut dengan kode gambar seperti diatas, sehinga kodenya akan seperti ini :

<a href="url situs yang dituju" target="_blank"><img src="url gambar yang akan di tampilkan" border="0" height="17" width="90"> </a>

Jika pingin link yang dituju dibuka dalam window baru maka tambahkan kode target="_blank" setelah kode "url situs yang di tuju"

* CARA MENGETENGAHKAN TEXT/GAMBAR
Kode :

<center>
text</center>

Keterangan :

Ganti tulisan "text" dengan tulisan yana kamu inginkan, tau bisa juga diganti dengan gambar


* CARA MEMBUAT BARIS BARU
Kode :

<br>

Keterangan :
Tambahkan kode tersebut sebelum objek (text/gambar) yang dinginkan


* MEMBUAT HURUF TEBAL, MIRING DAN BERGARIS BAWAH
Kode :

<b>text</b> --> TEBAL
<i>text</i> --> MIRING
<u>text</u> -->GARIS BAWAH

* MEMBERI WARNA TEXT

<font color="#FF0000"> text </font> --> MERAH
<font color="blue"> text </font> --> BIRU
* KODE-KODE WARNA

WarnaKode

#000000

#999999

#FFFFFF

#FF0000

#00FF00

#0000FF

#FFFF00

#00FFFF

#FF00FF

#9900FF

#FF6600






Cara Membuat Kotak Blogroll

Kali ini aku mau ngejelasin trik kali dengan gaya puisi, biar nggak bosen, tapi jangan diketawain ya, soalnya lom pernah buat puisi nih.

Tatkala link-link jumlahnya sudah berjuta-juta
Maka semakin sesaklah dada blog ini
Jikalau hal ini tidak diatasi dengan bijaksana
Maka blognya dikau akan penuh sesak dengan link-link itu


Udah bagus nggak puisinya? ancur ya? Ok lanjuuut.

Oleh karena itulah
hamba memberanikan diri untuk menawarkan obat sesak tersebut
Melalui secuil ilmu berikut
Daku berharap dapat membantu kisanak supaya blognya tidak sesak



Kira-kira pada mudeng nggak ya penjelasan tadi, ah biarin deh
udah ah, udah mual2 nih pake gaya puici, sekarang ganti gaya biasa aja.

Untuk trik kali ini, ada dua macam kotak blogroll yang akan kita buat, terserah kamu mo pilih yang mana. Kotak blogroll-nya yaitu:

1. Kotak Blogroll Model Textarea

Contohnya seperti kotak blog roll seperti punyaku itu, itu lho yg atasnya ada tulisanya "Friend links"
Nha begini cara membuatnya :
Pasang code berikut ini di kedalam element kamu (Page Elements --> Add a Gadget --> HTML /Javascript)


<div style="border: 1px solid rgb(153, 153, 153);
overflow: auto;
width: 200px;
height: 200px;
text-align: center; ">

#link1 <br />
#link2 <br />
#link3 <br />
#link...

</div>


keterangan:
- Kode width: 200px; dan height: 200px; adalah ukuran lebar dan panjang kotak, kamu bisa merubahnya dan menyesuaikanya dengan ukuran yg kamu suka.
- Ganti tulisan "#link1,#link2, #link3 dst" dengan daftar link-link kamu, oh ya itu juga bisa diisi dengan banner link.
- Jika kamu pingin daftar link-linknya berjajar kayak punyaku, maka hilangkan kode


2. Kotak Blogroll Model Marquee

Kotak ini juga mampu menampung banyak link dalam tempat yang sempit. Namun kotak blog roll ini berbeda dengan kotak yg diatas, karena kotak yang ini tidak memiliki rollbar (yg biasanya disebelah kanan trus ditarik keatas kebawah itu lho). Link-link ato isi didalam kotak ini akan bergerak/berjalan, bisa vertikal ato horizontal. Nah gini nih cara buatnya:
Pasang code berikut ini di kedalam element kamu (Page Elements --> Add a Gadget --> HTML /Javascript)

<MARQUEE align="center" direction="up" height="100" scrollamount= "2"

onmouseover='this.stop()' onmouseout='this.start()' width="95%" >

#link1 <br />
#link2 <br />
#link3 <br />
#link...<br />

</marquee>


Keterangan :
- Kode "up" itu menunjukan arah pergerakan, kamu bisa menggantinya dengan down, left, right (udah mudeng to artinya, gak usah dijelasin ya).
- Jika kamu menggantinya dengan pergerakan horizontal (left ato right) maka hilangkan kode
.
- Angka "100" menunjukkan tinggi dari kotak blogroll kamu. Semakin banyak angkanya maka semakin tinggi pula ukuran blogroll.

OK SELAMAT MENCOBA......



Berapa Harga Blog Kamu?

Pernahkah kamu bertanya, kira-kira berapa harga blog yang kamu miliki setelah membanting keringat dan memeras tulang untuk membuatnya? Nha, sekarang ini ada sebuah layanan di internet yang bisa memperkirakan berapa kira-kira harga blog yang kamu miliki. Caranya sangat mudah tidak perlu bayar ataupun mendaftar, cukup dengan memasukkan alamat Blogmu trus tinggal pencet jerawat kamu, eh salah, maksudnya pencet tombol Submit gak pake lama, hasilnya akan langsung keluar. Selain itu kalo kamu mo pamer, kamu juga bisa memasang hasilnya di blogmu seperti ini nih hasilnya :




Tapi bagi kamu yang blognya masih sepi peziarahnya jangan coba-coba masang karena hasilnya pasti cuman bikin hati gatal, alias harganya masih $0.00. Tapi kalo cuman mo nyoba ngecek sih gak papa dan gak mama, toh ga dosa kok. Kamu mo nyoba? aku punya alamatnya nih, tapi nomor HP-nya gak punya lho . Tapi apa emang bener kalo itu bener-bener harga yang sesuai untuk blog kita? Tau deh. Tapi kamu perlu mencobanya dengan memasukkan alamat blog-blog yang sudah mapan, pasti harganya akan tinggi sekali, jika dirupiahin nih ya mungkin orang yang punya blog itu akan menjadi mendadak dangdut alias kaya mendadak. Nha kamu tertarik mau mencobanya? Silahkan Monggo..
Oh ya aku belum ngasih alamatnya ya? nih alamatnya
http://www.business-opportunities.biz/projects/how-much-is-your-blog-worth/




Google Analytics

Bagi sebagian pemilik blog, mungkin terramat suangat uingin swekali mengetahui data-data dari para pengunjung blognya. Hal tersebut dijuntukkan dengan adanya bermacam-macam pernak-pernik yang ada di blognya, seperti misalnya "Hit Counter", "Site Track Meter", "Alat pendeteksi jumlah pengunjung", "Alat pendeteksi Tsunami (eh, yg ini nggak deng)", dll. Nah buat kamu yang termasuk kedalam golongan umat ini, ada sebuah layanan masyarakat dari Pak Dhe "Google", namanya Google Analytics. Bagi yang sering bergentayangan di dunia maya mungkin tahu apa itu Google Analytics, tapi bagi yang masih Newbe ato masih O-On (jangan marah ya dikatakan o'on) pasti belum tahu atao tahu tapi dikit. Nha.. disini akan coba saya terangkan tentang Google Analytics. Simaklah dengan cermat penjelasan berikut ini:

deng..deng..deng..
Google Analytics berbeda dengan Hit Counter. Hit Counter biasanya hanya menghitung jumlah pengunjung yang datang untuk menjenguk (emangnya sakit). Sedangkan Google Analytics, beliau tidak hanya menghitung jumlah para pengunjung tapi juga data-data yang lainnya, misalnya tentang:
  • Berapa pengunjung yang datang tiap harinya

  • Berapa lama mereka nognkrong di blog kamu

  • Browser apa yang mereka gunakan

  • Dengan cara apa mereka datang, misalnya naik angkot ato jalan kaki (maksudnya lewat search engine, lewat situs orang lain atao langsung datang mak pedunduk).

  • Dari negara mana mereka datang

  • Dari kota mana

  • umurnya berapa

  • Anaknya siapa

  • Udah punya pacar apa belum

  • Ortunya galak ga, dll

NB: Tiga poin terakhir bo'ong.

Nah, pengen gak tuh? kalo pengen daftar disini http://google.com/analytics
Tapi syarat daftarnya sangat berat, yaitu kamu harus punya account di google. Nah berat banget kan? (berat bagi yang gak bisa baca ngetik). Kalo udah daftar nanti kamu tinggal ngisi form yang disodorkan, tapi sante aja cara ngisinya gampang kok gak kayak di SPMB, diantaranya yaitu ngisi alamt webblog kamu, trus jangan lupa nge-set "Time Zone" tapi harus beli coin dulu (emangnya time zone yang ada di mall2). Trus setelah itu kamu nanti akan dikasih kode/script sama Pak Dhe Google (jangan lupa bilang terima kasih). Selesai??? belooommmmm... masih ada lagi..
Nha setelah itu kopi kode/script tersebut, trus login ke blogger Klik Templat -->> Edit HTML. Paste kode/script yang udah dikopi kedalam tag HTML yaitu sebelum tag jangan lupa disimpan. Selesai??? Belooommm...
Kembali lagi ke google.com/analytics, kamu harus mengklikCheck Status dulu (Dicek apakah kamu masih single atau doble). Kalo udah berhasil maka akan ada tandanya, kalo belum ya dicoba lagi.
Datanya baru akan muncul satu hari kemudian, jadi ini bukan seperti hit conter yang datanya akan langsung berubah tiap detik tapi data-data google.com/analytics ini akan muncul tiap ganti hari. OK Selamt mencobaaaaa....




Google Analytics

Bagi sebagian pemilik blog, mungkin terramat suangat uingin swekali mengetahui data-data dari para pengunjung blognya. Hal tersebut dijuntukkan dengan adanya bermacam-macam pernak-pernik yang ada di blognya, seperti misalnya "Hit Counter", "Site Track Meter", "Alat pendeteksi jumlah pengunjung", "Alat pendeteksi Tsunami (eh, yg ini nggak deng)", dll. Nah buat kamu yang termasuk kedalam golongan umat ini, ada sebuah layanan masyarakat dari Pak Dhe "Google", namanya Google Analytics. Bagi yang sering bergentayangan di dunia maya mungkin tahu apa itu Google Analytics, tapi bagi yang masih Newbe ato masih O-On (jangan marah ya dikatakan o'on) pasti belum tahu atao tahu tapi dikit. Nha.. disini akan coba saya terangkan tentang Google Analytics. Simaklah dengan cermat penjelasan berikut ini:

deng..deng..deng..
Google Analytics berbeda dengan Hit Counter. Hit Counter biasanya hanya menghitung jumlah pengunjung yang datang untuk menjenguk (emangnya sakit). Sedangkan Google Analytics, beliau tidak hanya menghitung jumlah para pengunjung tapi juga data-data yang lainnya, misalnya tentang:
  • Berapa pengunjung yang datang tiap harinya

  • Berapa lama mereka nognkrong di blog kamu

  • Browser apa yang mereka gunakan

  • Dengan cara apa mereka datang, misalnya naik angkot ato jalan kaki (maksudnya lewat search engine, lewat situs orang lain atao langsung datang mak pedunduk).

  • Dari negara mana mereka datang

  • Dari kota mana

  • umurnya berapa

  • Anaknya siapa

  • Udah punya pacar apa belum

  • Ortunya galak ga, dll

NB: Tiga poin terakhir bo'ong.

Nah, pengen gak tuh? kalo pengen daftar disini http://google.com/analytics
Tapi syarat daftarnya sangat berat, yaitu kamu harus punya account di google. Nah berat banget kan? (berat bagi yang gak bisa baca ngetik). Kalo udah daftar nanti kamu tinggal ngisi form yang disodorkan, tapi sante aja cara ngisinya gampang kok gak kayak di SPMB, diantaranya yaitu ngisi alamt webblog kamu, trus jangan lupa nge-set "Time Zone" tapi harus beli coin dulu (emangnya time zone yang ada di mall2). Trus setelah itu kamu nanti akan dikasih kode/script sama Pak Dhe Google (jangan lupa bilang terima kasih). Selesai??? belooommmmm... masih ada lagi..
Nha setelah itu kopi kode/script tersebut, trus login ke blogger Klik Templat -->> Edit HTML. Paste kode/script yang udah dikopi kedalam tag HTML yaitu sebelum tag jangan lupa disimpan. Selesai??? Belooommm...
Kembali lagi ke google.com/analytics, kamu harus mengklikCheck Status dulu (Dicek apakah kamu masih single atau doble). Kalo udah berhasil maka akan ada tandanya, kalo belum ya dicoba lagi.
Datanya baru akan muncul satu hari kemudian, jadi ini bukan seperti hit conter yang datanya akan langsung berubah tiap detik tapi data-data google.com/analytics ini akan muncul tiap ganti hari. OK Selamt mencobaaaaa....




Cara Membuat Smile Icon

Hallo sobat tua dan muda dimanapun anda berada, kita jumpa lagi dalam acara Forum ITC Center . Dalam episode kali ini kita akan mencoba membahas tentang "Bagaimana Cara Membuat Postingan/Content Blog Agar Lebih Expressive. Maksudnya apaan tuh?

Gini lho, kalo di layanan Blog lain semisal Wordpress, setiap kita mengetikkan tanda ini :) maka yang muncul adalah gambar ini , kalo tanda ini :p maka yang muncul gambar ini dan lain-lain . Nha kalo gitu kan akan membuat blog kita menjadi lebih expressive tuh. Sayangnya bagi kita yang memakai layanan di Blogger tidak mendapat fasilitas tersebut.



Tapi tenang aja bung, dalam Trik dan Tips kali ini kita akan mencoba membahas bagaimana supaya bagi kita yang memakai layanan Blogger bisa seperti yang ada di Wordpress. Langkahnya cukup mudah, gini lho.....

1. Login ke blogger trus pilih Layout -->> Edit HTML
2. Beri tanda centang pada jawaban yang benar, eh, maksudnya pada Expand Widget Templates
3. Cari kode ini ]]></b:skin> (letaknya kira2 di bagian tengah posisi kiri)
4. Masukkan script di bawah ini persis dibawah kode ]]></b:skin> :


<script src='http://kendhin.890m.com/smile/smile.js' type='text/javascript'/>


Jangan lupa disimpan, trus coba deh kamu posting dengan memakai kode-kode tersebut, InsyaAllah berhasil. kalo gagal coba lagi, kalo masih gagal ya coba sekali lagi, kalo masih gagal lagi ya mengkin servernya lagi down atau itu emang karena kamu kurang beruntung.

Berikut ini adalah beberapa standar kode smile yang bisa digunakan :


:) -->
:D -->
:$ -->
:( -->
:p -->
;) -->
:k -->
:@ -->
:# -->
:x -->
:o -->
:L -->
:O -->
:r -->
:y -->
:t -->
:s -->
:~ -->
:v -->
:f -->
:d -->
:c -->
:z -->


Sebelum mengetikkan kodenya, harus di spasi dulu.
untuk sementera itu dulu, icon-smile selanjutnya masih dalam penelitian di laboratorium





Selasa, 09 September 2008

Cara Mengganti Icon Address Bar

Jika kita membuka suatu website atau blog maka seringkali kita menjumpai ada sebuah gambar atau icon pada address bar (kotak untuk mengetikkan alamat web). Dan jika kita punya blog di Blogspot maka icon default yang akan tampil adalah gambar seperti ini :

Bagi kamu yang tidak puas dengan icon/gambar tersebut, kamu bisa menggantinya dengan gambar sesuai dengan keinginanmu. caranya sangat mudah, yaitu dengan membuat gambar (gif, jpg, ico, dan lain2) dengan ukuran kira2 24x42 pixel sampai 32x32 pixel (sebenarnya ukurannya bebas sih, tapi biar filenya kecil dan proses membukanya cepat). Setelah itu .....
masuk ke "Layout --> Edit HTML" trus tempatkan script berikut kedalam tag <head> atau tepat dibawah script <head>


<link href='http://kendhin.890m.com/sonictrik.gif' rel='SHORTCUT ICON'/>


ganti huruf yang dicetak tebal dengan lokasi gambar dimana kamu menyimpannya. Kamu bisa menyimpan gambarmu di 000webhost atau bisa juga di photobucket dan juga di imageshack atau kalo kamu tidak mau pusing dibawah ini ada beberapa contoh icon/gambar beserta dengan linknya.

Ni aq kasih beberapa Icon :


http://img87.imageshack.us/img87/5862/image1an1.gif

http://img110.imageshack.us/img110/6218/image2ie0.gif

http://img98.imageshack.us/img98/9617/image3cr0.gif

http://img134.imageshack.us/img134/633/image4hx4.gif

http://img139.imageshack.us/img139/83/image5oa7.gif

http://img509.imageshack.us/img509/6449/image6fu0.gif

http://img527.imageshack.us/img527/6543/image7go9.gif

http://img507.imageshack.us/img507/5774/image8wn8.gif

http://img150.imageshack.us/img150/5784/image9qo1.gif

http://img404.imageshack.us/img404/1214/image10vr1.gif

http://img412.imageshack.us/img412/3808/image11pc0.gif

http://img100.imageshack.us/img100/4658/image12du2.gif

http://img132.imageshack.us/img132/4733/image13lj1.gif

http://img145.imageshack.us/img145/7793/image14zg9.gif

http://img412.imageshack.us/img412/4403/image15jc7.gif

http://img264.imageshack.us/img264/7575/image16kn8.gif