Posted by Aak
Aak-share.com Updated at: 2:17:00 AM

Cara Membuat Halaman Grid Dengan CSS

No comments:
Cara Membuat Halaman Grid Dengan CSS ~ Grid atau Galery merupakan tampilan yang menyusun beberapa colums. Seperti yang sudah saya ulas sebelumnya membuat tampilan homepage static menjadi Grid kali ini pun sama masih mengulas tampilan Grid namun tidak pada homepage namun pada halaman postingan.



Untuk menciptakannya menggunakan properti CSS, maka dengan demikina Anda bisa dengan m,udah mengubah pada tampilan halaman. Anda penasaran, berikut ini selengkapnya :

Silahkan Anda buka Editor Template, kemusian Anda cari kode  ]]></b:skin> , kemudian Anda salin copy kode dibawah ini dan pastekan diatasnya.

 margin: 0;
  padding: 0;
}
aak{
  font-family: 'Oswald', sans-serif;
  background-color: rgb(225,236,231);
}
aak{
  line-height: 70px;
  background-color: rgb(26,32,44);
  color: rgb(225,236,231);
  padding: 0 70px;
}
h1{
  display: inline-block;
}
span{
  padding: 0 10px;
  font-size: .7em;
  color: rgb(130,130,130);
}
a{
  color: rgb(130,130,130);
  text-decoration: none;
  transition: all .3s;
}
a:hover{
  color: rgb(190,190,190);
}
section{
  padding: 40px;
}
.wrap{
  -webkit-columns: 300px;
     -moz-columns: 300px;
          columns: 300px;
  -webkit-column-gap: 40px;
     -moz-column-gap: 40px;
          column-gap: 40px;
}
h2{
  padding: 10px 30px;
  font-weight: normal;
  color: rgb(26,32,44);
}
h3{
  color: rgb(130,130,130);
  margin-bottom: .4em;
  font-weight: normal;
}
p+p{
  margin-top: .7em;
}
article{
  padding: 30px;
  background-color: rgb(255,255,255);
  -webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;
}
article+article{
  margin: 20px 0;
}

Selanjutnya pemasangan kode HTML, Anda menuju Entri baru lalu salin kode dibawah ini dan pasangakan pada Mode HTML.

<div class="aak">
<div class="wrap">
<article>
<h3>
Tuliskan Judul Artikel</h3>

Tuliskan isi Artikel didini

</article>
<article>
<h3>
Tuliskan Judul Artikel</h3>

Tuliskan isi Artikel didini

</article>
<article>
<h3>
Tuliskan Judul Artikel</h3>

Tuliskan isi Artikel didini

</article>
<article>
<h3>
Tuliskan Judul Artikel</h3>

Tuliskan isi Artikel didini

</article>
<article>
<h3>
Tuliskan Judul Artikel</h3>

Tuliskan isi Artikel didini

</article>
<article>
<h3>
Tuliskan Judul Artikel</h3>

Tuliskan isi Artikel didini

</article>
<article>
<h3>
Tuliskan Judul Artikel</h3>

Tuliskan isi Artikel didini

</article>
<article>
<h3>
Tuliskan Judul Artikel</h3>

Tuliskan isi Artikel didini

</article>
<article>
<h3>
Tuliskan Judul Artikel</h3>

Tuliskan isi Artikel didini

</article>
<article>
<h3>
Tuliskan Judul Artikel</h3>

Tuliskan isi Artikel didini

</article>
<article>
<h3>
Tuliskan Judul Artikel</h3>

Tuliskan isi Artikel didini

</article>
<article>
<h3>
Tuliskan Judul Artikel</h3>

Tuliskan isi Artikel didini

</article>
<article>
<h3>
Tuliskan Judul Artikel</h3>

Tuliskan isi Artikel didini

</article>
<article>
<h3>
Tuliskan Judul Artikel</h3>

Tuliskan isi Artikel didini

</article>
</div>
</div>


Semoga bermanfaat!

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments