Membuat Efek Kilat/Listrik Pada Link Garis:Underline Blog ~ New Trick

Membuat Efek Kilat/Listrik Pada Link Garis:Underline Blog

Membuat Efek Kilat/Listrik Pada Link Garis:Underline Blog - Sudah pernah membuat garis pada blog? Bagaimana dengan garis bawah atau underline? Sudah mengetahui caranya bukan? Sudah dong dan beberapa bulan yang lalu saya juga sudah membuat artikel tentang jenis garis border yang cukup banya diminati oleh teman-teman blogger. Selain itu saya juga telah membuat efek teks neon yang sangat fantastis dan pada artikel ini saya membuat salah satu efek pada garis bawah atau underline dengan memiliki efek seperti kilat. Efek kilat atau listrik pada garis bawah atau underline ini dibuat hanya menggunakan kode CSS saja dan tidak perlu menggunakan javascript sehingga sangat mudah untuk di pasang di blog

Namun pada css kode efek kilat atau listrik pada garis ini hanya bisa digunakan pada garis horizontal saja dan bekerja pada fungsi bullets list (baca: ul/ol li) seperti pada tampilan demo dibawah ini. Dengan adanya efek kilat atau listrik pada underline ini, saya yakin teman-teman blogger semua suka dengan efek ini

REAL DEMO

Silahkan sorot pada list berikut ini

Bagaimana? Keren kan...

Untuk membuat efek kilat pada garis seperti pada demo diatas, silahkan ikuti petunjuk berikut ini dan saya yakin teman-teman blogger semua bisa menerpakannya kedalam blog jika berminat untuk memasangnya

CSS
Silahkan salin kode css berikut ini kedalam kode template blog, tempatkan sebelum ]]></b:skin> dan jangan lupa simpan perubahan kode template

.line-flash{background:#000;width:50%;margin:0;padding:5px;}
.line-flash li{list-style:none;position:relative}
.line-flash a{color:white;font-size:14px}
.line-flash a>span{position:absolute;pointer-events:none;bottom:0;width:100%;height:1px;margin-bottom:3px;left:0;background:-webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #ffffff), color-stop(5%, #ffffff), color-stop(5%, rgba(255,255,255,0.25)), color-stop(100%, rgba(255,255,255,0)));background:-webkit-linear-gradient(left, #ffffff,#ffffff 5%,rgba(255,255,255,0.25) 5%,rgba(255,255,255,0));background:-moz-linear-gradient(left, #ffffff,#ffffff 5%,rgba(255,255,255,0.25) 5%,rgba(255,255,255,0));background:-o-linear-gradient(left, #ffffff,#ffffff 5%,rgba(255,255,255,0.25) 5%,rgba(255,255,255,0));background:linear-gradient(left, #ffffff,#ffffff 5%,rgba(255,255,255,0.25) 5%,rgba(255,255,255,0));background-position:100% 0;-webkit-background-size:200% 100%;-moz-background-size:200% 100%;-o-background-size:200% 100%;background-size:200% 100%;-webkit-transition:background 0s linear;-moz-transition:background 0s linear;-o-transition:background 0s linear;transition:background 0s linear}
.line-flash a:hover>span,.line-flash a:focus>span{background-position:-100% 0;-webkit-transition:background 0.4s;-moz-transition:background 0.4s;-o-transition:background 0.4s;transition:background 0.4s}
.line-flash {color:#e18728;font-weight:bold}
.line-flash .space{margin-bottom:10px}
.left-line{float:left}

HTML
Silahkan gunakan kode html berikut ini untuk menampilkan efek listrik/kilat pada garis bawah, dengan catatan ganti terlebih dahulu kalimat yang sesuai dengan kalimat yang sobat gunakan

<ul class="line-flash left-line">
<li><a href="#">TIM PANDUAN TEMPLATE BLOG :</a></li>
<li><a href="1#">Ana Sriwahyuni</a></li>
<li class="space"><a href="#">Sahroni</a></li>
<li><a href="#">Blogger Indonesia</a></li>
<li><a href="#">Blogger Jawa Timur</a></li>
<li><a href="#">Blogger Probolinggo</a></li>
<li class="space"><a href="#">Blogger Dari Desa</a></li>
<li><a href="#">Panduan Membuat Blog</a></li>
<li><a href="#">Panduan Membuat Template</a></li>
<li><a href="#">Template Gratis</a></li>
<li><a href="#">Efek Kilat Pada Garis</a></li>
<li><a href="#">Efek Listrik Pada Underline</a></li>
</ul>

Itulah cara membuat efek kilat pada garis blog dan sangat mudah untuk di pasang dan digunakan kedalam blog. Oya tampilan diatas hanya menampilkan efek dari arah kiri ke kanan, bagaimana menampilkan efek dari kanan ke kiri? Cukup mengganti posisi teks saja yaitu pada kode float:left diganti dengan float:right, dan jika tidak bisa, silahkan tinggalkan komentar untuk artikel ini, Membuat Efek Kilat/Listrik Pada Link Garis:Underline Blog

New Trick

About

Membuat Efek Kilat/Listrik Pada Link Garis:Underline Blog

Label

Like Us