Memperlebar Halaman Blog dan Side Bar Blog : Setiap template blog memiliki ukuran lebar sendiri-sendiri terutama template non-blogspot. Jika kebetulan Anda mempunyai blog dengan template dengan lebar yang tidak sesuai dengan keinginan, Anda dapat melakukan kustomasi lebar halaman blog maupun side bar blog. Ikuti tipsnya bersama Tips dan Trik Blog berikut ini.
Sebelum melakukan pengeditan ini, saya sarankan untuk melakukan back up template Anda terlebih dahulu untuk mengantisipasi hal-hal yang tidak kita inginkan. Atau Anda dapat mencoba pada blog simulasi (blog latihan) terlebih dahulu sebelum benar mengaplikasikan pada blog Anda yang sebenarnya.
Ada beberapa istilah yang perlu diketahui sehubungan dengan kustomasi lebar halaman blog ini. Untuk mempermudah simulasi, saya menggunakan template Minima milik blogspot. Mungkin Anda akan menemui kode yang agak berbeda namun pada prinsipnya sama. Jika Anda menggunakan Firefox, untuk mempermudah pencarian kode-kode dalam pengeditan ini, gunakan Ctrl + F.
Halaman Blog
Dipresentasikan dengan kode seperti di bawah ini.
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
Untuk melakukan kustomasi lebar halaman blog, Anda dapat merubah angka pada width sesuai keinginan.
Halaman Posting
Dipresentasikan dengan kode seperti di bawah 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 */
}
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 */
}
Untuk melakukan kustomasi lebar halaman posting, Anda dapat merubah angka pada width sesuai kebutuhan.
Side Bar Blog
Dipresentasikan dengan kode seperti di bawah ini.
#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 */
}
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 */
}
Untuk melakukan kustomasi lebar side bar blog, Anda dapat merubah angka pada width sesuai kebutuhan.
Header Blog,
Dipresentasikan dengan kode seperti di bawah ini.
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
Untuk melakukan kustomasi lebar Header blog, Anda dapat merubah angka pada width sesuai kebutuhan.
Footer Blog
Dipresentasikan dengan kode seperti di bawah ini.
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
Untuk melakukan kustomasi lebar Footer blog, Anda dapat merubah angka pada width sesuai kebutuhan
Jika lebar salah satu dari kelima elemen tersebut (Halaman Blog, Halaman Posting, Side Bar Blog, Header Blog, dan Footer Blog) diubah maka akan mempengaruhi kesingkronisan elemen yang lain. Oleh karena itu, jika Anda ingin merubah lebar halaman blog maka selain merubah width pada halaman blog, Anda juga harus menyesuaikan lebar elemen halaman posting blog, header blog, footer blog dan (jika perlu) side bar. Jika tidak, Anda akan mendapatkan tampilan blog yang morat-marit.
DELAPAN LANGKAH MEMPERLEBAR HALAMAN BLOG
Sekarang saatnya untuk merubah lebar blog, dengan delapan langkah sebagai berikut.
Pertama, ubah width pada kode halaman blog, misalnya kita tentukan dengan lebar 900 pixel, seperti di bawah ini.
#outer-wrapper {
width: 900px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
width: 900px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
Kedua, agar jarak antara halaman posting dan side bar tidak terlalu jauh yang dapat menyebabkan tampilan blog kurang rapi/serasi, maka ubah juga width pada kode halaman posting, misalkan 550 pixel, seperti di bawah ini.
#main-wrapper {
width: 550px;
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 */
}
width: 550px;
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 */
}
Ketiga, agar side bar kelihatan serasi dengan lebar halaman posting yang telah disesuakan tersebut maka Anda dapat merubahnya dengan lebar maksimal 350 pixel, yaitu 900 pixel (lebar halaman blog) dikurangi 550 pixel (lebar halaman posting). Namun agar jarak antara halaman posting dan side bar tidak berdempetan, Anda dapat memberi jarak antara 30 pixel sampai dengan 50 pixel sesuai selera masing-masing. Misalkan kita tentukan jaraknya 40 pixel, maka lebar side bar nya menjadi 310 pixel {900 – (550 + 40)} , seperti di bawah ini.
#sidebar-wrapper {
width: 310px;
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 */
}
width: 310px;
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 */
}
Keempat, agar tidak timpang, Anda dapat merubah lebar header blog menjadi 900 pixel, seperti di bawah ini.
#header-wrapper {
width:900px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
width:900px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
Kelima, begitu juga dengan footer agar diperoleh lebar footer yang serasi dengan halaman blog, maka Anda dapat merubahnya menjadi 900 pixel, seperti di bawah ini.
#footer {
width:900px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
width:900px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
Keenam, sebelum menyimpannya, alangkah baiknya Anda melihat tampilan previewnya terlebih dahulu.
Ketujuh, jika sudah yakin, simpan template.
Kedelapan, selesai.
Yang ingin mencoba, selamat mencoba ya, semoga sukses!!
