rss

TUTORIAL 11 ( Mengubah Lebar Template)

Anda mungkin kurang puas dengan lebar template anda, karena anda ingin menambah jumlah sidebar, atau anda hanya sekedar ingin blognya menjadi lebih luas dibanding dengan template yang merupakan bawaan dari blogger.com. Kali ini saya ingin berbagi dengan anda semua, 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,

No comments:

Post a Comment

Give Me Your Comment, No SPAM No JUNK:

Posting Terbaru

Arsip Blog

 

Pengikut Blog Ini