Untuk sobat blogger yang gemar utak atik blog mungkin bisa mencoba trik link bergerak yang satu ini dan saya rasa bisa membuat blog sobat unik dan menarik. Sebagai contoh sobat bisa melihat link bergoyang/nudging pada label yang ada di sidebar blog saya ini, efek ini menggunakan script jQuery yang menurut saya sangat ringan ketika di-load dan penerapannya juga lumayan gampang, sama halnya seperti tombol back to top yang beberapa waktu lalu saya jelaskan yang sama-sama menggunakan jQuery.
Cara Pasang Efek jQuery Link Nudging/Bergoyang pada Label Blog
- Login di Blogger
- Masuk ke bagian Edit HTML pada template
- Centang pada bagian Expand Widget Template
- Cari kode </head>
- Copy paste script dibawah ini dan letakkan tepat diatas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script type='text/javascript'>Kalau kode yang berwarna merah tersebut sudah ada di template sobat, kode itu tidak usah di pasang lagi jadi sobat hanya perlu memasang kode dibawahnya saja, Kemudian huruf yang berwarna biru diatas adalah widget id pada label, sobat bisa sesuaikan pada label id di blog sobat. Dibawah ini adalah contoh widget id label dari template blog saya.
$(document).ready(function() {
$('a.nudge, .#Label1 ul li a').hover(function() { //mouse in
$(this).animate({ marginLeft: '12px' }, 400);
}, function() { //mouse out
$(this).animate({ marginLeft: 0 }, 400);
});
});
</script><!-- end LinkNudging -->
<b:widget id='Label2' locked='false' title='Labels' type='Label'>Kemudian untuk membuat Link Nudging manual pada setiap link apakah itu didalam postingan ataupun widget sobat bisa menambahkan class="nudge" seperti dibawah ini
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
<a href="http://bloggerpeer.blogspot.com" class="nudge">ResepSEOBlogger</a>
Dan untuk membuat gambar bergoyang / Image nudging sobat bisa membuatnya seperti dibawah ini
<a href=http://bloggerpeer.blogspot.com" class="nudge"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN5ARYeCU7YlOuK0a67_IYE-5XpJ1Zn6Ts9LTrLFFsqmy39H6OofKTGWMVog2b_VC6rMSbE0x7M0L-QWDI9fJt423l2DISkqgU0C0le2U8omraizaXNt4MgMf2If2520Ap_rm8qXEl42M/s1600/Tips-Trik-Blogger-Tutorial-SEO-Info-BloggerPeer-Blogspot.jpg"/></a>-----------------------------------------------------------------------------
SELAMAT MENCOBA !!!
0 comments:
BERKOMENTARLAH DENGAN BAIK DI BLOG INI !!!
PERATURAN BERKOMENTAR :
- JANGAN MENCANTUMKAN LINK HIDUP
- DILARANG MENCANTUNKAN BERISI UNSUR DEWASA
- JANGAN BERKOMENTAR BERMAKSUD MENGHINA
- BERILAH KRITIK DAN SARAN YANG BAIK
- KOMENTAR DARI ADMIN HARUS DIRESPON
*KOMENTAR ANDA HARUS DISETUJUI ADMIN DAHULU