Skip to main content

Cara membagi header menjadi 2 bagian

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.

Comments

Post a Comment

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

Popular posts from this blog

Kunci Ukulele punk jalanan

Kunci Ukulele punk jalanan G          Bm        C        D    G sungguhku menyesal telah mengenal dia G          Bm        C      D   G dan aku kecewa karna menyayanginya G          Bm        C         D      G dan aku tak akan mengulang kedua kalinya... reff: G              D          Em           Bm kusimpan rindu dihati gelisah tak menentu C              G               D berawal dari,kita bertemu kau akan kujaga G             D           Em           Bm kuingin engkau mengerti betapa kau aku cinta C              G               D hanya padamu aku bersumpah kau akan kujaga sampai mati G                D           Em                 Bm kuingin tau siapa namamu dan kuingin tau dimana rumahmu C            G          D walau sampai akhir hayat ini... G                D         Em                Bm jalan hidup kita berbeda aku hanyalah  punk rock jalanan C                   G                 D yang tak punya harta berlimpah untuk dirimu sayang... * G                 D     Em            …

Teknik start dalam Drag Bike | 201M

Teknik start dalam Drag Bike
Salah klo drag cuma andil besar pada setting mesin, joki juga berpengaruh besar..!!

Kenapa? karena saat start, joki drag yg baik menjaga motor agar tidak terangkat dan meminimalisir trjadinya spin pada roda belakang, karena keduanya dapat mengurangi catatan waktu. Lalu timing mengoper gigi pun harus baik bila terlalu cepat akan membuat mesin menjadi turun jauh RPM nya, dan menjadi lama untuk mengumpan tenaga,bila terlambat akan membuat mesin overstress tenaga jd drop.

Bila cuma mengandalkan feeling sebenernya susah juga seh, karena feeling rentan berubah dan setting motor balap pun sering berubah, timing oper gigi pun bisa berubah juga.
Sebaiknya mengoper gigi yg paling sempurna dengan menggunakan bantuan shift light, bila lampu menyala hendaknya kita mengoper gigi bukan bola ya,hehehe..
Bisa juga dengan takometer, bila jarum sudah ada di area merah, hendaknya siap2 untuk mengoper gigi, timingnya dikira2 aja, perlu byk latihan biar lebih akurat …

Memasang Script Auto Like Fans Page Facebook di Blog

Adalah suatu kebanggaan tersendiri jika memiliki Facebook Fans Page dengan jumlah fans yang banyak. Bukan hanya jadi suatu kebanggaan namun fans yang banyak bisa juga mendatangkan keuntungan tersendiri, misalnya kita manfaatkan facebook fans page tersebut sebagai media promosi jasa atau barang. Bukan perkara yang mudah untuk mendatangkan fans jika kita tidak memiliki cara khusus, kecuali jika anda seorang public figur atau materi yang ada dalam fans page tersebut banyak diminati pengguna facebook.

Banyak jasa yang menawarkan Facebook Fans Page Topup (jasa penambahan fans page facebook) dengan harga yang bervariasi dan kebanyakan dari mereka menggunakan script auto like. Ternyata cara menggunakan script auto like ini cukup mudah syaratnya anda harus memiliki blog atau website, semakin banyak pengunjung di blog semakin banyak pula yang kena perangkap auto like ini.

Yang belum punya Fanpage Kesini >

Cara kerja script auto like :


Jika ada pengunjung blog anda dala…