Behind The Screen “O_09H Template”-part 4

Mudah-mudahan artikel BTSOHT ini cuma sampai 4 bagian saja, btw di 3 artikel sebelumnya saya sudah membahas tentang konsep dasar (persiapan) dimana referensi yang cocok bagus buat belajar teknik dasar blog Hack template ini, bagaimana menambah sidebar dan posisi kemunculannya, dan bagaimana membuat template berkesan 3d dengan efek bayangan (drop shadow) serta efek timbul (emboss) serta memotong-motong image tersebut menjadi 3 bagian yaitu header, main bar + sidebar danfooter, hasilnya seperti pada screen capture di atas.

Semua tulisan tersebut masih belum berarti jika kita tidak bisa mewujudkannya dalam blog dan pada artikel ini juga saya akan membeberkan perubahan dan penambahan pada kode template blog ini agar semua langkah pada artikel sebelumnya teraplikasi dengan baik. Berikut ini adalah langkah-langkahnya:

Anda harus berada dalam Control Panel akun blogger anda, setelah itu:

Pada layout pilih edit html dan beri tanda centang pada expand widget, sebelum mengedit template jangan pernah lupa untuk membackup template anda karena saya tidak bertanggung jawab jika terjadi kehilangan/kerusakan pada template anda nantinya, so sekali lagi jangan lupa backup kode template Anda OK?!

Setelah membackup template anda pastikan template yang anda gunakan adalah template minima white jika tidak ganti template lama andadan pastikan juga sudah membackup kode HTML pada widget anda ke notepad, coz jika anda mengganti template anda sebelumnya ke template minima white maka beberapa widget anda akan hilang dan saya yakin anda tidak mau mengalaminya.

Memasang Header

Cari kode CSS berikut ini pada kode template dan perhatikan parameter-parameter pada kode berikut:

/* Header
-----------------------------------------------
*/
#header-wrapper{
background: url() no-repeat left bottom;
width:980px;
margin:0 auto 0px;
border:0px solid #ffffff}
#header-inner{
background-position:center;
margin-left:auto;
margin-right:auto}
#header{
margin:0px;
border:0px solid#ffffff
text-align:center;
color:#666666}
#header h1{
margin:0px 0px 0;
padding:0px 0px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font:normal normal 200% Verdana, sans-serif}
#header a{
color:#666666;
text-decoration:none}
#header a:hover{
color:#666666}
#header .description{
margin:0 0px 0px;
padding:0 0px 0px;
max-width:980px;
text-transform:uppercase;
letter-spacing:.2em;
line-height:1.4em;
font:normal normal 78% Verdana, sans-serif;
color:#999999}
#header img{
margin-left:auto;
margin-right:auto}

Padakode diatas kode warna merah adalah kode yang di ganti nilainya sama dengan kode diatas dan kode warna hijau adalah kode yang bisa anda ganti sesuaikan dengan kode warna dan ukuran lebar template yang anda inginkan dengan catatan anda telah membuat ukuran image yang sesuai dengan ukuran lebar image header yang telah dibuat sebelumnya.

Jangan lupa SAVE hasil edit diatas.

Tuju tata letak cari widget header dan klik edit (lihat screen capture) setelah itu upload image header dari hardisk PC anda yang sudah dibuat sebelumnya.

Memasang Image background Main bar + Sidebar

Caranya sama dengan cara mengubah header Template HTML dan jangan lupa untuk selalu memberi tanda centang untuk expand widget. Pada Edit html carikode CSS berikut:

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper{

margin:0 auto;
padding:10px;
text-align:left;
font:normal normal 100% Verdana, sans-serif}

#content-wrapper {
width:980px;

position: relative;

width: 980px;

background: #fff url(http://DomainHostingAnda.com/body.gif) repeat-y left top;

}

Kode warna merah diatas adalah kode yang saya tambahkan agar background image untuk main bar + sidebar tidak tampil pada header, tambahkan kode warna merah diatas posisinya sama dengan kode diatas kemudian ganti URL tempat anda menyimpan gambar untuk mainbar dan sidebar, misalnya: http://YOURGOOGLEPAGE.com/body.gif.

Jangan lupa SAVE hasil edit diatas.

Memasang Image Footer

Cara memasang image footer sama dengan memasang image mainbar + sidebaryaitu dengan menambahkan URL image dari tempat hostinggambar anda. Cari kode CSS #footer ini

#footer{
background: url(http://DomainHostingAnda.com/footer.gif) repeat-x left top;
height: 44px
width:980px;
padding-top:0px;
clear:both;
margin:0 auto;
min-height: 2em;
letter-spacing:.1em;
text-align:right}

untuk height footer sesuaikan dengan ukuran tinggi (height) image anda.

Jangan lupa SAVE hasil edit diatas.

Untuk hasil keseluruhan Part 1-4 bisa anda lihat sendiri pada template blog ini (template tersebut cuma ganti header) karena semua tutorial ini berasal dari hasil utak-atik tanpa melalui kursus or belajar khusus, so menurut saya anda pun bisa memodifikasi sendiri template anda sesuai dengan keinginan.

Semua hasil perubahan pada template ini hanya hasil dari rasa keingin tahuan yang besar tentang bagaimana mengubah tampilan, adapun hal-hal lain yang anda perhatikan pada blog ini tidak saya tampilkan berhubung sudah saya posting tersendiri sebelumnya.

Btw jangan pernah mengira saya paham benar dengan edit-mengedit template karena saya hanya seorang awam alias pemula persis seperti Anda.

Artikel ini sekedar berbagi pengalaman untuk rekan-rekan blogger yang ingin mempercantik penampilan atau make over template sesuai selera dan karakter masing-masing blogger, dan akhirnya saya ucapkan thanks for coming, mohon saran kritik or jika ada pertanyaan mohon maaf jika tidak di jawab dengan segera atau malah tidak terjawab sama sekali coz sekali lagi saya cuma menegaskan saya hanya seorang pemula yang (mungkin) pemalu :).

Artikel bagian terakhir dari Berseri dari Behind The Screen “O_09H Template”

sudah baca juga yang ini:

Behind The Screen “O_09H Template”-part 1

Behind The Screen “O_09H Template”-part 2

Behind The Screen “O_09H Template”-part 3