Membuat Artikel 3 Kolom Dalam 1 Halaman

Membuat Artikel 3 Kolom Dalam 1 Halaman - Suka membaca koran/surat kabar.? nah.! disana kita bisa melihat artikel berita 6-10 kolom dalam 1 halaman, Cara ini tidak jauh berbeda dengan postingan saya sebelumnya, yang mana saya sudah pernah share 2 cara bagaimana menampilkan postingan full tanpa sidebar. Artikel pertama, saya menggunakan TOMBOL PEMICU untuk tampilan full, dan pada artikel yang kedua, saya membungkus kodenya dengan TAG KONDISIONAL, jika ada waktu boleh dech lihat-lihat disini, hehe..

ARTIKEL 1

ARTIKEL 2

Pertemuan kali ini saya akan berbagi hal unik khusus buat sahabat pecinta SAHABAT BLOGGER 77 tentang bagaimana Membuat Artikel 3 Kolom Dalam 1 Halaman, seperti biasa kita menggunakan rumus perhitungan untuk mencari nilai sumbu y dan x dengan hasil akhir (n?)

RUMUS PERHITUNGAN

grid @media

grid-N = (100 - (gap * (N - 1))) / N + '%';
grid-2 = (100 - (3.5 * (2 - 1))) / 2 + '%' = 48.25%;
grid-3 = (100 - (3.5 * (3 - 1))) / 3 + '%' = 31%;
grid-4 = (100 - (3.5 * (4 - 1))) / 4 + '%' = 22.375%;
grid-5 = (100 - (3.5 * (5 - 1))) / 5 + '%' = 17.2%;
grid-6 = (100 - (3.5 * (6 - 1))) / 6 + '%' = 13.75%;
       nilai(n)         sumbu(y)                        sumbu(x)

Sahabat paham menggunakan rumus diatas, bingung ya.? sama donk saya juga bingung, hehe.!! sebenarnya mudah jika kita sudah tahu berapa jumlah pixel untuk lebar halaman blog, lihat template anda, disana akan tertulis kode width page.
Ok, karena lebar halaman blog berbeda-beda, mari kita hitung sama-sama agar hasil (n) bekerja otomatis pada setiap blog, Jika kita deklarasikan rumus diatas kurang lebih akan berbunyi seperti ini "sumbu y jarak seluruh sisi, sumbu x jarak sisi obyek dan (n)=y(sisi)+(sisi left+(x)sisi right+(x))", sehingga kita akan mengetahui berapa pixel yang digunakan obyek jika membuat 3 kolom

.sample-grid .custom-grid-3:first-child {margin-left:0}
@media (max-width:796) {
  .sample-grid .custom-grid-3 {
    float:none;
    display:block;
    width:796;
    margin:0 0 1.5em 0;
  }
}

Karena dalam blog menggunakan CSS sebagai rumus, saya coba menggunakan kode CSS diatas untuk menghitung nilai akhir (n), perhatikan kode @media (max-width:796), kita ganti nilai valuenya menjadi auto, dan kode width dibawah dengan auto, sehingga akan seperti ini

PERUBAHAN

.sample-grid .custom-grid-3:first-child {margin-left:0}
@media (max-width:auto) {
  .sample-grid .custom-grid-3 {
    float:none;
    display:block;
    width:auto;
    margin:0 0 1.5em 0;
  }
}

Selanjutnya kita tambahkan CSS berikut untuk menentukan nilai jarak sumbu y dan x, seperti ini

.sample-grid {
  width:auto;
  overflow:hidden;
  margin:0 auto;
}

.sample-grid .custom-grid-3 {
  width:31%;
  margin:0 0 1.5em 3.5%;
  float:left;
  display:inline;
  overflow:hidden;
  word-wrap:break-word;
  min-height:1px;
}

.sample-grid .custom-grid-3:first-child {margin-left:0}

@media (max-width:auto) {
  .sample-grid .custom-grid-3 {
    float:none;
    display:block;
    width:auto;
    margin:0 0 1.5em 0;
  }
}

<div class="sample-grid">
     <div class="custom-grid-3">
<p style="color: blue; font-weight: bold;">ARTIKEL 1</p>
     </div>
         <div class="custom-grid-3">
<p style="color: red; font-weight: bold;">ARTIKEL 2</p>
         </div>
             <div class="custom-grid-3">
<p style="color: green; font-weight: bold;">ARTIKEL 3</p>
             </div>
</div>

DEMO SHOW

PENJELASAN

1. Letakkan kode CSS diatas atau sebelum kode ]]></b:skin> pada template anda
2. Copy kode HTML pada postingan baru mode HTML (bukan Compose), lalu ganti teks Merah sesuai dengan judul artikel anda. Publikasikan dan lihat hasilnya

Jika ingin menerapkan langsung pada postingan tanpa edit Template, Copy semua kode CSS dan HTML diatas, lalu paste pada postingan anda mode HTML, namun jangan lupa tambahkan kode berikut  <style csstype.{[http://sahabatblogger77.blogspot.com]}>kode</style> 

CONTOH

<style csstype.{[http://sahabatblogger77.blogspot.com]}>
...
// letakkan CSS disini //
...
</style>
<div class="sample-grid">
     <div class="custom-grid-3">
..// Artikel disini //..
     </div>
</div>

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Membuat Artikel 3 Kolom Dalam 1 Halaman
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>

http://sahabatblogger77.blogspot.com/2014/03/membuat-artikel-3-kolom-dalam-1-halaman.html

= TERIMA KASIH =

Devy Indriyani

Join To Sahabat Blogger 77