Populer Post Update

Posted by : Agung Mega Rudianto February 15, 2013

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.


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
kemudia tambahkan kode di bawah ini.




Sehingga kode-nya akan menjadi seperti di bawah ini.


maxwidgets='1' showaddelement='yes'>


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

{ 1 comments... read them below or add one }

Rules komentar
-Gunakanlah kata yang efektif !
-Anda Sopan Kami Segan !
-Dilarang Spam,Flood, sara !
-Dilarang menggunakan Link aktif/Hidup !
-Mohon Maaf jika komentar anda tidak dibalas oleh admin !

BLOG DOFOLLOW

- Copyright © UNYU BERBAGI - Support by Kota Magetan - Powered by Blogger -