Search Engine Google
Loading

Mencari »Desain Header di »PiMiTemplate » Showing posts with label Desain Header. Show all posts
Mencari »Desain Header di »PiMiTemplate » Showing posts with label Desain Header. Show all posts

Wednesday, May 2, 2012

Cara Buat Header Blog Biasa Menjadi Keren


Hai sobat, postingan blog kali ini hanya sedikit mau mengingatkan tentang bagaimana agar header blogspot kita yang biasa menjadi luar biasa. kemarin saya sudah membuat tiga postingan tentang mendesain header blog  yakni cara desain header blog (bag 1), cara desain header blog (bag 2), serta cara desain header blog (bag 3), kalau sobat mengikuti ketiga tutorial blogger tersebut, sobat sudah bisa merubah header blogspot yang biasa menjadi header blog yang luar biasa, karena di dalam ketiga postingan tutorial blog tersebut, sobat akan mendapatkan cara untuk membuat header blog, karena tutorial blog yang saya berikan sangatlah mudah untuk di mengerti, itu menurut saya bagaimana menurut sobat?
Selain daripada itu di dalam ketiga tutorial blog di atas ada cara bagaimana membuat header dengan gambar, dan nantinya akan ada banyak lagi tutorial blog tentang header blog. mulailah dengan pelajaran desain header blog dari (bag 1), (bag 2) dan (bag 3), kalau ketiga tutorial blog tersebut sudah di ikuti untuk tutorial blog selanjutnya akan menjadi lebih muda, sehingga dengan mengikuti tutorial blog tersebut kita akan dengan mudah memperindah blog kita.



Kunjungi Ketiga Link di bawah ini :


Jangan lupa untuk berlangganan melalui email untuk mendapatkan tutorial blog terbaru tentang header blog, sekian dulu postingan kali ini, semoga bermanfaat.


Read More..

Tuesday, May 1, 2012

Cara Desain Header Blog (Bag 3)


Halo sobat, ketemu lagi masih di blog yang sama PiMiTemplate, berisi Tutorial Blogger dan Tutorial Template Blogger, kemarin kita telah mempelajari dua Cara Desain Header Blog yakni Cara Desain Header Blog (Bag 1) dan Cara Desain Header Blog (Bag 2) yang keduanya berisi tentang Dasar cara membuat header, cara mengganti header blog, serta cara edit header blog.
Dan masih dalam tutorial seputar header blog, kali ini kita akan belajar Cara Desain Header Blog (Bag 3) yakni tentang cara membagi header blog menjadi 2 kolom, jadi tidak usah berlama-lama lagi mari kita menuju ke TKP. Cekidot.

Cara Desain Header Blog (Bag 3)
Cara Membagi Header Blog Menjadi 2 Kolom

Sebelum kita lanjut ke pokok permasalahan kita saya ingin menjelaskan sedikit tentang header blog, dalam tampilan tata letak blog yang ada di dalam Opsi Lainnya Blogger seperti yang di katakan oleh Seorang Pakar header blog kalau posisi header blog yang berada pada tata letak blogger itu berada di bawah bawah favicon dan navbar blogger yang terlihat seperti satu kolom panjang yang terlihat seperti pada gambar di bawah ini.


Gambar di atas ini adalah tampilan dari header blog yang hanya memiliki 1 Kolom, nah bagaimana kita membuat header blog yang memiliki 2 kolom seperti terlihat pada gambar di bawah ini?


Nah itulah hasil jadinya dari cara desain header kali ini, yang jika selesai tampilan header blog-nya akan jadi seperti pada gambar di bawah ini.


Setelah melihat beberapa gambar di atas, saya rasa sobat sudah memahami apa itu namanya header blog bukan? kalau ada yang masih kurang jelas tentang header blog berikan komentar sobat.

Untuk membuat header blog seperti pada gambar di atas ikutilah langkah-langkah di bawah ini :

#1. Masuklah terlebih dahulu ke akun blog sobat;
#2. Pilih blog yang ingin di edit header blog-nya;
#3. Pilih template cadangkan terlebih dahulu template blog sobat untuk menjaga terjadinya kesalahan sehingga template blog sobat dapat di pulihkan kembali, setelah itu klik >> edit / HTML >> Centang Expand Template Widget;
#4. Carilah kode ini .header-outer dengan cara tekan Ctrl + F pada keyboard dan masukan kode tersebut sehingga akan muncul kode seperti di bawah ini.

"Kalau sobat pernah mengikuti tutorial blogger tentang cara desain header blog (Bag 2) yang ada di dalam blog ini, maka tampilan kode milik sobat akan menjadi seperti di bawah ini"

.header-outer {
height:Ukuran Tinggi Gambar Sobat;
background-image: url(URL Gambar Milik Sobat);
}

"Tapi kalau tidak maka tampilan kodenya akan terlihat seperti di bawah ini"

.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
}

#5. Untuk kode yang sama seperti kode yang pertama, cukup tambahkan kode yang berwarna ungu di bawah ini.

.header-outer {
height:
Ukuran Tinggi Gambar Sobat
background-image: url(URL Gambar Milik Sobat);
}

#header {
width: 49%; /* untuk mengatur lebar header kiri - title, description, image */
float: left;
}

#bgsGR_headerkanan {
float: right;
width: 51%; /* mengatur lebar header kanan */padding: 2px;
}

#bgsGR_headerkanan .widget {padding-top: 17px;}

Penjelasan :
*Untuk yang sudah mengikuti tutorial saya sebelumnya kode .header-outer dan lainnya tidak perlu di ganti cukup tambahkan kode di bawahnya seperti terlihat di atas "Kode Berwarna Ungu".
*Tulisan yang berwarna biru digunakan untuk mengatur lebar masing-masing kolom.

"Tapi untuk kode yang sama dengan kode kedua, ganti keseluruhan kode tersebut sehingga akan menjadi seperti di bawah ini"
.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;min-height: 154px; /* untuk mengatur tinggi header (height) */
}

#header {
width: 45%; /* untuk mengatur lebar header kiri - title, description, image */
margin-right: 10px;float: left;
}

#bgsGR_headerkanan {
float: right;
width: 49%; /* mengatur lebar header kanan */
margin: 20px 10px 5px 10px;
padding: 2px;
}

#bgsGR_headerkanan .widget {margin: 3px;}

#6. Langkah selanjutnya cari kode <div class='region-inner header-inner'> kemudia tambahkan kode di bawah ini.


<b:section class='bgsGR_headerkanan' id='bgsGR_headerkanan' maxwidgets='1' showaddelement='yes'></b:section>


Sehingga kode-nya akan menjadi seperti di bawah ini.



<div class='region-inner header-inner'><b:section class='bgsGR_headerkanan' id='bgsGR_headerkanan' maxwidgets='1' showaddelement='yes'></b:section>


#7. Lakukan pratinjau terhadap template sobat terlebih dahulu kalau sudah pas tinggal klik Simpan template, Selesai.

Penjelasan :
Tulisan yang berwarna merah di atas adalah untuk menentukan berapa widget yang ingin di tambahkan, itu tergantung dari selera sobat sekalian dan tergantung dari besar / tingginya header sobat.

Nah demikianlah tutorial blogger tentang template blogger khususnya cara desain header blog, semoga dapat bermanfaat bagi sobat. ^_^ jangan lupa beri komentarnya.


Read More..

Monday, April 30, 2012

Cara Desain Header Blog (Bag 2)



Halo sobat PiMiTemplate ketemu lagi dengan saya si penulis blog yang tulus memberikan tutorial tanpa bayaran sepeser pun "Gratis", sama dengan para blogger lainnya, cuman bedanya tidak setengah-setengah,,, pokoknya apa yang ada pada saya akan saya bagikan kepada sobat.

Kemarin, kita telah mempelajari Cara Desain Header Blog (Bag 1), dan kali ini kita akan belajar Cara Desain Header Blog (Bag 2) yakni tentang Cara Membuat Atau Mendesain Gambar Background Header Blog serta Cara Mengganti Background Header Blog Dengan Gambar, untuk itu teruslah membaca, ini adalah tutorial yang jarang di temukan ini saya dapat sendiri loh tidak di kopi dari blog orang lain. tapi kalau ada yang sama dari isi blog ini, jangan tersinggung ya. he..he..he..he..!!!

Oke tidak usah panjang lebar lagi, mari kita langsung menuju ke tutorial blog kita kali ini.

Cara Desain Header (Bag 2)
Cara Membuat Atau Mendesain Gambar Background Header

#1. Buka blog sobat yang ingin di desain header-nya, "tampilan blog sobat secara keseluruhan" seperti punya saya di bawah ini.

Dat-s

Kalu sudah tekan tombol Prt Scr Sys Rq pada keyboar komputer / laptop sobat untuk mengcaptur gambar tersebut, hal ini bermaksud agar dapat mengetahui ukuran header blog sobat.

#2. Setelah itu klik Start >> All Programs >> Accessories >> Paint jika sudah terbuka halaman Paint kemudian tekan Ctrl + V pada Paint, maka hasilnya akan seperti di bawah ini.


Setelah tampilan menjadi seperti di atas ini, Select Keseluruhan bagian header blog sobat seperti di bawah ini.


Setelah di select langkah selanjutnya adalah klik crop, sehingga hasilnya akan jadi seperti di bawah ini.


Kalau sudah simpan gambar dengan tipe file .png.

#3. Setelah file tersimpan, cari file tersebut, kemudian Klik Kanan >> Open With >> Adobe Photoshop seperti pada gambar di bawah ini.


Kalau sudah di mengikuti langkah di atas hasilnya akan seperti di bawah ini.


Setelah sudah seperti ini, sekarang giliran sobat untuk mengedit gambar tersebut, kalau untuk cara mengedit gambar dengan adobe photoshop mungkin akan saya buat blog-nya sendiri, karena ini adalah blog khusus Tutorial Blogger dan Tutorial Template Blogger.

Sedikit Penjelasan :
"Gambar yang telah di crop dan di simpan tadi, seperti yang sudah saya katakan di atas adalah untuk memprediksi ukuran header blog sobat, jadi gambar tersebut tidak perlu di rubah ukurannya, cukup di ganti secara keseluruhan isi gambarnya menurut selera sobat".

Untuk Lebih memperjelas lagi, dari hasil editing di atas saya mengubah isi gambar tersebut menjadi seperti ini, tanpa merubah ukuran gambar tersebut.


Setelah Selesai mengedit isi gambar, jangan lupa untuk menyimpan gambar tersebut.

#4. Setelah gambar selesai di simpan, Langkah selanjutnya adalah upload gambar hasil editan tersebut ke Album Web Picasa sobat, dengan cara, Buka Album Web Picasa Sobat pilih >> "Album Blog Sobat" >> Tambahkan Foto >> Pilih Foto Dari Komputer Anda >> Pilih Gambar Yang Telah Di Edit. selanjutnya, Klik Fotoku >> Pilih Album Tempat Sobat Mengupload Gambar >> Klik Gambar Yang Telah Di Upload >> Klik Layar Penuh >> Klik Kanan Pada Gambar >> Salin URL Gambar.

Nah dari ke-4 langkah di atas apa ada masalah, saya rasa tidak. tapi jika ada masalah berikan komentar sobat di bawah postingan ini.


Cara Desain Header (Bag 2)
Cara Mengganti Background Header Blog Dengan Gambar


#1. Masuk ke akun blogger sobat;

#2. Pilih blog yang ingin di edit Background Header-nya;

#3. Setelah itu pilih Template;

#4. Klik Cadangkan / Pulihkan >> Unduh Template Lengkap Sobat >> Tutup, ini untuk menjaga terjadinya kesalahan pengeditan HTML;

#5. Selanjutnya Klik Edit HTML, Centang Expand Template Widget;

#6. Cari kode .header-outer dengan Cara menekan Ctrl + F, Maka Sobat akan menemukan kode seperti di bawah ini.

.header-outer {padding:auto;background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;_background-image: none;}

#7. Gantilah kode tersebut dengan kode di bawah ini.

.header-outer {height:Ukuran tinggi gambar sobat;background-image: url(URL Gambar Milik Sobat);}

#8. Setelah itu klik simpan template, Selesai.

Hasil dari tutorial ini terhadap blog saya seperti pada gambar di bawah ini. dan tentunya seperti blog yang sedang sobat baca isi postingan-nya ini.



Kalau untuk blog Sobat Gimana? lihat blog sobat apakah ada perubahannya atau tidak. berikan komentar jika ada masalah. demikian tutorial kali ini mudah-mudahan dapat di jadikan acuan untuk Desain Header Blog selanjutnya. ^_^


Read More..

Saturday, April 28, 2012

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

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 :
Edit Header

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 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 :
Perancangan Template Blog
  • Setelah sudah terbuka tampilan seperti pada gambar di atas, pilih tingkat lanjut, maka akan muncul tampilan seperti seperti pada gambar di bawah ini :
Perancangan Template Blogger "Tindak Lanjut"
  • 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.

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.

Read More..
Prev home