July 25, 2013

Link Nudging Dengan CSS3



Pernah melihat efek link seperti gambar diatas???

Tertarik untuk menggunakannya???

Ok, kalo tertarik silahkan ikuti langkah-langkah nya sob :

1. Login ke blogger.



2. Pilih Template - Edit HTML.



3. Centang Expand Template Widget.



4. Letakkan kode berikut diatas ]]></b:skin> atau </style> :

 ul.nudging {
  margin:10px 10px;
  padding:0px 0px;
  font:normal 14px Comic Sans;
}

ul.nudging li {
  list-style:none;
  margin:0px 0px;
  padding:0px 0px;
}

ul.nudging li a {
  text-decoration:none;
  display:block;
  overflow:hidden;
  padding:5px 10px;
  color:black;
  background-image:-webkit-linear-gradient(left,transparent,transparent 30%,rgba(179,189,245,0.4));
  background-image:-moz-linear-gradient(left,transparent,transparent 30%,rgba(179,189,245,0.4));
  background-image:-ms-linear-gradient(left,transparent,transparent 30%,rgba(179,189,245,0.4));
  background-image:-o-linear-gradient(left,transparent,transparent 30%,rgba(179,189,245,0.4));
  background-image:linear-gradient(left,transparent,transparent 30%,rgba(179,189,245,0.4));
  -webkit-background-size:200% 100%;
  -moz-background-size:200% 100%;
  background-size:200% 100%;
  -webkit-transition:all 0.29s ease-out;
  -moz-transition:all 0.29s ease-out;
  -ms-transition:all 0.29s ease-out;
  -o-transition:all 0.29s ease-out;
  transition:all 0.29s ease-out;
}

.nudging li a:hover {
  background-position:100% 100%;
  padding-left:15px;
} 

5. Simpan Template.

6. Letakkan link-link yang ingin diberi efek seperti contoh dibawah :

 <ul class="nudging">
    <li><a href="#">Apel</a></li>
    <li><a href="#">Belimbing</a></li>
    <li><a href="#">Cherry</a></li>
    <li><a href="#">Durian</a></li>
    <li><a href="#">Elai</a></li>
</ul> 

7. Enjoy.

DEMO :



Terima Kasih...
Semoga bermanfaat...

26 comments

  1. sudah pernah nyoba mastah :D
    eh, ngomong-ngmong blog ini mau dijual ya??? Nggak eman apa?

    ReplyDelete
  2. Nah yang ini nih yg lagi saya cari. :D nemu disini. Makasih udah share

    ReplyDelete
  3. Terus cara nambah pages , tapi bwah tulisan pages itu ada beberapa pilihan nah.. thu gimana??

    ReplyDelete
    Replies
    1. huhhh bingung dengan pertanyaan nya... huhhh

      Delete
  4. assalamu'alaikum...
    sekedar berkunjung menyapa sahabat....:)

    dah lama saya gak ngeblog,mudah-mudahan masih ingat....hehe

    ReplyDelete
    Replies
    1. wa'alaikum salam...
      terima kasih atas kunjungan dan sapaan nya sob...
      saya juga lama ga ngeblog, terlalu lama jadi agak lupa... spoiled

      Delete
  5. artikelnya bermanfaat gan..menambah ilmu

    ReplyDelete
  6. bagus, salam kenal mbak..
    jangan lupa kunjungan baliknya

    ReplyDelete
  7. This comment has been removed by a blog administrator.

    ReplyDelete
  8. This comment has been removed by a blog administrator.

    ReplyDelete