MEMBUAT RELATED POST KEREN UNTUK TEMPLATE CONTEMPO

Related post untuk template contempo dan template terbaru Blogger lainnya tentu sudah banyak yang menulisnya, akan tetapi bentuknya sangat bersahaja, maka itu saya mencoba membuat atau mendesain satu Related Post yang lebih "Stylish" tanpa menghilangkan unsur kesederhanaanya. Mari kita memasangnya.

Langkah pertama:
Cari kode <data:post.body/> letakan kode yang telah saya modifikasi ini dibawahnya:

<br/><br/><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<font face='Arial' size='4'><b><i aria-hidden='true' class='fa fa-american-sign-language-interpreting fa-2x gradient-icon'>Related Posts</i> : </b></font><font color='#000'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><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>

Catatan: 
Sengaja saya lakukan modifikasi ini agar model related post untuk Tema contempo tidak monoton, kalau anda lihat saya memasukan elemen fa fa awsome, artinya anda juga harus memastikan template anda telah terpasang kode fa fa awsome di atas kode </head> kodenya adalah:

<link href='https://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

Namun jika di template contempo anda sudah ada kode diatas sebelumnya, lebih baik abaikan saja langkah ini.

Langkah Kedua: Cari kode </head> dan lalu letakan kode dibawah ini diatasnya:

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

Langkah ketiga: Cari kode ]]></b:skin> dan copy lalu pastekan kode dibawah ini diatasnya:

.gradient-icon {
    background: -webkit-gradient(linear, left top, left bottom, from(#1E90FF), to(#FFC0CB));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: initial;
}

Save Template.


Comments

  1. keren mas bisa di coba

    ReplyDelete
    Replies
    1. Silahkan, Saya sedang membuat 3 model khusus buat 4 jenis template terbari bloggger

      Delete
  2. saya suka dengan tambahan kode AWSome tampak lebih keren gitu.

    ReplyDelete
    Replies
    1. Benar, awsome adalah salah satu elemen penting dalam web desain..

      Delete
  3. Wah, mantap ini! Sangat berguna bagi teman-teman yang menggunakan template Contempo bawaan Blogger. Kemarin di kelas blogging ada yang nanya tapi bukan related post melainkan kutipan/quote yang bisa tampil menarik. Anyhoo, tengkyu.

    ReplyDelete

Post a Comment