Cara Membuat Gambar Panah Pada External Links

Niammuddin Mz Januari 18, 2015
Halo Sobat blogger semuanya, pagi ini saya akan membagikan tips mempercantik blog kita, yaitu menambahkan gambar panah yang keluar pada link external atau link yang target blank, new atau apalah yang penting linknya keluar, yang menandakan link itu bila di klik akan membuat tab baru, dan ini sangat berguna sekali untuk pengunjung kita untuk mengetahui apakah itu link internal atu link external, bagaimana tertarik ingin membuatnya, sabar saja jangan buru-buru.

Ayo sekarang kita menuju cara membuatnya.

Langkah1
Masuk dasbor blogger sobat pilih menu rancangan > Edit HTML.

Langkah2
Masukkan kode jquery dibawah ini tepat diatas kode </head> apabila template sobat uda ada kode sepeti itu lewati langkah ini, karena kalau sobat tambah lagi nanti bisa tabrakan dan gak mau jalan.

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

Langkah3
Masukkan lagi kode javascript dibawah ini tepat dibawah kode jquery tadi atau diatas kode </head> sama saja yang penting masih dalam area anrata <head> </head>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('.extlinks a').filter(function() {
return this.hostname && this.hostname !== location.hostname;
}).after(' <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUB9HbCVVseWD5U8agyZ1cZ-tpWLQnDB8GDaJG6-rmwPXeUI-u2G98KqT3zyd332fbka7gvu8GOSZdiSsUPBogpfB5byytUr_oM6omLt0kjmNyxXPquRVVkkw2xjIEdCnIehojlnS8gRGR/" alt="external link" />');
});
//]]>
</script>

Langkah4
Masukkan kode CSS dibawah ini di atas kode ]]></b:skin>

.extlinks img {
border:0;
padding:0;
margin:0;
}

Sekarang simpan template sobat, perkerjaan pertama sudah selesai, sekarang kita tinggal memanggil panah tadi di postingan kita, caranta sebagai berikut.

Langkah5
Posting > Entri baru Edit HTML, jangan mode Compose, karena kita akan memasukkan kode HTML untuk memanggil gambar panah tadi.

Langkah6
sekarang masukkan kode seperti contoh dibawah ini.

<div class="extlinks">
isi postingan sobat taruh disini semua, atau bisa hanya link saja ditaruh disini.
</div>

Selesai sekarang publish Postingan sobat dan lihat hasilnya, mantab kan..!
Sebenarnya ada banyak cara untuk memanggil gambar panah supaya muncul pada link external, tapi saya hanya kasih satu cara saja, takut bingung entar, lagian hasilnya juga sama saja.

Bila sobat ingin mengganti gambar panahnya ganti saja kode seperti ini, dengan kode gambar yang sudah sobat upload.

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUB9HbCVVseWD5U8agyZ1cZ-tpWLQnDB8GDaJG6-rmwPXeUI-u2G98KqT3zyd332fbka7gvu8GOSZdiSsUPBogpfB5byytUr_oM6omLt0kjmNyxXPquRVVkkw2xjIEdCnIehojlnS8gRGR/"

Selamat mencoba sobat, semoga berhasil.
, , ,

1 komentar :

Reader's Comments