Cara Buat Link Anchor Text “Related Posts/Baca Juga:” Dalam Artikel

by -138 Views
Bagi seorang bloger yang sudah lama menekuni dunia blog tentu sudah tidak asing lagi dengan sebutan “anchor text“. 

Namun bagi pemula, mungkin istilah tersebut terdengar asing. Lantas, apa sebenarnya anchor text itu? Bagaimana cara membuatnya? Simak ulasan lengkap Redsobek.com di bawah ini. 

Cara buat link anchor text relatedbaca juga, dalam artikel

Apa itu Anchor Text

Anchor text merupakan sebuah teks yang berfungsi untuk menghubungkan dokumen, lokasi url, atau konten lain pada sebuah website. 
Sederhananya, anchor text berupa teks pada website yang bisa diklik dan akan membawa pembaca ke url link atau halaman lain website. 
Secara umum, anchor text seperti teks lainnya, hanya saja biasanya teks yang merupakan anchor ini berwarna biru (atau berwarna lain sesuai pengaturan) maupun digaris bawahi. 
Teks tersebutlah yang berguna membantu search engine (Google, Bing, Yahoo, MSN) atau mesin pencari untuk mengetahui tautan website yang dilampirkan dalam suatu konten website. 
Cara Membuat Anchor TextRelated atau Baca juga:” 
Jika Anda membaca di blog atau website, mungkin sering menemukan anchor text pada tulisan “Baca juga: (kalimat atau judul konten yang berupa anchor text)”.

Perhatikan contoh di bawah ini: 

Anchor Text 4

Pada kalimat “Baca Juga:”, tulisan berwarna PINK diatas merupakan Anchor Text, dimana ketika pengguna mengarahkan kursor ke tulisan tersebut dan mengkliknya, maka pengguna akan dibawa ke halaman yang berisikan konten artikel dengan judul tersebut . 

Nah, Anda pun juga dapat membuat anchor text seperti pada contoh di atas di website Anda sendiri. Bagaimana caranya? 
1. Buka Blogger 
Pertama-tama, silahkan login ke blogger (https://www.blogger.com). Lalu login ke blogger dengan akun Anda. 
2. Masuk ke Dashboard Blogger anda – Edit Halaman 
Setelah masuk ke dashboard blogger, klik Tema – Edit Halaman. 
anchor text
3. Salin Kode CSS 
Langkah selanjutnya adalah menyalin kode CSS. Salin kode CSS berikut ini, letakan kodenya pada tag <style> HTML blog anda.
anchor text 1
Atau Copy Paste Koding CSS Dibawah:
#related-posts{float:left;width:100%;border-bottom:0px solid #888;border-top:0px solid #88daed;margin:5px 0 10px;padding:15px 0 10px} 

#related-posts .widget h2,#related-posts h3{font:18px Oswald;color:#000;text-transform:none;margin:0 0 10px;padding:0} 

#related-posts a{color:#0973CF;font:12px Verdana} 

#related-posts li{background:url(http://2.bp.blogspot.com/-EcBIblBtYTQ/TqALuRS_IzI/AAAAAAAAAx0/E-vzWTTOgXs/s1600/bullet-list.gif) no-repeat 0 10px;text-indent:0;line-height:1.3em;border-bottom:1px dotted #ccc;margin:0;padding:3px 0 8px 12px} 

#related-posts a:hover{color:#c00;text-decoration:none} 

#related-posts .widget{margin:0;padding:0} 

#related-posts ul{list-style:none;margin:0;padding:0} 
4. Selanjutnya, Salin Kode Javascript 
Langkah selanjutnya adalah menyalin kode Javascript. Salin kode di bawah ini tepat sebelum dan sesudah kode </head> pada halaman HTML blog Anda. 
anchor text 2
Atau Copy Paste Coding Dibawah ini:

<script type=’text/javascript’> 


var relatedpoststitle=&quot;Related Posts&quot;; 

</script> 

<script type=’text/javascript’> 

//<![CDATA[ 

var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];relatedTitles[relatedTitlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if(d.link[a].rel==”alternate”){relatedUrls[relatedTitlesNum]=d.link[a].href;relatedTitlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);var c=new Array(0);for(var a=0;a<relatedUrls.length;a++){if(!contains(b,relatedUrls[a])){b.length+=1;b[b.length-1]=relatedUrls[a];c.length+=1;c[c.length-1]=relatedTitles[a]}}relatedTitles=c;relatedUrls=b}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){for(var b=0;b<relatedUrls.length;b++){if(relatedUrls[b]==a){relatedUrls.splice(b,1);relatedTitles.splice(b,1)}}var c=Math.floor((relatedTitles.length-1)*Math.random());var b=0;if(relatedTitles.length>1){document.write(“<h3>”+relatedpoststitle+”</h3>”)}document.write(“<ul>”);while(b<relatedTitles.length&&b<20&&b<maxresults){document.write(‘<li><a href=”‘+relatedUrls[c]+'”>’+relatedTitles[c]+”</a></li>”);if(c<relatedTitles.length-1){c++}else{c=0}b++}document.write(“</ul>”);relatedUrls.splice(0,relatedUrls.length);relatedTitles.splice(0,relatedTitles.length)}; 

//]]> 

</script> 
5. Memasang Related Post 
Selanjutnya, temukan kode <data: post.body> dalam HTML Blog. Lalu salin kode dibawah ini, letakan tepat di bawah kode <data: post.body>. Berikut ini kode yang perlu disalin. 

Anchor Text 3

Atau Copy Kode Berikut:


<b:if cond=’data:blog.pageType == &quot;item&quot;’> 

<div id=’related-posts’> 

<b:loop values=’data:post.labels’ var=’label’> 

<script expr:src=’&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=8&quot;’ type=’text/javascript’/></b:loop> 

<script type=’text/javascript’> 

var maxresults=6; 

removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); 

</script> 

</div><div class=’clear’/> 

</b:if> 
*kata “Related Posts” bisa diganti juga dengan “Baca Juga” atau yang lainnya. 
Selesai!

Jangan lupa simpan hasil edit HTML yang sudah Anda lakukan dan cek website atau blog Anda. 

Itulah Cara Buat Link Anchor Text “Related Posts/Baca Juga:” Dalam Artikel  website. Selamat mencoba, semoga berhasil.

Apabila Anda ingin bertanya karena terlalu panjang panduannya, silahkan ber-Email saja (Email Redsobek) agar lebih responsif.

Leave a Reply

Your email address will not be published.

No More Posts Available.

No more pages to load.