Entri Populer
-
WA...H INILAH P artai K elompok S etan Inilah salah satu pemandangan kampanye sebuah partai yang ngaku-ngaku partai yang berbasis islam,p... -
Mungkin anda Pernah dan bahkan kebanyakan bagi orang yang hobi download file-file di internet yang berekstension .rar dari internet ? Dan fi... -
MUQADDDIMAH Segala puji hanya milik Allah, shalawat serta salam semoga tercurah kepada Rasulullah, keluarganya, para sahabatnya serta orang ... -
Sebidang tanah di bumi ini yang paling dicintai oleh Allah Subhanahu wa Ta’ala adalah rumah-rumah-Nya (masjid) yang di dalamnya ditegakkan i... -
Hardisk external merupakan barang yang tidak asing lagi bagi kita maniak komputer,baik mereka yang memang seorang " Dokter " PC ma...
Satu lagi nih tutorial desain atau otak-atik template blogspot yaitu mengubah ukuran header yang biasanya penuh dengan outer wrapper kini saya coba akan buat tutorial sederhana biar header blog bisa penuh dengan body.
Nah coba lihat perbedaan header blog ini, atau bisa kamu lihat Capture dibawah ini..
Dari capture diatas terlihat Header Blog memanjang memenuhi area body blog dan Header tidak satu area dengan post body dan sidebar.
Gimana dari keterangan diatas apakah Anda ingin mengubah header blog Anda menjadi penuh dengan body?
Oke langsung saja ke tutorial cara membuat header blog penuh dengan body blog
Pertama yaitu pastikan sudah log in ke blogger blogspot. Lalu masuk menu Layout/tata letak kemudian pilih Edit HTML
Lalu cari code dibawah ini
<div id='outer-wrapper'><div id='wrap2'>
<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>
<div id='header-wrapper'> <div id='head-inner'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='For example (Header)' type='Header'/> </b:section> </div>
Nah kalau sudah ketemu pindah code yang berwarna hijau dibawah code <body> dan diatas code yang berwarna merah. sehingga kurang lebih codenya menjadi seperti dibawah
<body>
<div id='header-wrapper'> <div id='head-inner'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='For example (Header)' type='Header'/> </b:section> </div>
<div id='outer-wrapper'><div id='wrap2'>
<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>
Kalau langkah pertama sudah selesai sekarang atur juga CSSnya
Cari code CSS dibawah ini
#header-wrapper {
width:880px;
height:100px;
margin-bottom:2px;
padding-bottom:15px;
background:#FFFFFF;
border:1px solid #E0E0E0;
Nah ganti tulisan 880px yang berwarna merah diatas dengan 100%. Dan silahkan otak-atik CSS diatas sesuai bentuk yang Anda inginkan.
Nah selesai deh kemudian save.
HTML diatas berdasarkan template minima default blogspot. berhubung semua template tidak sama HTML-Nya silahkan kamu sesuaikan menurut template kamu sendiri. Silahkan berexperimen sendiri sobat semoga berhasil.
dan jika anda ingin tampilan header seperti blog yang ini (klik disini untuk melihat). Gunakan Css seperti dibawah ini
#header-wrapper {
width:100%;
height:120px;
margin:0 auto 0;
border-top:2px solid #000000;
background:url(http://i296.photobucket.com/albums/mm169/anasku/header-back.jpg) repeat-x;
}Sekian dulu artikel mengenai desain template dan otak-atik blog, artikel lainya akan menyusul.. tunggu yah..
Artikel Terkait:
0 komentar
Posting Komentar