cara memasang artikel terkait dalam postingan blog

baca cermati dan pahamilah lalu terapkan semoga bermanfaat
CARA MEMASANG ARTIKEL TERKAIT DALAM POSTINGAN BLOG





    Oke sobat kembali lagi di situs blog sarjana beraksi. untuk kali ini admin akan memberikan sebuah tutorial atau informasi berupa bagaimana cara membuat atau memasang sebuah fitur artikel terkait pada postingan blog.

     Apa tujuan di buat artikel terkait ini ? yak tujuan nya adalah untuk membuat pengunjung atau pembaca di situs blog yang kita miliki tersebut menjadi lebih mudah untuk mengetahui artikel atau postingan lain nya yang ada di situs blog yang kita miliki.

     Apa efek bila kita memasang fitur ini ? yak efek nya adalah situs kita menjadi lebih menarik dan juga lebih keren tentu nya , tetapi di balik itu semua ada dampak negatif nya juga yaitu menjadikan situs blog yang kita menjadi lebih sedikit lelet dalam hal loading nya. tetapi itu tidak terlalu berpengaruh.

    Nahh mungkin sobat bertanya - tanya bagaimana cara memasang nya , Di sini admin akan memberikan cara nya. untuk lebih jelas nya silahkan sobat ikuti langkah - langkah berikut.




1. Sobat pertama buka blog sobat dan masuk ke dalam dashbord nya. lalu pilih tema dan edit html . yak dalam hal ini admin yakin sobat pasti sudah paham.

2.cari kode </head> gunakan ctrl + f untuk memudahkan pencarian. setelah ketemu kode tersebut lalu sobat copy kode di bawah ini tepat di atas kode </head>


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
var relatedSimply = new Array(); var relatedSimplyNum = 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]; relatedSimply[relatedSimplyNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedSimplyNum] = entry.link[k].href; relatedSimplyNum++; 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] = relatedSimply[i];}} relatedSimply = 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((relatedSimply.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedSimply.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedSimply[r] + '</a></li>'); if (r < relatedSimply.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}
//]]>
</script>
</b:if>



3. setelah itu sobat cari kode ]]></b:skin> atau </style> dan bila sudah ketemu copy kan kode di bawah ini tepat sebelum atau di atas  kode ]]></b:skin> atau </style>


/* Related Post Style 2 */
.related-simplify{position:relative;padding:20px 12px 12px 12px;margin:32px auto 24px auto;width:93%;border:4px double rgba(0,0,0,0.2)}
.related-simplify h4{background:#fff;padding:8px 10px;position:absolute;margin:0;font-size:17px;font-weight:700;color:#000;top:-21px;left:2.5%}
.related-simplify ul{margin:0;padding:0}
.related-simplify ul li{position:relative;list-style:none;padding:9px 0;margin:auto;line-height:1.4em;transition:all .3s}
.related-simplify ul li:before{content:'\f0c8';font-family:fontawesome;position:absolute;margin:0 5px 0 2px;color:rgba(0,0,0,0.5);overflow:hidden;font-size:60%;left:10px;transition:all .3s}
.related-simplify ul li:hover:before{content:'\f0c8';font-family:fontawesome;color:#0383d9;}
.related-simplify a{color:#000;font-size:14px;margin:0 0 0 30px;}
.related-simplify a:hover{color:#0383d9;}
.related-simplify ul li:nth-child(n+4) {display:none;}
@media only screen and (max-width:768px){
.related-simplify{padding:15px 0 10px 0;width:100%;border:2px solid #e74c3c;border-left:0;border-right:0}
.related-simplify h4{color:#e74c3c;padding:8px;font-size:15px;top:-18px;left:3.5%}
.related-simplify a{font-size:14px;margin:0}.related-simplify a:hover{color:#e74c3c}
.related-simplify ul li{padding:5px 0}
.related-simplify ul li:before,.related-simplify ul li:hover:before{display:none}}


4. Setelah itu sobat cari kode <data:post.body/> biasa nya setiap tamplet blog mempunyai lebih dari satu kode tersebut jadi sobat coba saja satu per satu, tetapi saran admin copy kan saja code di bawah ini tepat di bawah kode <data:post.body/> yang kedua.


<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='related-simplify'>
<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'><p><data:post.body/></p></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/2);
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>


5. Bila sudah sobat tinggal save tamplet dan lihat hasil nya.

    Oke sobat mungkin cukup sekian sedikit informasi dan tutorial dari admin, bila sobat ada yang belum paham sobat boleh meninggalkan komentar sobat di situs blog ini. selamat mencoba dan semoga berhasil.

loading...

0 Comments

Silahkan berikan komentar anda tentang artikel dan situs blog ini.
Terima kasih telah berkunjung
EmoticonEmoticon