Posted byTeacher's MessageMendesain ulang lebar kolom sebuah blog sangat berguna sebagai langkah awal mengenal lebih dalam bagaimana sebuah blog dibangun. Melalui ini pula seorang blogger dapat melakukan beberapa penyesuaian terhadap lebar sebuah kolom (baik header, main, sidebar, ataupun footer) ketika sesuatu hal yang ingin dimuat terlalu kecil ataupun terlalu besar sehingga ketika dipaksakan mengakibatkan sebuah blog kehilangan harmonisasi ruang.
Sebagai bahan latihan kita akan mencoba melakukan perubahan pada desain template Minima bawaan Blogger yang mempunyai lebar 660px (outer-wrapper=halaman blog) dengan lebar sidebar = 220px dan main = 400px serta header = footer = outer-wrapper= 660px.
Untuk merubah lebar tiap kolom pada template minima sangat simple sekali karena hanya tiga komponen di atas tersebut yang harus di rubah. Dasar pedoman untuk perubahan adalah dengan cara mengambil ukuran lebar halaman blog yang kita inginkan dihubungkan dengan bagian mana yang lebarnya ingin dirubah untuk penyesuaian dengan kebutuhan yang ada. Sebaiknya lebar blog maksimal yang kita gunakan 1024px karena lebar satu halaman layar adalah 1024px (pixel).
Sebagai bahan percobaan kita akan melakukan perubahan pada template Minima dengan asumsi misalnya karena kita butuh sidebar diperlebar hingga 350px untuk memuat sebuah kalendar yang memang harus berukuran segitu untuk dapat tertampilkan secara sempurna.
Bagian yang harus kita rubah hanya pada KODE CSS di syntax :
Rubah lebar (width) sesuai kebutuhan menjadi 350px, sehingga KODE CSS menjadi :
2. Misalnya bagian halaman posting sekaligus kita perlebar menjadi 500px. Untuk hal ini kita harus merubah lebar pada syntax :
Rubah lebar (width) sesuai kebutuhan menjadi 500px, sehingga KODE CSS menjadi :
3. Perhatikan metode yang kita gunakan sebagai dasar perubahan :A. Lebar (width) Desain asli template Minima :
- header = outer-wrapper = footer = 660px
- main = 410px
- sidebar = 220px
B. 660px - width(sidebar) - width(main) = x
- Keterangan : tanda (-) = dikurangi.
660px - 220px - 410px = 30px
angka 30px ini digunakan untuk variable seperti margin dan padding dan kita gunakan sebagai komponen nilai penghitung lebar supaya tetap simetris sesuai dengan aslinya.
C. Lebar sidebar baru = 350px, lebar main baru = 500px.
Lebar (width) pada header = lebar outer-wrapper = lebar footer = width baru =
Lebar (width) Sidebar + lebar (width) Main + 30px = width baru2
350px + 500px + 30px = 880px
880px = width baru pada sidebar, main dan outer-wrapper.
4. Setelah angka width baru pada header, outer-wrapper dan footer diketahui, maka bentuk KODE CSS nya menjadi :
A. Header :
Catatan : - sebelum perubahan width:660px;
B. Outer Wrapper :
Catatan : - sebelum perubahan width:660px;
C. Footer :
Catatan : - sebelum perubahan width:660px;
5. Keterangan :
- Sebelum melakukan perubahan pada template lakukan prosedur standar yang harus dilakukan blogger :
1. Login ke Blogger.
2. Dasbor (Dasboard).
3. KLIK Tata Letak.
4. KLIK Edit HTML.
5. Amankan Template. Cara mengamankan template bisa dilihat di sini !.
6. Untuk memudahkan mencari KODE HTML gunakan Ctrl+F (pada keyboard). Kalau belum jelas caranya, anda bisa melihatnya di sini !.
7. Diakhir proses merubah lebar kolom jangan lupa KLIK Simpan Template (SAVE Template).
8. Untuk perubahan Kolom dari template bawaan Blogger yang lain anda bisa melihatnya di Rahasia Merubah Lebar Kolom Template Blogger yang akan kita postingkan secara berkesinambungan.
- Perubahan lebar kolom pada Template Minima merupakan dasar bagi perubahan untuk template bawaan blogger yang lain.
- Mengetahui cara-cara untuk merubah lebar kolom sangat berati bagi blogger saat melakukan banyak lagi perubahan desain yang lain, seperti misalnya menambah kolom baru, membuat 2 buah sidebar baik di satu sisi ataupun di kanan dan kiri, membuat kolom bagi widget baru dan banyak lagi hal menarik yang bisa dilakukan.
Selamat berimprovisasi !
Sebagai bahan latihan kita akan mencoba melakukan perubahan pada desain template Minima bawaan Blogger yang mempunyai lebar 660px (outer-wrapper=halaman blog) dengan lebar sidebar = 220px dan main = 400px serta header = footer = outer-wrapper= 660px.
Untuk merubah lebar tiap kolom pada template minima sangat simple sekali karena hanya tiga komponen di atas tersebut yang harus di rubah. Dasar pedoman untuk perubahan adalah dengan cara mengambil ukuran lebar halaman blog yang kita inginkan dihubungkan dengan bagian mana yang lebarnya ingin dirubah untuk penyesuaian dengan kebutuhan yang ada. Sebaiknya lebar blog maksimal yang kita gunakan 1024px karena lebar satu halaman layar adalah 1024px (pixel).
Sebagai bahan percobaan kita akan melakukan perubahan pada template Minima dengan asumsi misalnya karena kita butuh sidebar diperlebar hingga 350px untuk memuat sebuah kalendar yang memang harus berukuran segitu untuk dapat tertampilkan secara sempurna.
Bagian yang harus kita rubah hanya pada KODE CSS di syntax :
#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 */
}Rubah lebar (width) sesuai kebutuhan menjadi 350px, sehingga KODE CSS menjadi :
#sidebar-wrapper {
width:350px;
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 */
}2. Misalnya bagian halaman posting sekaligus kita perlebar menjadi 500px. Untuk hal ini kita harus merubah lebar pada syntax :
#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 */
}Rubah lebar (width) sesuai kebutuhan menjadi 500px, sehingga KODE CSS menjadi :
#main-wrapper {
width: 500px;
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. Perhatikan metode yang kita gunakan sebagai dasar perubahan :A. Lebar (width) Desain asli template Minima :
- header = outer-wrapper = footer = 660px
- main = 410px
- sidebar = 220px
B. 660px - width(sidebar) - width(main) = x
- Keterangan : tanda (-) = dikurangi.
660px - 220px - 410px = 30px
angka 30px ini digunakan untuk variable seperti margin dan padding dan kita gunakan sebagai komponen nilai penghitung lebar supaya tetap simetris sesuai dengan aslinya.
C. Lebar sidebar baru = 350px, lebar main baru = 500px.
Lebar (width) pada header = lebar outer-wrapper = lebar footer = width baru =
Lebar (width) Sidebar + lebar (width) Main + 30px = width baru2
350px + 500px + 30px = 880px
880px = width baru pada sidebar, main dan outer-wrapper.
4. Setelah angka width baru pada header, outer-wrapper dan footer diketahui, maka bentuk KODE CSS nya menjadi :
A. Header :
#header-wrapper {
width: 880px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}Catatan : - sebelum perubahan width:660px;
B. Outer Wrapper :
#outer-wrapper {
width: 880px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}Catatan : - sebelum perubahan width:660px;
C. Footer :
#footer {
width:880px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}Catatan : - sebelum perubahan width:660px;
5. Keterangan :
- Sebelum melakukan perubahan pada template lakukan prosedur standar yang harus dilakukan blogger :
1. Login ke Blogger.
2. Dasbor (Dasboard).
3. KLIK Tata Letak.
4. KLIK Edit HTML.
5. Amankan Template. Cara mengamankan template bisa dilihat di sini !.
6. Untuk memudahkan mencari KODE HTML gunakan Ctrl+F (pada keyboard). Kalau belum jelas caranya, anda bisa melihatnya di sini !.
7. Diakhir proses merubah lebar kolom jangan lupa KLIK Simpan Template (SAVE Template).
8. Untuk perubahan Kolom dari template bawaan Blogger yang lain anda bisa melihatnya di Rahasia Merubah Lebar Kolom Template Blogger yang akan kita postingkan secara berkesinambungan.
- Perubahan lebar kolom pada Template Minima merupakan dasar bagi perubahan untuk template bawaan blogger yang lain.
- Mengetahui cara-cara untuk merubah lebar kolom sangat berati bagi blogger saat melakukan banyak lagi perubahan desain yang lain, seperti misalnya menambah kolom baru, membuat 2 buah sidebar baik di satu sisi ataupun di kanan dan kiri, membuat kolom bagi widget baru dan banyak lagi hal menarik yang bisa dilakukan.
Selamat berimprovisasi !
The Owner of Education For All Blog hanyalah seorang Blogger pemula namun bila sobat blogger mania berminat untuk melihat tutorial lainya bergaya magazine blog silahkan. Akses melalui link di bawah ini :
» Selamat Berkreasi - E F A «
On Post » media pembelajaran bahasa inggris smp
Boss, tambahin backlink websiteku dong bosss https://amazenesia.com 😅
On Post » cara mengatasi mobil sulit dihidupkandi
Thanks for some other excellent post. Where else may anyone get that kindof info in such a perfect means of writing? I’ve a presentation next week, and I’m on the look for such info.Thank you very muchdatuktogel.infogame onlineprediksi TogelBandarsgp.netSitus agen judi Online terbaikdanaqqJawapkr88
On Post » aksi bule pengobral cinta ini dia ciri
Ini
On Post » cara mudah membagi kolom header
cara memperlebar area untuk judul blog gimana gan? ane bingung..
On Post » download gratis rpp silabus sdmi kelas
silabus jawa yang mulai kelas 4 sampai 6 kliru upload kak,,www.bromoexpedition.com
On Post » cara membuat tooltip gambar dengan
Mantap Gan.. sangat membantu.
On Post » download template keren
this is the original template you can donwload at https://btemplates.com/2012/blogger-template-blogazine/ and you can redesigned it if you know html code
On Post » download template keren
I am a poor student sir.I teach people and share everything only for education.If u given me this tamplet free its great pleasure to me and other people.I never share this tamplet, I use this only my new project sir :)
On Post » download template keren
how much do want to give me. I redesigned for three months
On Post » download template keren
what prize? sir
On Post » cara membuat ucapan selamat datang
Perkenalkan, saya dari tim kumpulbagi. Saya ingin tau, apakah kiranya anda berencana untuk mengoleksi files menggunakan hosting yang baru?Jika ya, silahkan kunjungi website ini www.kumpulbagi.com untuk info selengkapnya.Di sana anda bisa dengan bebas share dan mendowload foto-foto keluarga dan trip, music, video, filem dll dalam jumlah dan waktu yang tidak terbatas, setelah registrasi terlebih dahulu. Gratis :)
On Post » download template keren
template premium boss not free
On Post » cara licik pembual cinta dunia maya
Mencari uang paling mudah itu pinjam, tapi mengembalikanya sulit
On Post » cara licik pembual cinta dunia maya
Aku indriaty manirjo, saya ingin bersaksi pekerjaan yang baik dari Allah dalam hidup saya kepada orang-orang saya yang mencari untuk pinjaman di Asia dan bagian lain dari kata, karena ekonomi yang buruk di beberapa negara. Apakah mereka orang yang mencari pinjaman di antara kamu? Maka Anda harus sangat berhati-hati karena banyak perusahaan pinjaman penipuan di sini di internet, tetapi mereka masih asli sekali di perusahaan pinjaman palsu. Saya telah menjadi korban dari suatu 6-kredit pemberi... [more]
On Post » download template keren
http://cloninggo.blogspot.com/ Download link not work please update!!!
On Post » english speech contest
http://competition-storytelling.blogspot.co.id/
On Post » english speech contest
This comment has been removed by the author.
On Post » cara membuat ucapan selamat datang
pesan saja sama jasa pembuat template, online
On Post » cara membuat ucapan selamat datang
saya mau bikin blog saya menjadi online shop dgn tampilan blog yang keren. caranya gimana mas/sis?
On Post » download gratis rpp silabus sdmi kelas
cari rpp bahasa jawa sd kelas 5 kok nggak ada za.
On Post » macam macam jenis teknik seo ala
Informasinya sangat bermanfaat terutama bagi yang baru belajar SEO.bagi agan yang berminat belajar membuat website bisa dilihat di situs berikut ini http://www.computer-course-center.com/web-design.html
On Post » silabus rpp ktsp smp berkarakter
Rpp nya sangat membantu saya sebagai pengajar yang butuh info KTSP..... terima kasih dan semoga sukses selalu....aamiin
On Post » galau blog anda ditolak google adsense
Wk...wk...Wkk.smart man must be different from ....
On Post » galau blog anda ditolak google adsense
You have got some money from google adsense? Very excited bro!! :D
On Post » cara membuat read more dan nama author
mantap gan...