Membuat Artikel 3 Kolom Dalam 1 Halaman

waroho
Gambar Artikel Dengan 3 Kolom

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..



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>




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>
Tags
Ads Section

#buttons=(Accept !) #days=(20)

Situs web kami menggunakan cookie untuk meningkatkan pengalaman Anda browsing disini. Learn More
Accept !