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() {
$('a.noopln,#Label1 ul li a,.Label li').hover(function() {
$(this).animate({paddingLeft: '13px'}, 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...
Tidak ada komentar :
Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</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>
Konversi KodeOOT