Edit Kode HTML Kotak Baca Juga

Edit Kode Baca Juga Mastamvan | Modif Kode Baca Juga Mastamvan | Membuat artikel semakin menarik adalah salah satu faktor pendukung sebuah blog. Salah satu caranya adalah membuat kotak "Baca Juga" yang biasanya muncul di blog-blog keren.

Sesuai namanya, artikel kali ini merupakan cara edit kode kotak Baca Juga yang dibagikan oleh blogger Mas Tamvan. Untuk menunjukkan rasa terima kasih kepadanya, Anda bisa langsung kunjungi kode Baca Juga di sini.

Di artikel Mas Tamvan, dengan jelas memberikan langkah-langkah (total 3 cara) untuk menambahkan kotak Baca Juga atau postingan terkait yang diletakkan di tengah-tengah artikel atau postingan.

Sedangkan di sini, Madya akan membeberkan bagaimana cara edit kode nya atau apa saja fungsi dari kode tersebut karena barangkali ada kode yang kurang cocok dengan blog Anda. Madya sendiri juga mengubah atau mengotak-atik kode tersebut agar cocok atau sekedar eksperimen.

Metode yang Madya ambil dari blog Mas Tamvan adalah cara manual. Artinya Madya ingin menaruh kotak Baca Juga sesuai keinginan sendiri dan menempatkannya sesuka hati. Selain itu, cara manual juga direkomendasikan oleh Mas Tamvan.

Terdapat 2 kode yang dipaparkan dalam metode manual. Kode pertama adalah script atau kode CSS nya yang perlu dimasukkan di Tema Edit HTML. Sedangkan kode kedua adalah kode HTML yang dimasukkan di mode HTML Postingan (bukan Compose).

Kode yang menjadi lahan uji coba adalah kode script atau CSS. Untuk kode yang kedua menyesuaikan dengan yang pertama, kecuali untuk h4 nya. Untuk hasil kotak Baca Juga versi Madya bisa Anda lihat di bawah ini.

Baca Juga

• Kode HTML Hirearki atau Summary
• Cara Buat Cloud Label
• Pemula belajar HTML
• Kode Buat Kotak Lengkap versi 2
• Kode Buat Kotak Lengkap Versi 1

Nah, tanpa lama-lama mari kita bahas cara edit kode HTML (ingat di sini edit kode script atau CSS nya) kotak baca juga yang diberikan blogger bernama Mas Tamvan berikut ini:

.bacajuga{position:relative;display:inline-block;border:1px solid #DDD;margin:20px 0}

Kode di atas adalah kode yang mengatur mengenai kotak yang berisi tautan artikel terkait. Kalau bingung, perhatikan bahwa kotak baca juga ada 2 kotak : 1 kotak untuk tulisan baca juga (kotak kecil didalamnya ada tulisan "Baca juga") dan 1 kotak untuk judul dan tautan yang dimasukkan (kotak besar). Nah, kita bahas kotak yang besar.

Di baris pertama kode script nya, Anda bisa merubah beberapa hal. Kode baris pertama tersebut bisa Anda cari atau yang sama dengan kode script pada kotak di atas. Fungsinya atau yang bisa Anda ubah adalah

• Kode "border" adalah mengatur garis kotak nya. Tulisan "1px" merupakan tebal garisnya. Semakin besar angkanya maka semakin tebal garisnya, misal ubah menjadi 10px
• Kode "solid" adalah bentuk dari garisnya. Kata "solid" berarti garis utuh. Anda bisa merubah kata "solid" menjadi "double" (2 garis), "dotted" (garis titik-titik), dan "dashed" (garis putus-putus).
• Kode "#DDD" merupakan kode warna garis nya yang menggunakan tiga digit kode. Kode #"DDD" adalah warna abu-abu, Anda bisa mengubahnya sesuka hati misal kode "#0F1" (hijau muda).
• Kode "margin:" merupakan pengaturan jarak kotak dengan tulisan sebelum atau sesudahnya. Arti dari "20px 0" artinya jarak atas bawah sebesar 20 dan jarak kanan kiri sebesar 0 atau tidak ada.

Untuk baris pertama, hal di atas bisa Anda ubah sesuai selera. Selanjutnya masuk ke baris kedua yang berisikan kode seperti di bawah ini

.bacajuga h4{background-color:#FFF;position:absolute;margin-left:30px;margin-top:-14px;padding:0 15px;border:1px solid #DDD}

Kode di baris kedua ini mengatur kotak kecil atau kotak yang berisikan tulisan Baca Juga. Di sini yang kadang-kadang kurang pas atau tergantung pengaturan awal blognya. Untuk kode nya juga ada yang mirip dengan kode di baris pertama.

• Kode "h4" adalah heading 4 atau kode ukuran tulisan Baca Juga. Bisa diubah menjadi h5, h3, h2, tetapi Anda juga harus mengubah kode h4 yang ada di kode HMTL postingan. Jadi harus sama h4 di kode CSS dan di kode HTML Postingan
• Kode "#FFF" merupakan kode warna latar kotak nya. Kode #FFF berarti putih.
• Kode "margin-left" mengatur posisi kotak dengan jarak kiri. Anda bisa mengatur jarak kirinya sejajar dengan kotak tautan atau tidak.
• Kode "margin-top" mengatur posisi kotak dengan jarak atas nya. Mengapa ada minus 14? Agar kotak Baca Juga nya menempel atau menindih kotak tautan. Jika tidak ada minus maka kotak Baca Juga terleak jauh di atas kotak tautan
• Kode "padding" mengatur jarak tulisan dalam kotak dengan kotaknya
• Kode "border" sama dengan baris pertama yaitu mengatur ukuran dan warna garis

Kode baris ketiga berisi seperti kode yang mengatur posisi tulisan di dalam kotak besar atau kotak tautan. Kodenya seperti di bawah ini

.bacajuga ul{padding:11px 41px 0;list-style:none}

Di kode baris ketiga ini, yang dapat Anda ubah adalah kode "11px" dan "41px". Jangan ubah kode "0" karena akan membuat rusak kotak baca juga nya. Kode "11px" mengatur jarak tulisan dengan kotak pada bagian atas.

Sedangkan kode "41px" mengatur jarak bagian kanan kiri antara tulisan dengan garis kotaknya. Usahakan tidak kurang dari 20px karena bisa merubah komposisi kotak kecil nya juga.

Demikian uraian singkat mengenai edit kotak baca juga dari Mas Tamvan. Jika Anda menginginkan kode selanjutnya, Anda bisa tulis komentar dan akan dibuatkan artikel selanjutnya. Terima kasih.