Cara memposting grid didalam amdhas blogazine themes

Artikel ini akan membahas cara memposting grid fluid di amdhas blogazine themes. Tujuan saya membuat fluid grid default dalam style blogazine agar mempermudah melayout halaman, jadi kita bisa mempunyai banyak ide dalam melayout.

Jika ingin megikuti cara ini anda harus mendonload terlebih dahulu themes blogazine yang sudah saya buat. Karena selector CSS saya buat dengan bahasa indonesia agar mempermudah anda untuk mengenali selector tersebut.

Oke, sekarang kita akan belajar memposting grid fluid presentase di dalam themes amdhas blogazine. Namun sebelumnya anda jangan menghapus kode CSS grid fluid yang sudah saya berikan di style blogazine yang ada di dalam themes tersebut.

Langkah awal adalah anda membuat postingan baru, dan lihat di bawah editor sudah ada box dengan drop down menu dengan judul blogazine style. Silahkan anda pilih style blogazine jangan pilih default karena itu hanya style standar bawaan template. Jadi kita bisa memilih di antara blogazine style dan blogazine style ke-2.

Oke, agar mudah mengikuti pilih saja blogazine style. Nah, bagaimana nih cara posting grid yang sudah di berikan?

Sebelumnya kita harus melihat selector dari grid dalam amdhas blogazine themes di blogazine style. Selector yang saya berikan menggunakan bahasa indonesia dan itu adalah grid fluid 12 kolom.

Kita logikakan jika 6+6=12 maka jika kita memberikan selector class dari CSS adalah enam dia akan membentuk dua kolom grid. Nah formulanya harus di awali dengan: <section class="row"> Karena row adalah isi keseluruhan yang bernilai seratus persen. Maka formulanya seperti ini:

<section class="row">
<section class="enam">
<p><img src="masukan gambar di sini"/></p>
<p>Masukan isi postingan di sini</p>
</section>
<section class="enam">
<p><img src="masukan gambar di sini"/></p>
<p>Masukan isi postingan di sini</p>
</section>
</section>

Oks, sekarang terlihat kan? dari kode di atas saya memberikan <section class="enam"> kode tersebut mengartikan saya membagi 12 kolom menjadi dua 12:2=6. Jadi hasil kode di atas akan menjadi dua kolom. Misal contohnya saya akan memberikan image seperti di bawah ini:

amdhas-blogazine

<section class="enam">
</section>

amdhas-blogazine

<section class="enam">
</section>

Kita juga bisa membagi menjadi tiga kolom, misal kolom yang ada di tengah ingin kita buat lebih besar sedangkan di samping kanan dan kiri lebih kecil dan kolom mengisi semuanya. Lalu bagaimana caranya?

Caranya mudah kita hanya membagi kolom tersebut menjadi tiga bagian dan di tengah dengan class="enam"

<section class="row">
<section class="tiga">
<p><img src="masukan gambar di sini"/></p>
<p>Masukan isi postingan di sini</p>
</section>
<section class="enam">
<p><img src="masukan gambar di sini"/></p>
<p>Masukan isi postingan di sini</p>
</section>
<section class="tiga">
<p><img src="masukan gambar di sini"/></p>
<p>Masukan isi postingan di sini</p>
</section>
</section>

Terlihat jelas kode di atas mengapit <section class="enam"> kode tersebut ada di antara: <section class="tiga">. Nah, jika di jumlah maka hasilnya adalah 3+6+3=12. Maka akan terlihat hasil seperti contoh di bawah ini:

amdhas-blogazine

<section class="tiga">
</section>
Gambar akan menyesuaikan grid yang di berikan, meskipun gambar kita berikan besar kita tak perlu kuatir karena gambar akan menyesuaikan dengan sendirinya.

amdhas-blogazine

<section class="enam">
</section>

amdhas-blogazine

<section class="tiga">
</section>
Jika kita mengecilkan layar gambar akan menyesuaikan seratus persen terutama di layar 767px. Ini mengisi 12 kolom grid fluid dalam themes amdhas blogazine.

Yaps, seperti beberapa contoh di atas itu adalah metode sederhana dalam amdhas blogazine themes. Silahkan anda terapkan cara ini kalau ingin postingan seperti multi kolom. Semua kode fluid grid dalam themes amdhas blogazine bisa kita modifikasi lagi. Tentunya sesuai selera dan ide. Oks, sampai di sini dulu gridnya, semoga berguna dan bermanfaat.

24 Komentar

Musa Khairul Umam

2012-03-02 at 12:55

Simpel juga y mas kalo gini hehehe… saya baru tau ada fungsi grid kayak gini di themes buatannya mas amdhas :)
- amdhas
  
  2012-03-02 at 13:01
  
  Yaps, di buat semudah dan sesimple mungkin. Biar mudah melayoutnya, dan juga cukup responsive.
Al Firouz

2012-03-02 at 13:24

wah bisa rapi kayak gitu ya , btw grid itu cuma sampe 12kah ? atau bisa lebih
- amdhas
  
  2012-03-02 at 13:30
  
  Bisa sampai 36 kolom. Tergantung kita membagi besar masing-masing grid. Yang standar 12 kolom saja sudah lebih dari cukup. Klo yang 24 dan 36 kolom itu untuk membuat layout yang sangat kompleks.
  Toh, terlalu banyak biasanya ga ke pakai semuanya.
  - Al Firouz
    
    2012-03-02 at 18:15
    
    wah terlalu banyak itu mah hehe , trims bang saya coba
yangpentingshare

2012-03-02 at 15:14

bang aq dah dapet thme abang tapi kagak tau cara makennya please adain tutorialnya dong
- amdhas
  
  2012-03-02 at 15:35
  
  Sama saja seperti menggunakan wordpress ga beda ko, di coba posting aja dulu. Nanti juga bisa di mengerti, dan ada petunjuknya di bawah editor posting. Blogazine style ada dua jika kita tidak memilihnya maka akan menjadi default single post.
  Nah, default single contohnya dah di posting di sini. Lebih enak pakai wordpress di bandingkan blogspot, karena style CSS maupun js bisa kita sesuaikan mau di taruh di mana.
  Nah klo di amdhas blogazine themes sidebarnya banyak, bisa kita atur di mana mau di taruh.
  Di coba posting aja dulu randz.
  - yangpentingshare
    
    2012-03-03 at 02:02
    
    oke bang tar dicoba dulu tapi aq gak tau cara hosting :(
BagiBagiBlog

2012-03-02 at 18:22

Sementara Ayas masih mempelajari WordPress ini dulu Bang. Yach mulai dari NOl seperti Nyubi yang baru belajar Ngeblog kayak dulu itu!!
Hweheheee…
Sampai sekarang udah ada 2 postingan di Amdhas Blogazine Themes, tapi cuma DRAFT aja.
Desainnya masih ancur banget, secepatnya Ayas perbaiki kok, sambil belajar WordPress!!
Untuk itu,,, Artikel ini Ayas Bookmark yach Bang!!!
Terima KAsih.
- amdhas
  
  2012-03-02 at 18:52
  
  Ayas pasti bisa..
  Bisa karena terbiasa, apalagi ayas sudah sedikit banyaknya paham tentang kode CSS, HTML, javascript. Nah sekarang saatnya ke open source niar lebih mendalam lagi. Nanti bisa belajar .htaccess, php, sql dan sebagainya.
  Lagipula klo opensource sebangsa wp, det simple, drupal, dan lainnya. Halaman bisa kita buat valid htmlnya. Dan ga perlu sebenarnya kita mendisplay none elemen halaman depan klo membuat blogazine. Klo di blogspot klo ga paham conditional tag blogspot yah..mau ga mau seperti ini:
```
.janda-kembang
{
display:none
}
```
  hehehe..tul ga?
  Pokonya ane dukung sepenuhnya, mohon saling mengkoreksi..oks..
  - BagiBagiBlog
    
    2012-03-02 at 20:20
    
    Wookeehlah kalo begitu Bang!!!
    Sedikit2 Pelan2 Ayas akan memulai Blogazine dgn WordPress ini kok!!
    Tinggal nunggu waktu aja… kalo Lamaaaa juga harap dimaklumi adanya!!
    Hweheheee…
    Terima KAsih atas dukungannya Bang, Jadi makin SEMANGAAAT neh!!
    ^_^
cepoe

2012-03-03 at 01:54

Maaf tidak menautkan link mas Hendro.
Jujur saya katakan, anda sebenarnya adalah inspirator, pengetahuan mas Hendro sangat luas sekali tentang website. Dari sekian banyak opini, koding, CMS, segalanya yang berhubungan dengan ilmu website sampai ke artikel motivasi.
Di lanjut mas Hendro, terima kasih saya sudah coba themes mas Hendro, struktur saja sangat berbeda dari themes wordpress pada umumnya.
SALUT.
dhenycahyoe

2012-03-03 at 05:54

hoho… akhirnya gird ini di posting juga, kemarin gua cuma ambil beberapa css girdnya saja bang, untuk di terapin di template sekarang, dan mengambil contoh custom single html5 yg dari template pertama dulu beserta code fungsi-nya, dan ternyata hasilnya maknyus dan lebih mudah kalau bikin blogazine, sepp dah pokonya :D
arie5758

2012-03-03 at 13:47

Ijin belajar ya bang, untuk template blogazine ini saya masih betul² awam. Terima kasih atas tutorialnya ini :)
iskandaria

2012-03-03 at 23:08

Wah, kebetulan saya belum mendownload theme blogazine buatan Bang Hendro. Nanti pasti saya download deh. Penasaran juga, siapa tahu ada kode-kode yang bisa saya gunakan sedikit untuk theme yang sekarang saya gunakan. Kalau mengubah theme sudah tidak mungkin lagi saya lakukan, kecuali kalau bikin blog WP baru Bang.
Oya, sebenarnya memposting menggunakan grid ini sangat mudah dan sederhana. Awalnya aja agak bikin bingung. Tapi kalau udah terbiasa, prosesnya bisa lebih cepat. Ini pengalaman saya sendiri bang…hehehe (ala bisa karena terbiasa).
Hanif

2012-03-04 at 06:33

mantab mas,,, simple trick tapi jadinya bagus. heheh, bisa dicoba nih. makasih bagi-bagi ilmunya.
Padly

2012-03-04 at 09:25

.row {width:100%;} kalau tidak ditambahkan container menurutku sangat sangat bermasalah pada layar lebar, terlebih kalau kita memakai background image yang besar, layoutnya akan sangat kacau.
Sebaiknya bikin begini Hen…
```
 .row {
width:100%;
}
.container {
width: misalnya 90%;
max-width: misalnya 960px;
margin: 0 auto;
}
```
Jadi html-nya…
Padly

2012-03-04 at 09:39

Hugh! ternyata harus di encode dulu…
```
.row {width:100%;} .Container {width: misalnya 90%; max-width:misalnya 960px; margin: 0 auto;}

<section class ="row">
<div class ="container">
<div class ="grid"</div>
konten...
</div>
</div>
</section>
```
- amdhas
  
  2012-03-04 at 11:00
  
  Yaps seperti itu bisa juga pad, sering juga ane terapin dan post ini juga hampir sama, cuma ane ga kasih max-width:960px itu memang bertujuan agar nanti di layar besar ga melebar. Seperti dulu ane kasih max-width:1140px nah tapi itu juga bukan dalam container grid, karena grid sudah di berikan nilai width, jadi klopin mau kasih max-width:960px di kasih di row atau body, di takutkan elemen yang lainnya seperti side bar yang sudah terlanjur di themes ane. klo ane punya alternatif mendingan di kasih di body atau row atau html seperti fluid 1140px.
```
body - atau row -atau html{
max-width:1140px
}
```
  Gimana menurut ente pad?
  jalan terbaiknya klo ane pilih yang di body saja biar ga usah tambah division lagi. Nah, ini biasanya klo yang kasih element kelebaran. Tapi buat Pemindaiain memang bagus ga sepenuhnya seratus persen di layar lebih dari 1140px.
andank

2012-03-04 at 18:24

waduh, saya masih belum mengerti nih mas. maklum :D
Diat

2012-03-04 at 19:22

Wah satu lagi info berguna
achmad sholeh

2012-03-05 at 09:02

trimakasih infonya mas brow, download dulu theme nya ya
die

2012-03-05 at 22:05

Kemarin masih tak pelajari sistem grid-nya,sekarang malah sudah diterapkan disini. Terima kasih mas.
Miftachudin

2012-03-18 at 16:16

waahhh ini yng tak cri2,,mksh mas,,,,

Cara memposting grid didalam amdhas blogazine themes

Pencarian

Menu Amdhas

Tema WordPress

24 Komentar