HTML Cara Pasang Gambar atau Foto

3 Des 2008

Terkait dengan pertanyaan di Shoutbox "Guest MAS CARANYA NARUK IKON FRIENDSTER DI BLOG ITU GIMANA CARANYA" Nah pada dasarnya pertanyaan itu bisa dengan mudah temen-temen jawab yaitu dengan mengunakan kode untuk gambar menggunakan HTML
Untuk memasang Gambar /Foto di Blog atau web, kita perlu mengatahui dulu alamat foto/gambar yang kita ingin tampilkan, Dahulu sudah agak lama saya bahas mengenai Cara menyimpan foto/gabar di internet salah satunya dengan menggunakan layanan Gratisan www.photobucket.com di sana juga anda sudah mendapatkan layanan yang saya rasa cukup memuaskan mulai dari pengaturan folder penyimpanan foto (album) modifikasi gambar secara online, dan Beserta kode gambar yang siap anda pakai untuk di pasang pada blog anda.

Di sini saya hanya memberikan sedikit gambaran atau cara untuk menampilkan gambar pada blog.

Kode yang di perlukan adalah kode ini: <img src="url gambar anda" alt="deskripsi gambar" width="x% atau xpx" height="y% atau ypx"/>

• Supaya tidak terjadi masalah pada browser anda pastikan di akhir kode image gunakan /> itu menandakan penutup kode, pada awalnya kode Image tidak memerlukan penutup kode tapi pada perkembangannya, harus memiliki kode penutup, selain tiu anda bisa menggunakan kode </img> dengan catatan tidak menggunakan kode /> contohnya: <img src="...." > </img>.
• SRC adalah URL gambar yang akan di pasang.
  
• Width untuk menentukan lebar gambar, satuannya dalam pixel atau persentase, Untuk gambar yang ingin di tampilkan apa adanya, silahkan hapus kode width="......"
• Height untuk menentukan tinggi gambar, satauannya sama seperti width yaitu persentase dan pixel.
• ALT adalah kode untuk mendeskripsikan sebuah gaambar yang anda maksud hal ini berguna untuk mesin pencari menemukan gambar yang sesuai di cari.

selain kode di atas, masih banyak parameter atau kode tambahan untuk tag IMG. selengkapanya bisa di baca di sini :http://www.htmlcodetutorial.com/images/_IMG.html
 Berikut Contoh kode beserta hasilnya:

Gambar aslinya:

<img src="http://klikrupiah.com/images/klik5.gif" alt="Dapatkan Uang lewat Klik Rupiah" width="50%" height="50%/>

Gambar seteleh di atur lebar dan tingginya sebesar 50% dar gambar normal.

Pasang Link pada Gambar

Pada Gambar di atas terlihat bahwa tidak ada link /tautan ke situs atau blog orang lain. jika anda klik maka yang tampil adalah gambar itu sendiri. Cara menambahkan Link pada Gambar adalah cukup mudah, Caranya dengan meletakan tag <a></a> diantara tag <img> Contohnya sebagai berikut:

<a href='https://www.klikrupiah.com/index.php?ref=contoh' target='_blank'><img alt='Klik Dapet Duit' src='http://klikrupiah.com/images/klik5.gif'/></a>

Coba perhatikan kode di atas,  maka saat anda klik, gambar maka akan membuka halaman baru yaitu https://www.klikrupiah.com/index.php?ref=contoh adapun hasilnya bisa di coba langsung pada gambar di bawah ini:

Tampilkan Gambar dari Blog/web Orang Lain

Kemudian bagaimana jika ingin menampilkan gambar dari situs atau blog orang lain?

Caranya hanya mencari alamat gambar yang ingin anda gunakan dan berikut screenshotnya: (sebagai sample saya menggunakan logo www.friendster.com

Cari gambar yang ingin anda pasang, kemudian klik kanan pada image tadi nanti akan muncul menu seperti ini:

Kemudian Pilih dan klik "Copy Image Location" nah setelah di copy silahkan gabungkan dengan kode Image yang sudah di berikan sebalumnya: atau silahkan paste dulu ke notepad atau halaman kerja anda di sini alamatnya sebagai berikut:
http://images.friendster.com/images/friendster_nav_logo.png

Kemudian Siapkan Alamat atau url yang ingin di jadikan link pada saat gamabr /logo Friendster tadi di klik: saya contohkan menggunakan URL friendster saya yaitu: http://profiles.friendster.com/adesanusi Nah setelah terkumpul maka selanjutnya adalah penggabungan yaitu sebagai berikut:

<a href='http://profiles.friendster.com/adesanusi' target='_blank'><img alt='Friendsternya Ade Sanusi' src='http://images.friendster.com/images/friendster_nav_logo.png'/></a>


Dan Hasilnya Sebagai berikut:

Silahkan klik Icon friendster di atas nanti akan tampil Account fiendster saya. Pemasangan dapat di terapkan pada Widget blog maupun postingan blog anda. Semoga berhasil.

Read Post | komentar

HTML untuk Membuat Tabel

19 Nov 2008

Untuk membuat Tabel di Blog atau Web, kita memerlukan kode <table> sebagai pembuka dan kode </table> sebagai penutup. didalam kode Table tersebut terdapat dua bagian yaitu <tr></tr> (Table Rows) untuk membuat banyaknya baris kemudian di dalam Table Rows ada kode <td></td> (Table Data) Untuk tempat pengisian data dan menentukan banyaknya kolom pada masing-masing baris (Table Rows).
Contoh Kode Table:

<TABLE>
<TR> <TD>Raha Mutisya</TD>      <TD>1493</TD> </TR>
<TR> <TD>Shalom Buraka</TD>     <TD>3829</TD> </TR>
<TR> <TD>Hallie Curry</TD>      <TD>8372</TD> </TR>
<TR> <TD>Shari Silberglitt</TD> <TD>4827</TD> </TR>
</TABLE>
     

Hasil:

Raha Mutisya		1493
Shalom Buraka		3829
Hallie Curry		8372
Shari Silberglitt		4827

Penjelasan: Untuk Membuat Tabel, Pertama Buta Baris dengan menggunakan tag <tr> kemudian isi dengan banyaknya kolom tag<td>dan tutup kode sesuai dengan kode asing masing

<tr><td> kolom ke 1 Baris Pertama </td><td> Kolom ke 2 baris pertama </td><td>Kolom Berikutnya</td></tr>

Itu artinya pada Baris Pertama diisi dengan 3 kolom dan untuk menambahkannya cukup menggunakan tag <td> isi </td>

Parameter Pendukung Table:

Untuk mempercanti Table, ada banyak parameter mulai dari Background, Border, Jarak antar Sel dan lainnya: berikut penjelasannya:

Border: Untuk memberikan Garis Tepi pada tabel. coba lihat dan bandingkan dengan tabel pertama. Penulisannya di dalam tag <table> yaitu <table border="5"> dimana angka lima merupakan besarnya garis tepi dalam pixel.

CellSpacing: Untuk Menentukan jarak Antara garis (border Table dengan garis atau border text (terlihat jarak antar garis terlihat berjauhan) Penulisan kodenya diletakan pada tag <table> yaitu <table cellspacing="10"> dimana angka 10 merupakan besarnya jarak antar sel.

CellPadding: Untuk Menentukan jarak text dengan Garis dalam ( telihat garis dalam dan luar berdekatan dan ada jarak teks dengan garis dalam). Pnulisannya :<table cellpadding="10"> dengan jarak 10 pixel.

Terkadang dalam Membuat tabel, kita menggabungkan beberapa kolom atau baris menjadi satu. untuk itu digunakan kode ColsSpan dan RowSpan

Kode:
<table border="2">
<tr>
<th bgcolor="#99ccff" rowspan="3">Production</th>
<td bgcolor="#ccccff" colspan="2">Name and Code</td>
</tr>
<tr>
<td>Shalom Buraka</td> <td>3829</td>
</tr>
<tr>
<td>Brandy Davis</td> <td>0283</td>
</tr>
<tr>
<th bgcolor="#cccccc" rowspan="2">Sales</th>
<td>Claire Horne</td> <td>4827</td>
</tr>
<tr>
<td>Bruce Eckel</td> <td>7246</td>
</tr>
<tr>
<td>Office</td><td>Danny Zeman</td> <td>5689</td>
</tr>
<tr>
<td colspan="3"><a href="http://www.duniague.net/">http://dunia-blogger.blogspot.com</a></td>
</tr>
</table>

Production	Name and Code
	Shalom Buraka	3829
	Brandy Davis	0283
Sales	Claire Horne	4827
	Bruce Eckel	7246
Office	Danny Zeman	5689
http://dunia-blogger.blogspot.com

Penjelasan:

• Diberikan Warna pada kode di atas, menunjukan banyaknya baris disini ada baris silahkan cek pada tabel.
  
• Tag <th> (tabel header) penggati tag <td> biasanya untuk menebalkan bagian Umum Suatu Tabel misalnya, No, Keterangan, Jumlah dan lainnya.
  
• Contoh untuk Rowspan adalah bagian"Production dan Sales" sedangkan untuk Colspan adalah bagian "Name and Code" dan "http://dunia-blogger.blogspot.com" untuk memahaminya silahkan perhatikan pada kodenya :)
  

Lebih Lanjut: http://www.htmlcodetutorial.com/tables/ silahkan pelajari lebih banyak di sana.

Read Post | komentar

Kode Tanda Kutip eh Quote

15 Nov 2008

Tanda kutip atau Quote dalam bahasa inggris, dan kalau dalam komputer nih yang di dalam kurung ( " ), eh ternyata di ada juga lho di blog. bukan apa apa, hanya kode <blockquote> dan diakhiri dengan kode </blockquote> kode itu digunakan untuk menandai sebuah catatan penting, misalnya sebuah kata mutiara dan lainnya. dan pada keadaan standarnya, Quote akan menjadikan paragraf menjorong ke dalam, maksudnya kayak menggunakan tab gitu deh kalo di MS WORD.

Berikut Contoh Quote:
untuk membuat Tanda kutip atau quote Cukup mudah, silahkan gunakan kode <blockquote> dan akhiri dengan </blockquote>

Misalnya:
<blockquote>Contoh Quote: Kegagalan adalah sebuah langkah awal menuju suatu keberhasilan, dan jadikanlah kegagalan anda menjadi pelajaran bagi anda untuk tidak mengulanginya dikemudian hari.</blockquote>

Untuk menampilkan Quote pada saat pengaturan /posting, silahkan gunakan tombol tanda kutip di menu atas biasanya di samping Bullet List.

hasilnya seperti gambar di bawah:
di sana terlihat agak menjorok ke kanan. nah sekarang pembahsan utamanya adalah memodifikasi kode Quote supaya tampilannya lebih cantik dan bagus tentunya.

Modifikasi Quote

Untuk memodifikasinya, cukup mudah yaitu dengan sedikit otak-atik kode CSS di blog atau situs kita. Caranya seperti ini:

1. Login ke blogger dan Klik Layout
2. Pilih Edit HTML dan gak perlu klik Expand Widget Template.
3. Cari kode blockquote { dan kalau sudah ada silahkan hapus dan ganti dengan kode dibawah: jika belum sada silahkan pasang kode di bawah.
   

Tambahkan Kode berikut: ini: dan pasang diatas kode ]]></b:skin>

blockquote {
margin: 10px 0px 10px 20px;
padding: 10px 15px 10px 15px;
line-height: 1.6em;
color: #00ff00r;
background: #fcffd4;
border: 2px solid #C2CD43;
}

Itu akan memberikan kotak pada Quote dan hasilnya seperti ini:

nah itu contohnya Itu standar, mungkin teman teman ingin dengan hal baru misalnya Gambar pada bcakgrounnya cukup memodifikasinya pada bagian background: #fcffd4;

Jarak padding contohnya yang ditunjukan oleh warna merah sedangkan margin jarak text dengan batas /border. garis biru. Color untuk warna tex Quote, line-height untuk besarnya garis tepi atau border, silahkan atur besarnya. Border untuk menampilkan garis tepinya. bisa diatur berupa garis titik-titik atau minus.

Contoh ke dua menggunakan background gambar:

blockquote { margin: 10px 10px 10px 10px; padding: 5px 10px 5px 50px; color: #86AA3F; background: url(http://i261.photobucket.com/albums/ii65/adephotobucket/tanda_kutip.png)top left no-repeat; }

Berikut ini haslinya:

Silahkan Padukan dengan Kreasi anda, dan ganti dengan background yang anda inginkan. cukup mengganti kode di atas.

Read Post | komentar

Membuat Kode Artikel Blog

12 Nov 2008

Agak lama saya baru memposting artikel terbaru, karena sedikit sibuk dan males baerbaur dengan kondisi badan yang kurang fit. Sekarang saya hanya sedikit tips untuk membuat kode Artikel Blog Kita. Ini bermanfaat bagi pengunjung/visitor blog kita yang mungkin ingin copy paste artikel.

Silahkan Masuk ke Edit HTML, kemudian Cari kode ini:

<data:post.body/>

Kemudian Hapus atau modifikasi dan menjadi Seperti ini:

<data:post.body/><br/><b>Ingin Memasang artikel ini ?: Silahkan Copy kode di bawah:</b><br/><center><textarea cols='45' rows='5'><data:post.body/></textarea></center>

Nanti Hasilnya Kurang Lebih Seperti ini:

 

Penjelasan: kode <br/> untuk memberiakan jarak  kosong satu baris, dan <center> Agar Kotak kotaknya berada ditengah, dan  <textarea cols='45' rows='5'> Untuk Menampilkan kode Artikel kita, dengan Colom/lebar sebesar 45 dan baris atau tinggi sebesar 5. Silahkan atur besarnya sesuaikan dengan blog masing-masing.

Note:Mungkin perlu diperhatikan kalau blog anda menggunakan Readmore /ringkasan artikel, besar kemungkinan kodenya ada 2. dan biasanya berada paling atas. Selamat Mencoba.

Read Post | komentar

Menambahkan Bacground Pada Link

30 Okt 2008

Salah satu untuk mempercantik Blog adalah melalui link yang di postingan kita, artikel sebelumnya membahas bagaimana membuat link menjadi besar/kecil saat kursor diarahkan. kali ini sedikit bermain-main dengan kode CSS untuk menambahkan background gambar pada Link.

Langkahnya Mudah kok, Login ke Blogger, dan menuju EditHTML.

Silahkan Cari Kode di bawah ini: /* masing-masing kode */

1. Kode a {

2. Kode a:hover {

3. Kode a:visited {

Berikut kode yang diperlukan untuk menambahkan background pada link. Caranya dengan menambahkan kode di bawah ini dan letakan kode di bawah kode a { , a:hover { dan a:visited {

1. Gambar /Background di samping Kiri Link

background: url(http://pic.photobucket.com/general/right-arrow-off.gif) no-repeat;
padding-left: 20px;

2. Gambar/background berada tepat pada link.
background: url(http://i261.photobucket.com/albums/ii65/adephotobucket/h1_bg.jpg) repeat-x; 

Berikut Contoh Hasilnya. kiri untuk langkah 1 dan kanan untuk langkah ke 2. Da akan ada background gambar pada link. sesuai langkah yang dilakukan.

Kode a { adalah saat link dalam keadaan normal. sedangkan kode a: hover { adalah kode saat kursor diarahkan pada link. sedangkan kode a:visited { adalah kode untuk link yang sudah di klik/dikunjungi, berikan gambar berbeda untuk masing masing kode tadi supaya tampilan lebih bagus. atur sesuai kebutuhan dan sesuaikan dengan link yang ada, misalnya .post a { maka animasinya hanya pada postingan saja, lainnya misalnya sidebar a { dan lainnya.

Selamat Mencoba.

Read Post | komentar