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.

Baca juga: Mau Blog Kalian di Halaman Satu Google?

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 cara desain blog ? *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.

Baca juga: #TanyaBlog Kirim Pertanyaan Kalian Soal Blog 

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!


Comments

  1. kalo template blog kakak sekarang ini judul nya apa?

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

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

    ReplyDelete
  4. Regas kok lu typo sih, bagian salam sama kalimat pertama. Hati-hati tuh hehe

    ReplyDelete
  5. makasih info nya sebagai pemula, saya ingin mempraktekan

    ReplyDelete
  6. Ada saran gak buat template yang mobile responsive dan ramah seo, mau diganti lagi templatenya aku. Bantu ya

    ReplyDelete
  7. terimakasih atas informasinya gan, template blog keren dapat membuat pengunjung blog betah berlama-lama
    .

    ReplyDelete
  8. bang gue mau nanya gimana sih caranya membuat seperti yang di atas seperti home buku siapa adittya. thank

    ReplyDelete
    Replies
    1. menu bar maksudnya? nih link nya http://blogpedas.blogspot.co.id/2014/01/membuat-menu-navigasi-responsive-dengan.html

      Delete
  9. mantapss banget nih gan panduannya, sangat edukatif,,thq gan...

    ReplyDelete
  10. Thanks mas, keren nih tulisannya :)
    Walaupun panjang, penjelasannya mudah dimengerti karena diterangkan secara step by step, mungkin kalau ada videonya bisa lebih baik D

    ReplyDelete
  11. Makasih kabermanfaat banget lagi dicoba . ffufu

    ReplyDelete
  12. makasih kak tutorialnya,, bagus banget

    asrorgoleksedulur26.blogspot.com

    ReplyDelete
  13. Mas kalau blog sudah bagus dan finis, lanjut cara update setiap hari bagaimana yah (kan jika ingin trafik tinggi blog harus setip hari di up date) makasih pencerahanya,,,

    ReplyDelete
  14. Oh ya, salam kenal dan salam persahabatan dari saya di kota malang, semoga Anda semakin sukses dan maju.

    ReplyDelete
  15. Sadis, lengkap banget informasinya. Yang begini yang enak dibaca ada gambarnya. jadi sangat mudah memahaminya. LIKE IT LIKE IT

    ReplyDelete
  16. ini yang ane cari cari. well cukup komplet dan rinci penjelasannya. ane tunggu update berikutnya gan

    ReplyDelete
  17. terima kasih telah diberikan infonya, semoga blog saya bisa lebih baik lagi.
    www.jamdigitalmasjidjogja.blogspot.com

    ReplyDelete
  18. bang adit. kalo bole sya minta tutorialnya lewat vidio

    ReplyDelete
  19. Ini sih joss namanya. Thanks gan infonya...

    www.mahirphotoshop.com

    ReplyDelete
  20. gan , bagi tutorial bikin gambar flat image aditya regas kaya di atas dong please :( cari google ga ada yang bener

    ReplyDelete
  21. Saya senang sekali membaca artikel ini, namun karena saya sedang belajar membuat blog jadi agak bingung. Saya sudah membuat 2 blog dengan blogspot .

    Yang ingin sy tanyakan, untuk membuat blog dari blogspot apakah bisa tampilannya seperti web jual beli yang online contohnya kaya lazada atau mungkin mataharimall itu??

    Ini blog sy :
    http://www.dealerdatsuncikarang.blogspot.com

    http://www.nissancikarang-datsuncikarang.blogspot.com

    Mohon kasih Masukan nya, dan caranya untuk bisa merubah jadi tampil lebih menarik kaya web jual beli online tadi.

    Terima kasih, harap maklum pemula.

    ReplyDelete
  22. Saya senang sekali membaca artikel ini, namun karena saya sedang belajar membuat blog jadi agak bingung. Saya sudah membuat 2 blog dengan blogspot .

    Yang ingin sy tanyakan, untuk membuat blog dari blogspot apakah bisa tampilannya seperti web jual beli yang online contohnya kaya lazada atau mungkin mataharimall itu??

    Ini blog sy :
    http://www.dealerdatsuncikarang.blogspot.com

    http://www.nissancikarang-datsuncikarang.blogspot.com

    Mohon kasih Masukan nya, dan caranya untuk bisa merubah jadi tampil lebih menarik kaya web jual beli online tadi.

    Terima kasih, harap maklum pemula.

    ReplyDelete
  23. Waoww kebetulan juga lagi pengen desain blog baru.. blog lama sedang gc terurus haha..

    ReplyDelete
  24. Thanks gan, bloag gw udah kren sekarang http://hvz25.blogspot.co.id/

    ReplyDelete
  25. Great to see that someone still understand how to create an awesome blog.
    The blog is genuinely impressive in all aspects.
    I like this blog.
    judi poker

    ReplyDelete
  26. walaupun penjelasannya panjang,tapi cukup bermanfaat kok,
    gan tolong kunjungi blok saya
    http://reffsup.blogspot.co.id/

    ReplyDelete
  27. udah coba,,, tapi msh keseleo buat dikerjain...btw kak, aku udah coba dwnload dan buat step selnjutnya lama

    ReplyDelete
  28. Akhirnya, soalnya dari tadi itu aku bingung banget gimana cara install template blog aku, dan nemu dsini juga wkwk makasih gan :p

    ReplyDelete
  29. Ikut blog walking ya salam kenal gan ane juga udah mulai nge bloging bahasannya tentang desainnya aja di mari http://www.alwafi.id

    ReplyDelete
  30. salam kenal gan anejuga udah mulai blogingan lagi di mari http://www.alwafi.id/ bahas tentang desainnya saja tapi

    ReplyDelete
  31. kak kalo file yg di download masih dalambentuk zip gmn dong :( newbie niih

    ReplyDelete
  32. terima kasih ilmunya..sedoootttt

    ReplyDelete
  33. tamatlah gue, rumit banget kak, adakah yang lebih simple dan sederhana?

    ReplyDelete
  34. info yang bagus untuk pemula blogger nih thanks info nyaa.

    ReplyDelete
  35. sumpah k gue bingung, kenapa ga bisa bisa dah..

    ReplyDelete
  36. oke keren meskipun saya masih sedikit bingung hhe
    jika kalian minat mampir keblog saya Tips dan Tutorial http://gussidik.blogspot.com

    ReplyDelete
  37. mantap untuk di praktekan nih

    ReplyDelete
  38. mantap gan...pusing gan edit template nya bahasa nya asing banget tapi masih terus semangat belajar gan berkat panduan dari agan adit,,

    ReplyDelete
  39. pas di find di edit html kok ga ketemu ya yg nama di copy paste itu

    ReplyDelete
  40. Mantaf, thanks infonya membantu banget, seklian desain blog buat hp android

    ReplyDelete

  41. My partner and I stumbled over here different web address and thought I might check things out. I like what I see so now i am following you. Look forward to checking out your web page for a second time. itunes store login

    ReplyDelete
  42. terimakasih atas infonya sangat bermanfaat sekali
    Software Bimbel Mudah

    ReplyDelete
  43. tutorial cara desain blog nya urut, jadi mudah di praktekin, bahasa artikelnya gaul jadi gak formal banget tapi informasinya nyampe. Terimakasih, tambah semangat buat desai blog lebih menarik.
    Kunjungi Website saya https://sriseptiarini.mahasiswa.atmaluhur.ac.id
    Website kampus http://www.atmaluhur.ac.id

    ReplyDelete

Post a Comment

Terima Kasih sudah membaca dan berkunjung, mari berkenalan : Profile Penulis