Hanya arsip

halaman asli ada di http://kolom-tutorial.blogspot.com

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 www.cooltext.com,
Silahkan ikuti langkah-langkah berikut ini :

  1. Untuk menuju http://cooltext.com silahkan klik di sini
  2. Lalu klik tulisan Design a Logo
  3. Klik gambar contoh logo yang sobat sukai
  4. Tulis tulisan yang ingin di jadikan logo di sampimg tulisan Logo Text. Misal : Blog Tutorial
  5. Tulis ukuran yang di inginkan di samping Tulisan Text Size. Misal : 50
  6. Klik logo warna-warni disamping kotak yang ada tulisan Text Color untuk memilih warna tulisan (text).silahkan pilih warna yg sobat sukai
  7. Pilih format image disamping tulisan file format. sebaiknya .JPG atau .GIF
  8. Klik tombol yang bertuliskan Render Logo Design
  9. Tunggu beberapa saat ketika proses pembuatan logo berlangsung
  10. 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
  11. 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 :

  1. Untuk menuju www.photobucket.com, silahkan klik di sini
  2. Jika belum terdaftar di situs ini, silahkan daftar dulu (gratis bo) dengan meng klik tombol yang bertuliskan Join Now pada sudut kanan atas layar
  3. Sekarang saya asumsikan sobat sudah terdaftar (pastilah cara daftarnya bisa kan)
  4. Silahkan Sign In dengan Id sobat
  5. Bila sudah berada pada halaman Account sobat, Klik tombol yang bertuliskan Browse... Silahkan pilih logo yang tadi di buat
  6. Klin tombol yang bertuliskan Upload
  7. Tunggu beberapa saat ketika proses upload berlangsung
  8. Setelah upload selesai, akan di perlihatkan gambar logo serta kode HTML nya
  9. Copy kode HTML yang ada di sebelah tulisan URL Link. Paste pada program notepad
  10. 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"&gt;

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&quot; 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=”…” :

ini contoh saja

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      

Iklan

18 Mei 2007 - Posted by | aksesori blog, blog tutorial

17 Komentar »

  1. kang rohman, saya menikmati tutorial Anda. meski belum langsung praktik, sepertinya lbh mudah dimgerti. ntar sya langsung coba. :))

    jirov

    Komentar oleh J I R O V | 23 Mei 2007 | Balas

  2. kalau biar bisa untuk link gimana?

    Komentar oleh Nugi | 11 Juni 2007 | Balas

  3. Sobat nugi kirim email aja biar jawabannya tuntas. kirim ke amn_tea@yahoo.co.id

    Komentar oleh rohman | 11 Juni 2007 | Balas

  4. Mas apa gak enaknya yang di copy HTML Tag-nya aja terus diganti. Aku pakai caranya mas rohman kok gak bisa tampil ya….

    Komentar oleh Nugi | 16 Juni 2007 | Balas

  5. silahkan saja sobat nugi kalau yg mau di copy adalah HTML tag-nya
    soalnya nanti juga sama-sama juga hasilnya. yang penting kita tahu cara kerjanya.

    Komentar oleh rohman | 16 Juni 2007 | Balas

  6. sangat berguna bagi saya mas…!!!
    semoga blog nya semakin sukses…

    Komentar oleh ihsan | 1 Desember 2007 | Balas

  7. amat baik, thank

    Komentar oleh mutalib | 16 April 2008 | Balas

  8. muatorr Suwun Kang Rohman……..
    seng pnteng muator suwun ndisek Wlopun msh agk bngung..
    yg pntng dcoba..

    Komentar oleh A.R. Sholeh | 29 April 2008 | Balas

  9. thanks buat penjelasannya bang………..

    Komentar oleh micha | 8 Mei 2008 | Balas

  10. makasih Pak Rohman. tutorialnya sangat membantu dan sudah saya praktekan.

    Komentar oleh treen | 29 Mei 2008 | Balas

  11. Salam kenal kang…

    Saya jadi pengen ikut ngeblog neeh, tapi saya belom begitu paham caranya neeh, bantuain ya kang…

    Komentar oleh Ronny | 19 Juni 2008 | Balas

  12. Terima kasih atas infonya. πŸ˜€

    http://mankalvin.blogspot.com/

    Komentar oleh Mank-Alvin's Blog | 1 Juli 2008 | Balas

  13. πŸ˜‰
    Bagi2 ilmunya dund ! ! ! kren2 smua postingannya !!! Btw kang Rohman byar service SEO ya ???
    klo byar ato ga, kasih tw SEO service yang kang pake skarang dund situsnya apaan !
    :D:D:D

    Kunjungin blog aq ya ! ! !:D:D:D

    Komentar oleh Rifqi | 4 Juli 2008 | Balas

  14. Assalamualaikum….. Kang! mau nanya dikit lagi kang! gmana caranya menampilkan image di header, yang muncul koq cuma nama blog aja! eh aku minta izin dulu ya kang!aku ngambil template kang rohman yang unik belum izin.
    terima kasih banyak kang !
    Wassalam……

    coll.aan@gmail.com
    http://sunangesengkediri.blogspot.com/

    Komentar oleh SUNAN GESENG | 28 Juli 2008 | Balas

  15. kang rohman terimakasih banak,…..saya senang bissa dapat banyak ilmu dari kang rohman,..

    Komentar oleh Lembur Kuring | 5 Agustus 2008 | Balas

  16. tabik, brutal tutorial keren bung

    wawawuwiwowa.blogspot.com

    Komentar oleh wawawu | 18 Agustus 2008 | Balas

  17. KANG SAYA MASIH SANGAT PEMULA,BOLEH NGAK SAYA NANYA, GIMANA BIKIN HAL WEBPAGE INI, KOK NGAK KELIHATAN ADA LAMBANG BLOGGER.COMNYA (MALAH FOTO SAMPEYAN YG ADA, DAN KANAN-KIRINYA TDK ADA LAMBANG BLOGGER JUGA) ?KAYAK SITUS YG BYR (SAYA JADI MALU KRN MASIH PEMULA),TOLONG DIJAWAB KANG YA….

    Komentar oleh BBM - ALTERNATIF | 28 Agustus 2008 | Balas


Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: