Fungsi Scroll Pada Posting

Nah, saya terinspirasi dari sebuah blog yang kotak postnya terdapat fungsi scroll. Seperti yang kita ketahui, fungsi scroll sangat berguna untuk menghemat tempat. Jika anda masih bingung, silahkan lihat blog percobaan saya dengan membuka 1 post yang terbaru, dikarenakan post itu panjang. Lihat contoh

Penasaran untuk membuatnya? Cara yang terbilang cukup simple ini akan saya bagi kok, tenang aja, haha lol
Oke, Check This Out
1. Login ke blog anda --> Layouts --> Edit HTML
2. Cari kode .post-body { kemudian letakkan kode berikut

  overflow: auto;
  height : 500px;

3. Sesuaikan height (yang bewarna biru) dengan layouts anda, semisal yang ada pada blog percobaan saya.

.post-body {
  margin:0 0 .75em;
  line-height:1.6em;
  overflow: auto;
  height : 500px;
  }

4. Nah, bagimana? Namun, untuk membuat efek scroll beserta h3 (judul post), hanya terdapat perbedaan letak menaruh kode diatas.
Cari kode .post { masukkan kode seperti langkah 2
5. Sehingga menjadi kurang lebih seperti ini

.post {
  margin:.5em 0 1.5em;
  border-bottom:1px dotted $bordercolor;
  border-right: 1px solid $bordercolor;
  padding-bottom:1.5em;
  padding-right: 6px;
  overflow: auto;
  height : 500px;
  }

Next, Save Template!
Nah, bagaimana? Selamat mencoba.. Jangan lupa komentarnya...

Tweet

Artikel Terkait: