Tutorial Edit Header Menjadi Ber-Link dengan Quackit (Online HTML Editor)

Friday, March 11, 2016

Yuhuuuu... akhirnya selesai juga header blog saya jadi lumayan kece dibanding sebelumnya!

Udah beberapa hari ini saya kelimpungan nih ngurus header blog saya, yang tulisannya tak bisa dirubah karena bawaan template. Padahal template-nya udah males ganti lagi, cape saya... haha...



Oh iya, lewat Google saya jadi tahu kalau header bisa berupa gambar yang kalau diklik bisa nge-link. Tapi, rata-rata blog yang saya kunjungi mesti pake aplikasi Dreamweaver, padahal di laptop saya kagak ada. Akhirnya saya cari Dreamweaver online (berkaca dari picsart dan pixlr yang ada online-nya, kemungkinan ada, yakin banget!). Eh, ternyata gak ada, hiks... padahal tutorial yang berseliweran pakai ini.

Sayapun menemukan beberapa aplikasi editor HTML online, namun banyak yang bikin saya bingung dan super simple (alah.. saya memang gaptek deh). Akhirnya nemu yang pas. Saya edit via Quackit.com.






Ini tutorial ala saya:

1. Pertama bikin dulu gambar header yang mau dipakai. Saya buat via Pixlr. Bisa juga pake Photoshop atau Picsart, dan beberapa aplikasi edit foto lain. Terserah mana yang disuka dan dikuasai tentunya. Bisa lihat totorial sederhana di sini.

2. Upload foto yang akan dijadikan header kamu ke image hosting seperti Photobucket (saya pakai itu).

  Caranya:
  Masuk saja ke Photobucket.com , lalu register atau sign up saja untuk membuat akun kalau belum daftar akun. Masuk akun kamu.



Upload foto yang akan dijadikan header tadi dengan klik upload pada gambar atas.
Lalu, klik Choose photos & video, bisa juga di drag.


Setelah itu, pilih gambarnya di folder tempat kita simpan.
Klik view upload.


Dan muncul gambar yang tadi kita upload. Lihat di sebelah kanan layar, kamu akan temukan Direct, klik isian kotak Direct tadi, secara otomatis akan mengcopy.



3. Lanjut ke aplikasi online editor HTML  Quackit. Masuk ke alamat Quackit.com. Pilih HTML codes, lalu klik Online HTML Editor (Full).




4.  Akan tampil editor dengan versi sederhana, maka klik Full HTML Editor seperti pada gambar yang sudah ditandai biru.




5. Setelah terbuka Full version, maka selanjutnya adalah  pilih ikon new agar menampilkan lembar kerja baru. Lalu klik ikon image seperti pada gambar (urutan dari kiri ke kanan).



6. Pada Image Info, isikan URL gambar dari photobucket tadi. Isi dengan kode dari kotak DIRECT yang tadi sudah dicopy. Setelah copy di Direct Photobucket tadi, maka klik kanan di kotak URL lalu klik paste. Maka akan muncul gambar di kotak bawah sebagai preview.
Isi alternative text silahkan mau diisi apa.


7. Klik juga bagian Link, isi URL dengan alamat blog yang ingin dijadikan link saat kita klik gambar. Misal alamat blog kita.


8. Dan hasilnya terlihat, gambar nampak muncul.


9. Untuk mendapatkan/melihat kode HTML-nya maka klik Source, akan terlihat kode HTML.


10. Lalu copy semua teks kode HTML-nya, caranya tekan Ctrl+A lalu klik kanan dan klik Copy.

11. Buka Blogger, pilih blog yang akan diganti headernya, lalu klik Tata Letak.


12. Lalu klik tambahkan gadget pada Header, pilih HTML/Javascript. Untuk Header yang berupa tulisan yang sudah ada, maka silahkan hapus saja.


13. Pada kotak konten klik kanan lalu paste kode yang tadi sudah dicopy.


Dan, selesaii...! Header kamu sudah bisa diklik dan full gambar. Silahkan dicoba... :)

You Might Also Like

15 komentar

  1. Sudah lama pengen bikin header sendiri tapi gak ngerti caranya..
    Thanks for share mbak :)

    ReplyDelete
  2. pakai pic monkey juga bisa mbak....

    ReplyDelete
    Replies
    1. iya, pokoknya foto editor kalau bikin gambarnya, mbak...

      Delete
  3. Aq kalau suruh ngutak atik html sering pusing mendadak Mbak haha
    Aq follow sekalian blognya ya Mbak :)

    ReplyDelete
    Replies
    1. Haha, sama kaya saya mbak... ini juga karena butuh banget.

      Delete
  4. Udah lama, ingin buat header blog yang sesuai dengan keinginan sendiri. Langsung praktek ah...
    Makasih sharingnya ya mbak 😊

    ReplyDelete
  5. Langkah langkah nya cukup mudah untuk aku yang gaptek.. Masalah nya aku tetep gaptek hhiikksss.. *angkat bendera putih, damai* aku ngerti nya yang poin 12 aja.. Hehehe

    ReplyDelete
  6. ehm harus nyari waktu luang luang banget unt nyoba *emak sok rempong* ya lumayan lelet kalau ikut tutorial html html gitu hahaha gaptek

    ReplyDelete
  7. Hi.. currently I am doing a research about beauty blogger's influence in cosmetic buying intention in Indonesia for my thesis.
    It would be great if you can help me to fill in the questionnaire.


    https://docs.google.com/forms/d/1RsfM-dO9rATuCB1hqCuY4j5Ktl09MoIGZyEvaz5Rfb8/viewform?c=0&w=1&usp=mail_form_link


    Thank you in advance

    ReplyDelete

Silahkan berkomentar dengan baik, sopan dan boleh sedikit bercanda tanpa keterlaluan, ya. No Spam No Iklan.

There was an error in this gadget

Popular Posts

Flickr Images