Monday, July 15, 2013

Cara membuat Link pada Header Blog

Penulis Andimensi Diterbitkan July 15, 2013

Tags

Tutorial Blog

Note: Yang dibutuhkan adalah Photoshop, Dreamweaver, koneksi internet

· Silahkan design dahulu header blog kamu dengan Photoshop.

· Simpan dalam ekstensi .jpeg, .jpg atau .png

· Buka Dreamweaver, Klik File -> New -> HTML -> Create
Muncul jendela ini. Taruh kursor di sebelah <body>

· Klik Insert -> Image -> Pilih dan masukan header punya anda. Klik ok ok aja kalau muncul dialog box.

· Setelah muncul dialog box di atas, klik gambar dan akan muncul dibawah ikon Rectangel tool, circle tool. Block button di header-mu. Disini aku pilih rectagle tool karena button-ku kotak.

· Ketik alamat tujuan link di kotak link, dan ketik _blank di kotak target. Lakukan hal yang sama pada button lain.

Setelah selesai, klik File -> Save. File akan tersimpan dalam bentuk .html.

· Selanjutnya, login ke akun blog punyamu. Buka Tata Letak, dan upload design header-mu di kotak header.

· Klik simpan, buka alamat blogmu.

Klik kanan pada header, klik copy image location. Maka url header-mu akan ter-copy.

· Buka file .html-mu tadi dengan Notepad.

Ganti dan paste url header-mu seperti gambar di bawah.

· Copy seluruh isi notepad tersebut.

Buka Tata Letak -> Tambah Gadget -> HTML/Java Script. Paste isi notepad tadi, simpan.
Taruh header kamu ke atas di bawah tempat kamu upload design header.

Simpan, dan klik lihat blog. jadinya blog akan mempunyai dua gambar Header.

· Sekarang tugasmu adalah menghilangkan header bagian atas.

Klik Template -> Edit HTML -> Lanjutkan. Centang pada kotak Expand Template Widget.
Cari kode header h1 { Gunakan Ctrl + F}.

Kamu akan diarahin ke bagian header.

· Tulis display:none; di setiap sebelum tanda {

Hanya dari bagian /* Header sampe sebelum /* Main

Untuk memastikan berhasil klik Pratinjau, jika berhasil klik Simpan Template.
Klik Lihat Blog.

Header punyamu sudah punya button berisikan link.

Sumber