Make SEO Smart Link with Icon use jQuery

Master Koben akan update sedikit trik seputaran tentang links. Apakah sobat masih ingat dengan postingan fenomenal pasang SEO smart link untuk Blogspot? Tutorial sekarang tidak jauh berbeda dengan hal tersebut. Tetapi yang membedakan di sini adalah, akan kita sematkan gambar icon pada link keyword! Sehingga gambar icon unyu-unyu akan tampak tepat setelah link-keywords. Perhatikan pada screen-shot berikut:Gambar di atas menunjukan penerapan keywords dengan kata script, hacker, blogspot and blogger. Jadi ketika sobat melakukan kegiatan mengetik untuk post, lalu sobat mengetikan ada keyword yg di tuju, maka jangan lupa tuliskan syntax link yang tujuannya terserah kalian! Tutorial ini terhubung dengan script jQuery, jadi di dalam template sobat harus sudah terpasang ya :)

.entry-title {
  padding-right: 21px;    
  vertical-align: middle;
}
.KEYWORD-1 {
  background: url(LINK-IMAGE) no-repeat right transparent;
}
.KEYWORD-2 {
  background: url(LINK-IMAGE) no-repeat right transparent;
}
.KEYWORD-3 {
  background: url(LINK-IMAGE) no-repeat right transparent;
}
.KEYWORD-4 {
  background: url(LINK-IMAGE) no-repeat right transparent;
}

Gantikan KEYWORD- sesuai dengan keinginan. LINK-IMAGE ganti juga dengan gambar resolusi icon (16px x 16px)

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
  $.expr[":"].contains = $.expr.createPseudo(function(arg) {
    return function( elem ) {
        return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
});
$('.entry-title').each(function() {
var title = $(this);
  if(title.is(':contains("KEYWORD-1")')) {
     title.addClass('KEYWORD-1');
}
  else if (title.is(':contains("KEYWORD-2")')) {
   title.addClass('KEYWORD-2');
}
  else if (title.is(':contains("KEYWORD-3")')) {
    title.addClass('KEYWORD-3');
}
  else {
    title.addClass('KEYWORD-4');
}
});
$( 'a[href^="http://"]' )
    .attr( 'target','_blank' )
    .addClass( 'entry-title' )
});
//]]>
</script>

Pada script di atas baris else {
title.addClass('KEYWORD-4');
}merupakan default link keyword. Jadi ketika anda membuat syntax link, namun di luar kontek keyword yg di buat maka gambar icon yg muncul adalah kode tersebut.
Demo: codepen.io/beben-koben/full/vNoJom
Source: codepen.io/mariemosley/pen/zueEI
Other technique: jsfiddle.net/barmar/S6d54/4

Happy snippet \m/