Cara Membuat Efek Link Nudging Pada Lists Sidebar

Sebelumnya saya sudah pernah mengetengahkan tutorial cara membuat efek link nudging pada lists label atau category blog. Jadi yang belum tahu apa dan bagaimana efek link nudging mungkin bisa membaca artikel sebelumnya.

Nah jika pada tutorial sebelumnya efek link nudging hanya pada lists label sekarang kita akan menambahkan efek link nudging pada semua lists sidebar blog kita, tentunya masih dengan bantuan script JQuery. Yah sangat sayang khan kalau anda hanya menggunakan framework JQuery pada blog anda untuk membuat featured posts slider, tabber tab, atau membuat scroll top down, kenapa tidak mencoba menambahkan efek link nudging atau biasanya mereka juga menyebutnya dengan efek animasi ini ke semua lists sidebar blog anda? Apalagi caranya sangat mudah kok.

• Setelah sign ini ke akun anda
• Pada dasbor >> pilih Template >> Edit HTML
• Tambahkan kode berikut diatas kode </head>

<script type='text/javascript'>
jQuery(document).ready(function(){
jQuery('.widget-content li a').hover(function() {
jQuery(this).animate({ paddingLeft: '7px' }, {duration:250});
}, function() {
jQuery(this).animate({ paddingLeft: '0px' }, {duration:250});
});
});
</script>

Catatan: Silahkan atur padding left sesuai template anda karena biasanya setiap template sudah menentukan ukuran padding left untuk lists sidebar. Caranya lihat pada kode CSS lists sidebar (widget-content li a)

• Terakhir simpan template dan lihat hasilnya diblog anda.

Semoga bermanfaat.

Jika anda tidak ingin membuat efek animasi atau link nudging dengan menambahkan script JQuery, mungkin anda bisa mencoba menambahkan efek link nudging bertenaga CSS3 ke blog anda, silahkan lihat tutorialnya disini

Trik Menghilangkan Link Hidup Pada Komentar Blogger

Pada Tips Trik Blogging kita kali ini, insyaAllah saya akan mengetengahkan sebuah cara atau trik menghilangkan link hidup pada komentar dengan bantuan script JQuery. Trik seperti ini terkadang kita butuhkan agar blog kita tidak menjadi sarang spammer yang sering berkomentar tidak sesuai topik dan banyak menitipkan link hidup pada kolom komentar diblog kita.

Nah jika anda tertarik untuk menerapkan trik menghilangkan link hidup pada kolom komentar blog anda, silahkan ikuti tahapan berikut ini:

• Silahkan login ke akun anda
• Klik template/ Rancangan >> Edit HTML
• Cari kode </head>
• Letakkan kode berikut diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(function() {
$('#comments p').find('a').remove();
});
</script>

• Terakhir simpan template anda dan lihat hasilnya dengan mencoba berkomentar dengan meletakkan link hidup pada kolom komentar blog anda.

Demikian trik menghilangkan link hidup pada kolom komentar blogger. semoga bermanfaat. Terima kasih.

Menambahkan Effect JQuery Link Nudging Pada Label

JQuery link nudging adalah effect animasi pada link hasil dari penambahan padding kiri, effect ini akan nampak saat kita menyentuhkan pointer/mouse  pada link, link akan bergerak kekanan atau bergoyang. Seru juga jadinya, tertarik ingin menerapkan JQuery Link Nudging pada blog anda?

Silahkan ikuti tutorial menambahkan effect JQuery link nudging berikut ini:

1. Setelah sig in pada account blogger anda >>> pada dasbor>>> Klik Rancangan>>> Edit HTML
2. Tambahkan Script JQuery berikut diatas kode </head>

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

Catatan: abaikan langkah kedua bagi anda yang sudah menginstal script JQuery diatas pada template blogger anda.

3. Tambahkan lagi script berikut dibawah script JQuery tadi:

<script type='text/javascript'>
$(document).ready(function() {
$(&#39;#Label1 li&#39;).hover(function() { //mouse in
$(this).animate({ marginLeft: &#39;12px&#39; }, 400);
}, function() { //mouse out
$(this).animate({ marginLeft: 0 }, 400);
});
});
</script><!-- end LinkNudging -->

4. Simpan, dan lihat hasilnya pada blog anda.

Mudah bukan? Selamat mencoba, semoga berhasil dan bermanfaat.
Resource David Wals

Ingin mencoba effect lain pada link? Silahkan lihat disini cara membuat link hover berwarna pelangi atau disini link hover bertabur bintang

Cara Menambahkan Icon Disamping Link

Pada tutorial kali ini kita akan belajar lagi menambahkan variasi icon pada template blogger. Sebelumnya saya sudah pernah membahas bagaimana menambahkan icon disamping titel atau judul posting. Postingan kali ini saya akan berbagi lagi bagaimana cara menambahkan icon disamping links pada sidebar dan bottom yang contohnya bisa dilihat pada screenshot berikut atau pada blog ini:

 

1. Untuk menambahkan icon atau image disamping link-link pada sidebar ikuti tutorial berikut:

• Pada dasbor>>> Klik Tata Letak>>> Edit HTML>>> Cari kode seperti berikut:

.sidebar ul {
  list-style:none;
  margin:0 0 0;
  padding:0 0 0;
}

• Kalau sudah menemukan kode tersebut tambahkan kode berikut persis dibawah kode tadi:

.sidebar li {
  list-style-type:none; 
background: url("Alamat url image sobat letakkan disini") no-repeat 0px .20em;
padding-left:25px; padding-top:3px;
margin-top:2px;
}

2. Sedangkan untuk menambahkan icon pada link-link yang berada pada footer atau bottom

• Cari kode seperti berikut:

#bottom ul {
padding:0;
margin:0;
color:#333;
}

• Kalau sudah menemukan kode diatas, tambahkan kode berikut:

#bottom ul li {
list-style-type:none; 
background:url("Alamat url image sobat letakkan disini") no-repeat 0px .17em;
padding-left:17px;
margin-top:2px;
}

• Tulisan berwarna biru ganti dengan alamat icon sobat.
• Simpan template
• Selesai

Semoga bermanfaat.

Sumber gambar: dari sini dan sini