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>

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Membuat Artikel 3 Kolom Dalam 1 Halaman
Ditulis oleh= Devy Indriyani
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 >>
= TERIMA KASIH =

20 komentar

  1. Artikel yang bermanfaat,,,, makasih atas share nya

    BalasHapus
  2. bisa seperti koran ya mbk kalau begitu..

    BalasHapus
    Balasan
    1. buat sampingan mas,kalau mau dagang koran beneran malu ahh..hehe, lebih baik jual korannya lewat artikel aja, :)

      Hapus
  3. Memang selalu berkreasi mbak devy ini
    mau donk diajarin :D

    BalasHapus
    Balasan
    1. saya juga masih belajar kok mas, hanya sedikit tahu tentang IT, kali aja lewat ajang ini pengetahuan tentang IT lebih bisa mendalam lagi,bukan begitu mas..hehe

      Hapus
  4. sepertinya uda mahir scriping ni ,,,hehe,,
    liyat rumusnya mbulet mba,,,,,

    BalasHapus
    Balasan
    1. jika kita perhatikan segalanya memang mumet mas, tapi coba fokuskan pada angka yang jadi pilihan,jika ingin angka 3 fokus pada rumus nomor 3,jika 4 lihat rumus 4 dan seterusnya, sehingga dengan mudah kita menghitung jarak sumbunya

      Hapus
  5. Jadinya seperti blogazine ya..

    BalasHapus
    Balasan
    1. tepat sekali mas, preview blogazine selalu menggunakan cara termudah hitungan ini.hehe

      Hapus
  6. mantap nih mbak, jadi seperti blog profesional itu yaa
    saya bookmark dulu deh :))

    BalasHapus
    Balasan
    1. betul sekali bang, biasanya situs-situs yang sudah berkelas lebih memilih menghilangkan widget sidebarnya,dan menggantinya dengan menggunakan rumus diatas dengan membuat layout full screen pada halaman utama

      Hapus
  7. artikel yang bermanfaat... tapi saya kurang suka dengan artikel 3 kolom, bila artikel 3 kolom tu di pasang di blog saya mungkin nantinya jadi kurang menarik.

    BalasHapus
    Balasan
    1. semua tergantung pilihan mas, jika mas kurang menyukai tampilan artikel 3 kolom itu pilihan mas, karena cara ini banyak digunakan oleh web-web yang sudah profesional, salah satunya forum dari luar, coba perhatikan,pasti menggunakan tema seperti ini dalam templatenya

      Hapus
  8. kalo boleh tau itu gunanya buat apa yia bos, hehehe......

    BalasHapus
    Balasan
    1. rumus diatas biasanya banyak digunakan oleh webmaster untuk membuat ukuran nilai responsive suatu blog, atau cara ini banyak digunkanan untuk blog bertema blogazine, setahu saya sih begitu

      Hapus
  9. Menarik artikelnya Mbak Devy ijin coba untuk di pelajari
    Makasih sudah berbagi hal yang bermanfaat :)

    BalasHapus
    Balasan
    1. berbagi antar sesama blogger bang, karena saya juga baru mengenal blog, karena banyak para master yang berikan ilmu secara cuma-cuma,sedikit dipelajari dan hasilnya dibagikan kembali, bukan begitu bang.?hehe

      Hapus
  10. bagus juga ya kalau artikel modelnya berkolom2 kayak diatas.. mirip ketikan di majalah..
    trims

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK