Merubah ukuran badan dan post sidebar || modif theme default

karena ukuran theme defaut ini lumayan kecil, bagaimana jika kita merubah ukurannya agar sesuai dengan keiginan. ok, langsung ke intinya ya

Waktu terkadang terlalu lambat bagi mereka yang menunggu, terlalu cepat bagi yang takut, terlalu panjang bagi yang gundah, dan terlalu pendek bagi yang bahagia. Tapi bagi yang selalu mengasihi, waktu adalah keabadian. Henry Van Dyke

karena ukuran theme defaut ini lumayan kecil, bagaimana jika kita merubah ukurannya agar sesuai dengan keiginan. ok, langsung ke intinya ya

Last Modif at July 7th, 2011

NOT RECOMEND
melanjutkan postingan sebelumnya

karena ukuran theme defaut ini lumayan kecil(ramping), bagaimana jika kita merubah ukurannya agar sesuai dengan keiginan. ok, langsung ke intinya ya.
mmm. . , biasanya dalam ngedit theme mulainya dari atas(header) tapi karena ada alasan yang ngga bisa saya sebutkan, yaudah edit themenya dimulai dari badan(post dan sidebar), berikut
/* sekedar saran, sebaiknya sobat install wordpress di komputer pribadi, download server local sedangkan untuk code editor download/gunakan notepad ++ 100% free)*/

cara modifikasi badan post dan sidebar

  • masuk ke directory themes default . . . wp-content/themes/default, atau melalaui
  • appearance -> editor
  • select theme to edit wordpress default
  • klik/edit style.css
  • kemudian tambahkan style berikut;

/*start ditambahkan*/
#pageeditan{
text-align: left; /*text align left atau text rata kiri*/
clear:both;
background:#CFECEC; /*warna latar belakang, dapat diganti denan warna lain*/
margin: 20px auto; /* batas atau jarak luar atas bawah 20px kiri-kanan auto atau menyesuaikan*/
padding: 10px; /* batas atau jarak dalam masing-masing 20px*/
width: 1000px; /*lebarnya 1000px*/
border: 1px solid #82CAFF; /*lebar garis pinggir 1px, style border 1px, warna garis merah*/
-moz-border-radius:20px; /*style ini hanya untuk fire fox*/
border-radius:20px;/*ini style pada css3*/
}
/*end ditambahkan*/

  • kemudian cari style berikut

/* Begin Sidebar */
#sidebar
{padding: 20px 0 10px 0;
margin-left: 545px;
width: 190px;}

  • setelah itu ubah menjadi seperti berikut

/* Begin Sidebar */
#sidebar{
float:right;/*letaknya di kiri atau istilahnya adalah menekan ke kiri*/
background:#E0FFFF; /*warna latar belakang sidebar */
padding: 10px; /*jarak dalam sidebar, 10px */
margin: 10px 0 0 10px; /*jarak luar kiri-atas 10px kanan-bawah 0*/
width: 300px; /*lebar sidebar, sesuaikan lebarnya*/
border:1px solid #9AFEFF; /*ukuran garis 1px, style garis solid, warna garis #9AFEFF, penulisan value border ini dipisahkan dengan spasi*/
}

  • cari lagi

.narrowcolumn {
float: left;
padding: 0 0 20px 45px;
margin: 0px 0 0;
width: 450px;}

  • kemudian ubah menjadi seperti berikut

.narrowcolumn{
float: left;
padding: 20px;/*ini adalah jarak dalam*/
background:#E0FFFF; /*warna latar belakang */
margin: 10px 0;/*ini adalah jarak luar, nilainya atas dan bawah 10px sedangkan kiri kanan 0px*/
width: 600px; /*lebar badan post, sesuaikan*/
border:1px solid #9AFEFF; /*ukuran garis 1px, style garis solid, warna garis #9AFEFF, value borde ini dipisahkan dengan spasi*/
}

  • update file

langkah selanjutnaya ialah klik/edit(buka) header.php

  • cari ini

<div id="page">

  • kemudian ubah menjadi seperti berikut

<div id="pageeditan">

  • update file

buka(klik) lagi rtl.css

  • cari ini

.narrowcolumn {
float:right;
padding: 0 45px 20px 0;
}

  • setelah ketemu, kemudian ubah menjadi seperti ini

/*.narrowcolumn {
float:right;
padding: 0 45px 20px 0;
}*/

  • cari lagi ini(masih di rtl.css)

#sidebar {
margin-left: 0;
margin-right: 545px;}

  • setelah ketemu, kemudian ubah menjadi seperti ini

/*#sidebar {
margin-left: 0;
margin-right: 545px;}*/

  • perlu di ingat jangan sampai ada yang salah
  • update file

sekarang, buka lagi style.css kemudian cari width:600px; /*lebar badan post */ dan width: 300px; /*lebar sidebar*/ dan sesuaikan lebarnya, simpan/update file kemudian lihat blog
bersambung. . .

Indam

A geek, frontend developer. Like you, coding & experiment.
#web #design #ui #ux #standard #dreamer
#welding #interisti #beer #coffee

11 thoughts on “Merubah ukuran badan dan post sidebar || modif theme default”

  1. eric says:

    makasih tutorialnya sob … ohya … template kereen. blm pernah liat yang seperti ini ..
    salam kenal yak …

    1. indam says:

      salam kenal balik :)

    2. indam says:

      sala m kenal balik :)

  2. Kangdoel says:

    Aduh mas, kok saya pusing liat huruf2 di blog sampeyan ya….

    1. indam says:

      udah aku bagusin gan

  3. kaka says:

    info yang bagus gan cuman lebih bagus lagi klo dikasih skrinsot before afternya…jadi kta tau perubahan masing masing kode…

  4. umar danny says:

    mantab gan…coba dulu ya….thanks tutorialnya…

  5. afigot says:

    masih klo yg ga ada width sidebarnya gmn ya??

  6. Thanks ilmunya, keren dan sangat bermanfaat

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Disclaimer, FAQ & License

Hello Gaes, untuk tujuan apapun semua content text di blog ini dapat di copas, tanpa harus menulis sumbernya. Namun content yang berupa gambar--harus Anda periksa kembali lisensinya.

Adapun(mungkin) sebagian content blog ini sudah kadaluarsa atau sudah tidak relevan, contoh :'Theme default WordPress 3+ adalah Twentyten 'apakah selamanya Twentyten?' ngga kan? Indam selaku pengelolah berharap melaporkan jika menemukan content basi yang mungkin dapat menimbulkan salah persepsi tentang content dan konsep itu sendiri. Oia, karena blog ini bersifat pribadi dan bukan untuk komersil, mungkin anda juga akan menemukan tulisan tentang aku dan hal-hal rancu yang sama sekali ngga ada hubungan dengan web dan blog-blogan. Perlu dicatat: Indam selaku pengelolah tidak bertanggung jawab atas kerugian materi, waktu, tenaga, pikiran yang mungkin ditimbulkan dari sini. So, pandai-pandai yah dalam memilah informasi. Thanks for reading.

Quote

Ketika Anda melihat orang lain mengangkat dirinya dengan cara merendahkan orang lain, sebenarnya orang itu lebih rendah dari mereka yang direndahkan. Phidias--greece filsuf

+
-