Sabtu, 30 November 2013

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

Membuat Efek Kilat/Listrik Pada Link Garis:Underline 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 Anda 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

Membuat Efek Kilat/Listrik Pada Link Garis:Underline Blog Rating: 4.5 Diposkan Oleh: ana sriwahyuni

8 komentar:

  1. Kalau sekilas disorot ke linknya efek listriknya mantap juga mbak :)

    BalasHapus
  2. listriknya cuma sekilas saja yah,, boleh deh di coba :)

    BalasHapus
    Balasan
    1. sekilas aja mas Mawan, kalau berlebihan bisa kesetrum xixiii

      Hapus
  3. Jadi keliat lebih menarik ya mbak..
    Tampilannya...
    Kapan2..boleh di tester nih :)
    Salam..

    BalasHapus
  4. dengan adanya efek petir ini maka akan membuat tampilan postingan blog jadi lebih keren ya buk. Bisa dicoba nih tutorialnya :)

    BalasHapus
    Balasan
    1. awas tersambar loh mbak Wahyu,, xixii

      Hapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia