Script Membuat 3 kolom Artikel dalam 1 Halaman

ads here
Script Membuat 3 kolom Artikel dalam 1 Halaman - Pernahkah Anda membaca sebuah surat kabar seperti koran atau majalah.? nah... dalam satu judul artikel pada sebuah surat kabar bisa terdiri dari 6-10 kolom. Mengapa harus demikian ? Tentu bisa anda bayangkan akan bagaimana bosanya pembaca melihat dan membaca isi dari artikel tersebut jika isi artikelnya sangat panjang dan pada kolom yang besar.

Pada kesempatan kali ini Expert Blogger akan memperkenalkan atau memberikan sebuah tutorial bagaimana mengelola halaman blog  anda agar terdiri dari beberapa kolom artikel dalam satu halaman. khususnya bagi anda yang  punya layout / tampilan blog dengan lebar atau width yang besar. oh ya... Sebelumnya admin perkenalkan...ini adalah postingan pertama admin (azzahra) pada blog ini setelah menjadi pemilik penuh terhadap blog ini.

Script 3 Kolom Artikel dalam 1 halaman


Script Membuat 3 kolom Artikel dalam 1 halaman


Back to topic...Dalam membuat atau membagi sebuah halaman mebjadi beberapa bagian kolom, satu hal yag menjadi sasaran utama adalah bagaimana mengatur width atau lebar masing-masing kolom agar sesuai dengan besarnya width atau lebar dari halaman tersebut. Satu hal yang sangat mudah membagi dan mengatur lebar masing-masing kolom jika kita mengetahui berapa lebar halaman utama yang akan kita part. Akan tetapi masalahnya bagaimana jika kita menerapkanya pada page yang belum kita ketahui nilai widthnya atau lebih tepatnya agar script ini bisa dipakai di semua page.

LIVE DEMO

Untuk menentukan besaran pixel with dari kolom yang akan kita buat maka kita akan membutuhkan sebuah formula atau rumus matematika dibawah ini. coba lihta dan cermati.

grid @media

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

Apakah Anda memahami arti dari rumus diatas ?. intinya adalah untuk menentukan lebar tiap kolom yang akan kita buat maka rumus diatas adalah formula yang sangat penting...dimana formula ini juga digunakan oleh media-media besar dalam menentukan lebar pixel part kolom dalam page.

Untuk menerapkannya dalam sebuah blog maka rumus ini harus kita olah dalam bentuk CSS.  Dan dengan mengasumsikan bahwa Script yang akan kita buat ini bekerja pada semua lebar page maka kita menggunakan nilai value width adalah 100%. Sehinggan CSS Codenya menjadi seperti dibawah ini:


.sample-grid {
  width:100%;
  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;
  }
}

Dan untuk Menerapkanya dalam postingan anda maka gunakan kode bawah ini dalam postingan baru anda:

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

Text Artikrl anda
     </div>
         <div class="custom-grid-3">
<p style="color: red; font-weight: bold;">JUDUL ARTIKEL 2</p>

Text Artikrl anda

         </div>
             <div class="custom-grid-3">
<p style="color: green; font-weight: bold;">JUDUL ARTIKEL 3</p>

Text Artikrl anda

             </div>
</div>

PENJELASAN:
  1. 1. Letakkan Kode CSS diatas atau sebelum  ]]></b:skin> pada Template anda
  2. 2. Copy ode HTML diatas pada postingan baru anda (dalam mode HTML bukan compose mode), ganti tulisan warna merah diatas sesuai dengan judul artikel anda dan warna biru adalah text dalam postingan
Jika Anda ingin menerapkanya langsung pada postingan Anda tampa perlu edit HTML Template maka anda perlu menambahkan kode berikut   <style csstype.{[http://expertblogger.org]}>kode</style>  atau seperti kode dibawah ini:


<style csstype.{[http://expertblogger.org]}>
...
// letakkan CSS disini //
...
</style>

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

Text Artikrl anda
     </div>
         <div class="custom-grid-3">
<p style="color: red; font-weight: bold;">JUDUL ARTIKEL 2</p>

Text Artikrl anda

         </div>
             <div class="custom-grid-3">
<p style="color: green; font-weight: bold;">JUDUL ARTIKEL 3</p>

Text Artikrl anda


             </div>
</div>

Sekian tutorial sederhana yang Exper Blogger bagikan untuk anda. Semoga bermanfaat dan jangan lupa klik follow  my blog untuk mendapatkan Update artikel menarik berikutnya dari kami.

FOLLOW NOW