Cara Menerapkan Efek Sliding Underline Pada Web/Blog

Judul Cara Menerapkan Efek Sliding Underline Pada Web/Blog kali ini adalah lanjutan daripada artikel yang
telah saya buat sebelumnya yaitu Cara Membuat Efek Underline Menggunakan CSS.


Untuk menjadikan efek underline berjalan maka kita memerlukan atribut class:"...". Saya akan mengambil contoh tutorial, Bagaimana Cara Memberikan Efek Uderline itu ke Judul Postingan yang ada di Homepage.

Berikut Cara Membuat Efek Sliding pada Judul Post Homepage

Saya mengambil contoh pada "Efek Garis dari kiri ke kanan.

.kiri-kanan {
text-decoration: none;
display: inline-block;
border-bottom: 3px solid transparent;
width: 0px;
transition: 0.5s ease;
white-space: nowrap;
height: 25px;
}
.kiri-kanan:hover {
border-bottom: 3px solid #333;
width: 200px;
}

Saya letakkan Atribut class pada bagian <h3 class='post-title entry-title kiri-kanan'>,

<b:includable id='post' var='post'>
  <article class='post hentry'>
    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title kiri-kanan'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a>
          <b:else/>...</b:includable>

Contoh lain,...

<span class="kiri-kanan"> Gue bukan ganteng-ganteng srigala</span> 

Hasil Tulisan dengan Efek Sliding :
Gue bukan ganteng-ganteng srigala

Pada intinya, masukkan pada atribut class="...". Demikian Tutorial siang kali ini. Selamat Mencoba :)

Comments

Popular posts from this blog

Latihan Soal-soal Ujian SIM A/Umum, B/Umum, C, dan D

Tips dan Trik Mudah Lulus Ujian SIM C Tanpa Nyogok Calo

Informasi Lengkap Tempat Menghafal Al-Qur'an