Cara mudah Membuat Related Pos di Blog

Cara Mudah Membuat Related Pos di Blog - Fungsi Reladet Pos pada sebuah Blog adalah untuk Merekomendasikan Ke pengunjung Blog kita Artikel yang terkait dengan Artikel yang sedang di baca oleh pengunjung Blog kita

Dengan adanya Related Post ini maka secara tidak langsung akan menarik minat pengunjung Blog kita untuk membaca ke seluruhan Artikel kita yang terkait dengan kategori yang sama, .Nah untuk tutorial kali ini saya akan coba menjelaskan tentang membuat Related pos hanya berbentuk judul artikel saja seperti Foto di atas. karena menurut saya dengan related pos yang memuat judul artikel saja, sangat ringan sekali terhadap loading Blog kita, dan tentunya Related yang saya buat ini Responsive dong. Langsung saja Ini dia cara cara nya

CARA CARA


1. seperti biasa anda masuk dulu ke halaman utama Blog anda

2. kemudian Klik Tema lalu klik lagi edit Html
3. jika sudah terbuka editor Html nya lalu Tempel kan kode di bawah ini tepat di atas kode ]]></bskin>

/* 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. kemudian letakan kode di bawah ini tepat di atas kode </head>

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js' type='text/javascript'/>

Note: jika anda sudah menggunakan Jquery versi lain lewati saja langkah di atas, karena bisa menyebabkan loading blog sangat lambat.

5. letakan Kode di bawah ini tepat di atas kode </head>

<!-- Artikel Terkait Start Bro-->
<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 Bro-->

6.Langkah terakhir silahkan anda letakan kode di bawah ini 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>

7.Jika sudah Selesai, silahkan simpan Template anda, lalu lihat hasilnya. pasti akan bagus.

Nah itulah sedikit Penjelasan Mengenai Cara mudah Membuat Related pos Di Blog, semoga artikel saya bermanfaat bagi anda, yang sedang membangun Blog ya.

Berlangganan update artikel terbaru via email:

0 Response to "Cara mudah Membuat Related Pos di Blog"

Post a Comment

Iklan Tengah Artikel 2