Cara Membuat Kotak Scrollbar Shadow di Blog

Kotak Scrollbar memiliki Banyak sekali manfaat, salah satunya membuat tampilan postingan yang panjang menjadi rapih. Pada kotak scroll, yang akan saya share kali ini memiliki fungsi yang sama hanya saja berbeda pada tampilan karena dilengkapi fitur shadow atau bayangan dibagian atas dan layar ketika kotak tersebut di gulung baik itu keatas atau kebawah.

Demo

Menciptakan kotak tersebut menggunakan properti CSS, tentunya tidak membuat loading Blog mejadi berat. Bagi Anda yang ingin memasang di Blog berikut ini panduannya :

1. Login keakun Blogger
2. Pilih Template >> klik Edit HTML
3. Lalu Anda cari kode ]]></b:skin> , kemudian Anda salin kode dibawah ini dan pasangkan diatasnya.

.scroll-wrapper {
  overflow: auto;
  width: 400px;
  max-height: 200px;
  /* the magic */
  background: linear-gradient(#ffffff 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), #ffffff 70%) 0 100%, radial-gradient(50% 0, farthest-side, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)), radial-gradient(50% 100%, farthest-side, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)) 0 100%;
  background: linear-gradient(#ffffff 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), #ffffff 70%) 0 100%, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)) 0 100%;
  background-repeat: no-repeat;
  background-color: #ffffff;
  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
  background-attachment: local, local, scroll, scroll;
}
  height: 100%;
  font-family: 'Slabo 27px', serif;
  background-color: #BDC3C7;
  color: #7F8C8D;
  overflow: hidden;
}
h1 {
  font-size: 2em;
  text-align: center;
}
h2 {
  font-size: 1.4em;
  text-align: center;
}
.styles {
  margin: 1em auto;
  padding: 1em;
  border-radius: 6px;
}

4. Simpan Template
5. Selanjutnya Anda menuju Entri baru, kemudian salin kode dibawah ini dan terapkan pada Mode HTML

<div class="scroll-wrapper styles">
 <h2>
Tuliskan Judul Atikel</h2>

Silahkan Anda masukkan teks, gambar atau kode disini

</div>

6. Publikasikan

Mudah bukan semoga bermanfaat!

Share this post