Cara Membuat Efek Teks Menarik Menggunakan HTML,CSS dan JS


Cara  Membuat  Efek Teks Menarik Menggunakan HTML,CSS dan JS

Dalam dunia blogging, tampilan visual yang menarik sangat penting untuk menarik perhatian pengunjung. Salah satu cara untuk membuat blog Anda menjadi lebih menarik adalah dengan membuat efek teks yang indah. 

Dalam artikel ini, kami akan membahas cara membuat efek teks menarik untuk blog menggunakan HTML, CSS, dan JavaScript. Kami akan memberikan panduan langkah demi langkah untuk membuat efek teks yang unik dan kreatif yang dapat meningkatkan tampilan blog Anda dan membantu Anda dalam upaya SEO.


Mengapa Efek Teks Menarik Penting untuk Blog Anda?

Efek teks menarik dapat membantu blog Anda menjadi lebih menarik dan menonjolkan konten Anda. Dengan memperhatikan tampilan visual, Anda dapat mengundang pengunjung untuk tetap tinggal lebih lama di blog Anda, meningkatkan tingkat retensi pengunjung, dan mengurangi tingkat pentalan. 

Selain itu, efek teks yang menarik juga dapat membuat konten Anda terlihat lebih profesional dan berkualitas tinggi, meningkatkan citra merek Anda sebagai blogger atau pemilik situs web.


Selain itu, efek teks menarik juga dapat membantu Anda dalam upaya SEO. Meskipun faktor-faktor lain seperti struktur URL, tag meta, dan pemilihan kata kunci masih penting dalam upaya SEO, kualitas konten juga memainkan peran yang signifikan dalam peringkat mesin pencari. 

Dengan menyajikan konten yang menarik, unik, dan bermanfaat bagi pengunjung, Anda dapat meningkatkan peluang untuk ditemukan di hasil pencarian Google dan mengalahkan situs web pesaing.



Langkah-langkah Membuat Efek Teks Menarik untuk Blog Anda

Berikut adalah langkah-langkah untuk membuat efek teks menarik untuk blog Anda menggunakan HTML, CSS, dan JavaScript:

Langkah 1: Anda mengakses halaman pengeditan HTML Blogger.
Langkah 2: Tambahkan potongan HTML yang menampilkan teks sebagai berikut:
<span class="text first-text">I'm a</span>
<span class="text sec-text">Freelancer</span>
  • first-textadalah bahwa teks tidak akan berubah.
  • sec-textadalah bahwa teks akan berubah dan memiliki efek jenis huruf

Step 3: Tambahkan JavaScipt berikut sebelum </body>.

<script>//<![CDATA[
        const text = document.querySelector(".sec-text");
        const textLoad = () => {
            setTimeout(() => {
                text.textContent = "Freelancer";
            }, 0);
            setTimeout(() => {
                text.textContent = "Blogger";
            }, 4000);
            setTimeout(() => {
                text.textContent = "YouTuber";
            }, 8000); //1s = 1000 milliseconds
        }
        textLoad();
        setInterval(textLoad, 12000);
//]]></script>  

Mengganti konten dalam paragraf text.textContentdengan konten yang diketik akan berubah. Anda dapat menambahkan lebih banyak teks dengan menggandakan fungsi setTimeoutdan di mana 1 detik sama dengan 1000 milidetik dan intervalnya adalah 4 detik.

Langkah 4: Tambahkan CSS berikut sebelum tag</head>

<style>/* <![CDATA[ */
.text{position:relative;font-size:30px;font-weight:600}
.text.first-text{color:#333}
.text.sec-text{color:#4070F4}
.text.sec-text:before{content:"";position:absolute;top:0;left:0;height:100%;width:100%;background-color:#ffffff;border-left:2px solid #4070F4;animation:animate 4s steps(12) infinite}
@keyframes animate{40%,60%{left:calc(100% + 4px)}100%{left:0%}}
/* ]]> */</style>


      color:#333 warna teks tampilan

  • color:#4070F4warna teks dan kursor yang diketik
  • background-color:#ffffffadalah warna latar belakang yang sama dengan latar belakang yang berisi teks

Step 5: Klik simpan.






Posting Komentar

Lebih baru Lebih lama