Friday, May 25, 2007

Pasang Image pada judul Artikel

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

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

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

Langkah pertama

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

Langkah kedua

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

Langkah ketiga

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


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

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


<img src="URL image">

Sehingga kodenya akan jadi seperti ini :


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

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

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


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

sehingga image yang tadi akan berubah jadi seperti ini :

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

Langkah keempat

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

Untuk yang memakai template klasik :

Klik menu Template

Klik menu Edit HTML

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

Cari kode berikut pada kode HTML sobat :

<$BlogItemTitle$>

Edit

Find

<$BlogItemTitle$>

judul postingan

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

Klik tombol Preview untuk melihat perubahan yang dilakukan

Jika sudah OK, klik tombol Save Settings

Selesai

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

Untuk yang memakai templat baru :

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

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

kode image tersebut tag nya harus ditutup dengan tag penutup :


</img>

Sehingga kode image jadi bertambah menjadi :

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

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

Klik menu Layout

Klik menu Edit HTML

Klik tulisan Download Full Template

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

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

Tunggu beberapa saat sampai proses selesai

Cari kode berikut pada template sobat :



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


<b:else/>

Sisipkan kode gambar yang kita miliki diantara kode :



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


<b:else/>



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


<b:else/>

Klik tombol PREVIEW untuk melihat perubahan

bila sudah OK, klik tombol SAVE TEMPLATE

Selesai

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

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

Petunjuk praktis membuat Blog

UPDATE: CARA MEMBUAT BLOG DI BLOGGER / BLOGSPOT SEJAK JANUARI 2007 BERUBAH. LIHAT UPDATE DI BAWAH UNTUK DETAILNYA.

Karena banyak yg bertanya tentang apa itu blog, maka agar lebih praktis saya tuliskan saja di sini info dasar blog bagi pemula. Tulisan ini berdasarkan cara pandang saya melihat teknologi blog yg sekarang lagi tumbuh pesat diminati tidak hanya kalangan awam, tapi juga mulai merambah ke kalangan intelektual dan akademisi serta selebritis Indonesia. Di luar negeri, blog sudah berkembang sejak lama. Kita saja yg memang suka ketinggalan.

1. Apa itu blog?

Blog adalah situs pribadi. Berbeda dg website yg setiap memposting harus susah payah memakai kode ekstensi .html .php, .asp, dll, blog merupakan otomatisasi dari semua ekstensi tsb. Sehingga karena sudah diotomatisasi, maka kita-kita semua yg lugu teknologi menjadi ostosmastis dapat memposting apa yg kita inginkan persis seperti kita memposting email ke teman atau ke milis.

Dan karena kemudahan inilah, maka semua orang yg tahu internet dapat membuat blog atau situs pribadi; sama halnya dg memiliki email. Tak heran apabila pemilik blog bervariasi: mulai dari pembantu rumah tangga, ibu rumah tangga, tukang jualan sayur di pasar klewer, cewek-cewek "ramah" di pasar senggol, sampai profesor dan menteri-menteri.

2. Bagaimana cara membuat blog?

Seperti halnya email, buat account dulu di free blog provider (pemberi hosting/domain blog gratis). Yg paling populer adalah http://www.blogger.com. Bagi Anda yg sudah agak melek-huruf teknologi bisa juga buat account di http://www.wordpress.com dan http://blogsome.com. Selain yg dua ini masih banyak penyedia blog gratis yg bisa Anda ketahui kemudian. Ikuti pentunjuk step-by-step ketika mendaftar.

3. Setelah selesai register/sign-up di http://blogger.com, anda dapat mulai memposting/mempublish apapun yg Anda inginkan di blog: mulai dari curhat, puisi, cerpen, tulisan serius sampai yg canda.

UPDATE: Daftar Blogger Baru

Sejak Januari 2007 proses pembuatan/ registrasi / sign-up blog di blogger.com lebih dipermudah, sbb:

1. Apabila Anda punya email di gmail.com, maka Anda bisa langsung log-in atau sign-in di blogger.com --> new blogger --> masukkan id/usernama plus password gmail Anda. Dan ikuti proses selanjutnya.

2. Apabila Anda belum punya email di gmail.com, silahkan buat (register/ sign-up) dulu di http://gmail.com --> sign-up. Setelah jadi email gmailnya, kunjungi http://blogger.com --> new blogger --> masukkan id / usernama gmail Anda plus password dan ikuti proses pembuatan blog selanjutnya.

Sumber : http://kolom-mario.blogspot.com/2005/12/petunjuk-praktis-membuat-blog-1.html (Petunjuk Praktis Membuat Blog)

Blogroll Alternatif

Judulnya lucu ya, kaya pengobatan saja pake kata altenatif segala, pengobatan alternatif kalee..

Baiklah para sobat semua, dalam kesempatan kali ini saya akan membicarakan tentang yang namanya Blogroll.

Apa itu Blogroll?

Blogroll atau di sebut juga Link Exchange atau kata orang bandung sih tukeran link antar blog atau website adalah menyimpan link address milik orang lain pada blog/website milik kita.

Apa manfaat dari blogroll?

Mungkin secara sekilas para sobat berpikir bahwa memasang link address milik orang lain pada blog/website milik kita akan merugikan, sebab dengan itu tentu saja kita memberikan jalan kepada para pengunjung untuk meninggalkan blog kita. Alasan itu mungkin ada benarnya, akan tetapi tidak seutuhnya benar. Dengan adanya blogroll banyak sekali manfaat yang kita dapatkan, antara lain yaitu mempererat tali silaturahmi atau tali persaudaraan diantara pemilik blog/website. selain
itu semakin banyak blog kita di link oleh blog lain maka semakin baik pula posisi rangking blog kita pada Search Engine semacam Google, Yahoo, Msn serta teman-temannya. Tentu saja sama-sama kita ketahui bahwa setiap pemilik blog/website
berkeinginan bahwa blog/website miliknya mempunyai rangking yang baik pada search engine. Makanya budayakan tukeran link jangan pelit, karena kalau kita pelit memberi link ya tentu saja tidak akan ada yang mau pasang link addres milik kita pada blog mereka.

Terus apa hubungannya dengan judul di atas?

Oh iya ke asyikan bercerita jadi lupa pada topik bahasan. OK kita kembali ke lap....top (yeee..ngekor ama tukul) eh topik bahasan. Bagi para sobat yang baru membuat blog dan baru memiliki blogroll hanya beberapa saja mungkin tulisan ini tidak
terlalu bermanfaat, tapi mungkin barangkali nanti setelah link sobat jumlahnya sampai ratusan atau bahkan ribuan informasi ini bisa jadi bermanfaat. Memang seperti yang tadi saya katakan di awal bahwa bertukar link atau link Exchange sangat bermanfaat, tapi...ada tapinya nie sobat..kalo link sobat sudah mencapai ratusan atau bahkan ribuan tentu saja akan menemui masalah, yaitu tentu saja link ini akan memakan tempat yang banyak dan jadi tidak enak untuk di pandang mata para pengunjung. Nah jika sobat mempunyai masalah demikian, maka saya akan memberikan beberapa alternatif jalan keluarnya (tuh kan jadi nyambung, keluar juga kata alternatif nya). Yaitu antara lain :

Blogroll dengan marquee

yang paling banyak di gunakan oleh para blogger untuk menghemat space pada blog adalah dengan menggunakan perintah marquee.

Contoh membuat blogroll dengan perintah marquee :


<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="200" > 



<a href="http://rubrik-elektronik.blogspot.com" target="_blank">Rubrik Elektronik</a>


<br/><br/>


<a href="http://user-online.blogspot.com" target="_blank">User Online</a>


<br/><br/>


<a href="http://rohman-freeblogtemplate.blogspot.com" target="_blank">free Blog Template</a>


<br/><br/>


<a href="http://kolom-authorized.blogspot.com" target="_blank">Authorize service</a>


<br/><br/>


<a href="http://contoh-blog.blogspot.com/" target="_blank">Blog D'Tree</a>


<br/><br/>



</marquee>

Maka nanti yang akan tampil pada blog kita adalah seperti ini :

User Online

free Blog Template

Authorize service

Blog D'Tree

Sedikit clue biar agak jelas. Kode diatas tidak baku harus di tuliskan persis seperti di atas, tapi bisa di sesuaikan dengan kondisi dan keinginan sobat. Kode yang bisa di rubah adalah :

scrollamount="2" --> angka "2" adalah menunjukan kecepatan gerakan, jika ingin lebih cepat silahkan ganti nilainya
dengan yang lebih tinggi. Misal : scrollamount="3" ,scrollamount="4" , scrollamount="5"

direction="up" --> tulisan "up" menunjukan arah gerakan keatas, kalau ingin di rubah tinggal ganti kata "up" menjadi
"down,left,right" . Misal : direction="down" , direction="left" , direction="right" .

width="50%" --> tulisan "50%" menunjukan lebar dari marquee sebesar "50%" dari tempat dimana perintah ini ditempatkan,
jika ingin di rubah tinggal ganti dengan nilai yang di inginkan. contoh : width="30%" , width="70%" , width="100%"

height="200" --> tulisan "200" menunjukan tinggi dari marquee sebesar 200px, jika ingin di ganti tinggal di rubah
nilai angkanya. Misal : height="100" , height="300" , height="400" , height="250" .

Ada variasi lain, yaitu dengan memakai tabel, contoh :


<table border="3" width="155" height="130" cellpadding="2">



<tr>



<td align="left">



<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="200" > 



<a href="http://rubrik-elektronik.blogspot.com" target="_blank">Rubrik Elektronik</a>


<br/><br/>


<a href="http://user-online.blogspot.com" target="_blank">User Online</a>


<br/><br/>


<a href="http://rohman-freeblogtemplate.blogspot.com" target="_blank">free Blog Template</a>


<br/><br/>


<a href="http://kolom-authorized.blogspot.com" target="_blank">Authorize service</a>


<br/><br/>


<a href="http://contoh-blog.blogspot.com/" target="_blank">Blog D'Tree</a>


<br/><br/>



</marquee>



</td>



</tr>



</table>

Maka hasilnya akan seperti di bawah ini :

User Online

free Blog Template

Authorize service

Blog D'Tree

Blogroll dengan menu dropdown

Untuk membuat blogroll pada menu dropdown, silahkan lihat contoh di bawah :

<form>

<select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu>

<option> - Blogroll - </option>

<option value="http://rubrik-elektronik.blogspot.com">Rubrik elektronik</option>

<option value="http://user-online.blogspot.com">User Online</option>

<option value="http://rohman-freeblogtemplate.blogspot.com">free blog template</option>

<option value="http://kolom-authorized.blogspot.com">Authorize service</option>

<option value="http://contoh-blog.blogspot.com/">Blog D'tree</option>

</select>

</form>

Hasilnya akan seperti ini, silahkan klik pada menu dropdownnya :

Contoh variasi lainnya :

  
 <h3>  Blogroll  </h3>
 


 
<div align="left">




<select style size=5="font-weight: normal; font-size: 13px; width="135"; font-family: Verdana,Tahoma,Arial; background-color: rgb(229, 229, 229);" onchange="window.open(this.options[this.selectedIndex].value,'_blank')" size="1" name="menu">



<option style="font-weight: normal; font-size: 11px; color: rgb(204, 204, 204); font-family: Verdana,Tahoma,Arial;" value="" selected="selected">--Teman-temanku--</option>
         



<option value="http://rubrik-elektronik.blogspot.com">rubrik Elektronik</option> 



<option value="http://user-online.blogspot.com">User Online</option>



<option value="http://rohman-freeblogtemplate.blogspot.com">Free blog template</option>



<option value="http://kolom-authorized.blogspot.com">Authorized Service</option>



<option value="http://contoh-blog.blogspot.com/" target="_blank">Blog D'Tree</option>



</select>



</form>
</div>

Hasilnya akan seperti ini :

Thursday, May 24, 2007

User Online Status

English Version

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

How to get it? please following the steps :

Please visit www.histats.com.

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

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

Click Continue button.

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

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

Click Continue button at the bottom of page.

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

Click Continue button.

Wait a moment, your counter is updating.

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

Logout and close your internet browser.

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

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

After entering the dasboard page , click Layout.

Click at Page Element tab. See the picture below :

Click at Add a Page element.

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

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

Click

Done. Please see the result.

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

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

http://www.neoworx.net

http://www.webfooted.net

http://www.fastonlineusers.com

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

Versi Bahasa Indonesia

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

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

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

Silahkan buka www.geovisite.com

Klik tulisan Register yang berada di bawah gambar Geo counter Flash

Tulis alamat email sobat pada kotak kosong di samping tulisan Email

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

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

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

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

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

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

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

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

Klik tombol yang berlogo disket

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

Silahkan close window browser sobat

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

Selesai.

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

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

http://www.neoworx.net

http://www.webfooted.net

http://www.fastonlineusers.com

http://www.histats.com

Selamat menikmati tool baru...

Tuesday, May 22, 2007

Membuat Read More (2)

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

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

Klik Setting

Klik Formatting

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

<div class="fullpost">




</div>

Klik tombol yang bertuliskan Save Settings

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

Klik menu Dasboard

Klik menu Layout

Klik menu Edit HTML

Klik tulisan Download Full Template

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

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

Tunggu beberapa saat ketika proses sedang berlangsung

Silahkan Sobat cari kode berikut pada kode template milik sobat :


<div class='post-body'>

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


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



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



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



<b:else/>



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

Kemudian lihat kebagian bawah sehingga terlihat kode berikut ini :


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

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


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



</b:if>

klik tombol bertuliskan Save Template
Selesai.

Cara Posting Artikel

Klik menu Posting

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


<div class="fullpost">




</div>

Tulisankan artikel yang ingin tampak pada blog sebelum kode :


<div class="fullpost">

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


</div>

Klik tombol bertuliskan PUBLISH POST

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

Selamat mencoba !

Monday, May 21, 2007

Tutorial HTML (2)

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

<html>

<head>

<title>latihan</title>

<body>

Tulis apa-apa yang saya terangkan di sini !

</body>

</html>

Kita langsung ke topik bahasan aja ya biar ga bosan.

Elemen dasar HTML

Ada beberapa elemen dasar HTML yaitu :

Elemen Blok Level

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

Contoh :


<h1>Ini heading 1</h1>


<h2>Ini heading 2</h2>


<h3>Ini heading 3</h3>


<h4>Ini heading 4</h4>


<h5>Ini heading 5</h5>


<h6>Ini heading 6</h6>

Hasilnya akan seperti ini :

Ini heading 1

Ini heading 2

Ini heading 3

Ini heading 4

Ini heading 5

Ini heading 6

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

Contoh :

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

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

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

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

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

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

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

Hasil yang akan tampil seperti ini :

Ini font size 1

Ini font size 2

Ini font size 3

Ini font size 4

Ini font size 5

Ini font size 6

Ini font size 7

Itu adalah contoh untuk menampilkan huruf dalam berbagai ukuran.

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

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

Nantikan seri berikutnya!

Friday, May 18, 2007

Buat Logo & Image Button

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

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

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

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

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

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

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

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

Maka contoh hasilnya akan seperti ini :

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

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

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

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

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

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

Ok sobat, selamat menikmati hasil karyanya

Pages

younggeneration

About