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

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.

0 Response to "Cara Buat Link Anchor Text “Related Posts/Baca Juga:” Dalam Artikel "

Post a Comment

Iklan Atas Artikel

OM Swastyastu, OM Awighnamastu Namo Siddham, OM Siddirhastu Tad Astu Svaha, 
OM Hrang Hring Sah Parama Sivaditya Ya Namah.

Kami Sebagai Publisher Online Menghaturkan Pangaksama Permohonan Maaf Ke Hadapan Ida Sanghyang Widhi Wasa (Ida Sanghyang Parama Kawi) Beserta Bhatara-Bhatari Leluhur Serta Junjungannya, Tatkala Kami Menceritakan Keberadaan Para Leluhur Yang Sudah Menempati Nirwana, Kiranya Kami Terlepas Dari Kutuk Neraka Apabila Kami Menyebarkan Informasi Dari Berbagai Sumber Yang Kurang Tepat Atau Adanya Kekeliruan. 

OM Tat Pramadat Ksama Svamam Ya Namah. OM Shanti, Shanti, Shanti OM.

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel