Maaf Tulisan saya kali ini masih seputar ganti template dan edit template dan maaf jika ini membosankan , ini dikarenakan saya lagi kekeringan ide untuk menulis tulisan yang relevan sesuai tema di blog jelek ini. Mengenai pengalaman ganti template kali ini sangat melelahkan , karena sebagian script html didalamnya saya edit sendiri, tanpa panduan tutorial dari blog lain sebab saya menggunakan panduan dari dua template yang berbeda. Langkah Pertama saya lakukan adalah membuang beberapa script template(awalnya template itu seperti gambar) yang bawaan wordpress serta merapatkan beberapa font dan merubah tampilan-tampilannya.
Kedua saya lakukan pembuatan footernya menjadi 3 kolom yang awalnya template ini hanya satu kolom dengan menambah script di samping <div id='footer'>
<div class='wrapper'> (biasanya berada paling bawah ditemplate) dengan script <div id='footer-column-container'>
<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'>
<b:widget id='HTML5' locked='false' title='' type='HTML'/>
</b:section>
</div>
<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'>
<b:widget id='HTML9' locked='false' title='' type='HTML'/>
</b:section>
</div>
<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'>
<b:widget id='Followers1' locked='false' title='' type='Followers'/>
</b:section>
</div>
<div style='clear:both;'/>
<p>
<hr align='center' color='#5d5d54' width='90%'/></p>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
<b:section class='footer' id='col-bottom' preferred='yes'/>
</div>
<div style='clear:both;'/>
</div> .
Setelah merubah footernya saya mengedit headernya dan ini sangat memakan waktu lama karena harus mengalami pergantian terus karena belum sesuai dihati dan karena saran beberapa teman . cara saya mengedit header ini dengan menggantikan url gambarnya dengan gambar hasil copy sana sini yang saya ubah sendiri secara acak-acakan dengan paint dan photo edit serta saya upload di www.tinypic.com agar hasil htmlnya bisa menyesuaikan diri dalam template , untuk header wrapper saya kosongkan karena saya belum pintar membuat paduan header yang menarik. Seperti inilah header saya didlm template
#header {
background: url(
http://i47.tinypic.com/r76ou1.gif) repeat-x bottom;
color: #cecfd1;
}
#header .wrapper {
background: url() no-repeat center bottom;
overflow: hidden;
padding: 13px 10px 10px;
height: 90px;
}
Untuk siderbarnya yang awalnya putih polos saya buat backgroundnya dan menambah script gambar pada judul element yang berada disidebar tepatnya dibawah script
/* =====Sidebar and Widgets===== */
#sidebar .widget {
margin-bottom:1.5em;
} dengan script
#sidebar h2 {
font-size:14px;
font-weight:bold;
border:1px solid #006600;
margin:0;
padding:3px 0 6px 8px;
background: url(http://i47.tinypic.com/2mq99aw.gif) repeat-x left top;
}
Dan utak-atik ini masih belum selesai karena ada beberapa hal lagi yang akan saya tambah nantinya setelah mata ini kembali normal, karena terlalu lama menatapi kode-kode html dan merubah-rubah format gambar yang seperti jadi bayang-bayang ketika mata ini di pejamkan .
9 comments:
Pertamaxxx ga ya,,,???
hohohooo,,
semangat aja dah ngutk atik tu HTML mas,,
emang njelimet tu yg namanya HTML,,
wah mas dinoe udah mahir html
kpan nih bagi2 ilmunya
btw themesnya jadi elegance nih
mantep klo diliat
Memang berat mas kalau mesti ganti template.. seperti buat blog yang baru kita di buat nya..
wa, moga nantinya berhasil mas dinoe.... sip! sukses selalu ya...
Bener Mas, wong saya baru bentar ajah ikitan pusyiiing... :-D
Aku pusing lihat kode HTML-nya Bang... hehehe
Warna headernya sekarang udah match. Makin keren aja templatenya Bang.
pusing saya liat HTML nya, sebagai pemula saya takjub.. !
salam blogger HP.
Post a Comment