Kali ini saya ingin berbagi dengan anda semua tentang mengubah lebar template dalam teknik blogging, terutama blogger pemula tentang bagaimana mengubah lebar template yang ada, agar nantinya anda bisa menambah fitur-fitur yang anda inginkan.
Hal pertama yang mesti anda lakukan, seperti biasa anda harus Login terlebih dahulu ke dalam blog anda, selanjutnya masuk menu Tata Letak, kemudian menu Edit HTML. Jangan lupa berikan tanda centang (checklist) pada tulisan Expand Widget Template anda.
Untuk memudahkan pencarian kode HTML, gunakan tombol Ctrl F atau Shift F3 guna memunculkan status bar Find yang biasanya muncul dibagian bawah. Jadi, bila nanti anda bingung mencari kode-kode HTML yang ingin diganti, anda tinggal mengetikkan kode tersebut pada kolom Find, selanjutnya tekan Enter, maka kode yang anda cari akan di Highlight atau di blok sehingga memudahkan mata anda melihatnya.
Cari kode berikut ini :
/* Header
-----------------------------------------------
*/
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
Ubahlah width:660px menjadi width:1100px, sebagai contoh :
/* Header
-----------------------------------------------
*/
#header-wrapper {
width:1100px;
margin:0 auto 10px;
border:1px solid $bordercolor;
Cari kode berikut ini :
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
Ubahlah width:660px menjadi width:1100px, sebagai contoh :
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 1100px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
Berikutnya cari kode ini :
#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Ubahlah width:410px menjadi width:640px, sebagai contoh :
#main-wrapper {
width: 640px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Yang terakhir cari kode berikut ini :
/* Footer
----------------------------------------------- */
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
ubahlah width:660px menjadi width:1100px, sebagai contoh :
/* Footer
----------------------------------------------- */
#footer {
width:1100px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
Pratinjau template anda, maka anda dapat melihat perubahan lebar template dari yang ada sebelumnya. Simpan template anda.
Angka-angka tersebut tidaklah mutlak, anda bisa mengubah lebar template sesuai keinginan anda. Namun satu hal yang harus anda perhatikan, user internet tidak semuanya menggunakan layar monitor yang beresolusi tinggi. Kalau yang menggunakan notebook atau komputer dengan LCD monitor, mungkin resolusi layarnya (screen resolution) bisa lebih dari 1280x800 pixel, tapi kalau yang menggunakan layar monitor tabung resolusi layarnya mungkin paling tinggi 1024x768 pixel.
Nah, perubahan yang dilakukan pada template anda akan mempengaruhi kenyamanan user internet terhadap tampilan blog anda. Jadi anda harus mempertimbangkan perubahan yang akan anda lakukan.
Sebenarnya topik ini belum selesai dan masih menyisakan permasalahan. Permasalahan tersebut adalah masih ada jarak tersisa antara kolom posting dan kolom sidebar. Jarak tersebut sebenarnya saya maksudkan apabila anda ingin menambah jumlah kolom sidebar nantinya, anda bisa meletakkannya disitu. Namun karena postingan saya ini sepertinya sudah terlalu panjang, untuk permasalahan tersebut akan kita bahas pada postingan berikutnya, tanpa mengurangi makna dan tidak ada maksud untuk membuat anda penasaran.
Selamat Belajar,
Browse » Home »
Tutorial HTML
» Edit HTML Lebar Template
Edit HTML Lebar Template
Subscribe to:
Post Comments (Atom)
3 komentar:
mau coba lagi nih..(pemula) huuupps..tukang AC lagi belajar blog hikss...
Waah siip makasih banyak atas ilmunya, langsung di coba, soalx dah lama kepingin membagi laman menjadi 3 bagian.
makasih berooooooo tutorial ini yg aku cari dari dulu saya langsung coba n bisa
Post a Comment
Berikan Komentar Anda yang berkualitas agar Komentar anda tidak disebut sebagai 'Junk Comments'. Komentar yang Bernada SPAM, Link Promosi dan lain-lain dengan Sangat Menyesal akan Kami Hapus,
Terima Kasih.