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...

Catatan Kecil Alya Zahra :

Artikel Link Nudging Dengan CSS3, diproduksi di Indonesia oleh Alya Zahra on July 25, 2013. Semoga artikel ini bermanfaat bagi Anda dan jangan lupa untuk meninggalkan komentar, jejak kaki, dan juga salam tempel. Alya Zahra adalah seorang penggiat blog yang cerdas, cantik, imut, sederhana, dan bersahabat, serta selalu rajin beribadah dan taat kepada kedua orang tua, meskipun Alya Zahra saat ini masih duduk di bangku Taman Kanak-Kanak.

Enter your email address:

Delivered by FeedBurner

OK

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
Silahkan berkomentar yang bijak dan santun, serta tidak hanya bertujuan spam.

Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA </i>

Terima kasih atas komentar anda. Semoga informasi yang ada di blog ini bermanfaat.

haii pleased huhhh dad shake wat2 order happy cheer spoiled


Konversi Kode HTML

 
scrolltotop