Cara menambahkan "Baca Juga" atau Artikel Terkait Pada Setiap Artikel Blog


July 07, 2017

Kali ini Saya akan berbagi cara membuat widget related post atau artikel terkait di dalam postingan secara otomatis. Kalian pasti juga tau blogger juga menyediakan widget related post pada Gadget di bagian tata letak dashboard blogger, mungkin Kalian juga merasa bosan denga tampilan versi blog, bagaimana jika kita membuat related post versi kita sendiri?

Trik ini bermanfaat agar pengunjung blog agar bisa menjelajahi artike terkait dengan mudah, dan trik ini bisa menaikkan angka page views pada blog kalian.

Caranya ternyata memang simpel jadi bagi kalian yang ingin memasang Related Post pada setiap postingan cukup ikuti langkah langkah berikut ini

Cara memasang

1. Pertama

Letakkan kode di bawah ini pada sebelum kode </head>

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

2. Langkah selanjutnya

Coba cari kode <data:post.body/> jika kode tersebut ada banyak, coba satu persatu aja


<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='post-terkait'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<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=3&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<h4>Baca Juga</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
<div expr:id='&quot;post2&quot; + data:post.id' class='artbody' itemprop='articleBody description'><data:post.body/></div>
<script type='text/javascript'>
var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
var s=obj1.innerHTML;
var t=s.substr(0,s.length/3);
var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>

3. Langkah terakhir styling

Cari kode </b:skin> atau jika ingin ditempatkan style, cari kode </style>. Untuk styling bisa dikembangkan sendiri.


/* Related Post di dalam postingan by Bung Frangki */
.post-terkait {position:relative;background:#fff;padding:0;margin:10px 15px 0 0;float:left;width:165px;border:1px solid #1b71bc}
.post-terkait h4{background:#1b71bc !important;padding:5px 0 !important;margin:0;text-align:center !important;font-size:15px !important;font-weight:400;text-transform:uppercase;color:#fff !important}
.post-terkait ul {margin:0;padding:0}
.post-terkait ul li {list-style:none !important;padding:7px 0;margin:0 7px;border-bottom:2px dotted #ddd;line-height:1.4em !important;text-align:left !important}
.post-terkait ul li:last-child{border:none !important}
.post-terkait a {color:#1b71bc;font-size:13px !important}
.post-terkait a:hover {text-decoration:underline}

Untuk css yang Saya (seperti di gambar)Pakai saja ini


/* Related by KuroMan.Net */
.related-simplify h4{display:inline-block;}[class~=related-simplify],.related-simplify h4{margin-left:0in;}.related-simplify h4{margin-bottom:0in;}[class~=related-simplify],.related-simplify h4{margin-right:0in;}.related-simplify h4{margin-top:0in;}.related-simplify h4{padding-left:.104166667in;}.related-simplify h4{padding-bottom:0in;}.related-simplify h4{padding-right:.104166667in;}.related-simplify h4{padding-top:0in;}.related-simplify h4{background:#fff;}.related-simplify h4{position:absolute;}.related-simplify h4{top:-.9375pc;}.related-simplify h4{left:.520833333in;}[class~=related-simplify] ul{border-left-width:.75pt;}[class~=related-simplify] ul{border-bottom-width:.75pt;}[class~=related-simplify] ul{border-right-width:.75pt;}[class~=related-simplify] ul{border-top-width:.75pt;}[class~=related-simplify] ul{border-left-style:solid;}[class~=related-simplify] ul{border-bottom-style:solid;}[class~=related-simplify] ul{border-right-style:solid;}[class~=related-simplify] ul{border-top-style:solid;}[class~=related-simplify] ul{border-left-color:#9bc1ff;}[class~=related-simplify] ul{border-bottom-color:#9bc1ff;}[class~=related-simplify] ul{border-right-color:#9bc1ff;}[class~=related-simplify] ul{border-top-color:#9bc1ff;}[class~=related-simplify] ul{border-image:none;}[class~=related-simplify] ul{padding-left:15pt;}[class~=related-simplify] ul{padding-bottom:15pt;}[class~=related-simplify] ul{padding-right:15pt;}[class~=related-simplify] ul{padding-top:15pt;}[class~=related-simplify] ul{list-style-position:inside;}[class~=related-simplify] a{transition:1.5s;}[class~=related-simplify]{margin-bottom:1.875pc;}[class~=related-simplify]{margin-top:1.875pc;}[class~=related-simplify]{position:relative;}[class~=related-simplify] a:hover{color:#ff5656;}

4. Langkah terakhir

Save templatenya biar aman

Note Tutorial kali ini saya dapat dari http://www.bungfrangki.com/2015/12/membuat-related-pos-dalam-postingan.html

No comments:

Post a Comment