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

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... :)