April 26, 2016

Cara Menambahkan Artikel Terkait Tanpa Gambar Agar Loading Cepat Pada Blog

Cara Menambahkan Artikel Terkait Tanpa Gambar Agar Loading Cepat Pada Blog, Artikel terkait pada sebuah blog termasuk penting, karena dengan menambahkan artikel terkait terutama di bawah postingan blog kita, maka pengunjung akan dapat mengetahui artikel apa saja yang terkait dengan artikel yang sedang di baca oleh pengunjung Anda dan ini termasuk dalam trik seo untuk meningkatkan page view pada blog kita. Sebenarnya Artikel terkait ini ada yang berupa gambar dan teks, namun dengan menambahkan gambar maka itu dapat memperberat loading pada template blog Anda, otomatis artikel akan membutuhkan waktu lama untuk terbuka secara keseluruhan. Untuk itu saya sarankan kepada Anda yang telah memiliki banyak sekali postingan untuk membuat artikel terkait tanpa gambar dan membatasinya untuk di tampilkan 5 - 10 saja. Untuk langkah - langkah menambahkan artikel terkait pada blog adalah sebagai berikut :

1. Masuk ke draft blogger
2. Klik Template > Edit Html.
3. Cari kode ]]></b:skin>, lalu copy kode di bawah ini, letakkan diatas ]]></b:skin>

Contoh Gambar Artikel Terkait Tanpa Gambar


/* Related Post Cepat
--------------------------------- */
#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://lh3.googleusercontent.com/-6iznc81V_pQ/UcmgB6yKU3I/AAAAAAAABWc/NhxmD6789YU/s25/rss.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;}

4. Lalu cari </head> letakan kode di bawah ini, diatasnya :

<!-- Artikel Terkait 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>
<!-- Artikel Terkait End-->

5. Terakhir cari kode <data:post:body:/> yang kedua, letakan kode dibawah ini, di bawahnya :

<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>

6. Silahkan di lihat Pratinjau dulu, jika template Anda tidak rusak berarti Artikel Terkait telah ada pada blog Anda. Walaupun saat melihat pratinjau belum kelihatan artikel terkait yang anda tambahkan, setelah Anda simpan dan lihat blog maka akan terlihat hasilnya.

Untuk tulisan yang berwarna merah, kuning dan hijau, silahkan ganti menurut keinginan Anda. Contoh artikel terkaitnya dapat Anda lihat pada blog saya ini, warnanya dapat disesuaikan dengan warna tulisan pada Artikel Anda, Artikel terkait ini mengambil contoh dari blog suka-sukaseo.blogspot.com, Selamat mencoba ya