Tuesday, 16 July 2013

Cara Desain Blog


Assalammualaiku'Wr'Wb...

Jadi begini... postingan gue kalai ini adalah tentang tutorial cara desain blog kayak punya gue ini.  Dari kemarin-kemarin banyak banget temen-temen yang tanya gimana sih cara desain blog kayak punya gue ini?  kok bisa keren banget, kok kece banget sih, kok yang punya ganteng banget....  Oke yang terakhir gue karang.



Berhubung para fans gue kepo banget, jadi gue mau bagi-bagi nih tutorialnya di blog ini.  Iya blog ini... sebenarnya tutorial untuk desain blog sudah pernah gue tulis di blog gue satunya yang gak keurus.  Kadang-kadang kalau ada yang tanya cara desain blog kayak punya gue ini, gue kasih link blog gue yang ada tutorial desain blog nya, tapi karena banyak kepo dan gue udah rada lupa sama itu blog jadinya gue posting lagi disini.


Oke, gue bakalan kasih tau satu persatu langkah-langkah untuk desain blog kayak punya gue.  Gue ulangan ya, KAYAK PUNYA GUE, KAYAK.  Bukan berarti sama seperti yang gue punya.  Dan perlu kalian catet, gue disini bukan menggurui kalian semua yang lagi mau belajar cara desain blog ini, karena gue juga gak belajar dari yang ahli, cuman iseng-iseng aja awalnya karena kepengen tampilan blog gue beda dari yang lain.

Disini yang harus kalian siapkan adalah:
  1. Koneksi internet
  2. Photoshop
  3. Kreativitas
  4. Mata yang bagus
  5. Sabar
Jadi disini yang kita pelajari bersama ada tiga poin.  Yang pertama cara mendownload template, yang kedua cara memasang template yang di sudah di download dan yang ke tiga cara mengedit template.

Oya satu lagi, ada baiknya blog kalian di update dulu, karena mungkin masih ada beberapa blog yang menggunakan tampilan klasik atau lama, kalau cara update blog bisa kalian cari sendiri ya di google.

A. Cara Memasang Template
1.   Buka web browser Anda dan tulis http://btemplates.com.
2. Maka akan telihat beberapa desain template yang tersedia di web http://btemplates.com tersebut.  Klik gambar untuk memperbesar.



3Berhubung banyak sekali template yang tersedia dan sangat berfariasi. Kali ini gue ingin membuat sebuah template diary yang dimana ditemplate tersebut ada foto gue. Dan ini pilihan templatenya, namanya Travelling Logbook atau buku perjalanan. Nah kalian bisa melihat bentuk template sementara itu ada foto-foto diatas bukunya, nantinya foto itu akan gue ganti dengan foto-foto gue sendiri.



4.  .Selanjutnya download template tersebut. Penampakan template yang kita download seperti dibawah ini nanti.


Setelah kita selesai memilih template yang diinginkan, langkah selanjutnya adalah memasangnya sebelum kita mengedit headernya memasang atau mengganti dengan foto kita.  Langsung saja kita mulai.


B. Memasang Template
1.  Log in ke blog, masukkan alamat email dan paswort kalian di www.blogger.com.
2.  Setelah blog sudah terbuka arahkan cursor Anda ke Opsi lainnya > Template.



3.  Selanjutnya akan terbuka seperti gambar dibawah ini. Lalu klik menu yang terdapat disebelah kanan atas monitor, yang bertuliskan Cadangan/Pulihkan.






4.  .Setelah mengkilk menu tersebut maka akan muncul gambar seperti ini.




5.  .Klik menu Telusuri, maka akan muncul desktop seperti ini. Cari dimana hasil downloadtan tadi. Lalu pilih file yang ada gambar bola dunianya.


6.  Setelah selesai lalu klik Unggah dan lihat hasil unduhan kita tadi.



Langah selanjutny adalah mengganti foto-foto diatas dengan foto-foto gue. Disini gue akan menggunakan software pengeditan gambar atau foto yaitu Photoshop.


C. Mengedit Template
Nah ini yang terakhir, gue akan ngasih tahu mengedit header blog dengan HTML dan sedikit sentuhan Photoshop.

1.  Gue akan mengambil gambar atau foto template header tersebut, tapi pesan gue sebaiknya nanti menggunakan browser dari firfox agar mudah mengambil gambar template blog tersebut. Caranya, masuk ke blog lalu klik kanan, dan klik menu “Lihat Informasi Laman”.



Maka Akan muncul desktop baru seperti ini.



Selanjutnya klik Media dan cari gambar header template tersebut. Disini gue akan mengambil gambar header tersebut mengeditnya di Photoshop, lalu meng’copy kode HTML dari gambar tersebut fungsinya untuk mengganti dengan gambar yang baru. Dan simpan gambar tesebut untuk diedit.



2.  Masukkan gambar header yang ambil/download tadi dan masukkan ke Photoshop, disini gue bakalan ganti gambar-gambar aslinya dengan foto-foto gue yang kece.

Apabila kalian melihat ada Ryan D'masiv, mungkin hanya halusinasi.

3.  Selanjutnya seleksi (potong) foto-foto yang terdapat pada foto header blog yang tadi kita ambil, kalian bisa menggunakan jenis seleksi tool apa saja yang tersedia pada Photoshop, tapi gue lebih suka menggunakan Pen Tool karena menurut gue sangat mudah.

4.  Setelah selesai melakukan seleksi langkah selanjutnya memasukkan foto yang sudah diedit ke blog dan mengatur ukurannya. Dan ini adalah hasil editan saya.


Hasil punya gue seperti ini setelah di edit.

Apabila sudah selesai mengedit fotonya, langkah selanjutnya adalah mendapatkan kode HTML dari foto yang sudah kita edit. Ada banyak cara yang bisa kita lakukan untuk mendapatkan kode HTML foto tersebut, biasanya akan menggunakan situs atau web pihak kedua. Namun gue akan memberikan trik yang biasa saya lakukan untuk mendapatkan kode HTML itu dari blog kita juga.

5.  Masuk ke dasboar blog, lalu klik menu “Opsi Lainnya” > “Tata Letak” > klik “Tambah Gadget” dan pilih menu “Gambar” atau tambah gambar.



Unggah gambar yang sudah diedit tadi > simpan > lihat hasilnya diblog Anda.

6.  Cara mendapatkan kode HTML foto yang kita unggah tadi dengan cara sama seperti sebelumnya yang pernah dilakukan pada langkah pertama ingin mengambil gambar header asli. Namun disini gue harus membuka dua tab untuk mengganti header asli dengan header butan tadi. Tab pertama adalah blog kita, dan tab kedua adalah halaman template blog kita. Sebagai gambar agar tidak bingung.

Tab ke 1


Tab ke 2


7.  Pilih tab ke 1, klik kanan > Lihat Laman > Media. Cari gambar header asli.



Kalau sudah ketemu Copy kode gambar header asli template tersebut, yaitu yang diawali http://3.bp.blogspot.com..... kalau sudah selesai meng’copy, lalu masuk ke tab ke 2.

8.  Kalau sudah di tab ke 2, klik pada keyboar Ctrl+F (find) ini berfungsi untuk membercepat mencari kata-kata yang kita perlukan dijendela browser, menu find ini terletak dibagian bawah layar monitor browser. Lalu klik menu HTML. Nanti akan munjul jendela baru.

Klik Menu HTML


Setelah itu akan muncul menu seperti di bawah, klik saja menu yang bertuliskan “Lanjutkan”. Lingkaran merah dibawah gambar dibawah ini adalah menu find untuk mencari kode yang kita cari nanti.



9.  Maka akan muncul seperti gambar dibawah ini, ini adalah kode HTML dari semua tampilan template yang kita unggah tadi.

Mata gue juling liat scrip ginian.

Selanjutnya paste hasil copy’an kode HTML gambar header asli yang kita lakukan pada langkah nomer  7. Paste pada menu fine (Ctrl+F) yang tadi sudah kita munculkan, maka akan kita akan menumukan letak dari kode gambar header asli tadi di dalam HTML templte ini secara otomatis.



Tulisan yang diberikan lingkaran merah atas terblog berwarna hijau diatas adalah kode HTML gambar asli tempalate yang sedang gunakan. Sedangkan lingkaran merah dibawahnya yang terblokir berwarna biru adalah hasil dari copy paste yang kita lakukan tadi pada langkah nomer 7.

10.  Langkah terakhir dalam pembahasan ini gue akan memasang gambar header yang sudah kita edit dan unggah tadi. Lumayan panjang ya caranya hhe tapi tenanglah nanti kalau sudah sering melakukannya dan sudah terbiasa semuanya akan terasa mudah dan cepat.  Semudah melupakan mantan. *tetep*

Langsung saja gue mulai. Langkah terakhir adalah meng’copy kode HTML dari gambar yang sudah kita edit dan unggah tadi, caranya lakukan seperti langkah nomer 7. Pada Media nanti tinggal cari dimana letah gambar yang telah sudah di unggah.




Apabila sudah ketemu klik saja Ctrl+C (Copy), untuk meng’copy kode dari gambar hasil editan dan unggahan tadi. Selanjutnya kita harus kembali ke Tab ke 2 tadi yang sudah ditunggu oleh kode HTML yang siap diedit.

Selanjutnya tinggal pasti kode yang sudah kita copy tadi, ganti kode HTML gambar asli template ini yang sudah ditemukan pada langkah nomer 9. Sekarang tinggal ganti kode HTML gambar asli template dengan kode HTML yang terakhir di copy tadi.

Kode sebelum diganti

Kode setelah diganti


Klik “Simpan Template” dan lihat hasilnya.


Selesai.

Nah kalau tampilan HTML gak sama kayak punya gue, atau kalian makai yang paling baru tampilannya kayak di bawah ini.



Cara ganti kode HTML nya sama, klik halaman Scrip HTML lalu Ctrl+F, bakalan muncul menu fine di atas scrip HTML > Paste > Enter.

~(^^~)(~^^~)(~^^)~

Gimana gampang kan? *anggukin aja*  Kira-kira seperti itu cara desain blog kayak punya gue ini, tinggal kalian kreativitaskan aja lagi dan sesuaikan dengan tema tulisan di blog kalia.

Oya, kalau kalian mau punya template blog sendiri yang beda bisa hubungin gue email ke: www.ar_723@ymail.com atau mention ke twitter gue @adittyaregas, harga bisa dinego sesuai desain dan kebutuhan.  Kalau ada pertanyaan kalian gak boleh tinggalin komentar.  Semoga Bermanfaat!


Artikel Terkait di Bawah posting

127 comments:

  1. tips-tipsnya sama dengan yang saya lakukan ama blog saya punya, tetapi ada beberapa step agak berbeda, saya lebih menggunakan templates dari bloggernya n mulai mengedit [duplikasi] target yg saya tentukan wkwkwkkwkw :D

    kunjung balik ya ke blog saya. tq

    ReplyDelete
    Replies
    1. Yang penting puas sama tampilan blognya sendiri :D

      okedeh TKP mas!

      Delete
    2. Maaf buat bray NAMAKU SYAHRAWI. saya mengunjungi blog anda dan saya ingin mempelajari tutorial mengenai blog. saya di blog newbie. pada saat saya klik kanan link yang anda kasih kenapa jadi account saya ditangguhkan yah?terima kasih

      Delete
    3. templetnya kok g bs didonlod ya

      Delete
    4. bisa bang, tak coba download bisa kok

      Delete
    5. templetny bsa d download tp bentuk pas d download gag perti d tutor mas adit ini -_- hikssss

      Delete
    6. iya,, pas edit html kok jd bedA

      Delete
    7. ngk bisa di download .... :(

      Delete
  2. tips yang bermanfaat bray.. (y)

    ReplyDelete
  3. oke bro.. kalo gue paling males pas milih template gitu, pusing. haha

    ReplyDelete
    Replies
    1. haha kok bisa gan? pusing kenapanya

      Delete
  4. ribet :|
    boleh gak minta bikinin aja trus akunya duduk duduk cantik tapi gratis? :D

    ReplyDelete
  5. woke. nice tutorial.
    tapi saya sama dengan mas Namaku di atas. lebih senang utak-atik template standard bawaan blogger.
    :)
    salam kenal.

    ReplyDelete
    Replies
    1. wokedeh bro salam kenal juga yaa :D

      Delete
  6. gue cuma bikin template yang simpel tapi enak di lihat, tapi template ini keren kok..

    ReplyDelete
    Replies
    1. punyamu keren juga bro ringann :D

      Delete
  7. postingan yg bagus mas, saya juga kepo sbenernya, qo tamilan blog punya sampean bgs, trnyata di edit2 dlu toh hhe...
    btw, mohon berkenan berkomentar disni ya, sdg ikut kontes blog :) trim's
    http://pudjakusumah.blogspot.com/2013/07/kota-santri-cetak-ilmuwan-religi.htm

    ReplyDelete
    Replies
    1. ini link yang lengkapnya hhe... trims :) http://pudjakusumah.blogspot.com/2013/07/kota-santri-cetak-ilmuwan-religi.html

      Delete
  8. Nice post, tapi aku sih lebih suka pakai template yang dari blogger terus edit-edit sendiri *gak ada yg tanya*

    ReplyDelete
  9. duh ka caranya gampang banget !!!!!!!!!!! *bantingnetbook*

    ReplyDelete
  10. Nice info, kakak

    nanti dicoba ah

    ReplyDelete
  11. anjriiitttt gak mau lagi gua mampir di mari..
    di bawah sendiri ada pocongnya segala..
    hahahahahah
    keren keren..
    nambah ilmu niih..

    ReplyDelete
  12. fiuh, saya sih gak bisa sabar kalo disuruh edit header. mending terima jadi, atau paling resize aja. salut deh buat yg bisa sabar ngerjainnya :)

    ReplyDelete
  13. Mantap, tutorial yg berguna khususnya pas bagian header nih gw belum tau.. :D

    ReplyDelete
  14. Keren, masih muda udah utak atik tamplate. lanjutkan nak hehehe

    ReplyDelete
  15. Udah lupa caranya.... dulu blog aq keren gara2 pake bawaaan google jadilah seperti yang ada hahahha...sibukkk gak sempat update templateee

    ReplyDelete
  16. wahhh keren bgt dachh tuchhh

    sukses ajh dach nuat mas

    ReplyDelete
  17. Hatur nuhun kang, mantep pisan infona euy --- rickykusriana.blogspot.com

    ReplyDelete
  18. Makasi tAs Tutorialnya brow, sangat membatu bagikU....I Like it.
    jngan prnah berhenti berkreasi yAH !!!!

    ReplyDelete
  19. i like it mas,
    lumayan deh buat putar-putar otak saya sebagai pemula :D
    salam kenal :)

    ReplyDelete
  20. Wah bermanfaat sekali :) cocok buat pemula seperti saya :)

    ReplyDelete
  21. keren keren tapi blog nya om nyeremin :D banyak pocong nya .. ngefans ya ama abang pocong :D

    ReplyDelete
  22. Cukup ribet juga emang....tapi hasilnya keren...

    ReplyDelete
  23. baguss..tapi agak ribet :D

    ReplyDelete
  24. Thanks... postingannya bagus... (^^)

    ReplyDelete
  25. gue ttep kaga bisa, telmi bang adit :/ ajariiin yak :D

    ReplyDelete
  26. siip, postingannya sangat bermanfaat,..
    dan udah aku coba, tapi masih gagal dibagian cara mengganti header dg foto2 pilihan..

    ReplyDelete
    Replies
    1. dicoba-coba aja lagi, gagal jgn jadi hambatan hha

      Delete
  27. wah jadi bersemangat buat ngedesain blog agar lebih menarik ne :) ..mmm saya mau tanya apakah untuk edit foto2 tersebut harus pake photoshop ato sembarang software pengolah image bisa digunakan?
    :)

    ReplyDelete
    Replies
    1. sembarang aja bro. asal nanti sizenya sesuai sama di blog kita :D

      Delete
  28. bro, ane gak bisa tu cara ngedit foto headernya di photoshop, hee.. bisa kasih tutorialnya gak..?? :)

    ReplyDelete
  29. Thanks Tutornya gan ;) Ditunggu kunbalnya

    ReplyDelete
  30. Wihh, tutorialnya lengkap trus bagus lagi :D

    ReplyDelete
  31. k ko download tamplatenya gk bsa ? :(

    balas.....

    ReplyDelete
  32. Kece Masbroo Blog Ente...
    Suqron Atas Infonya..

    ReplyDelete
  33. keren tapi masih belom ngerti hahhhhaa -___-"

    ReplyDelete
  34. wahh. boleh bagi tutorial ngedit header nya gak gan yang pake photoshop??asli dari kemarin dicoba2 tapi ga bisa2..thanks

    ReplyDelete
  35. kerennnnnnn bray.thanks info nya.......

    ReplyDelete
  36. kok gue coba ga bisa ya ... XML tdk tertutup ... maksdnya..

    ReplyDelete
  37. xmlnya tdk tertutup gmn kok gk bisaaa bang

    ReplyDelete
  38. cara mengedit templetenya kga bisa bang,ktanya halaman tdak terverifikasi,,pie?

    ReplyDelete
  39. nambah ilmu baru nih...

    tengkyu bung... regas

    ReplyDelete
  40. bang cara ngdownload template nya gimana ---

    ReplyDelete
  41. oke makasih infonyaa,, bisa follback gak? http://arieffikran77.blogspot.com/ makasih :D

    ReplyDelete
  42. Keren sob.. kapan kapan bisa dicoba :)

    ReplyDelete
  43. wah kereen niih uda jadi, ajarin gue dong cara mengatur tata letaknya tulisan tulisan ,gue krang ngerti gun.punyak gue ditengah kirim postingx wkwkwkwkw bru blajar.

    ReplyDelete
  44. aku kok gak bisa downoad templatenya ya. udh di download tp gakbisa dipasang -_-

    ReplyDelete
  45. makasih masbro. sangat bermanfaat (O_O)b

    ReplyDelete
  46. wah.. pas bgt lg butuh ide mau ganti desain blog. ayo mampir-mampir ke blog aku. kali mau kasih ide :D
    www.hidupcengengesan.blogspot.com

    ReplyDelete
  47. kalo aku udah ada blog tapi template nya mau aku utak atik gini, semua post yang di blog ga ilang kan? :D
    jadi kaya cuma ngerubah tampilan kan? :D
    tapi ribet kak, apalagi kalo udh ke script script nya eerrr
    hehe

    ReplyDelete
  48. Thank's kak atas bantuannya.
    Membantu sekali.
    Kapan-kapan kunjungi blog aku ya...

    ReplyDelete
  49. aduh, aku uda coba nih kak tapi gak bisa. Kesalahan nya itu dimana ya? Tiap aku mw unggah, gak ad muncul template ny...

    ReplyDelete
    Replies
    1. tanya di twitter aku aja ya @adittyaregas :)

      Delete
  50. keren gan tampilan blog lu, thank's ilmunya

    ReplyDelete
  51. pas mantap dah :D

    ReplyDelete
  52. keren templatenya,, jadi pengen nyoba buat seperti ini :D

    ReplyDelete
  53. awesome ! Thanks FYI. pngen nyoba, tp ntar deh

    ReplyDelete
  54. lumayan detil penjelasannya, makasih mas. saya harus banyak belajar lagi

    ReplyDelete
  55. alhmdulillah sangat membantu saya. mksh :D

    ReplyDelete
  56. mas yang edit di photoshopnya aku masih bingung T_T
    gak ada caranya

    ReplyDelete
  57. broe gmn tu buat halaman lg kayak punya qm di bawah ad posting lama posting baru ?????

    ReplyDelete
    Replies
    1. itu pakai kode html mas, kalau gak salah namanya membuat label dibawah postingan hhe

      Delete
  58. mantap, makasi postingannya.
    jadi pngin nyoba... moga berhasil.

    ReplyDelete
  59. gak ketemu yg namanya tambah gadget,, T-T apa beda ya versinya foto yg ini (http://4.bp.blogspot.com/-VpCpDoY6xxM/T1du9sjDPjI/AAAAAAAABV4/ub4bOwdJahY/s400/12.4.jpg) sama yg blogger ver terbaru?? hohoho sediiih,, bener2 newbie nih,,, pengen banting lepi,,, btw thanks sharenya bermanfaat banget deh,,, (windamartha.blogspot.com)

    ReplyDelete
  60. MANtap (y) bagus banget tutorial.nya

    ReplyDelete
  61. cara ngilangin ganbar yg dah diupload td gmana gan??

    ReplyDelete
    Replies
    1. tinggal di hapus di tata letaknya lagi, di awal kita mengupload

      Delete
  62. bang cara update blognya gimana? blog saya masig tampilan yang lama.

    ReplyDelete
    Replies
    1. gampang cari aja di googl "cara update blog" hhe

      Delete
  63. Bang, aku dah nyoba, nemu template yg cocok bwt blog ku, tp jd ga pas, tulisan"ne jd berantakan. yg judulnya terlalu tinggi atw yg fotonya yg terlalu dipinggir. ada saran?

    ReplyDelete
    Replies
    1. coba otak atik di tata letak

      Delete
    2. atur dibagian margin atau padding pada tulisan yang berantakan

      Delete
  64. ane suka ni artikel,, hebat bagt,
    minta tlong gan, cara mempercantik tulisan di blog,,,

    ReplyDelete
  65. numpang promo ya...
    bagi yang suka baca kata2 puitis
    monggo visit my blog http://dyralonely.blogspot.com/
    matursuwun :)

    ReplyDelete
  66. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. Numpang promosi dulu : http://habiofficialblog.blogspot.com/
      bisa du follow nanti saya folback

      Delete
  67. ka udah di download tapi pas blogg ku template nya gak nampil :(

    ReplyDelete
    Replies
    1. template hasil ngedonlot di uraiakan dulu / dimutilasi dl , cari yg ada gambar bola dunianya.. baru dah di browse

      Delete
  68. mantap gan,,, salam pucuk blogger anyar perlu bantuan..

    ReplyDelete
  69. makasih banyak bro lu udah mengubah blog gua

    ReplyDelete
  70. keren :D tapi ribet, aku gak ngerti..

    ReplyDelete
  71. lumayan lah buah pemula kyk gw.. kwkwkwk!!!

    ReplyDelete
  72. gan, gimana cara buat font lucu itu ?? aku tertarik nih.. boleh ajari nggk??

    ReplyDelete
  73. huhuhu........ bingooonggg
    bisa, harus bisa, pasti bisa :)

    ReplyDelete
  74. coba ahhh, sudah dari dulu pengen tampilan blog yg beda, tp bingung :D

    ReplyDelete
  75. terima kasih gan, postingan yang sangat bermanfaat. tapi gue bingung di cara mengedit template, poin no 1. pas gue klik kanan gak muncul tulisan "lihat informasi laman." gmn tuh?

    ReplyDelete
  76. Susah download Template.nya kak. keluarnya gga kayak yang kaka carain itu.

    ReplyDelete
  77. Masih ngebiarin blog kayak tampilan dasar, malas ganti karena takut ancur nantinya. Maklum jam terbang mulai bikin di blogspot Desember. Makasih infonya. :)

    ReplyDelete
  78. Lumayan juga prosesnya yah..
    Coba dulu ah..

    ReplyDelete
  79. mau nya nih,, tuh kan paling atas ada "home" "kontak", dll
    tuh cara buatnya gmana yah??
    maklum saya msih pemula,, :)
    Makasih sbelumnya,,,

    ReplyDelete
  80. wah ternyata udah dibikin tutorialnya.. thanks bro!

    ReplyDelete
  81. Trimk's sangat menarik infonya....

    ReplyDelete

Pembaca yang baik itu: selalu memiliki komentar untuk sebuh tulisan yang dia baca, karena dengan komentar yang baik dan benar, pembaca berarti benar-benar menghargai karya penulis #DakwahParpol