Musafir Blogspot: Catatan tersembunyi

Menata Website agar Rapi dan Menarik

1. Tentukan Tujuan Website
Apakah untuk portofolio, blog, jasa, dokumentasi, atau toko?
Tujuan akan menentukan struktur halaman, warna, dan jenis konten.
2. Susun Struktur Halaman
Gunakan urutan yang jelas:

Beranda,
Tentang,
Layanan,
Artikel/Blog,
Kontak.
Tambahkan navigasi atas (menu) yang simpel dan mudah diklik.

3. Pilih Warna dan Font yang Serasi

Gunakan kombinasi warna utama (1–2 warna) + warna netral (abu, putih, hitam).
Pilih font modern (contoh: Roboto, Open Sans, Poppins) dan jangan terlalu banyak variasi.
Pastikan kontras teks & latar cukup tinggi agar mudah dibaca.

4. Gunakan Gambar & Ikon Ringan

Optimalkan gambar (kompres tanpa mengurangi kualitas).
Gunakan ukuran yang responsif:
Gunakan width: 100% atau class .responsive-img agar gambar menyesuaikan perangkat.
Sisipkan ikon dari Google Material Icons atau FontAwesome jika perlu.

5. Komponen Interaktif

Gunakan tombol, dropdown, atau kontainer catatan seperti yang sudah kita buat 💌
Tambahkan audio/video player ringan bila ingin menyapa pengunjung dengan suara atau musik.

6. Responsif untuk Seluler

Pastikan semua elemen fleksibel (pakai % bukan px tetap).
Gunakan media query CSS untuk menyesuaikan layout di perangkat kecil:css

@media (max-width: 768px) { .elemen { width: 100%; font-size: 16px; } }

7. Optimalkan Kecepatan

Kurangi script yang tidak penting.
Letakkan CSS di <head> dan JS di akhir <body>.
Hindari pemanggilan eksternal yang berat kecuali sangat dibutuhkan.

8. Keamanan Dasar

Gunakan HTTPS.
Jangan tampilkan informasi sensitif.
Hindari formulir kontak terbuka tanpa perlindungan spam.

Daftar catatan

Catatan 2

<p>Catatan tersembunyi Type 2</p>

<span style="color: white; font-family: Caveat; font-size: xxx-large;">Daftar catatan:</span>

<button onclick="toggleJudul('pesan1', this)" style="margin-bottom: 5px;">📜 Catatan 1</button>
<button onclick="toggleJudul('pesan2', this)" style="margin-bottom: 5px;">📜 Catatan 2</button>
<button onclick="toggleJudul('pesan3', this)" style="margin-bottom: 5px;">📜 Catatan 3</button>
<button onclick="toggleJudul('pesan4', this)" style="margin-bottom: 5px;">📜 Catatan 4</button>

<button onclick="toggleJudul('pesan5', this)" style="margin-bottom: 5px;">📜 Catatan 5</button>

<br />

<p><audio controls style="border-radius: 30px; border: 2px solid gray; height: 20px; margin-top: 5px; width: 100%;">
<source src="https://www.dropbox.com/scl/fi/yaq5s0b4vmupobxu9ks8w/Putri-Ariani-Perfect-Liar.mp3?rlkey=dd750vugl92tlgbtf0sz5pkjo&st=d6g8bxe4&raw=1" type="audio/mpeg" />
Browser kamu tidak mendukung pemutar audio.
</audio></p><br />

<div hidden id="pesan1" contenteditable="true" style="background:#fff; border:1px solid #ccc; border-radius:6px; padding:10px; margin:10px 0; position:relative;"><p>Catatan 1<p>
<button onclick="copyPesan(this)" style="position:absolute; top:5px; right:5px; background:Gainsboro; color:gray; border:none; padding:4px 10px; border-radius:5px; cursor:pointer;">Copy</button></div>

<div hidden id="pesan2" contenteditable="true" style="background:#fff; border:1px solid #ccc; border-radius:6px; padding:10px; margin:10px 0; position:relative;"><p>Catatan 2</p>
<button onclick="copyPesan(this)" style="position:absolute; top:5px; right:5px; background:Gainsboro; color:gray; border:none; padding:4px 10px; border-radius:5px; cursor:pointer;">Copy</button></div>

<div hidden id="pesan3" contenteditable="true" style="background:#fff; border:1px solid #ccc; border-radius:6px; padding:10px; margin:10px 0; position:relative;"><p>Catatan 3</p>
<button onclick="copyPesan(this)" style="position:absolute; top:5px; right:5px; background:Gainsboro; color:gray; border:none; padding:4px 10px; border-radius:5px; cursor:pointer;">Copy</button></div>

<div hidden id="pesan4" contenteditable="true" style="background:#fff; border:1px solid #ccc; border-radius:6px; padding:10px; margin:10px 0; position:relative;"><p>Catatan 4</p>
<button onclick="copyPesan(this)" style="position:absolute; top:5px; right:5px; background:Gainsboro; color:gray; border:none; padding:4px 10px; border-radius:5px; cursor:pointer;">Copy</button></div>

<div hidden id="pesan5" contenteditable="true" style="background:#fff; border:1px solid #ccc; border-radius:6px; padding:10px; margin:10px 0; position:relative;"><p>Catatan 5</p>
<button onclick="copyPesan(this)" style="position:absolute; top:5px; right:5px; background:Gainsboro; color:gray; border:none; padding:4px 10px; border-radius:5px; cursor:pointer;">Copy</button></div>

function toggleJudul(id, tombolAktif) {

const semuaKontainer = document.querySelectorAll('div[contenteditable]');

const semuaTombol = document.querySelectorAll('button[onclick^="toggleJudul"]');

const kontainerKlik = document.getElementById(id);

const sedangTerbuka = !kontainerKlik.hidden;

semuaKontainer.forEach(div => div.hidden = true);

semuaTombol.forEach((btn, index) => {

btn.innerText = `📜 Catatan ${index + 1}`;});

if (!sedangTerbuka) { kontainerKlik.hidden = false;

tombolAktif.innerText = "🔴 Tutup";} else {

tombolAktif.innerText = `📜 Catatan ${[...semuaTombol].indexOf(tombolAktif) + 1}`;}}

function copyPesan(tombol) {

const kontainer = tombol.closest('div[contenteditable]');

const isi = kontainer.innerText.replace('Copy', '').trim();

navigator.clipboard.writeText(isi).then(() => alert('Disalin!'));}

</script

Catatan 5

Kotak catatan dengan backround

<span style="color: white; font-family: Roboto; font-size: x-large;">Container Catatan tersembunyi</span><br />

<span style="color: white; font-family: caveat; font-size: xxx-large;">Daftar catatan:</span>

</p><ol style="color: white;">

<li></li>

<li></li></ol>

<button onclick="toggleJudul('pesan1', this)" style="margin-bottom: 5px;">📜 Catatan 1</button>

<button onclick="toggleJudul('pesan2', this)" style="margin-bottom: 5px;">📜 Catatan 2</button>

<button onclick="toggleJudul('pesan3', this)" style="margin-bottom: 5px;">📜 Catatan 3</button>

<button onclick="toggleJudul('pesan4', this)" style="margin-bottom: 5px;">📜 Catatan 4</button>

<button onclick="toggleJudul('pesan5', this)" style="margin-bottom: 5px;">📜 Catatan 5</button></ol><p></p>

<div style="height: 60px; position: relative;">

<div style="height: 120px; position: relative;"></div>

<div contenteditable="true" hidden="" id="pesan1" style="background: rgb(255, 255, 255); border-radius: 6px; border: 1px solid rgb(204, 204, 204); margin: 10px 0px; padding: 10px; position: relative;"><p>Catatan 1</p><p>

<div contenteditable="true" hidden="" id="pesan2" style="background: rgb(255, 255, 255); border-radius: 6px; border: 1px solid rgb(204, 204, 204); margin: 10px 0px; padding: 10px; position: relative;"><p>Catatan 2</p>

<div contenteditable="true" hidden="" id="pesan3" style="background: rgb(255, 255, 255); border-radius: 6px; border: 1px solid rgb(204, 204, 204); margin: 10px 0px; padding: 10px; position: relative;"><p>Catatan 3</p>

<div contenteditable="true" hidden="" id="pesan4" style="background: rgb(255, 255, 255); border-radius: 6px; border: 1px solid rgb(204, 204, 204); margin: 10px 0px; padding: 10px; position: relative;"><p>Catatan 4</p>

<div contenteditable="true" hidden="" id="pesan5" style="background: rgb(255, 255, 255); border-radius: 6px; border: 1px solid rgb(204, 204, 204); margin: 10px 0px; padding: 10px; position: relative;"><p>Catatan 5</p>

function toggleJudul(id, tombolAktif) {

const semuaKontainer = document.querySelectorAll('div[contenteditable]');

const semuaTombol = document.querySelectorAll('button[onclick^="toggleJudul"]');

const kontainerKlik = document.getElementById(id);

const sedangTerbuka = !kontainerKlik.hidden;

semuaKontainer.forEach(div => div.hidden = true);

semuaTombol.forEach((btn, index) => {

btn.innerText = `📜 Catatan ${index + 1}`;});

if (!sedangTerbuka) { kontainerKlik.hidden = false;

tombolAktif.innerText = "🔴 Tutup";} else {

tombolAktif.innerText = `📜 Catatan ${[...semuaTombol].indexOf(tombolAktif) + 1}`;}}

function copyPesan(tombol) {

const kontainer = tombol.closest('div[contenteditable]');

const isi = kontainer.innerText.replace('Copy', '').trim();

navigator.clipboard.writeText(isi).then(() => alert('Disalin!'));}

</script>

Catatan 6

Data Url background Gif

Backroud gambar

Backroud type 1

<img alt="Background Gambar"

src="Url gambar" style="border-radius: 5px; box-sizing: border-box; height: 1000px; left: 0px; object-fit: cover; opacity: 1.25; padding: 0px; position: absolute; top: 0px; width: 100%; z-index: 0;" /><div style="padding: 20px; position: relative; z-index: 1;">disini Bisa menulis diatas gambar</div>

Backroud type 2 Scroll

🔲https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgHNOMl0561l07trORh_qy8otePC5p-gMGI5lcXa_IFvC8vKj7fDudcJzsl_vzTpqQkxOey2-0RBUq1_voNYjBvtEF7qJz3ccDqa_NQONMIo1fzUUIL1dvwO128tztrgR2vm2Q_LB3XA-vrBMyydoILmAD9hn0tMa6OQ94HNiZ8oX5rVO20nFSFpvSLa8/s320/snapsave-app_525556313841485_hd-ezgif.com-video-to-gif-converter.gif>
style="cursor: pointer; display: block; margin-right: 0px; padding: 0px; transition: width 0.5s; width: 50px;" />

🔲https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhePXqWHH72-yl4cOpXn1ar7jKtevD0a857hH6jN3nXRKIRxjgnrEPaMFvkQpx7VR5tLXqD71YdVNgc9icNisNFGl_yTJf8SBTkn5Vch4n-mLRjphHv2GlR0x1MwQyEZfDvFdmffaRlrN1g-f7l-kv-1OcuhyV35VCx-OMYyMY6Kzn9tfS2-NTiJKalghY/s320/ezgif.com-webp-to-gif-converter.gif.

🔲https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1lERakAFjB3fOg-5s-BCQ14pj7d880NwKWP6ZF7IC7TT8hpUEZfy9mZLEhHholTj1eGZVXK4cs-aNh4HZmsmD9fvql2gtgWMZ_gvbL5up6gVsHqMaVr60pR3S7UyKI7NL5L2QMPil81_ztrdfg6DHi11zCtJnRM9nrlf4YSUU_ujAG9zYrpp-lMbA5aw/s320/ezgif.com-webp-to-gif-converter%20(1).gif

🔲https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsO1RficC6oNOUtOhIRnmFbpho3BlP0oDZ9dB-ZD9VzYV3Ca8va6AmfOBVvm6IPepEdKo3yPfQcqIhMxdbQbxSsALO8ulMoyOUiovGEnLeHbisUb42WFO7kXo7uD6j24CVpTAr7Bild86_0ZI7CiGHsQu_IQnGExO0_gwTA-X2Vzx3YPmfc2QN3gbrGJI/s320/ezgif.com-webp-to-gif-converter%20(2).gif

🔲https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQMMw7cr5dS3UUsTcGPl2_JE4L4sXVgdxF_F6TpS6wnc7x7aRQ7fJ6TXW9bP6IxlxuhJ6KNBbgJ0eiKgLW25cqaaao26y-ItqpDMbl5wlTzVdZYQJoWP7HJk4ZHv2bH3g_uZiP8viIyvaSMuwu9FHxHlNUSN5IG4QWHdwFnqUHCRargIi8rIamuHSdU1Q/s320/xvideos.com_1b450ce8005175aba24ca9c9d1cbe332-ezgif.com-speed.gif

🔲https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz8Lw9aIf5DUk-zBE26E7dWgmgA9dXp9vaCN5_VPUz7Dlm2y-xkQXtOYm-rmieQcXJ3_tH_ZKUFInNO-YoNd3tOO2Oe4BMYpsGQMDMspQZ67PbFU4JtSySxA68mSvfEA0HuqPW-mXsT0xP608GMXKGVeiQ7SsJfOAygvT-DHoil5U9fOYSmiL8_Z6_j-Q/s320/hi-hello.gif

🔲https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5GhshwXx39voI4CuqpXEzy1O1XueofNRczn0dD8yqG9e0fp6yWJiaAAwAEm1rEeZeUuxRzfgyV85bvSnjDt15HwHjhemv7HiD4ScrP1uBbFWmn4xso42tTh1GByAjtj1XJ-WeueaRgF5uesociTeqSrdoK_fYQEGkFr-xoZ3bsF5SkYPkToKmTCge04I/s320/216d48eef543078d6151130deaeab861.gif

🔲https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP-dhsxXXdm-y5WRJgmsaQ-LioVYecvzGkH2oOG0tS7KHbmEKErWeePeDeb8wILeCLqdW37xdx6nAdNyCg1w3hcfDtD0dVsMNROh1aiGD5Blzn1yXIhTfo7xK1klgEOkhoMilCdERYVpVLDDFADyQFwVnOWvHGc-0fiwSOLCe5yL3o6gMVTv9e1rBRl8A/s320/army9Z.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr5qwNC84KvnFxzQ5vgacez75aNEmaWvqW5KKOoAxk5jaeVvmS1Nalr445nZjyCTUkb19y-bt-UzG6aFpKxkJzrOHPkXOmBaefkQcyyEGuCmj5WTrexCADxdjjaVAdI8x5TI0YJyUcjUDsoOZNyytE5heqEU7lWAdVFF_fTk2V6KN7m0eKT2lmvhoumic/s320/rrr-ezgif.com-video-to-gif-converter.gif

🔲https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE7okimxitIFKu84g15k6XNBqNV6TjQ6krX-hYuSw9XvuWrqMz4B60CkvkhBvzMh7vJAqwzry1dqXz3RA_Y5WWpCqAoxxoGnXUsCwupW7Ipk9y0-dj56UCeSGNXPhue3GoVN6bfLmhpm3l6X1vDlsMbI2J2ir_H7E4HBlnL2tOJiBIizFCstiKZXgJw5A/s320/ezgif.com-overlay.gif

🔲https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimmVQEZ4Qp1ZvUszX1EdpVm0o8nz0P-bBQB1PhyphenhyphenS1AM3SmjDRnTfRs4KXIjB5JpNUaD_AYMeAmB5h1s1OqdpYHiNAD-x0A_gz9qf9ZdNYnImkTa7JspjNlMT79OOHyMZ9wrLHxhlHbSMQkr-FA3w1mM07RS2ahA4xY37BT2lkqVsswEPuEG9od1Vt1gAA/s320/adi.gif🔲🔲

Catatan 7

Kotak pesan dengan backround gambar

<button onclick="toggleJudul('pesan7', this)" style="border-radius: 20px; margin-bottom: 5px;">📜Tentang kami</button>

</div></div>

<div contenteditable="true" hidden="" id="pesan7"style="position: relative;

border-radius: 10px; border 3px solid gray; overflow: hidden; margin-bottom: 10px; padding: 10px;">

<img src="https://blogger.googleusercontent.com/img/a/AVvXsEiFxdsJYyiXdYf7dccZkYaebM-LH_4fFM_kRlBDaxtUHeOvVDAAxdKIgO98CydPcJAtqH71RNqUINkVY2pVPUMqZa1jKJTl_ne_gztxNPLCr65GqIS-N-_Vf_XSkWA_t3E2qEJgD2phsFqm9LuXK4u88BCdyO0cUs7HZ5t2xCkk9cfci23va0-DadtNulI"

style="position: absolute; top: 0; left: 0; padding: 5px; padding: 0px; width: 100%; height: 100%; object-fit: cover; opacity: 0.25; z-index: 0;">

<p>Catatan </p>

function toggleJudul(id, tombolAktif) {

const semuaKontainer = document.querySelectorAll('div[contenteditable]');

const semuaTombol = document.querySelectorAll('button[onclick^="toggleJudul"]');

const kontainerKlik = document.getElementById(id);

const sedangTerbuka = !kontainerKlik.hidden;

semuaKontainer.forEach(div => div.hidden = true);

semuaTombol.forEach((btn, index) => {

btn.innerText = `📜 Catatan ${index + 1}`;});

if (!sedangTerbuka) { kontainerKlik.hidden = false;

tombolAktif.innerText = "🔴 Tutup";} else {

tombolAktif.innerText = `📜 Catatan ${[...semuaTombol].indexOf(tombolAktif) + 1}`;}}

function copyPesan(tombol) {

const kontainer = tombol.closest('div[contenteditable]');

const isi = kontainer.innerText.replace('Copy', '').trim();

navigator.clipboard.writeText(isi).then(() => alert('Disalin!'));}

</script

Catatan 10

Sepuluh kotak catatan tersembunyi

<span style="color: grey; font-family: Caveat; font-size: xxx-large;">Daftar catatan:</span>

<ol li="" style="color: white; text-align: left;">
<li><a href="javascript:void(0);" onclick="bukaTutup('pesan1')">Catatan 1</a></li>
<li><a href="javascript:void(0);" onclick="bukaTutup('pesan2')">Catatan 2</a></li>
<li><a href="javascript:void(0);" onclick="bukaTutup('pesan3')">Catatan 3</a></li>
<li><a href="javascript:void(0);" onclick="bukaTutup('pesan4')">Catatan 4</a></li>
<li><a href="javascript:void(0);" onclick="bukaTutup('pesan5')">Catatan 5</a></li>
<li><a href="javascript:void(0);" onclick="bukaTutup('pesan6')">Catatan 6</a></li>
<li><a href="javascript:void(0);" onclick="bukaTutup('pesan7')">Catatan 7</a></li>
<li><a href="javascript:void(0);" onclick="bukaTutup('pesan8')">Catatan 8</a></li>
<li><a href="javascript:void(0);" onclick="bukaTutup('pesan9')">Catatan 9</a></li>
<li><a href="javascript:void(0);" onclick="bukaTutup('pesan10')">Catatan 10</a></li></ol>


<div contenteditable="true" hidden="" id="pesan1" style="background: none; borde-radius: 6px; border: 1px solid rgb(204, 204, 204); margin: 10px 0px; padding: 10px; position: relative;"><p>catatan1</p></div>

<div contenteditable="true" hidden="" id="pesan2" style="background: none; borde-radius: 6px; border: 1px solid rgb(204, 204, 204); margin: 10px 0px; padding: 10px; position: relative;"><p>Catatan 2</p></div>

<div contenteditable="true" hidden="" id="pesan3" style="background: none; borde-radius: 6px; border: 1px solid rgb(204, 204, 204); margin: 10px 0px; padding: 10px; position: relative;"><p>Catatan 3</p></div>

<div contenteditable="true" hidden="" id="pesan4" style="background: none; borde-radius: 6px; border: 1px solid rgb(204, 204, 204); margin: 10px 0px; padding: 10px; position: relative;"><p>Catatan 4</p></div>

<div contenteditable="true" hidden="" id="pesan5" style="background: none; borde-radius: 6px; border: 1px solid rgb(204, 204, 204); margin: 10px 0px; padding: 10px; position: relative;"><p>Catatan 5</p></div>

<div contenteditable="true" hidden="" id="pesan6" style="background: none; borde-radius: 6px; border: 1px solid rgb(204, 204, 204); margin: 10px 0px; padding: 10px; position: relative;"><p>Catatan 6</p></div>

<div contenteditable="true" hidden="" id="pesan7" style="background: none; borde-radius: 6px; border: 1px solid rgb(204, 204, 204); margin: 10px 0px; padding: 10px; position: relative;"><p>Catatan 7</p></div>

<div contenteditable="true" hidden="" id="pesan8" style="background: none; borde-radius: 6px; border: 1px solid rgb(204, 204, 204); margin: 10px 0px; padding: 10px; position: relative;"><p>Catatan 8</p></div>

<div contenteditable="true" hidden="" id="pesan9" style="background: none; borde-radius: 6px; border: 1px solid rgb(204, 204, 204); margin: 10px 0px; padding: 10px; position: relative;"><p>Catatan 9</p></div>

<div contenteditable="true" hidden="" id="pesan10" style="background: none; borde-radius: 6px; border: 1px solid rgb(204, 204, 204); margin: 10px 0px; padding: 10px; position: relative;"><p>Catatan 10</p></div>

<script>

function bukaTutup(id) {

const semua = ['pesan1', 'pesan2', 'pesan3', 'pesan4', 'pesan5', 'pesan6', 'pesan7', 'pesan8', 'pesan9', 'pesan10'];

semua.forEach(function(pesan) {const elemen = document.getElementById(pesan);

if (pesan === id) { elemen.hidden = !elemen.hidden; } else { elemen.hidden = true; }}); }

function copyPesan(el) {const isi = el.parentElement.innerText;

navigator.clipboard.writeText(isi).then(() => alert("Disalin ke clipboard!"));}

</script>

⚪⚪⚪