YARO STARAK BLUE PRINT

Yahoo bot last visit powered by  Bots Visit
Google bot last visit powered by Bots Visit
powered by PRBbutton
Personal Blogs - BlogCatalog Blog Directory
Blog Directory & Search engine
Minggu, 06 Juni 2010

MEMBUAT HALAMAN BLOG LEBIH LEBAR ATAU KECIL

image 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;
}

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 */
}

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 */
}

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;
}

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;
}

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.

CARA MENGUBAH HALAMAN BLOG

Sekarang saatnya untuk merubah lebar blog, dengan 7 langkah sebagai berikut :

1. 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;
}

2. 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 */
}

3. 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 */
}

4. 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;
}

5. 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;
}

6. sebelum menyimpannya, alangkah baiknya Anda melihat tampilan previewnya terlebih dahulu.

7. jika sudah yakin, simpan template.

selesai.

http://earning-news.blogspot.com

1 komentar:

Payz0 mengatakan...

saya ingin ukuran di home dan di konten berbeda.. kira2 bisa gak

Posting Komentar

Posting yang berkaitan

TUKARAN LINK SILAHKAN COPY LINK DI BAWAH INI

Ą