didalam menu template designer blog kita bisa merubah ukuran lebar blog dengan mudah tanpa perlu lagi melakukan edit template secara manual seperti yang dulu di template TATA LETAK/LAYOUT 2006 ataupun template CLASSIC.
Pengaturan template melalui Template Designer ini tidak bisa diterapkan di template yang lama, Nah jadi bagi blogger yang masih menggunakan atau tertarik menggunakan template lama ini mau tidak mau untuk mengedit template mereka harus dilakukan secara manual menggunakan menu EDIT TEMPLATE HTML saja.
Bagi yang sudah tahu mungkin info ini kurang diminati tapi mungkin bagi yang belum tahu bisa menjadi info yang lumayan bermanfaat kali yah (barangkali saja.. xixixixi)
So, langsung saja, untuk pertama kalinya ketika anda akan mengedit template blog lama ini adalah merubah ukuran lebar blog agar sesuai dengan selera anda.
ukuran default template blog lama ini adalah 660px
jika anda ingin merubahnya menjadi lebar lagi:
1. Login ke blogger
2. Menu Design
3. Klik Tab Menu Edit HTML lalu centang kotak "Expand Widget Templates" agar semua kode dimunculkan Just Info, template blog itu terbagi 3 yaitu:
2. Outer, dan
3. Footer
(bener gak eah? hihihi)
4. Cari kode seperti ini:
#header-wrapper {width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
info:
660px adalah lebar dari header meliput bagian dari judul blog, anda bisa merubah lebar header dari 660px menjadi 990px atau 1000px atau terserah anda
#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}
info:
header description merupakan deskripsi dari blog,
jika anda sudah mengisi deskripsi blog dibagian setting blog, maka anda akan melihat tulisan deskripsi tersebut dibawah tulisan judul blog ketika anda membuka blog anda,
sebenarnya merubah ukuran lebar "Header Description" ini tidak ada pengaruhnya ditemplate selama ukuran "header description" masih dibawah ukuran header
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#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 */
}
#sidebar-wrapper {
width: 220px;
float: $endSide;
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 */
}
info:
Outer wrapper merupakan bagian tengah dari blog yang terdiri dari posting (main-wrapper) dan sidebar, jadi ukuran dari Outer haruslah sama dengan ukuran dari Header.
Dikarenakan "main-wrapper (posting)" dan "sidebar-wrapper" adalah bagian dari Outer,
maka untuk merubah lebar keduanya haruslah kurang dari ukuran Outer..
Misal ukuran Outer yang digunakan adalah=1000px.
maka main wrapper menjadi 600px dan sidebar 300px
**Loh kok kalau main wrapper dan sidebar dijumlahkan jadinya hanya 900px saja gan?**
-alasannya yaitu karena sisanya yang 100px akan digunakan untuk memperkirakan jarak agar antara posting (main wrapper) dan sidebar tidak terlalu berdempetan, bahkan bisa lebih parahnya lagi sidebar jadi terpental kebawah karena tidak memiliki space yang benar
Lihat gambar diatas,
Secara kode template defaultnya antara posting (main wrapper) dengan sidebar tidak terdapat kode margin dan padding yaitu kode yang mengatur jarak selisih atau kalau bahasa sms'a itu spasi.
Contohnya:
Penambahan kode padding dibagian main wrapper bisa digunakan untuk mengatur jarak antara tulisan dengan batas template.
|tulisan posting
setelah diberi kode padding menjadi
|<spasi><spasi><spasi>tulisan posting
Sedangkan penambahan kode padding dibagian sidebar-wrapper digunakan untuk mengatur jarak antara widget dengan batas template
widget|
setelah diberi kode padding menjadi
widget<spasi><spasi><spasi>|
Selanjutnya kita bahas kode margin
Jika kode padding digunakan untuk mengatur jarak antara batas template dengan isi, maka kode margin berfungsi mengatur jarak antara isi dengan isi
posting <spasi><spasi><spasi>|<spasi><spasi><spasi>widget
Cara menambahkan kode padding dan margin
#main-wrapper {
margin: 5px;
padding: 5px;
width: 600px;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 */
}
#sidebar-wrapper {
margin: 5px;
padding: 5px;
width: 300px;float: $endSide;
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 */
}
info:
contoh code jarak margin dan padding saya pakai 5px, anda bisa mengganti 5px dengan ukuran launnya sesuai dengan keperluan anda.
Selanjutnya:
/* 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;
info:
footer merupakan bagian template yang berada dibawah Outer (main-wrapper, sidebar-wreapper).
ukuran footer bisa anda rubah terserah anda asalkan tidak melebihi ukuran dari lebar Header.
so, selamat berkreasi and jangan takut mencoba yah.. :D
Sumber : http://www.adhiprimana.com/2012/03/cara-merubah-ukuran-lebar-blog.html
Posting Komentar