Cara Desain Template Blog

Assalammualaiku'Wr'Wb...

Jadi begini... postingan gue kali 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.

 .Maka akan telihat beberapa desain template yang tersedia di web http://btemplates.com tersebut.  Klik gambar untuk memperbesar.

    

    Berhubung 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.

.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 diwww.blogger.com.

2.  Setelah blog sudah terbuka arahkan cursor Anda ke Opsi lainnya > Template.

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

Setelah mengkilk menu tersebut maka akan muncul gambar seperti ini.

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

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 lain.

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.

ara 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 kalian.

Oya, Kalau ada pertanyaan kalian silahkan komentar.  Semoga Bermanfaat! :)