Recent Posts

Rief, seorang yang bermimpi menjadi penulis, yang ingin merubah dunia dengan tulisan! Dari yang aku lihat, dengar, rasa dan pikir lahirlah halaman ini yang sebagian isinya merupakan pengalaman pribadi, Selamat Membaca

Jumat, 14 November 2014

Cara Mudah Membuat Gambar Header di Blog yang Bisa Ngelink

           Hay sobat bloger? Gimana kabarnya nie???, baik – baik kan :) dua hari terahir nie gue nge-galau, ngatau napa? Rasanya ingin marah – marah mulu, di tambah perasaan nggak mood, bikin males semuanya, termasuk males mandi, males kerja, males mikirin kamu, males Be’ol dll :) tapi untungnya tiga hari kedepan gue libur kerja, jadi ya bisa nyantai di rumah Xixi :) tapi di tengah kemalasan nie, gue tetep baik lo?, karena masih ingin berbagi dengan sobat bloger semua, meskipun bukan berbagi uang yaaa, penting manfaat lah ???, Sesuai dengan tema judul di atas :) ntu yang ingin gue bagi ke sobat bloger semua.

           Bagi para Master bloger, maaf ye kalau tutorial nie dah keliatan basi hehe :) niat gue cuma ingin berbagi aja kok, nggakda maksud lain, Sumpah :), buat para Newbie silahkan di simak ya tutorial-nya (walah gaya Lo Rief, kamu juga masih newbie!!! hohohooo), moga blog-nya tambah cantik & keren, Sebelum kita masuk pada pembuatan header, ada hal - hal yang perlu sobat bloger siapin diantaranya :
  • Foto yang nantinya di pake gambar header di blog (Gue saranin edit dulu pake Photoshop atau Photo Scape),
  • Software Dreamwaver, kalau belum ada bisa di download di SINI.
  • Akun Image Hosting yang di pakai penyimpanan online (misalnya photobucket, tinypic, pilih salah satu aja, kalau gue lebih suka pake photobucket karene lebih Simple pemakaiannya) ntuk nge-daftar photobucket di SINI.
Langkah pertama : Sobat bloger siapin foto yang udah di edit pakai Photoshop, di sini gue anggap sobat bloger udah jago edit pake Photoshop, jadi nggak gue praktekin lagi cara editnya, nie contoh gambar header yang uda jadi yang nanti kita pake :).
Langkah Kedua : Buka Software dreamwaver, Klik new > Pilih HTML dan Klik OK. Selanjutnya klik di bagian samping <body> tampilannya bakal kayak yang di bawah ini.

Langkah Ketiga : Masukkin image header yang uda kita buat di bawah tag <body> Kalian klik insert > image > kalian cari ntu foto yang mau di bikin header. Ntar bakal ada tampilan kayak di bawah ini.
Langkah Keempat : Kalau uda di masukkin fotonya, tampilanya bakal seperti nie, (tampilan dreamwaver kadang berbeda tergantung fersinya) kalau tampilan sobat bloger dah kayak contoh di bawah nie berarti benar, Ingat jangan takut!, biasanya saat kita masukin foto loading-nya agak lama dan PC / leptop keliatan nge-hang, tapi ntu biasa :)

Langkah Keempat : Nie yang paling susah, sobat bloger lihat di bagian bawah sebelah kiri ada seperti shape berbentuk bulat, kotak dan segitiga, shape ntu yang nantinya berfungsi sebagai menu seperti Fb, Twitter, youtube di gambar header yang bisa nge-link. Liat gambar yang uda gue tandain nomor ntu : Tanda 1: Ntu shape bullet yang di pake nutupin menu youtube nantinya yang bisa nge-link. Tanda 2: Target, kita di hadepin pilihan ada, _blank, _new, _parent, _self dan _top kalian bisa milih salah satu, misalnya kalian milih _blank fungsinya ketika kalian klik bakal ada tab baru, sedangkan kalau milih _self, ketika di klik tetep terbuka di tab yang sama, tergantung mana yang kalian suka :) Tanda 3 : Fungsinya ntuk masukin link kalian, misalnya link akun youtube, facebook dll. (sebelum masukin link ada tanda “#” kalian hapus) Tanda 4 : Shape bullet yang udah nutupin menu youtube yang fungsinya sebagai menu yang bisa nge-link di gambar header, lebih jelasnya peratiin gambarnya :)

Kalau udah beres, tinggal Save file header yang uda kalian bikin tadi dengan format html, liat gambar :)

Kalau uda di save, kalian cari file yang berformat html tadi, kalian buka dengan cara, Klik kanan, open with notepad.

Kalu file html udah kebuka di notepad, perhatikan kode <img src= yang uda gue kasih lingkar, disitu gambar yang dimaksud adanya di komputer kita, tapi di internet belum ada alias belum diupload. Gimana cara menguploadnya? Disinilah akun image hosting berperan. Gue biasa pake Photobucket untuk penyimpanan gambar secara online.

Langkah ke Lima : kalian buka akun image hosting Photobucket nie tampilannya :) kalau mau bikin akun baru klik Sign Up.
Karena gue dah punya akun Photobucket tinggal masukin aja imail dan passwort-nya, kalau misalnya sobat bloger males bikin akun, bisa juga masuk pakai akun Facebook atau twitter.
Langkah ke Enam : kalau uda berasil masuk di akun Photobucket, sobat bloger tinggal masukin foto di menu Upload yang uda gue tandain ntu.
Setelah nge-klik upload, selanjutnya, muncul tampilan kayak di bawah. Klik Select Photos and Videos :) liat gambar.
Kalau uda klik upload, tampilannya bakalan kayak gini, tinggal kalian tunggu sampai prosesnya selesai:)
Setelah gambar header kebuka, liat di sebelah kanan nomor dua dari atas yang uda gue tandain, ada links. Pilih yang direct link, terus di-copy aja.
Langkah ke Tujuh : Balik lagi ke kode html yang dibuka pake notepad tadi. Terus, paste link dari gambar Photobucket tadi, ke kode html banner yang kita buat sebelumnya ntuk nge-gantiin kode (“dremiber/1.jpg”) di ganti menjadi: ("http://i1287.photobucket.com/albums/a622/rief151/1_zps094f843a.jpg") lebih jelasnya peratiin gambar yang udah gue kasih lingkar.
Langkah ke Delapan : Login ke blog kalian masing-masing, seperti biasa masuk ke design. Terus, tambah gadget , pilih yang HTML/Javascript.
Langkah ke Sembilan : Masuk ke kode yang di buka dengan notepad tadi, copy isi dari tag di bawah <body> Sampai ke atas <body> lebih jelasnya lihat gambar :)
 
Setelah di-copy, paste si kolom kode banner di gadget HTML/Javascript tadi. klik Simpan.
 
Kalau gadget HTML/Javascript sudah muncul peratikan yang gue tandain:). Tapi kok di samping ya? Kan header biasanya di atas,? Tenang bisa di ataur :)
Sobat bloger seret aja gadget-nya ke atas kayak gini : liat nomor 1 :) Klik simpan dan lihat hasilnya dengan  nge-klik nomor 2 :)
Duuuuar !!! Horeee gambar header kita dah jadi, Selamat ya sobat bloger kalian dah berasil, sekarang kalian mempunyai tampilan blog yang lebih keren, lebih jelasnya liat dan peratikan gambar header blog gue :)
           
           Ahirnya sampe juga di peng-ujung pembahasan gue,:) cape juga tangan, nulis & edit photo ntuk bikin postingan nie, tapi ya nggak pa - pa lha, demi sobat bloger ! Hemmm kalau ada yang kurang jelas dengan tutorial yang gue buat, sobat bloger bisa tanyakan di kolom kotak komentar, ingat jangan malu – malu!!! Quote : Malu bertanya Sesat di kamar hehe :)


Ditulis Oleh : Arif Rudiantoro

Arif Rudiantoro Anda sedang membaca artikel tentang Cara Mudah Membuat Gambar Header di Blog yang Bisa Ngelink. Oleh: Arif Rudiantoro. Terimakasih atas kunjungan Anda, serta kesediaan Anda membaca artikel ini. Kritik dan saran serta Pertanyaan dapat anda sampaikan melalui kotak komentar. ↓↓↓ Backlink Please ↓↓↓

ARTIKEL TERKAIT:

14 komentar:

  1. terima kasih bang atas tips nya tapi memang susah menurutku membuat gambar header ini...

    BalasHapus
    Balasan
    1. Nggak da yg susah kok sob yg pnting di fahami,,,
      & di Praktekkan Step demi Step - nya :)
      Thanks dah Kunjung :)

      Hapus
  2. hmm kebetulan itu jadi tugasku lek,, gambarnya pake corel,, udh slsai buat skrg bgg ngatur headernya

    BalasHapus
    Balasan
    1. Hio kah? ntu terbalik Lok, seharusnya sebelum edit gambar, harus tau dulu ukuran header blog-nya biar pas di pasang di blog, caranya Msuk Dasbor > Rancangan > Edit HTML > centang Expand Template Widget. di Download sek Template ntuk jaga" kalau salah :)) cari Dengan Ctrl+F #header-wrapper {

      Disitu biasanya ada
      width:900px; artinya lebar header 900 pixels
      height:120px; artinya tinggi header 120 pixels

      Kalau dah ketemu, edit gambar sesuai lebar blog-mu (pake Photoshop wae lebih gampang nentukan ukuran) baru terapkan tutorial q di atas :)

      Hapus
    2. ok trimakasih :) ,, ngatur ukurn foto buat header nya g sabar o lek,, kmrn berkli kali gsesuai,, trus udah nyerah sama yang hasil akhir

      Hapus
    3. Latian to, Semua Gitu kalau pertama,
      Cari Referensi Nok Google akeh Lok :)

      Kalau Mo Instan yo Download aja Templates
      Tinggal pasang jadi, Biar nggak susah" lok,

      Hapus
  3. informasi yang bermanfaat,terimakasih sudah share :)

    BalasHapus
  4. mantap gan, silahkan berkunjung dimari http://massadaw.blogspot.com

    BalasHapus
  5. terima kasih banget yaaa dreamweviarnya karena gue lagi butuh banget softwarenya ha ha ha

    BalasHapus
  6. terimakasih banyak bro buat tutorialnya, sangat membantu

    BalasHapus

"TERIMAKASIH TELAH BERKOMENTAR DI BLOG SEDERHANA INI"