Cara Desain Header Blog (Bag 1)

Mengawali tutorial blog tentang desain template blog, kita akan memulai dari cara desain header blog, untuk itu tetaplah membaca, karena ini adalah tutorial template yang jarang di temukan, karena kali ini saya akan kasih tutorial template tentang header blog, jadi mulai dari cara mengganti judul blog dengan gambar, cara mengganti warna background header, serta cara membuat judul dan deskripsi blog yang ada di header blog berada di tengah. kalau sudah siap mari kita mulai.

Cara mengganti judul blog dengan gambar

Untuk yang satu ini mungkin merupakan tutorial blog yang sudah basi, tapi apa salahnya kita mengulang kembali tentang cara mengganti judul blog dengan gambar ini, karena saya melihat masih banyak yang bingung membuat judul blog dengan gambar, dan tidak usah berlama-lama lagi, langsung saja kita mulai.

Untuk mengganti judul blog dengan gambar ikutilah langkah-langkah di bawah ini :

• Buatlah dulu gambar judul blog sobat dengan menggunakan photoshop atau lain sebagainya;

• Masuk ke akun blogger sobat;

• Pilih blog yang ingin di desain template-nya;

• Pilih tata letak;

• Cari Header dan klik Edit Maka Akan muncul gambar seperti di bawah ini :

Penjelasan :

Judul Blog - digunakan untuk menulis judul blog sobat;

Deskripsi Blog - digunakan untuk menulis deskripsi blog sobat, dan untuk mempertebal tulisan deskripsi blog sobat, sobat dapat menambahkan kode html <b>Isi Deskripsi Blog Sobat</b>;

Gambar - Inilah yang akan kita gunakan untuk mengganti judul blog dengan gambar.

• Kalau sudah muncul tampilan seperti pada gambar di atas langkah selanjutnya adalah upload gambar judul yang telah sobat buat sebelumnya dengan cara centang "Dari Komputer Anda" kemudian klik "Pilih Berkas", cari gambar yang ingin sobat buat jadi judul blog kemudian klik Open, tunggu sampai proses upload selesai;

• Kemudian atur-lah penempatan gambar tersebut, dengan cara centang "Selain Judul dan Keterangan" dan jangan lupa juga untuk mencentang Susut-kan agar sesuai;

• Setelah itu klik "selesai", dan jangan lupa klik "Simpan Setelan", setelah itu lihat blog sobat untuk melihat perubahan-nya.

Tips :

Untuk Gambar - Sesuaikan-lah ukuran gambar yang sebelumnya tidak sesuai, dengan menggunakan cara yang sama;

Penempatan Gambar - Pilihan yang baik adalah Tempatkan Keterangan Setelah Gambar, karena untuk deskripsi sangat berpengaruh pada search engine google

Deskripsi - Jangan menggunakan kode html <p>dan</p> pada deskripsi, karena dapat mempengaruhi pengeditan judul blog serta desain header.

Berdasarkan tutorial di atas sudah cukup jelas bukan cara mengganti judul blog dengan gambar. jika ada pertanyaan silahkan berikan komentar sobat;

Cara mengganti warna background header

Cara desain header yang ke dua ini juga merupakan cara yang sangatlah mudah dan sudah basi untuk para blogger yang sudah senior di dunia blog, tapi bagaimana dengan yang masih pemula di blogger? nah untuk itu tutorial blog ini saya kasih untuk pengguna blogger pemula.

Untuk mengganti background header ikuti langkah-langkah berikut ini :

• Masuk ke akun blogger sobat;

• Pilih blog yang akan di desain;

• Pilih template;

• klik ubahsuaikan, maka akan kita akan masuk pada tempat perancangan template blogger, yang tampilan-nya seperti pada gambar berikut ini :

• Setelah sudah terbuka tampilan seperti pada gambar di atas, pilih tingkat lanjut, maka akan muncul tampilan seperti seperti pada gambar di bawah ini :

• Kalau sudah tampil seperti pada gambar di atas langkah selanjutnya klik pada menu Latar, maka akan muncul tampilan seperti pada gambar di bawah ini :

• Setelah itu ganti-lah latar header sesuai selera sobat, mudah bukan; demikianlah cara mudah mengganti background header;

Info :

Untuk mengenal lebih dalam tentang perancangan template blogger sobat dapat mengunjungi blog saya yang satu ini "Cipta blogger".

Berdasarkan tutorial di atas, ada kesulitan atau tidak, jika masih kurang jelas atau ada yang kurang berikan komentar sobat, dan kita akan selesaikan bersama-sama permasalahan yang terjadi.

cara membuat judul dan deskripsi blog yang ada di header blog berada di tengah.

Setelah sobat melihat judul dan deskripsi blog saya pasti sobat akan bertanya bagaimana sih cara membuat judul dan deskripsi blog berada di tengah? Nah ini dia caranya.

Untuk membuat judul dan deskripsi blog berada di tengah, ikutilah langkah-langkah berikut ini, dengan baik dan cermat jangan sampai salah :

• Masuk ke akun blog milik sobat;

• Pilih blog yang ingin di desain;

• Pilih template;

• Klik edit/html >> Lanjutkan >> centang  Expand Template Widget, kalau sudah terbuka kode html-nya;

• Untuk membuat judul blog berada di tengah cari Kode di bawah ini dengan menekan Ctrl + F:

• .header h1

• Maka akan untuk tampilan kode lengkapnya akan seperti di bawah ini :

• .header h1 {

• font: $(header.font);

• color: $(header.text.color);

• text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);

• }

• Sisipkan kode text-align:center; tepat di atas kode font: $ (header.font); Sehingga tampilan lengkapnya akan seperti di bawah ini :

• .header h1 {

• text-align:center;

• font: $(header.font);

• color: $(header.text.color);

• text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);

• }

• Sedangkan untuk membuat tulisan deskripsi berada di tengah caranya cari kode .Header .description maka sobat akan menemukan kode seperti di bawah ini :

• .Header .description {

• font-size: $(description.text.size);

• color: $(description.text.color);

• }

• Sisipkanlah text-align:center; Tepat di atas kode font-size:$(description.text.size); Sehingga hasilnya akan terlihat seperti di bawah ini :

• .Header .description {

• text-align:center;

• font-size: $(description.text.size);

• color: $(description.text.color);

• }

• Langkah terakhir, klik simpan template, tunggu sampai proses selesai >> tutup edit/html >> kemudian lihat blog sobat untuk melihat perubahan-nya;

• Selesai.

Demikianlah tutorial blog tentang desain template blog khususnya desain header blog. mudah bukan? nantikan tutorial selanjutnya, jadilah sobat pimitemplate untuk mendapatkan tutorial desain template blog yang padat, mudah dan jelas.

Muda-mudahan tutorial ini dapat di mengerti dan dapat di praktek-kan dengan baik, tapi jika masih ada yang belum jelas, berikanlah komentar sobat. dan kita selesaikan bersama-sama masalah tersebut.

Description: Cara Desain Header Blog (Bag 1)
Rating: 3.5
Reviewer: Dat-s
ItemReviewed: Cara Desain Header Blog (Bag 1)

Anda sedang membaca artikel tentang Cara Desain Header Blog (Bag 1) dan anda bisa menemukan artikel Cara Desain Header Blog (Bag 1) ini dengan url http://pimitemplate.blogspot.com/2012/04/cara-desain-header-blog-bag-1.html,anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Cara Desain Header Blog (Bag 1) ini sangat bermanfaat bagi teman-teman anda,namun jangan lupa untuk meletakkan link Cara Desain Header Blog (Bag 1) sumbernya.