Cara Menciptakan Kotak Scrollbar Shadow Di Blog

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

Demo

Menciptakan kotak tersebut memakai properti CSS, tentunya tidak menciptakan 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> , lalu Anda salin isyarat 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, lalu salin isyarat dibawah ini dan terapkan pada Mode HTML

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

Silahkan Anda masukkan teks, gambar atau isyarat disini

</div>

6. Publikasikan

Mudah bukan biar bermanfaat!

Share this post