Cara Membuat Link Di Gambar Header Blog

Membuat Link Di Gambar Header Blog. Inilah judul postingan Tutorial Blog kali ini, beberapa waktu yang lalu ada salah seorang teman spesial yang pengen banget menaruh Link Di Gambar Header Blog pribadinya, awalnya saya berpikir mungkin susah dan sangat ribet, butuh satu hari full untuk Membuat Link Di Gambar Header Blog dan berbagai cara sudah saya gunakan mulai menggunakan Script tapi tidak ada satupun yang berhasil dan akhirnya saya kepikiran dengan Adobe Dreamweaver yang sempat saya gunakan dalam metode pembelajaran beberapa semester lalu. Dan akhirnya hanya dengan beberapa menit Link Di Gambar Header Blog sudah selesai. Setelah itu saya berpikir mungkin ada baiknya jika saya sedikit berbagi Cara Membuat Link Di Gambar Header Blog bagi sobat-sobat yang belum mengetahui cara membuatnya.
 Apabila anda tertarik untuk membuatnya, ada baiknya anda melihat dulu contoh Link Di Gambar Header Blog Berikut ini. Perhatikan gambar di header ada tiga link yang saya buat di antaranya twitter, facebook dan rss atau lihat gambar di bawah ini;

Untuk Membuat Link Di Gambar Header Blog anda harus memiliki Software Adobe Photoshop dan Adobe Dreamweaver dan yang paling penting adalah imajinasi untuk menggambar header. Baiklah sekarang kita langsung saja ke TKP.
01. Buka Adobe Photoshop anda. Bualah Gambar Header yang anda inginkan dan yang perlu di perhatikan adalah ukuran Width dan Height gambar header yang anda buat, jika anda tidak tahu ukuran header blog anda silahkan copy gambar di header blog anda yang sekarang dan lihat berapa dimension-nya atau anda juga dapat mengedit gambar header blog yang ada sekarang.

02. Setelah anda membuat gambar baru, isi gambar dengan gambar yang anda inginkan, anda bisa mencari gambar di Google ataupun anda bisa membuatnya sendiri.

03. Masukkan gambar lebih banyak atau buatlah gambar yang sesuai untuk header blog anda agar tampak lebih menarik.

04. Setelah gambar header blog yang anda buat telah selesai, selanjutnya masukkan gambar yang ingin anda berikan Link dan masukkan tulisan sesuai dengan menu link yang ingin anda buat.

05. Jika gambar header blog yang ingin anda berikan link telah selesai, silahkan save dengan format .png. Untuk contoh diatas hanya ada tiga menu di gambar header yang saya buat untuk di berikan link, anda juga bisa menggunakan satu menu atau lebih tergantung dari kebutuhan anda.
06. Buka Adobe Dreamweaver. Setelah Dreamweaver terbuka silahkan anda pilih HTML.

07. Selanjunya tampilan Dreamweaver anda seperti dibawah ini;

08. Pada menu bar, klik Insert > Image atau anda juga bisa menekan Ctrl+Alt+I. Setelah itu masukkan gambar header yang tadi anda buat.
Cat: jika anda menemukan pop up seperti dibawah ini, klik saja OK dan klik lagi OK.

09. Setelah anda selesai memasukkan gambar maka tampilannya akan seperti dibawah ini;

10. Perhatikan bagian bawah pada Menu Properties. Ada kotak, bulat dan poligonal silahkan gunakan salah satu tools tersebut untuk menentukan bagian gambar header yang ingin anda berikan Link.

11. Untuk contoh saya menggunakan tool kotak, silahkan gunakan tools untuk menentukan bagian gambar mana yang ingin anda berikan Link, bagusnya jika anda sesuaikan dengan menu yang anda buat. Tools ini nanti berfungsi untuk memberikan Link pada menu di gambar header blog yang anda buat tadi. Perhatikan gambar dibawah ini;

Ket:
A = Adalah gambar yang sudah saya tandai menggunakan tools untuk diberikan Link
B = Masukkan Link yang ingin anda tuju
C = Pilih target Link, "_blank" jika anda ingin Link yang dituju saat di klik terbuka di tab baru dan "_self" jika anda ingin Link yang dituju saat di klik terbuka di tab yang sama
Cat: Sampai disini hanya satu menu di bagian gambar yang sudah saya berikan Link, jika di Gambar Header anda lebih dari satu menu silahkan ulangi langkah di atas mulai dari anda menentukan bagian gambar yang ingin anda berikan Link untuk menu selanjutnya.
12. Setelah semua menu yang anda buat di gambar header telah anda berikan Link atau telah selesai, selanjutnya Save header dengan format .html.

13. Klik 2x file header.html yang tadi anda save dan lihat hasilnya. Seperti itulah nanti yang akan tampil di Header Blog anda, periksa bagian menu di gambar yang anda berikan Link. Apakah sudah sesuai dengan yang anda inginkan atau belum.
14. Selanjutnya klik kanan file header.html dan Open with > Notepad. Perhatikan gambar dibawah ini.

Ket: Dalam lingkaran merah adalah alamat Gambar Header anda yang ada di PC/Laptop anda, tapi gambar itu belum ada di internet, jadi yang harus anda lakukan adalah meng-upload gambar tersebut ke internet. Anda bisa meng-uploadnya di Photobucket, Picasa Google dll.
15. Setelah anda selesai upload gambar header, ganti alamat gambar yang tadi dengan alamat gambar yang anda telah upload ke internet.

16. Copy kode mulai dari "<img src= sampai </map>". panjang atau pendeknya kode yang akan anda Copy tergantung dari banyaknya Menu di gambar yang anda buat.

17. Setelah itu Log in ke Blogger anda dan klik "Layout" > "Add a Gadget" dan pilih "HTML/JavaScript" (kosongkan "Title") dan paste kode yang tadi anda copy dan klik "Save".

18. Selanjutnya Drag "HTML/JavaScript" tersebut tepat di Bawah Header Blog anda. Lihat Gambar dibawah ini;

Ket:
Dalam lingkaran merah itulah HTML/JavaScript yang tadi anda buat, dan sudah di Drag tepat di bawah Header. BUKAN TEPAT DI ATAS POSTINGAN BLOG ANDA.
19. Selanjutnya "Save Arrangement" dan lihat hasilnya.
Waktu pertama kali saya Membuat Link Di Gambar Header Blog, posisi gambar header yang saya buat tidak berada pada posisi semestinya, ini dikarenakan saat menyimpan HTML/JavaScript tidak tepat dibawah Header melainkan di atas Postingan Blog. Perlu diingat tidak semua Theme Blog yang anda download menyediakan tempat widget dibawah Header dan kebanyakan berada diatas Postingan Blog terkecuali anda menggunakan theme bawaan Blogspot (Blogger Template Designer).
Jika anda menemui masalah seperti itu, mungkin solusi dibawah ini dapat membantu anda.
- Masuk di "Edit HTML" dan Ceklist "Expand Template Widget"
- Cari <div id='header'>
- Tekan Ctrl+F untuk mempermudah anda menemukan kode diatas
- Setelah anda mendapatkan kode tersebut, Copy kode yang tadi di Notepad dan Paste tepat dibawah <div id='header'> (Kode yang anda Copy tetap sama dengan kode yang anda Copy ke HTML/JavaScript).
- Save Template anda dan lihat hasilnya.
 Sekian dulu Cara Membuat Link Di Gambar Header Blog, semoga ini bermanfaat untuk anda dan bagi anda yang ingin COPAS sebaiknya mencantumkan sumber. Terima kasih atas kunjungannya.

Ditulis Oleh : Unknown ~ Tips dan Trik Blogspot

Sobat sedang membaca artikel tentang Cara Membuat Link Di Gambar Header Blog. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya <a href="http://yuliabloggerindonesia.blogspot.com/2013/05/cara-membuat-link-di-gambar-header-blog.html" target="_blank">Cara Membuat Link Di Gambar Header Blog</a>