Tutorial Membuat Header Blog Sendiri

Tuesday, April 7, 2015
Akhirnyaa...... blog saya berubah jadi dot com juga. Senangnyaaa berasa punya rumah sendiri.

Alasan utamanya sih mau mandiri, ngga numpang lagi sama si blogspot hahaha. Alasan keduanya biar ikut kekinian lah. Dan alasan ketiga siapa tahu dengan sedikit perubahan, rezeki mengalir lebih lancar cring... cring... cring.

Karena berubah domain, sekalian dong merubah tampilan. Bertahun-tahun ngeblog tampilan blognya polos banget. Bahkan kemarin pas minta pendapat dari salah seorang blogger, katanya blog saya ini tampilannya membosankan. Aduh sakit mak , dan setelah dilihat-lihat memang bener sih, habisan polos banget. 

Awalnya mau pakai jasa designer blog untuk merubah tampilan biar tambah kece, ee tapi pas ditanya maunya gimana kok ternyata maunya saya banyak banget. Pengen headernya begini, trus tulisannya begini, side barnya begitu, edebre edebre, malah bikin susah orang. Lagi ngobrol-ngobrol sama mak Fardelyn Hacky, dikasih tahu aplikasi untuk edit-edit foto yang gampang banget makainya. Maka akhirnya saya coba sendiri dan tadaaaa........ jadilah tampilan blog super manis ini. xixixi.


Awalnya headernya seperti ini. Tapi dilihat-lihat kok terlalu girly yah kayak abege, jadi saya ubah warnanya.

Nah, karena banyak yang bilang header blognya manis semanis yang punya  dan banyak yang minta tutorialnya, sekalian saya tulis disini yah.

Pertama yang harus diketahui bagi para blogger yang mau membuat header keren plus tampilan blog yang macem-macem, bahwa ada yang namanya web/blog designer yang bisa melakukannya tanpa perlu kalian merasa repot, tapi kudu bayar. Keuntungannya, bisa minta macem-macem tanpa capek berkutat dengan segala macam yang namanya widget, dan kode-kode blog yang aduhai bikin pusing kalau belum terbiasa.

Tapi kalau kalian pengen berkreasi sendiri dan punya banyak mau  kayak saya,  yang cuma hati dan pikiran sendiri yang tau apa yang kalian mau, maka ngga ada salahnya coba bikin sendiri, xixixi.

Saya pakai aplikasi yang namanya picmonkey.com


Ada 4 menu disitu : Edit, touch Up , design, dan College

Di oprek aja ya mak, biar tahu fungsi-fungsinya. Sama lah kayak aplikasi edit foto lain, untuk mengcrop, resize, atur ketajaman warna, atur kontrasnya, rotate foto, dll.

Nah karena permintaanya tutorial membuat header blog, jadi langsung saya contohkan saja cara membuat header kayak punya saya ini ya mak.

Pertama kita perlu yang namanya kanvas untuk melukis. Caranya:

Pilih Design

Ada pilihannya tuh, mau yang kotak, persegi, memanjang. Pilih yang memanjang, yang tulisannya facebook cover ( nanti ukuran bisa menyesuaikan ). Lalu, pilih basic Edit, dan pilih warna dasar untuk canvasnya. Kalau mau simple,centang transparat canvas, biar nanti warna background header mengikuti warna blog kita.



Sebelumnya, menu-menu disamping kiri ntu masing-masing fungsinya kayak di bawah ini.


Nah canvas siap, silahkan deh diisi tuh sesuai selera.  

Pertama saya mau buat ada tulisan windi teguh-nya, ceritanya personal branding gitu mak, soale kan di dumay saya lebih dikenal sama nama itu daripada nama sendiri. ya udin, masukin tuh tulisan. Pilih yang ada huruf Tt, pilih jenis tulisan, atur sendiri ukuran tulisan yang diinginkan.beserta warnanya.


Udah gitu, saya pengen ada foto kece sayadisitu, harap maklum ya mak, emak narsis sok eksis. Maka klik icon kupu-kupu itu, trus upload foto yang diinginkan.


Lalu, ditambahin deh pernak-pernik lain, biar lebih berseri. Saya tambahin kupu-kupu, biar kesannya dari jari saya keluar magic berupa kata-kata dahsyat untuk menyihir pembaca, ihiiir.


Masih banyak tuh di Icon kupu-kupu , pernak-pernik lain. Ada burung, daun, pohon, bubble, suka-suka mak, puas-puasin berkreasi. Biar ada kesan feminim saya tambahin lagi mawar-mawar kecil. Ngambilnya dari roses, scroll ke bawah ya untuk gambar bunga.

Udin mak, gitu aja. Setalh merasa cukup, resize dulu sesuai ukuran blog kita. kalau header saya itu saya pakai ukuran 920 x 341. Setelah itu tinggal save aja.


Kalau sudah jadi headernya tinggal dimasukin ke blog.

Caranya?

Login ke blog kita, pilih Tata Letak,


Klik Edit Header. Pilih Foto yang tadi sudah dibuat



Jangan lupa isi judul blog karena kalau ngga diisi ngga mau nyimpen nanti, tapi supaya ngga kelihatan di header blog pilih " Tempatkan Keterangan setelah gambar", save. Udah lihat hasilnya di blog.

Kalau posisinya kurang pas, terlalu kepinggir atau terlalu ke atas, silahkan diatur ukurannya. Tapi kalau mau gampang dan posisi header pas di tengah, masukin code CSS. Ada tutorialnya di blog mak Annisa, sila baca langsung disana ya.

Trus kalau dilihat tuh, share untuk medsos blog saya ada di headernya kan sodara-sodara. Itu dapet caranya dari hasil ngoprek google. Ntar kalau ada yang mau tahu, saya tulis di postingan lain.

Selamatmencoba ya . Betewe minta pendapat dong,bagusan yang mana nih header blog saya, warna pink atau gold? ^_^







48 comments on "Tutorial Membuat Header Blog Sendiri"
  1. oh gitu y mak.caranya
    thx ya coba a
    @guru5seni8
    http://hatidanpikiranjernih.blogspot.com

    ReplyDelete
  2. Oke deh Win..makasih banyak yaaa..ngepink aja girly....

    ReplyDelete
  3. Daku suka yg pink mak..mak windi bgd dah..lebih sger jg keliatannya mak..
    Tfs yak..

    ReplyDelete
  4. Kece banget nih tutorialnya.. nanti kapan2 coba ah. Btw aku suka yang pink :)

    ReplyDelete
  5. bookmark dulu.. kapan2 dicoba :) btw thanks ya mak tipsnya :)

    ReplyDelete
  6. wah keren infonya nih mak. jadipengen coba, bosan dengan headernya saya

    ReplyDelete
  7. waa daeri kemarn penasaran kok pada bikin header sendiri kece2, pengen nyobaaa

    ReplyDelete
    Replies
    1. oya maak aku mau tutorial icon socmed itu. Simpel kan caranya? Soale kemarin googling caranya kok ribet jadi males nyobanya hahaha

      Delete
    2. iya mak simpel kok.besok yah

      Delete
  8. makasih banyak mak...ilmu yg bermanfaat :)

    ReplyDelete
  9. Wakwakwak, kadang bikin header itu bisa bikin panik seharian. Btw selamat yaaa udah jadi dot com. Slametaannnn slametaannnn :D

    ReplyDelete
    Replies
    1. iya mak.trus galau mau yg ini apa yg itu.warna ini apa itu hahaha

      Delete
  10. Replies
    1. coba lah mak.biar ga sia2 aku buat tutorialnya wkwk

      Delete
  11. Yg pink aja mbak, lebih manis,hehe

    ReplyDelete
  12. Makasih Mak tutorialnya,..aku save ya....

    ReplyDelete
  13. maaaaaaak, makasiiiiiiih tutorialnyaa

    ReplyDelete
  14. Makasiiihh Mba windi tutorialnya. Saya sudah langsung praktek :))

    ReplyDelete
  15. Simple tapi kece mba :) like it.

    ReplyDelete
  16. saat klik save harus klik update, terus masukin email, pembayaran, aduh ga jade deh aku hehe. Mohon izin jadi baahn tulisan di blogdetik ya mak tapi gayaku. Makasi

    ReplyDelete
    Replies
    1. mak pakai yang free aja. yg gambarnya ga ada tulisan royal. itu ga pake jangka waktu. oce mak :)

      Delete
    2. siip mak. silahkan ditulis di blognya. dicantumin sumber yak

      Delete
  17. Oh gitu. Oke oke.. Catet dan bookmark!! Kapan2 mau bikin ah *kiskis*
    Makasih ya mak..
    Btw, sebenarnya cakepan yg pink sih headernya *kemudian dilempar blog*

    ReplyDelete
  18. Nunggu tutorial selanjutnya he...3x

    ReplyDelete
  19. aih,keren..kapan2 coba ah^^
    makasih makkk,,

    ReplyDelete
  20. mbak...tenkyu infonya ^_^
    lagi butuh pgn utak atik header ^_^

    ReplyDelete
  21. aku rada gaptek mba... ini aja kalo mw ubah2 header ato apapun yg berkaitan ama blog, aku lgs nyuruh designer blogku yg utak atik ;p..aku tinggal ksh tau aja mw gimana... :D

    ReplyDelete
  22. ih, saya suka, saya suka. picmonkey yah. eh mak, untuk tau ukuran header di template kita itu gimana ya?

    ReplyDelete
  23. Mak keknya ini bisa juga pake applikasi canva.com ya?

    ReplyDelete
  24. Wah thank u sharenya bermanfaat sekali untuk yang ingin utak atik header -->ngacung. Coba ah ^^

    ReplyDelete
  25. Picmonkey ga mau jalan di tengtop saya maa... Maklum laptop jaduul... Pingin beli baru. Tapiii nunggu ada lomba yang hadiahnya laptoop aja aah

    ReplyDelete
  26. http://babershopclipper.blogspot.co.id/

    ReplyDelete
  27. Terima kasih atas informasi ini.

    ReplyDelete
  28. Mbak,, picmonkey apa sekarang berbayar ya? baru nyoba sih, soalnya baru ngeblog. Hehehehe
    Tapi kok nggak bisa di save ya :(

    ReplyDelete
  29. Wah jadi inget, dulu banget pernah pake picmonkey juga, tapi lupa buat apa aja ya 😄

    ReplyDelete
  30. Terimakasih tutorial nya bagus dan mudah dipahami

    ReplyDelete
  31. Keren.... Pantes aja header blognya kak keren amat. Pengen ikutan ah. Makasih...

    ReplyDelete

Terima kasih sudah berkunjung. Semoga senang yah main kesini :)

Custom Post Signature