Cara membuat Link dan Gambar bergoyang

Posted by on
link bergeser disentuh kursor
Memberi efek link bergeser/goyang saat di sentuh kursor merupakan trik unik menarik pada blog yang saya akan bagikan  pada malam ini, karena banyak sobat yang menanyakan bagaimana membuat link bergeser ketika disentuh kursor? dan pada kesempatan kali ini saya akan menjawab pertanyaan sobat di artikel yang satu ini, trik link nudging ini menggunakan css untuk membuat link dan juga gambar bergeser saat di sentuh kursor, mau coba?

  • login ke blogger
  • pilih template >> edit html
  • cari kode ]]></b:skin>
  • copy paste kode dibawah ini tepat diatas kode ]]></b:skin>
 /*--- efek link begeser ---*/
.link-nudge  {
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
-webkit-transition: all 0.4s ease-out;
-ms-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
.link-nudge:hover  {
margin-left: 25px;
padding-left: 5px;
}

CARA PENGGUNAANNYA

  • untuk membuat link bergeser gunakan kode dibawah ini
class="link-nudge"
contoh: 
<a href="http://depermana-share.blogspot.com" class="link-nudge">depermana12</a>

  • untuk membuat gambar bergeser gunakan kode dibawah ini
 class="link-nudge"
contoh:
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHS8RuNg5bFLq0-8v4J6IrW2KxYXCechRREUQMW6aOqI7Wz26sHBDVgM4-QNA0EGcc9ncVHxNOqUMsVayTr0FebATxirwmNwWvybWrt2zIbQkmSsFjKZKZQTJfQ4VwKEiWbOhX0yywR8Da/s1600/computer.png" alt="komputer gw"  class="link-nudge" /> 

©2013 copyright

Comments

  1. udin23 April 2013 at 08:22

    susah nih, mas... di template saya nggak ada kode ]]>b:SKIN. ada solusi nggak?

    ReplyDelete
    Replies
    1. Unknown23 April 2013 at 16:35

      This comment has been removed by the author.

      Delete
    2. Unknown23 April 2013 at 16:49

      "kode yang agan maksud" pada semua template ada kok.., mungkin permasalahannya ada di kotak search, karena blogger telah memperbarui edit html jadi sekarang kotak SEARCH pada edit html blogger yang baru sudah terpisah.
      jadi klik template >> edit html kemudian klik dimana saja pada bagian kode ditemplate kemudian tekan ctrl+f dan akan keluar kotak search di pojok kanan template, pada kotak search ketikan kode yang agan maksud dan tekan enter..

      Delete
  2. Anonymous25 April 2013 at 07:04

    klo yang baru ]]>b:skin nya ngumpet gan , saran saya sih copy dlu ke notepad baru di ctrl f nah klo udh dapet liat baris ke berapa baru barisny di cocokin sama baris di edit tamplate
    keren gan tutornya thanks

    ReplyDelete
  3. Unknown2 August 2013 at 16:24

    Pas bagian CARA PENGGUNAANNYA di taruh di mana?

    ReplyDelete
    Replies
    1. Unknown3 August 2013 at 14:04

      maksudnya kalo mau buat lik goyang cuma perlu nambahin class="link-nudge" di linknya, link biasa kan seperti ini <a href='http://depermana-share.blogspot.com'>depermana12</a> setelah ditambahkan jadi <a href='http://depermana-share.blogspot.com' class='link-nudge'>depermana12</a>

      Delete

Post a Comment

Silakan berkomentar dengan sopan sesuai dengan topik bahasan.
Komentar dengan menyertakan tautan hidup akan otomatis terhapus.