Blogger sebenarnya sudah mefasilitasi kebutuhan ini, perhatikan saat membuat hyperlink ketika sedang menulis artikel, akan ada opsi seperti ini [Open this link in a new window] jika opsi ini diberi tanda cek maka otomatis pada kode HTML link akan ditambahkan attribute <target="_blank">, sangat mudah bukan..? tetapi bagaimana jika kita ingin attibute ini berlaku juga pada widget blogger yang sering digunakan seperti Widget Popular Post, Widget Random Posts atau Widget Related Articles, tentu akan merepotkan terutama widget-widget yang berbasis javascript. Berikut ini akan dibahas manfaat dan kegunaan attribute <target="_blank"> serta cara memasangnya sehingga secara otomatis seluruh link pada blog Anda akan terbuka pada jendela baru saat diklik oleh visitor, bahkan Anda dapat menerapkan hanya pada bagian tertentu saja sesuai yang dinginkan.
Manfaat dan Kegunaan Menggunakan Attribute <target="_blank"> pada Kode HTML Link
Sudah dijelaskan sebelumnya bahwa kegunaan utama atribut ini adalah, agar ketika link ini diklik oleh visitor, maka akan terbuka jendela baru pada browser pengunjung. Sedangkan dari sisi SEO Blog, penggunaan atribut ini dapat menekan persentase bounce rate, karena visitor tidak meninggalkan halaman blog/website sebab adanya jendela baru yang terbuka.
Selain itu, karena halaman posting yang sedang dibaca tidak menghilang, visitor tetap dapat membaca artikel hingga selesai sambil melihat referensi link lainnya yang terdapat dalam posting, jika terdapat lebih dari satu link dalam postingan, ini akan meningkatkan Page Views blog dan impact-nya adalah dapat merampingkan Alexa Rank.
Saya akan sangat bersyukur jika Anda ikut berinteraksi dan menambahkan manfaat lainnya dari penggunaan attribute <target="_blank"> pada kolom komentar di bagian bawah artikel ini, kontribusi Anda akan meperkaya pengetahuan kita bersama.
Menggunakan Attribute <target="_blank"> Otomatis
Untuk membuat semua link yang terdapat dalam blog Anda, terbuka pada jendela baru saat diklik oleh visitor, tempatkan kode di bawah ini di antara kode <head> dan </head> pada dokumen HTML template blog Anda, agar lebih mudah tempatkan saja di atas kode </head>
<base target="_blank"/>
Atau Anda dapat menggunakan kode javascript di bawah ini dan tempatkan pada bagian body, tepat di atas kode </body> pada dokumen HTML template blog Anda. Gunakan salah satunya saja, jika telah menggunakan kode yang pertama tidak perlu menggunakan kode yang kedua ini.
<script type="text/javascript">
function targetBlank() {
var anchor = document.getElementsByTagName('a'),
num = anchor.length;
for (var i = 0; i < num; i++) {
if (anchor[i].href) {
anchor[i].target = "_blank";
}
}
} targetBlank();
</script>
Anda dapat menentukan penerapan penggunaan attribute <target="_blank"> secara otomatis, hanya pada bagian tertentu dari blog Anda misalnya pada bagian side bar atau pada bagian header maupun footer, dengan catatan Anda harus mengetahui ID atau Class dari area yang ingin link-nya terbuka pada jendela baru, gunakan script di bawah ini dan tempatkan di atas kode </head>. Sebelumnya Anda harus mengganti kode yang diarsir kuning dengan ID atau Class dari area yang ingin link-nya terbuka pada jendela baru saat diklik oleh visitor pada blog Anda. Script di bawah ini menggunakan jQuaery (yang ditulis dengan warna biru), jika sebelumnya pada template blog Anda telah terdapat plug-in jQuery, maka Anda boleh menghapusnya sebelum script digunakan, karena plugin jQuery tidak baik jika ditanamkan berkali-kali pada template blog, berikut scriptnya.function targetBlank() {
var anchor = document.getElementsByTagName('a'),
num = anchor.length;
for (var i = 0; i < num; i++) {
if (anchor[i].href) {
anchor[i].target = "_blank";
}
}
} targetBlank();
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script>
$(function(){
$("#footer2-wrapper a").attr("target","_blank");
});
</script>
Jika Anda suka postingan ini, silahkan menerapkannya pada blog Anda dan saya akan berterima kasih, jika Anda ikut memberikan masukan pada kolom komentar di bagian bawah artikel ini dan jika sukses jangan lupa ucapkan Alhamdulillah.<script>
$(function(){
$("#footer2-wrapper a").attr("target","_blank");
});
</script>
0 komentar:
Posting Komentar
No Flame, SARA, SEX !