Search Engine Google
Loading

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.




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








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

4 comments:

  1. bermanfaat dan berhasil terima kasih tutorialnya

    ReplyDelete
  2. Di blog ane gak ada kode .header-outer { gan.
    bahkan header gak ada, jadi gi mana ni gan?

    ReplyDelete
    Replies
    1. Emang template yang agan pake sekarang template apa? ^_^ template standart pasti ada...!!! buktinya si ahmad khoir bisa tuh...!!! he..he..he..he..he..!!!

      Delete
  3. Salam..
    Terima kasih atas petunjuknya saudara..
    Alhamdulillah sangat membantu dan memudahkan saya..

    ReplyDelete

Next Prev home