Cara Membuat Artikel Terkait Tanpa Gambar Terbaru 2015

Artikel terkait - Banyak sekali cara untuk meningkatkan pageview halaman blog kita. Salah satunya yaitu dengan memasang artikel terkait, baik itu secara manual maupun otomatis. Untuk membuat artikel terkait secara manual, kita bisa menggunakan model text link. Sedangkan untuk membuat artikel terkait secara otomatis, kita bisa menggunakan script atau kode html yang akan saya ulas dalam artikel ini. Untuk jenis artikel terkait sendiri ada dua macam yaitu artikel terkait dengan gambar dan artikel terkait tanpa gambar. Artikel terkait tanpa gambar yaitu hanya menampilkan judul artikel dan beberapa baris paragraf pertama dari artikel tersebut. Kalau artikel terkait dengan gambar yaitu didepan judul dan deskripsi artikel terdapat gambar yang ada di dalam artikel tersebut. Untuk membuat artikel dengan gambar akan saya bahas pada kesempatan berikutnya.

Sebelum saya tahu kegunaan artikel terkait untuk meningkatkan pageview halaman blog, saya hanya memasang artikel terkait sebagai hiasan atau lebih tepatnya agar seperti blogger-blogger lainnya. Setelah tahu gunanya seperti itu, akhirnya saya berusaha membuat artikel terkait dan meletakkannya sedemikian rupa agar mempermudah para pengunjung untuk memilih beberapa artikel yang saling berhubungan.

Untuk template default atau bawaan blogspot, memang belum disediakan fasilitas tersebut. Namun untuk template-template gratis yang didapat dari download, hampir semuanya sudah menyediakan fasilitas artikel terkait dengan berbagai macam model dan gaya. Namun ada juga template yang memang sengaja tidak menyertakan fasilitas artikel terkait. Nah, bagi anda yang blognya sudah mendapatkan traffic lumayan dan belum ada fasilitas artikel terkaitnya silahkan ikuti langkah-langkahnya dibawah ini jika anda berminat.

Membuat Artikel Terkait Tanpa Gambar Di Bawah Artikel

1. Login ke akun blog anda

2. Masuk bagian Template lalu klik Edit HTML

3. Cari kode ]]></b:skin> dengan menggunakan CTRL+F agar lebih cepat

4. Copy kode dibawah ini, dan paste tepat di atas kode ]]></b:skin>

<!-- Artikel Terkait laresawoo.blogspot.com Start -->
#related-postsku{float:left;width:100%;margin-top:5px;margin-left:0px;font-size:13px;font-family:Arial,serif;margin-bottom:0px;}
#related-postsku a{text-decoration:none;}
#related-postsku a:hover{text-decoration:none;}
#related-postsku ul{border:medium none;margin:10px 0px 10px 0px;padding:0;}
#related-postsku ul li{display:block;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQQcnIAZLQLUR1jw8TQFsiKqPtb68JnWHgbsWI2NYHgofnI84oI8frcZM9dtmgmeoGfWmjKlC7DiW1A9o10pWL5YYwVdRg9m7_R0bBVcnIOABNg1wbpTmX4EdEX36lwjObX4sfpeK2hqG5/s1600/icon+related+post1.png") no-repeat 0 0;margin:0;padding-top:0;padding-right:0;padding-bottom:1px;padding-left:30px;margin-bottom:5px;line-height:2em;border-bottom:1px dotted #cccccc;}

<!-- Artikel Terkait laresawoo.blogspot.com End -->

5. Lalu cari kode </head> dan copy kode dibawah ini lalu pastekan di atas kode </head>

<!-- Laresawoo.blogspot.com Related Post Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++;break;}}}}
function removeRelatedDuplicates(){var tmp=new Array(0);var tmp2=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];}}
relatedTitles=tmp2;relatedUrls=tmp;}
function contains(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false;}
function printRelatedLabels(){var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;document.write('<ul>');while(i<relatedTitles.length&&i<20){document.write('<li><a href="'+relatedUrls[r]+'">'+relatedTitles[r]+'</a></li>');if(r<relatedTitles.length-1){r++;}else{r=0;}
i++;}
document.write('</ul>');}//]]>
</script>
</b:if>
<!-- Laresawoo.blogspot.com Related Post End -->

6. Kemudian cari kode <div class='post-footer'>. Jika ada lebih dari 1 pilih yang nomer 2, lalu copy kode dibawah ini dan paste tepat di atas kode <div class='post-footer'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-postsku'>
<font style='font-size:19px;color:#CC333B;font-family:Arial;'><b>Artikel Terkait: </b>
</font><font color='#fff'><b:loop values='data:post.labels' var='label'><data:label.name/>
<b:if cond='data:label.isLast != &quot;true&quot;'/><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/>
</b:if></b:loop></font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();</script>
</div>
</b:if>

Keterangan kode html dari atas sampai bawah

• Ganti https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQQcnIAZLQLUR1jw8TQFsiKqPtb68JnWHgbsWI2NYHgofnI84oI8frcZM9dtmgmeoGfWmjKlC7DiW1A9o10pWL5YYwVdRg9m7_R0bBVcnIOABNg1wbpTmX4EdEX36lwjObX4sfpeK2hqG5/s1600/icon+related+post1.png (icon didepan judul artikel) dengan URL gambar anda jika tidak sesuai.
• 19px = ukuran tulisan Artikel Terkait
• #CC333B = warna tulisan Artikel Terkait
• Artikel Terkait: = ganti kata-kata sesuai selera kita
• 5 = jumlah artikel yang ditampilkan

Setelah semuanya dirasa sudah pas, silahkan save template anda. Lalu buka salah satu artikel yang ada di blog, lihat apakah ada tambahan artikel terkait di bagian bawah artikel. Jika sudah muncul berarti sudah benar. Kurang lebih model artikel terkaitnya seperti yang ada ada blog ini. Selamat mencoba dan semoga sukses. 

Artikel Menarik Lainnya

• Tweet
• Share
• Share
• Share
• Share