Info Harga Komputer dan Gadget

membuat header dan logo di blogspot

Advertisement
advertisement

Oke kini kita lanjutkan pelajaran membuat template bloggernya ya,,, kemarin kita sampai pada membuat style body dan wrapperdan sekarang kita akan coba belajar membuat header.

Header berfungsi untuk menampilkan judul blog atau logo dan sekarang sudah berkembang untuk di buat space adsense namun kita belajar dasarnya dulu biar nanti bisa di kembangkan lagi

oke sekarang tambahkan kode css ini di bawah kode yang kemarin kita buat tepatnya di bawah kode wrapper kemarin
#headerwrap {
background:#000;
height:90px;
width:900px;
}

.logo{
margin:0 auto;
text-align: left;
float:left;
color:#fff;
height:90px;
width:300px;
}
headerwrap berfungsi untuk membatasi semua yang ada pada header seperti logo, adsense dan kalo agan mau nambahin widget juga bisa yang penting jngn melebihi kapasitas headerwrap ini
ket :
#headerwrap
background:#000 : berarti background yg kita buat berwarna hitam kamu bisa ganti sesuai selera
height dan width : adalah tinggi dan lebar area header

.logo
text-align: left; : format tulisan logo adalah rata kiri jika kamu tidak ingin menggunakan logo bitmap dengan warna teks putih
float:left : letak logo berada di sebelah kiri
width:300px;
: nah dengan lebar 300 berarti kita msh punya space 600 dan itulah space ads yang nanti kita kembangkan tapi nanti aja ya,,

apakah sudah cukup sekian? oh tentu saja belum karena kita baru buat cssnya nanti kita panggil kode css tadi ke html untuk di tampilkan di blog oke sekarng cari kode :
<div id='wrapper'>
kemudian copy code ini di bawahnya :
<div id='headerwrap'>
<div class='logo'>
<b:section class='header section' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Theme Style (Header)' type='Header'/>
</b:section>
</div>
</div>
lo gan itu yg logo kok pake class nggak pake id?nah itu dia perbedaan class sama id kalo klass css di tandai dengan tanda (.) (lihat kode css di atas) sedangkan kalo id itu di tandai dengan tanda  (#)
(lihat kode css di atas) nah sekarang kita akan memasang logonya silahkan klik menu * Page Elements nah disana akan ada 1 widget (header) klik edit kemudian upload logo kamu kalo belum punya pake logo ini aja nggak papa
kalo udah save dan lihat hasilnya
oke sampai disini dulu ya nanti kita lanjut lagi kasih komentar dulu biar semangat kasih tutorialnya soalnya kalo nggak ada komentarnya berarti nggak ada yg berminat tuk belajar bikin template dan saya nanti juga males nulis lagi kalo nggak ada yg baca kan percuma ...

selamat belajar semoga sukses
advertisement

8 comments:

goyang pattah pattah said...

wah juragan desain, mantep bgt nich postingane ijin menyimak dulu bray :)

android tips said...

ini yang ane cari gan

Mansyur said...

Tambahan ilmu blog..trims mas..

gaptek32 said...

gan ada alternatif laen ngga untuk nyari kode HTMLnya. soalnya ditemplate ane kodenya kaga ketemu nih..

pos jalanan said...

mohon bantuannya gan, setelah aku masukin kode di atas yg bagian ke 2 yang muncul pesan sprti dbwh ini.

"Lebih dari satu bagian ditemukan dengan id: header. ID Bagian haruslah unik.
Error 500"

mohon solusinya gan

Muhlis Lakodi,ST said...

Kayanya saya belum mengerti mas...

ada yg lebh simple lagi???

ArsipFank said...

Buat logo yang muncul di samping judul untuk wordpress gmana gan?

design logo vector cdr said...

apakah ini bisa juga diterapkan pada semua template blogspot, ok deh ijin nyoba dulu y gan

Post a Comment

Blog Ini Dofollow Ya bro tapi jangan nyepam komentar secara bijak dan sesuai dengan postingan