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.

Baca Juga artikel sebelumnya Cara Membuat Efek Sliding 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 :)

Newer Post Older Post