Beranda » CSS » Membuat link berefek Nudge

Membuat link berefek Nudge

Dengan semakin berkembangnya jQuery dan CSS3 para blogger terus menciptakan hal baru yang terbilang menarik, salah satunya adalan link nudge ini. Link nudge adalah link yang berefek ketika mouse menyorotinya maka link tersebut akan bergeser. trik ini banyak di gunakan para blogger tidak terkecuali juga oleh master taufik nurohman, di bawah ini adalah contoh dari link nudge dan arahkan mouse ke salah satu link tersebut...

Blogger Tips
Blogger Widgets
SEO Tips
CSS
jQuery

Efek ini dapat ditambahkan ke blog dengan dua cara, silahkan Anda mengikuti metode CSS atau metode jQuery. dua trik tersebut akan saya bahas di bawah ini.

01Membuat Link Nudge menggunakan jQuery

Buka dashboard blogger Anda
Klik pada "Template"> "Edit HTML"> jangan lupa back up template Anda untuk menghindari kesaahan
Jika Anda belum menambahkan plugin jquery di blog anda, silahkan tambahkan kode di bawah setelah kode pembuka tag <head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

Sekarang cari dan paste kode berikut ini sebelum / di atas kode </head>

<!--Link Nudge Effect By defandaky.blogspot.com-->
<script type='text/javascript'>
var speed = 300; // kecepatan efek geser
$(document).ready(function() {
$(&#39;a.noopln,#Label1 ul li a,.Label li&#39;).hover(function() {
$(this).animate({paddingLeft: &#39;13px&#39;}, speed);
}, function() {$(this).animate({paddingLeft: 0}, speed);
});
}); 
</script>
<!--Link Nudge Effect By defandaky.blogspot.com-->

Contoh class dan id di kode yang saya beri warna biru di atas adalah apabila kita ingin menambahkan efek nudge di link label, jika anda ingin mengganti ke id/class yang lain silahkan hapus, # Label1 ul li a, .Label li yang disoroti di atas dan ganti sesuai yang anda inginkan.

Dan klik SIMPAN TEMPLATE.

Bila Anda ingin menambahkan link nudge di postingan/artikel, anda hanya perlu klik ke mode "Edit HTML" dalam editor posting Anda dan paste kode di bawah ke mana Anda ingin menambahkan efek nudge link ini.

<a class="noopln" href="Tulis link anda">Judul link anda</a>

Ganti tulisan Tulis link anda dengan link url yang anda inginkan dan judul link yang anda mau.

Dan membuat link berefek nudge dengan jQuery selesai.

02Membuat Link Nudge menggunakan CSS

Lagi buka dashboard blogger Anda
Klik pada "Template"> "Edit HTML"
Gunakan ctrl F untuk menemukan kode tag ]]></b:skin> dan paste kode berikut di atas / sebelum kode tag ]]></b:skin>

.noopln {
-moz-transition: all 0.1s ease-in 0s ;
-webkit-transition: all 0.1s ease-in 0s ;
-o-transition: all 0.1s ease-in 0s ;
}

.noopln:hover {
margin-left: 12px;
}

Contoh: Jika Anda ingin menambahkan efek nudge pada link label, tambahkan kode berikut di atas / sebelum kode ]]></b:skin>

.noopln,Label li,#Label1 ul li a,.Label li a {
-moz-transition: all 0.2s ease-in 0s ;
-webkit-transition: all 0.2s ease-in 0s ;
-o-transition: all 0.2s ease-in 0s ;
}

.noopln:hover,Label li:hover,#Label1 ul li a:hover,.Label li a:hover {
margin-left: 14px;
}

Lihat kode id dan class yang saya beri warna biru, kode tersebut bisa anda ganti dengan id atau class lain yang anda inginkan.

Klik "SIMPAN TEMPLATE" dan selesai.

Bila Anda ingin menambahkan link nudge ini dalam posting, caranya sama dengan trik sebelumnya yaitu buka mode ke "Edit HTML" dalam editor posting Anda dan paste kode berikut ke postingan anda.

<a class="noopln" href="Tulis link anda">Judul link anda</a>

Ganti tulisan Tulis link anda dengan link url yang anda inginkan dan judul link yang anda mau.

Catatan: trik yang saya beri ini adalah dasar, anda bisa mengkreasikan css dan trik lainnya di dalam trik ini agar semakin menjadi menarik.

oke demikian saja dan semoga berhasil...

Membuat link berefek Nudge

Belum ada tanggapan untuk "Membuat link berefek Nudge"

Post a Comment