Setelah membuat beberapa e-book, jadi terpikir untuk membuat halaman untuk memajang cover dari e-book tersebut. Anggap saja seperti rak buku di rumah tetapi ini rak buku untuk e-book. Dengan bertanya pada ChatGPT, ternyata caranya tidak susah. Kebetulan juga komunitas Mamah Gajah Ngeblog meluncurkan e-book terbarunya. Jadi sekalian deh bikin rak buku untuk tulisan di Risna.info dan juga Mamah Gajah Ngeblog.
Seperti biasa, kodenya bisa digunakan untuk WordPress maupun Blogger. Bedanya ya cara menambahkannya saja. Hal yang perlu diingat kalau di blogger script CSS harus di antara tag <style> dan </style> dan dipanggil di bagian atas kode htmlnya dan ditambahkan di HTML view.
Untuk di wordpress kita bisa menambahkan semua kode CSS dan HTML di bagian HTML dari blok CustomHTML, atau bisa juga dipisahkan. Jika kita pisahkan CSS dan HTML nya, kode CSS tidak perlu diapit tag <style> dan </style>.
Untuk melihat hasil penambahan rak buku di blogspot bisa lihat di blogger.menulis.blog
Berikut ini contoh hasil penambahan di wordpress. Kalau diperhatikan, ada perbedaan antara rak buku Risna.info dan rak buku MGN. Kode utama CSS nya sama, tetapi ada sedikit penanganan khusus untuk membuat rak buku tampilan mobile di Risna.info memiliki bingkai kayu dan warna latar belakangnya berbeda.
Rak Buku Risna.info
Rak buku MGN
Contoh lemari dengan beberapa rak untuk e-book karya Mamah Gajah Ngeblog dengan HTML dan CSS.
E-book Terbaru 2026
Koleksi E-Book MGN
Kode yang digunakan
Berikut ini kode yang digunakan. Saya sudah berusaha menambahkan keterangan untuk setiap kodenya, tetapi saya akan jelaskan bagian yang perlu diganti jika ada yang ingin menggunakannya. Kode ini hasil bertanya pada chatgpt dan dirapikan juga menggunakan chatgpt.
Begini kode script untuk rak bukunya.
<style>
/* =========================
LEMARI UTAMA
========================= */
.ebook-lemari {
width: 100%;
/* UBAH LEBAR MAKSIMUM LEMARI DI DESKTOP DI SINI */
/* Semakin besar angkanya, lemari makin lebar */
max-width: 900px;
margin: 24px auto;
padding: 25px;
box-sizing: border-box;
/* UBAH WARNA BACKGROUND LEMARI DI SINI */
/* Bisa diganti dengan background-color biasa atau linear-gradient */
background:
linear-gradient(
180deg,
#fffafa 0%,
#f9f1f0 50%,
#efd8d5 100%
);
border-radius: 14px;
overflow: hidden;
box-shadow:
inset 0 0 24px rgba(139, 92, 43, 0.08),
0 14px 26px rgba(139, 92, 43, 0.14);
}
/* =========================
SECTION RAK
========================= */
.ebook-rak-section {
position: relative;
width: 100%;
/* UBAH LEBAR RAK BUKU DI SINI */
/* Semakin besar max-width, rak semakin panjang */
max-width: 700px;
/* Supaya di desktop rak tidak terlalu pendek */
min-width: 600px;
margin: 0 auto 42px;
/* UBAH JARAK ISI RAK DI SINI */
/* Angka terakhir 70px menentukan ruang bawah untuk papan rak */
padding: 18px 32px 70px;
box-sizing: border-box;
}
@media (max-width: 700px) {
.ebook-rak-section {
min-width: 0;
}
}
.ebook-rak-section:last-child {
margin-bottom: 0;
}
/* judul section, misalnya: Buku Terbaru */
.ebook-rak-title {
position: relative;
z-index: 3;
margin: 0 0 24px;
text-align: center;
font-size: 30px !important;
line-height: 1.3;
font-weight: 700;
color: #345c00;
}
/* tempat buku */
.ebook-rak {
position: relative;
z-index: 2;
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-end;
/* UBAH JARAK ANTARBUKU DI SINI */
gap: 24px;
flex-wrap: nowrap;
width: 100%;
margin: 0 auto;
}
/* papan rak desktop */
.ebook-rak-section::after {
content: "";
position: absolute;
/* UBAH PANJANG RAK BUKU DESKTOP DI SINI */
/* Semakin kecil left/right, rak makin panjang */
/* Semakin besar left/right, rak makin pendek */
left: 42px;
right: 42px;
bottom: 24px;
/* UBAH TEBAL / TIPIS RAK BUKU DESKTOP DI SINI */
/* Semakin besar height, rak semakin tebal */
height: 34px;
/* UBAH WARNA KAYU RAK DI SINI */
background:
linear-gradient(
90deg,
rgba(255, 255, 255, 0.06) 0%,
rgba(255, 255, 255, 0.02) 35%,
rgba(0, 0, 0, 0.05) 65%,
rgba(0, 0, 0, 0.08) 100%
),
linear-gradient(
180deg,
#b9783e 0%,
#8a5128 45%,
#6b3b1d 100%
);
border-radius: 6px;
box-shadow:
inset 0 4px 5px rgba(255, 255, 255, 0.12),
inset 0 -4px 6px rgba(0, 0, 0, 0.22),
0 9px 15px rgba(0, 0, 0, 0.26);
z-index: 1;
}
/* =========================
BUKU DESKTOP
========================= */
.ebook-buku {
position: relative;
z-index: 2;
display: block;
/* UBAH UKURAN BUKU DESKTOP DI SINI */
/* width = lebar buku */
/* height = tinggi buku */
width: 150px;
height: 225px;
/* Samakan angka flex dengan width buku */
flex: 0 0 150px;
text-decoration: none;
color: inherit;
transform: perspective(700px) rotateY(-8deg) translateY(15px);
transition:
transform 0.25s ease,
box-shadow 0.25s ease;
}
.ebook-buku img {
/* UBAH UKURAN GAMBAR COVER DESKTOP DI SINI */
/* Samakan dengan ukuran .ebook-buku */
width: 150px;
height: 225px;
object-fit: cover;
display: block;
border-radius: 4px 8px 8px 4px;
box-shadow:
8px 10px 18px rgba(0, 0, 0, 0.28),
inset -8px 0 10px rgba(0, 0, 0, 0.15);
}
/* efek punggung buku */
.ebook-buku::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 18px;
height: 100%;
background:
linear-gradient(
to right,
rgba(0, 0, 0, 0.28),
rgba(255, 255, 255, 0.08)
);
border-radius: 4px 0 0 4px;
pointer-events: none;
z-index: 4;
}
/* hover buku desktop */
.ebook-buku:hover {
transform: perspective(700px) rotateY(0deg) translateY(-8px);
}
.ebook-buku:hover img {
box-shadow:
12px 16px 24px rgba(0, 0, 0, 0.35),
inset -8px 0 10px rgba(0, 0, 0, 0.15);
}
/* =========================
JUDUL BUKU DESKTOP
========================= */
.ebook-judul {
position: absolute;
left: 50%;
bottom: -58px;
z-index: 5;
width: 210px;
max-width: 230px;
min-height: 28px;
padding: 3px 8px;
box-sizing: border-box;
transform: translateX(-50%);
opacity: 0;
visibility: hidden;
font-size: 13px;
line-height: 1.15;
font-weight: 700;
text-align: center;
color: #fffdf5;
background: transparent;
border: none;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
white-space: normal;
overflow: hidden;
overflow-wrap: break-word;
word-break: normal;
hyphens: auto;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
transition:
opacity 0.22s ease,
visibility 0.22s ease,
transform 0.22s ease;
pointer-events: none;
}
.ebook-buku:hover .ebook-judul {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(-2px);
}
/* =========================
MOBILE
========================= */
@media (max-width: 700px) {
.ebook-lemari {
position: relative;
width: calc(100% - 24px);
/* UBAH LEBAR LEMARI MOBILE DI SINI */
max-width: 260px;
margin: 12px auto;
padding: 14px 12px 18px;
box-sizing: border-box;
/* UBAH WARNA BACKGROUND LEMARI MOBILE DI SINI */
background:
linear-gradient(
180deg,
#fffafa 0%,
#fdf5f4 45%,
#f9f1f0 100%
);
/* BINGKAI LEMARI LUAR MOBILE */
/* border: 0px berarti tidak ada bingkai */
/* Kalau ingin bingkai, ubah menjadi misalnya: 8px solid #8a5128 */
border: 0px solid #8a5128;
border-radius: 12px;
overflow: visible;
box-shadow:
inset 0 0 20px rgba(120, 90, 20, 0.14),
0 12px 22px rgba(0, 0, 0, 0.18);
}
.ebook-lemari::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
90deg,
rgba(255,255,255,0.22),
transparent 35%,
rgba(120, 90, 20, 0.08)
);
pointer-events: none;
z-index: 1;
}
.ebook-rak-section {
width: 100%;
/* UBAH LEBAR RAK MOBILE DI SINI */
max-width: 235px;
padding: 8px 0 18px;
margin: 0 auto 22px;
}
.ebook-rak-section:last-child {
margin-bottom: 0;
}
.ebook-rak-title {
margin: 0 0 16px;
font-size: 23px !important;
line-height: 1.25;
font-weight: 700;
color: #345c00;
}
.ebook-rak {
width: 100%;
flex-direction: column;
align-items: center;
justify-content: flex-start;
/* UBAH JARAK ANTARBUKU DI MOBILE DI SINI */
gap: 42px;
}
/* matikan rak panjang desktop */
.ebook-rak-section::after {
display: none;
}
.ebook-buku {
position: relative;
z-index: 2;
width: 100%;
/* UBAH TINGGI AREA BUKU MOBILE DI SINI */
height: 260px;
flex: none;
display: flex;
justify-content: center;
align-items: flex-start;
padding-bottom: 42px;
box-sizing: border-box;
transform: none;
}
/* rak per buku mobile */
.ebook-buku::after {
content: "";
position: absolute;
/* UBAH PANJANG RAK MOBILE DI SINI */
/* Semakin kecil left/right, rak makin panjang */
left: 12px;
right: 12px;
bottom: 0;
/* UBAH TEBAL / TIPIS RAK MOBILE DI SINI */
height: 36px;
/* UBAH WARNA KAYU RAK MOBILE DI SINI */
background:
linear-gradient(
90deg,
rgba(255, 255, 255, 0.05) 0%,
rgba(255, 255, 255, 0.01) 40%,
rgba(0, 0, 0, 0.05) 70%,
rgba(0, 0, 0, 0.08) 100%
),
linear-gradient(
180deg,
#b9783e 0%,
#8a5128 45%,
#6b3b1d 100%
);
border-radius: 5px;
box-shadow:
inset 0 4px 5px rgba(255, 255, 255, 0.12),
inset 0 -4px 6px rgba(0, 0, 0, 0.22),
0 7px 10px rgba(0, 0, 0, 0.25);
z-index: 1;
}
.ebook-buku img {
position: relative;
z-index: 3;
/* UBAH UKURAN BUKU MOBILE DI SINI */
width: 145px;
height: 218px;
object-fit: cover;
display: block;
border-radius: 4px 8px 8px 4px;
box-shadow:
7px 9px 15px rgba(0, 0, 0, 0.28),
inset -8px 0 10px rgba(0, 0, 0, 0.15);
transform: perspective(700px) rotateY(-6deg);
transform-origin: left center;
transition:
transform 0.25s ease,
box-shadow 0.25s ease;
}
.ebook-buku::before {
top: 0;
/* Sesuaikan jika ukuran buku mobile berubah */
/* Rumusnya: 50% - setengah lebar buku */
/* Karena lebar buku 145px, setengahnya 72.5px */
left: calc(50% - 72.5px);
width: 15px;
/* Samakan dengan tinggi buku mobile */
height: 218px;
z-index: 4;
transform: perspective(700px) rotateY(-6deg);
transform-origin: left center;
}
/* judul mobile langsung terlihat di rak */
.ebook-judul {
position: absolute;
left: 50%;
bottom: 2px;
z-index: 6;
width: calc(100% - 22px);
max-width: 205px;
min-height: 28px;
padding: 2px 7px;
box-sizing: border-box;
transform: translateX(-50%);
opacity: 1;
visibility: visible;
font-size: 12px;
line-height: 1.16;
font-weight: 700;
text-align: center;
color: #fffdf5;
background: transparent;
border: none;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
white-space: normal;
overflow: hidden;
overflow-wrap: break-word;
word-break: normal;
hyphens: auto;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
pointer-events: none;
}
.ebook-buku:hover {
transform: none;
}
.ebook-buku:hover img {
transform: perspective(700px) rotateY(0deg) translateY(-6px);
box-shadow:
10px 13px 20px rgba(0, 0, 0, 0.35),
inset -8px 0 10px rgba(0, 0, 0, 0.15);
}
.ebook-buku:hover::before {
transform: perspective(700px) rotateY(0deg) translateY(-6px);
}
/* KHUSUS RISNA.INFO: PAKAI KOTAK KAYU DI MOBILE */
.ebook-lemari.ebook-lemari-risna {
/* UBAH KETEBALAN BINGKAI LEMARI LUAR DI SINI */
/* 8px = tebal bingkai */
/* solid = jenis garis */
/* #8a5128 = warna bingkai */
border: 8px solid #8a5128;
border-radius: 12px;
overflow: visible;
box-shadow:
inset 0 0 20px rgba(120, 90, 20, 0.14),
0 12px 22px rgba(0, 0, 0, 0.18);
}
}
/* Variasi warna background untuk rak risna.info */
.ebook-lemari.ebook-lemari-risna {
/* UBAH WARNA BACKGROUND KHUSUS RISNA.INFO DI SINI */
background:
linear-gradient(
180deg,
#fffdf5 0%,
#fff7d6 48%,
#f7e7a6 100%
);
}
</style>
Contoh html untuk menambah rak buku Risna.info
<div class="ebook-lemari ebook-lemari-risna">
<div class="ebook-rak-section">
<h2 class="ebook-rak-title">Koleksi E-book</h2>
<div class="ebook-rak">
<a class="ebook-buku" href="https://risna.info/e-book-cerita-dari-chiang-mai-2021/" rel="noopener" target="_blank">
<img alt="Cerita dari Chiang mai" src="https://risna.info/wp-content/uploads/2026/06/cover-skripsi-2021.png" />
<span class="ebook-judul">Cerita dari Chiang mai</span>
</a>
<a class="ebook-buku" href="https://risna.info/e-book-catatan-membaca-buku-di-2022/" rel="noopener" target="_blank">
<img alt="Catatan Membaca 2022" src="https://risna.info/wp-content/uploads/2026/06/cover-Skripsi-Risna-2022.jpg" />
<span class="ebook-judul">Catatan Membaca 2022</span>
</a>
<a class="ebook-buku" href="https://risna.info/e-book-jauh-berjalan-banyak-dilihat-di-2024/" rel="noopener" target="_blank">
<img alt="Jauh Berjalan Banyak Dilihat" src="https://risna.info/wp-content/uploads/2026/06/cover-skripsi-2024.png" />
<span class="ebook-judul">Jauh Berjalan Banyak Dilihat</span>
</a>
</div>
</div>
</div>
Contoh html menambah rak buku MGN
<div class="ebook-lemari">
<section class="ebook-rak-section ebook-rak-atas">
<h2 class="ebook-rak-title">E-book Terbaru 2026</h2>
<div class="ebook-rak">
<a class="ebook-buku" href="https://mamahgajahngeblog.com/e-book-mgn/e-book-fesyen/" target="_blank">
<img alt="Fesyen" src="https://mamahgajahngeblog.com/wp-content/uploads/2026/06/cover-ebook-fesyen.jpeg" />
<span class="ebook-judul">Fesyen</span>
</a>
</div>
</section>
<section class="ebook-rak-section ebook-rak-bawah">
<h2 class="ebook-rak-title">Koleksi E-Book MGN</h2>
<div class="ebook-rak">
<a class="ebook-buku" href="https://mamahgajahngeblog.com/e-book-mgn/e-book-cerita-kuliner/" target="_blank">
<img alt="Cerita Kuliner: Jelajah Rasa ala MGN" src="https://mamahgajahngeblog.com/wp-content/uploads/2025/09/cover-ebook-cerita-kuliner.jpg" />
<span class="ebook-judul">Cerita Kuliner: Jelajah Rasa ala MGN</span>
</a>
<a class="ebook-buku" href="https://mamahgajahngeblog.com/e-book-mgn/e-book-bumi/" target="_blank">
<img alt="Bumi: 18 Cerita dan Harapan Planet Biru" src="https://mamahgajahngeblog.com/wp-content/uploads/2025/04/cover-e-book-bumi.jpg" />
<span class="ebook-judul">Bumi: 18 Cerita dan Harapan Planet Biru</span>
</a>
</div>
</section>
<section class="ebook-rak-section ebook-rak-bawah">
<div class="ebook-rak">
<a class="ebook-buku" href="https://mamahgajahngeblog.com/e-book-mgn/e-book-landmark-kota-yang-pernah-ingin-dikunjungi/" target="_blank">
<img alt="Landmark Kota yang Pernah/Ingin Dikunjungi" src="https://mamahgajahngeblog.com/wp-content/uploads/2024/06/ebook-cover-landmark.webp" />
<span class="ebook-judul">Landmark Kota yang Pernah/Ingin Dikunjungi</span>
</a>
<a class="ebook-buku" href="https://mamahgajahngeblog.com/e-book-mgn/ebook-life-hack/" target="_blank">
<img alt="Lifehack yang Mempermudah Hidup" src="https://mamahgajahngeblog.com/wp-content/uploads/2024/03/cover-ebook-lifehack.jpg" />
<span class="ebook-judul">Lifehack yang Mempermudah Hidup</span>
</a>
<a class="ebook-buku" href="https://mamahgajahngeblog.com/e-book-mgn/e-book-fiksi-itb/" target="_blank">
<img alt="Ilusi di Balik Ganesha 10" src="https://mamahgajahngeblog.com/wp-content/uploads/2022/11/cover-mgn.png" />
<span class="ebook-judul">Ilusi di Balik Ganesha 10</span>
</a>
</div>
</section>
</div>
Cara menggunakan kode ini
Berikut ini cara menggunakan kode rak buku (bagian ini dibuat dengan chatgpt)
Cara Menggunakan Kode Rak Buku E-book untuk Website Lain
Kode rak buku e-book ini bisa digunakan untuk menampilkan beberapa cover e-book dalam bentuk rak buku. Setiap cover e-book bisa diklik dan akan membuka halaman e-book yang dituju di tab baru.
Kode ini terdiri dari dua bagian utama, yaitu CSS dan HTML.
CSS digunakan untuk mengatur tampilan rak buku, seperti warna background, ukuran buku, tebal rak, lebar rak, dan tampilan di desktop maupun mobile.
HTML digunakan untuk mengatur isi rak buku, seperti link halaman e-book, gambar cover e-book, dan judul e-book.
Jika ingin menggunakan kode ini untuk e-book dari website lain, bagian yang paling penting untuk diganti adalah bagian HTML-nya.
Bagian yang Perlu Diganti
Untuk setiap e-book, kode HTML-nya berbentuk seperti ini:
<a class="ebook-buku" href="LINK_HALAMAN_EBOOK" rel="noopener" target="_blank"> <img alt="JUDUL_EBOOK" src="LINK_GAMBAR_COVER_EBOOK" /> <span class="ebook-judul">JUDUL_EBOOK</span> </a>
Ada tiga bagian utama yang perlu diganti.
1. Ganti Link Halaman E-book
Bagian ini digunakan untuk menentukan halaman yang akan dibuka saat cover e-book diklik.
href="LINK_HALAMAN_EBOOK"
Ganti LINK_HALAMAN_EBOOK dengan alamat halaman e-book yang ingin dituju.
Contoh:
href="https://contohwebsite.com/e-book-pertama/"
Dengan begitu, saat pembaca mengklik cover e-book, mereka akan diarahkan ke halaman tersebut.
2. Ganti Link Gambar Cover E-book
Bagian ini digunakan untuk menampilkan gambar cover e-book.
src="LINK_GAMBAR_COVER_EBOOK"
Ganti LINK_GAMBAR_COVER_EBOOK dengan alamat gambar cover e-book.
Contoh:
src="https://contohwebsite.com/wp-content/uploads/cover-ebook.jpg"
Pastikan link gambar yang digunakan adalah link langsung menuju file gambar, misalnya berakhiran .jpg, .png, .jpeg, atau .webp.
3. Ganti Judul E-book
Judul e-book perlu diganti di dua bagian.
Bagian pertama ada di atribut alt pada gambar:
alt="JUDUL_EBOOK"
Bagian kedua ada di dalam tag <span>:
<span class="ebook-judul">JUDUL_EBOOK</span>
Contoh:
<img alt="Cerita Perjalanan di Chiang Mai" src="https://contohwebsite.com/wp-content/uploads/cover-ebook.jpg" /> <span class="ebook-judul">Cerita Perjalanan di Chiang Mai</span>
Atribut alt berguna untuk membantu mesin pencari dan pembaca layar memahami isi gambar. Sementara teks di dalam <span class="ebook-judul"> akan menjadi judul yang tampil di rak buku.
Pada tampilan desktop, judul biasanya muncul ketika cover e-book disentuh oleh mouse. Pada tampilan mobile, judul bisa langsung tampil di bagian rak.
Cara Menambahkan Buku Baru
Jika ingin menambahkan e-book baru, cukup salin kode berikut:
<a class="ebook-buku" href="LINK_HALAMAN_EBOOK" rel="noopener" target="_blank"> <img alt="JUDUL_EBOOK" src="LINK_GAMBAR_COVER_EBOOK" /> <span class="ebook-judul">JUDUL_EBOOK</span> </a>
Lalu tempelkan di dalam bagian:
<div class="ebook-rak"> ... </div>
Contohnya:
<div class="ebook-rak">
<a class="ebook-buku" href="https://contohwebsite.com/e-book-pertama/" rel="noopener" target="_blank">
<img alt="E-book Pertama" src="https://contohwebsite.com/wp-content/uploads/cover-ebook-pertama.jpg" />
<span class="ebook-judul">E-book Pertama</span>
</a>
<a class="ebook-buku" href="https://contohwebsite.com/e-book-kedua/" rel="noopener" target="_blank">
<img alt="E-book Kedua" src="https://contohwebsite.com/wp-content/uploads/cover-ebook-kedua.jpg" />
<span class="ebook-judul">E-book Kedua</span>
</a>
</div>
Cara Membuat Rak Baru
Jika ingin membuat rak baru, misalnya untuk memisahkan e-book terbaru dan koleksi lama, salin kode berikut:
<section class="ebook-rak-section">
<h2 class="ebook-rak-title">Judul Rak</h2>
<div class="ebook-rak">
<!-- Letakkan kode buku di sini -->
</div>
</section>
Ganti bagian Judul Rak sesuai kebutuhan.
Contoh:
<section class="ebook-rak-section">
<h2 class="ebook-rak-title">E-book Terbaru</h2>
<div class="ebook-rak">
<a class="ebook-buku" href="https://contohwebsite.com/e-book-baru/" rel="noopener" target="_blank">
<img alt="E-book Baru" src="https://contohwebsite.com/wp-content/uploads/cover-ebook-baru.jpg" />
<span class="ebook-judul">E-book Baru</span>
</a>
</div>
</section>
Jika ingin memiliki beberapa rak, cukup ulangi bagian <section class="ebook-rak-section"> sesuai jumlah rak yang dibutuhkan.
Bagian CSS yang Bisa Disesuaikan
Sebagian besar perubahan untuk isi e-book dilakukan di HTML. Namun, jika ingin mengubah tampilan rak buku, bagian yang diubah ada di CSS.
Beberapa bagian yang bisa disesuaikan antara lain:
- lebar lemari buku,
- lebar rak buku,
- tebal atau tipis papan rak,
- ukuran cover buku,
- warna background,
- warna kayu rak,
- bingkai luar lemari,
- jarak antar buku,
- tampilan mobile.
Di dalam kode CSS sudah diberikan keterangan komentar, sehingga bagian yang perlu diubah lebih mudah ditemukan.
Contohnya:
/* UBAH LEBAR RAK BUKU DI SINI */ max-width: 700px;
Jika ingin rak lebih panjang, angka 700px bisa diperbesar. Jika ingin rak lebih pendek, angka tersebut bisa diperkecil.
Contoh lain:
/* UBAH TEBAL / TIPIS RAK BUKU DESKTOP DI SINI */ height: 34px;
Jika ingin rak lebih tebal, angka 34px bisa diperbesar. Jika ingin rak lebih tipis, angka tersebut bisa diperkecil.
Tips Menggunakan Kode Ini
Agar tampilan rak buku tetap rapi, sebaiknya gunakan cover e-book dengan ukuran yang mirip. Misalnya semua cover berbentuk vertikal seperti sampul buku.
Jika ukuran cover berbeda-beda, CSS tetap akan membantu menyamakan tampilannya karena gambar menggunakan pengaturan:
object-fit: cover;
Artinya, gambar akan dipotong secara proporsional agar ukurannya tetap seragam.
Jika bagian gambar tidak ingin terpotong, bisa mengganti object-fit: cover; menjadi:
object-fit: contain;
Namun, jika menggunakan contain, kemungkinan akan muncul ruang kosong di sekitar gambar jika ukuran cover tidak seragam.
Kesimpulan
Untuk menggunakan kode rak buku e-book ini di website lain, cukup lakukan tiga hal utama:
- Ganti link halaman e-book pada bagian
href. - Ganti link gambar cover e-book pada bagian
src. - Ganti judul e-book pada bagian
altdan<span class="ebook-judul">.
CSS tidak perlu diubah jika hanya ingin mengganti isi e-book. CSS baru perlu diubah jika ingin menyesuaikan tampilan, seperti ukuran buku, panjang rak, warna background, atau bingkai lemari.
Dengan cara ini, kode rak buku e-book bisa dipakai ulang untuk berbagai website, baik untuk koleksi e-book pribadi, komunitas, maupun blog lainnya.
Catatan tambahan
Sekilas tulisan ini terasa jadi panjang sekali, tetapi kalau ingin mencoba langsung saja disalin kodenya dan ubah dimulai dengan 1 buku dulu sebelum ditambahkan buku berikut ataupun lebih dari 1 rak buku.
Kalau ada perubahan lain yang ingin dilakukan, cara tercepat adalah coba salin kode stylenya dan htmlnya lalu tanyakan pada ChatGPT saja ya.