kukuhcdh

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



Artikel Terkait:

9 Comments:

Muhammad Chandra | 14 October, 2010 18:43 | [Reply]

demo nya sudah saya liat , tapi kok gak ada pkai scrollnya sob ?

Kukuh Cakra D | 14 October, 2010 18:51 | [Reply]

@Muhammad Chandra yang di artikel lorem ipsum gan !

enda fiVers | 15 October, 2010 17:41 | [Reply]

Mantap nih,,supaya blog ga kepanjangan :)

Kisah Abu Nawas | 15 October, 2010 18:30 | [Reply]

thanks sob tutor scrollnya

Kukuh Cakra D | 15 October, 2010 19:07 | [Reply]

@enda fiVers
Iya gan!
@Kisah Abu Nawas
Sama sama

assyafieq | 17 October, 2010 14:17 | [Reply]

sy pernah membuat artikel terkait pakai scroll..tp ga jadi...gimana gan solusinya...

Kukuh Cakra D | 17 October, 2010 19:06 | [Reply]

@assyafieq maksudnya gajadi gan? mungkin ksalahan kakak dalam memasukkan kodenya ada yang salah..

Unknown | 27 October, 2010 14:24 | [Reply]

saya suka entry ini.tetapi bagau mana nak buat untuk semua pos ada didalam scroll?say dah mencuba nya,tetapi pos yang ke2 ,,ada didalam kotak yang lain?bagai mana nak bagi semua pos ada dalam kotak scroll itu?

Kukuh Cakra D | 29 October, 2010 20:28 | [Reply]

@NAZRUL AHMAD penempatannya di #main-wrapper mas

Post a Comment | Classic Comment's Form