Cara memasang artikel terkait di dalam postingan


Install APK purjianto
PURJIANTO.WEB.ID sangatta Kutai Timur - Bercerita tentang pengalaman saya ketika bersama teman teman saya di kampus dan di kampung halaman ketika masih muda dulu kadang membuat saya tertawa, kehebohan kami itu lah yang sering saya ingat. Setelah bercerita tentang cerita kami di sanga sanga dan indahnya masa kuliah, sekarang saya akan berbagi artikel tentang Cara memasang artikel terkait di dalam postingan, sebagian dari blogger saya perhatikan masih menggunakan cara manual. Sekarang saya akan memberikan cara agar postingan yang satu label menjadi artikel terkait di dalam postingan pada blog.


Cara memasang artikel terkait di dalam postingan


Alangkah mudahnya jika ketika membuat artikel terus langsung bisa masuk ke dalam postingan berupa judul postingan kita yang telah lewat dan tentunya kalian harus memasang label dulu atau masukkan artikel kalian kedalam daftar isi dengan memberikan label pada artikel kalian.
Untuk kalian yang belum pernah memasangnya, bisa kalian simak artikel saya berikut ini dan bisa langsung kalian praktikkan ke dalam blog kalian.

# Langkah 1 Cara memasang artikel terkait di dalam postingan
Cari code </head> di dalam tubuh blog kalian lalu masukkan code di bawah ini tepat diatas code </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>

# Langkah 2 Cara memasang artikel terkait di dalam postingan
Tambah CSS nya berikut ini sebelum code ]]></b:skin> atau </style>
/* Related Post Style 1 */
.related-simplify{position:relative;padding:0;margin:15px auto;width:100%;}
.related-simplify h4{background:#3498db;padding:8px 12px;margin:0;font-size:15px;font-weight:400;color:#fff;border:1px solid #2e88c5}
.related-simplify ul{margin:0;padding:0}
.related-simplify ul li{background:#f6f6f6;position:relative;list-style:none;padding:9px;margin:auto;line-height:1.4em;border:1px solid rgba(0,0,0,0.1);border-bottom:0;transition:all .3s}
.related-simplify ul li:nth-child(odd){background:#fefefe}
.related-simplify ul li:last-child{border-bottom:1px solid rgba(0,0,0,0.1)}
.related-simplify ul li:before{content:'\f138';font-family:fontawesome;position:absolute;margin:0 9px 0 4px;color:#2ecc71;overflow:hidden;transition:all .3s}
.related-simplify ul li:hover:before{content:'\f138';font-family:fontawesome;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
.related-simplify a{color:#0383d9;font-size:13px;margin:0 0 0 30px;}
.related-simplify a:hover{color:#0383d9;text-decoration:underline}
.related-simplify ul li:nth-child(n+4) {display:none;}
@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}
@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}

# Langkah 3 Cara memasang artikel terkait di dalam postingan
Sebelumnya kalian harus memasang dulu Font Awesome ke dalam tubuh blog kalian agar simbol didepan artikel terkait muncul, caranya silahkan masukkan code berikut dibawah </head>

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

# Langkah 4 Cara memasang artikel terkait di dalam postingan
Silahkan cari code <data:post.body/> biasanya ada 2 sampai 3 kode tersebut, pilih yang ke 2 dan ganti code <data:post.body/> dengan script di bawah ini.

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

 # Langkah 5 Cara memasang artikel terkait di dalam postingan
Setelah langkah 1 dan langkah 2 kalian selesaikan, tugas terakhir kalian adalah save template dan silahkan lihat hasil dari pemasangan script kalian tadi. (09/02/2017)

2 comments