Script Portofolio Blog Martin Ruma
Table of Contents
Tulisan ini tidak saya buat untuk menunjukkan bahwa saya sudah mahir dalam urusan kode HTML. Jauh dari itu. Saya masih belajar, masih sering bingung, dan tidak jarang merasa pusing saat berhadapan dengan baris-baris kode yang asing.
Namun justru di situlah letak nilainya.
Sebagai seorang guru di kampung, perjalanan sampai bisa menyusun dan memahami script sederhana seperti ini adalah bagian dari proses yang layak disyukuri. Bukan karena hasilnya sudah sempurna, tetapi karena ada usaha untuk terus belajar dan tidak berhenti mencoba.
Karena itu, postingan ini saya jadikan sebagai tempat menyimpan jejak. Jejak dari proses belajar yang mungkin sederhana, tetapi bermakna bagi saya. Beberapa script portofolio blog Martin Ruma saya simpan di sini, agar suatu saat ketika dibutuhkan, saya tidak perlu memulai dari awal lagi.
Lebih dari itu, ini juga menjadi pengingat bahwa setiap langkah kecil tetap berarti, selama kita mau menjalaninya dengan sungguh-sungguh.
<script>document.body.classList.add("is-landing-page");</script>
<div id="landing-page">
<!--## BAGIAN HEADLINE / HERO SECTION AWAL ##-->
<div class="landing-page-section headline-section">
<div class="section-container">
<div class="column column1">
<h2 class="headline-title">Selamat datang di MartinRuma.web.id.</h2>
<div class="headline-desc">Saya adalah guru Bahasa Indonesia yang menaruh perhatian pada literasi, pembelajaran, dan cara berpikir yang jernih melalui bahasa. Website ini saya gunakan untuk menyimpan berbagai bahan ajar, catatan pembelajaran, serta gagasan tentang bahasa dan pendidikan yang saya bagikan kepada siswa maupun pembaca yang tertarik pada dunia belajar. Sebagian bahan hadir dalam bentuk tulisan di website ini, dan sebagian lainnya saya kembangkan dalam bentuk video pembelajaran.Jika berkenan, Anda dapat mengunjungi Website dan Youtube.
Keduanya adalah ruang belajar yang saya bangun secara sederhana sebagai bagian dari perjalanan saya sebagai guru.</div>
<div class="cta-btns">
<a class="cta-btn-primary" href="https://www.martinusruma.web.id/p/daftar-isi.html"> <span>Website</span> </a> <a class="cta-btn-secondary" href="https://www.youtube.com/@martinruma"> <span>Youtube </span> </a>
</div>
</div><div class="column column1">
<img alt="Selamat Datang di Rumapedia" class="headline-img" height="450" loading="eager" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRH8N-G29foEb17z1gfhiztcoHJ7v5Q5tsmIFyS_UY8baiR_BY0-GP_hGfN7t6Zk3LlHV4BaWGhFXP3sYL7y0pQm2bi12jKzPjIKOThoNrWsqc8U3RPhFycVRqxNeBwkMmm7YnN9qvhEC2Tin0Mu85D0yyiI7Eqfn_J0nWuSDooFn4Eb8htLE7lQ394UVU/s1600/Landing%20Page.jpg" width="450" />
</div>
</div>
</div>
<!--## BAGIAN HEADLINE / HERO SECTION AKHIR ##-->
<!--## BAGIAN STATISTIK AWAL ##-->
<div class="landing-page-section stats-section">
<div class="section-container">
<div class="stat-box">
<div class="stat-number">19 Artikel</div>
<div class="stat-desc">Sastra</div>
</div><div class="stat-box">
<div class="stat-number">27 Artikel</div>
<div class="stat-desc">Bahasa</div>
</div>
</div>
</div>
<!--## BAGIAN STATISTIK AKHIR ##-->
<!--## BAGIAN VALUE PROPOSITION AWAL ##-->
<div class="landing-page-section value-section">
<div class="section-container">
<div class="section-title"><h2>Kenapa Harus Mengunjungi MartinRuma.web.id?</h2></div>
<div class="row">
<div class="column column1">
<h3 class="value-heading">Karena tulisan di sini lahir dari pengalaman mengajar.</h3><div class="value-desc">Konten yang terdapat di MartinRuma.web.id tidak hanya bersumber dari buku atau teori, tetapi juga dari pengalaman nyata mengajar di kelas. Setiap tulisan berusaha menjembatani antara konsep bahasa, praktik pembelajaran, serta pengalaman sehari-hari seorang guru dalam mendampingi siswa belajar.</div>
</div><div class="column column2">
<img alt="Menulis berdasarkan pengalaman" height="320" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsPc8PrGf8PKY46xv6BUgA-YNwF21802jG_XnkEEGaT_zyojkWNsSwbdHkpCBCF4e2sy3ZvSGMHIA41ypzjuIhyphenhyphen5o2wsUvWfv_oApkgkqn6k61kXBQf2nBZi2b6bnEXMXMrECAm-Pm6CIsbND56ntXi2c5cBzToPdsMb6AxJpyx36W4VUO0oxTeXpZT0_v/s1600/400%20%283%29.jpg" width="320" />
</div>
</div><div class="row">
<div class="column column1">
<h3 class="value-heading">Berangkat dari pengalaman di berbagai sekolah.</h3><div class="value-desc">Sebagian besar konten di MartinRuma.web.id ditulis berdasarkan pengalaman mengajar di beberapa lingkungan sekolah yang berbeda. Pengalaman tersebut menghadirkan beragam perspektif tentang pembelajaran Bahasa Indonesia. Karena itu, gagasan dan contoh yang dibahas di website ini diharapkan tidak hanya relevan di satu tempat, tetapi juga dapat digunakan dan disesuaikan oleh guru maupun siswa di tempat lain.</div>
</div><div class="column column2">
<img alt="Berpengalaman di beberapa sekolah" height="320" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJFzX7wiAyE7Vyases_Qk8JVgXMHNMf_v7w3Nw02b0D-OuItXGlSAwgPBROsjxPLCrBQhZAHvhO3dEnpytsMtURnTd3zA8V00vUCrtX0LTZ4ELF-sF5kKW2uXnyHVhQodYJ73ltzSDVNGDQTC4Q0Ai5tyY4JGlwO99LSlTImshX0x_AhE023b9QPgwdK51/s1600/400%20%281%29.jpg" width="320" />
</div>
</div><div class="row">
<div class="column column1">
<h3 class="value-heading">Selalu mengikuti perkembangan pembelajaran.</h3><div class="value-desc">Tulisan dan bahan ajar yang terdapat di MartinRuma.web.id terus diperbarui dan disesuaikan dengan perkembangan dunia pendidikan, termasuk perubahan kurikulum dan dinamika pembelajaran di sekolah. Dengan cara ini, konten yang disajikan diharapkan tetap relevan dan dapat digunakan dalam praktik belajar yang terus berkembang.</div>
</div><div class="column column2">
<img alt="Selalu update perkembangan terbaru" height="320" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiBwkgFLAGwRK7hhKgIlhELfe0ySdr7arnrtIuXRbca9Sub5lxxOwAMLo0fNfpS2KQqOe_DgxuM9_7mRslf3fZFOv6NkFqpfSqJKygxlfsIrBIdAgFwsmGGQibRal9FXVSjidYHYJ0UxmF9DKBHakNGo50MhenpglM8jbvCwyJLkJX0K9s_ZvNnfWbt48M/s1600/400.jpg" width="320" />
</div>
</div>
</div>
</div>
<!--## BAGIAN VALUE PROPOSITION AKHIR ##-->
<!--## BAGIAN SOCIAL-PROOF AWAL ##-->
<div class="landing-page-section social-proof-section">
<div class="section-container">
<div class="section-title"><h2>Kata mereka</h2></div>
<div class="social-proof-box">
<div class="sp-nav"><button class="sp-nav-btn prev"><span class="icon-arrow-down"></span><span>Sebelumnya</span></button><div class="sp-nav-indicator"></div><button class="sp-nav-btn next"><span>Berikutnya</span><span class="icon-arrow-down"></span></button></div>
<div class="sp-container">
<div class="sp-content-box">
<div class="sp-content">Hal yang paling saya sukai ketika belajar Bahasa Indonesia bersama Pak Martin adalah cara beliau menjelaskan materi: singkat, padat, dan sangat jelas. Setiap memulai pelajaran, beliau selalu menjelaskan terlebih dahulu manfaat dari materi yang akan dipelajari.
Bagi kami sebagai siswa, hal itu sangat membantu. Kami tidak sekadar menghafal teori, tetapi memahami mengapa materi tersebut penting. Misalnya saat mempelajari majas, Pak Martin selalu menjelaskan fungsi dan kegunaannya dalam menulis maupun berkomunikasi.
Pendekatan seperti ini membuat pelajaran terasa lebih masuk akal dan menarik. Terima kasih Pak Martin. Sukses selalu, Pak Guru.</div>
<div class="sp-avatar"><img alt="Astrela (Sekolah Kanaan Jakarta)" height="50" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpVO4KvIDNxb-YJ75pFWYTGOz-QnSyX93NZr-eRwzm1VnF8gXo-ZnUKiTf3Js-8Gaa1zk-TUo07-nBIKyWerJS9r_AA97ETJRt_cMBbtVCF0SGUgtf7HZV6irDuLqxA8aKiTacRuHLBEImwnkbPF4F2vHDX-E_kbNYKpkBVq0TwZNFB67Ac3kiz8fxDwF0/s1600/ASTRELA.JPG" width="50" /></div>
<div class="sp-name">Astrela (Sekolah Kanaan Jakarta)</div>
</div><div class="sp-content-box">
<div class="sp-content">Saya memang menyukai dunia menulis. Salah satu hal yang paling saya ingat ketika belajar Bahasa Indonesia bersama Pak Martin adalah banyaknya praktik yang kami lakukan di kelas. Jujur saja, ketika pelajaran Bahasa Indonesia hanya diisi ceramah panjang, saya mudah merasa bosan.
Namun bersama Pak Martin, suasana belajar terasa berbeda. Kami tidak hanya mendengarkan penjelasan, tetapi juga langsung mencoba menulis dan berkarya. Dari proses itulah saya akhirnya berani menulis hingga menghasilkan sebuah novel.
Terima kasih Pak Martin atas bimbingannya. Sukses selalu di mana pun Bapak berkarya.</div>
<div class="sp-avatar"><img alt="Fransisca Nindya (Sekolah Kanaan Jakarta)" height="50" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_UibGZYGEt3IGIAoqzI7E1FZbmeZR8HYPQSZoD5fTtk7sAmhOUsLA1Xd3PSlX33H179fYJzqifwl9nN96cW0Lv2URYRpLwqMqW_ecwR8ijRJMz21Di0WrefFU6hTB07i2gRl-sOBpfKCygRp_OA9rj1NVTQxHBNZHjcDp9O2gsdk2KgTJjQ6cL-C3N8Yc/s1600/JOO_9543%20%281%29.JPG" width="50" /></div>
<div class="sp-name">Fransisca Nindya (Sekolah Kanaan Jakarta)</div>
</div><div class="sp-content-box">
<div class="sp-content">Pak Martin, maaf ya Pak, dulu saya sering merasa sedikit takut ketika Bapak mengajar karena ekspresi Bapak terlihat cukup tegas (kadang terasa agak “seram”, hehe).
Namun sekarang saya menyadari bahwa cara mengajar Bapak yang sering meminta kami maju ke depan dan banyak melakukan praktik ternyata sangat membantu. Awalnya memang terasa menantang, tetapi justru dari situlah saya belajar menjadi lebih berani berbicara dan tampil di depan orang lain.
Menariknya, manfaat dari cara belajar itu benar-benar saya rasakan ketika sudah kuliah. Terima kasih Pak Martin atas pengajaran dan dorongan yang Bapak berikan. Tuhan Yesus selalu memberkati Bapak dalam setiap karya dan pelayanan.</div>
<div class="sp-avatar"><img alt="Sharon (Sekolah Kanaan Jakarta)" height="50" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT3uo6ToIfZQFgfau-LQsvMxkUofGvCye5d7TIV1s_nfmJUNYrJ3aXyzh8IZnSnhiIe_PzlD9n0YB3NQZg36FYr0i8-07K_8eg5sZUxdMHgWIvScFFcK5QgLjBb7ear74tRy9e5azOwtxCmrNaBjzRyFCtsMU71UrmuKw-yy1x0OgssZXyoV6t1id_C3uV/s1600/sharon%20ariela.JPG" width="50" /></div>
<div class="sp-name">Sharon (Sekolah Kanaan Jakarta)</div>
</div>
</div>
</div>
</div>
</div>
<!--## BAGIAN SOCIAL-PROOF AKHIR ##-->
<!--## BAGIAN FAQ AWAL ##-->
<div class="landing-page-section faq-section">
<div class="section-container">
<div class="section-title"><h2>Tanya Jawab</h2></div>
<div class="faq-desc">Beberapa pertanyaan yang sering muncul dalam pembelajaran Bahasa Indonesia saya kumpulkan di bagian ini. Barangkali pertanyaan Anda juga pernah muncul sebelumnya. Contohnya:</div><div class="accordion-container">
<div class="accordion-toggle">Apa yang dimaksud dengan Bahasa Indonesia yang baik dan benar?</div>
<div class="accordion-content"><div>Bahasa Indonesia yang baik dan benar adalah bahasa Indonesia yang digunakan sesuai dengan situasi komunikasi (baik) serta sesuai dengan kaidah atau aturan bahasa Indonesia yang berlaku (benar).
Dengan kata lain, seseorang dianggap menggunakan bahasa Indonesia yang baik dan benar apabila ia mampu menyesuaikan bahasa dengan lawan bicara, tujuan komunikasi, dan situasi, sekaligus tetap mematuhi tata bahasa, ejaan, dan pilihan kata yang baku.
Penjelasan
Dalam kajian kebahasaan, istilah “baik” dan “benar” memiliki makna yang berbeda.
Bahasa Indonesia yang baik
Adalah bahasa yang digunakan sesuai dengan konteks atau situasi komunikasi, seperti siapa lawan bicara, tujuan pembicaraan, tempat, serta tingkat keformalan. Misalnya, bahasa yang digunakan dalam percakapan santai tentu berbeda dengan bahasa yang digunakan dalam karya ilmiah atau pidato resmi.
Bahasa Indonesia yang benar
Adalah bahasa yang digunakan sesuai dengan kaidah bahasa Indonesia, seperti aturan ejaan, pembentukan kata, tata kalimat, dan penggunaan kosakata baku.
Karena itu, penggunaan bahasa yang ideal adalah bahasa yang baik sekaligus benar, yaitu tepat situasi dan tepat aturan.
Sumber
Balai Bahasa Jawa Tengah. Pemanfaatan Bahasa Indonesia yang Baik, Benar, dan Santun.
Arum Putri. Komunikasi Menggunakan Kalimat Bahasa Indonesia dengan Benar, Jurnal Dikbastra.
La Ode Madina dkk. Penggunaan Bahasa Indonesia yang Baik dan Benar dalam Berkomunikasi.
Penjelasan pakar bahasa Ivan Lanin bahwa “baik” berarti sesuai konteks dan “benar” berarti sesuai kaidah bahasa.</div></div><div class="accordion-toggle">Jika kita sudah bisa berbicara Bahasa Indonesia sejak kecil, mengapa masih perlu mempelajarinya di sekolah?</div>
<div class="accordion-content"><div>Meskipun sejak kecil kita sudah dapat berbicara bahasa Indonesia, kita tetap perlu mempelajarinya di sekolah karena berbicara saja tidak cukup. Di sekolah kita belajar menggunakan bahasa Indonesia secara terampil, terstruktur, dan sesuai kaidah agar dapat digunakan dengan tepat dalam berbagai situasi, baik secara lisan maupun tulisan.
Penjelasan
Ada beberapa alasan mengapa bahasa Indonesia tetap perlu dipelajari di sekolah.
1. Bahasa adalah keterampilan yang perlu dilatih
Bahasa bukan hanya kemampuan berbicara, tetapi juga keterampilan menyimak, berbicara, membaca, dan menulis. Keterampilan ini perlu dipelajari secara sistematis melalui latihan dan teori di sekolah.
2. Agar mampu menggunakan bahasa secara baik dan benar
Dalam kehidupan sehari-hari kita mungkin bisa berbicara bahasa Indonesia, tetapi belum tentu sesuai dengan kaidah bahasa yang benar. Di sekolah kita mempelajari tata bahasa, ejaan, pilihan kata, dan struktur kalimat agar komunikasi menjadi lebih jelas dan efektif.
3. Bahasa Indonesia menjadi dasar semua pembelajaran
Bahasa Indonesia juga merupakan fondasi dalam proses belajar. Hampir semua mata pelajaran menggunakan bahasa sebagai media untuk memahami konsep, membaca buku, dan menulis laporan.
4. Mengembangkan kemampuan berpikir dan berekspresi
Pembelajaran bahasa membantu siswa mengembangkan kemampuan berpikir, menyampaikan gagasan, dan mengekspresikan perasaan secara jelas dan terstruktur. Bahasa juga berperan penting dalam perkembangan kognitif seseorang.
5. Membentuk kemampuan komunikasi di masyarakat
Dengan mempelajari bahasa Indonesia secara baik di sekolah, seseorang akan lebih siap berkomunikasi secara efektif di masyarakat, misalnya saat berbicara di depan umum, menulis laporan, membuat karya sastra, atau berdiskusi secara ilmiah.
Contoh Sederhana
Misalnya ketika membaca puisi atau berbicara di depan umum, seseorang harus mampu menggunakan:
intonasi
artikulasi
mimik
ekspresi
Kemampuan tersebut tidak muncul secara otomatis, tetapi perlu dipelajari dan dilatih melalui pembelajaran bahasa Indonesia di sekolah.
Kesimpulan
Jadi, pelajaran bahasa Indonesia di sekolah bukan sekadar belajar berbicara, tetapi belajar menggunakan bahasa secara terampil, terstruktur, dan sesuai kaidah, sehingga kita mampu berkomunikasi dengan baik dalam kehidupan akademik maupun sosial.</div></div>
</div>
</div>
</div>
<!--## BAGIAN FAQ AKHIR ##-->
</div>
.JPG "Gambar tampilan portolio blog guru dan blogger") |
| Tampilannya berantakan dan tidak maksimal |
Script Awal (Versi Dasar yang Masih Perlu Perbaikan)
Script Setelah Disempurnakan
Hasilnya di bawah ini
<script>document.body.classList.add("is-landing-page");</script>
<div id="landing-page">
<!-- HERO -->
<div class="landing-page-section headline-section">
<div class="section-container">
<div class="column column1">
<h2 class="headline-title">Portofolio Martin Ruma</h2>
<div class="headline-desc">
Guru Bahasa Indonesia yang berfokus pada literasi, pembelajaran, dan cara berpikir melalui bahasa. Halaman ini merangkum karya, pengalaman, serta jejak pembelajaran yang saya bangun dalam proses mengajar.
</div>
<div class="cta-btns">
<a class="cta-btn-primary" href="https://www.martinusruma.web.id/p/daftar-isi.html"><span>Lihat Materi</span></a>
<a class="cta-btn-secondary" href="https://www.youtube.com/@martinruma"><span>Youtube</span></a>
</div>
</div>
<div class="column column2">
<img alt="Portofolio Martin Ruma" class="headline-img" height="400" loading="eager" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRH8N-G29foEb17z1gfhiztcoHJ7v5Q5tsmIFyS_UY8baiR_BY0-GP_hGfN7t6Zk3LlHV4BaWGhFXP3sYL7y0pQm2bi12jKzPjIKOThoNrWsqc8U3RPhFycVRqxNeBwkMmm7YnN9qvhEC2Tin0Mu85D0yyiI7Eqfn_J0nWuSDooFn4Eb8htLE7lQ394UVU/s1600/Landing%20Page.jpg" width="400"/>
</div>
</div>
</div>
</div>
<!-- VALUE -->
<div class="landing-page-section value-section">
<div class="section-container">
<div class="section-title"><h2>Fokus Pembelajaran</h2></div>
<div class="row">
<div class="column column1">
<h3 class="value-heading">Berbasis pengalaman mengajar</h3>
<div class="value-desc">
Materi disusun dari praktik nyata di kelas, menghubungkan konsep bahasa dengan kebutuhan belajar siswa.
</div>
</div>
</div>
<div class="row">
<div class="column column1">
<h3 class="value-heading">Melatih berpikir melalui bahasa</h3>
<div class="value-desc">
Pembelajaran tidak hanya menekankan hafalan, tetapi kemampuan memahami, menulis, dan mengungkapkan gagasan.
</div>
</div>
</div>
<div class="row">
<div class="column column1">
<h3 class="value-heading">Terus berkembang</h3>
<div class="value-desc">
Materi dan pendekatan selalu diperbarui mengikuti perkembangan pendidikan dan kebutuhan belajar.
</div>
</div>
</div>
</div>
</div>
<!-- TESTIMONI -->
<div class="landing-page-section social-proof-section">
<div class="section-container">
<div class="section-title"><h2>Kata Mereka</h2></div>
<div class="social-proof-box">
<div class="sp-content-box">
<div class="sp-content">
Hal yang paling saya sukai ketika belajar Bahasa Indonesia bersama Pak Martin adalah cara beliau menjelaskan materi: singkat, padat, dan sangat jelas. Kami tidak sekadar menghafal, tetapi memahami manfaatnya dalam kehidupan.
</div>
<div class="sp-name">Astrela – Sekolah Kanaan Jakarta</div>
</div>
<div class="sp-content-box">
<div class="sp-content">
Kami tidak hanya mendengarkan, tetapi juga langsung praktik menulis. Dari proses itu saya akhirnya berani menulis hingga menghasilkan sebuah novel.
</div>
<div class="sp-name">Fransisca Nindya – Sekolah Kanaan Jakarta</div>
</div>
<div class="sp-content-box">
<div class="sp-content">
Awalnya terasa menantang, tetapi cara belajar yang banyak praktik membuat saya lebih berani berbicara dan percaya diri, bahkan sampai di bangku kuliah.
</div>
<div class="sp-name">Sharon – Sekolah Kanaan Jakarta</div>
</div>
</div>
</div>
</div>
<!-- CTA -->
<div class="landing-page-section cta-section">
<div class="section-container">
<h2>Mulai Belajar</h2>
<p>Kunjungi materi pembelajaran atau ikuti konten video untuk mendukung proses belajar Bahasa Indonesia.</p>
<div class="cta-btns">
<a class="cta-btn-primary" href="https://www.martinusruma.web.id/p/daftar-isi.html"><span>Ke Materi</span></a>
<a class="cta-btn-secondary" href="https://www.youtube.com/@martinruma"><span>Youtube</span></a>
</div>a
</div>
</div>
</div>
Kode di atas akan menghasilkan tampilan portofolio ini seperti ini.
 |
| Tampilan portofolio final, lebih sederhana dan elegan |
Pada akhirnya, tulisan ini tidak saya maksudkan untuk menunjukkan bahwa saya telah memahami kode HTML dengan baik. Ini hanyalah usaha sederhana untuk melawan lupa, mencatat apa yang pernah dipelajari, agar tidak hilang begitu saja.
Salam literasi untuk para guru di era baru, di mana pun kita mengabdi.
Martin Ruma
Posting Komentar