Cara Memasang Related Artikel Terkait Di Dalam Postingan

Baiklah Kali ini saya akan berbagi tips blogger mengenai bagaimana cara membuat Related artikel terkait untuk di tengah ataupun didalam postingan. Banyak sekali kegunaan dan keunggulan dari meletakkan artikel terkait di tengah postingan.

Pertama, Mempunyai presentasi klik yang lebih tinggi dari pada related artikel yang berada di bawah postingan. Karena biasanya orang atau para pembaca melihatnya sangatlah sedikit bahkan tidak lebih dari 70%.

Kedua, Lebih Seo karena termasuk kedalam kategori internal link yang bisa menambah kualitas artikel anda. Jadi dengan ini anda tidak perlu membuat internal manual yang sering saya praktekkan sebelum mengetahui cara ini.

Ketiga, Bisa digabungkan dengan script iklan.

Sama halnya dengan related artikel yang biasa, Script ini juga mengamil postingan yang dari satu label yang sama. Untuk anda yang ingin mempraktekkanya saya sarankan untuk memback-up terlebih dahulu template anda, untuk mengantisipasi hal yang tidak diinginkan di kemudain waktu.

Cara membuat related artikel ini cukup mudah. Anda hanya peru mengikuti instruksi yang akan saya berikan beriukut ini:

1. Seperti biasa buka blogger, lalu masuk ke tema dan pilih edit html. Copy dan pastekan script berikut ini diatas </head>

<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<3){document.write('<li><a href="'+relatedUrls[r]+'">'+relatedTitles[r]+'</a></li>');if(r<relatedTitles.length-1){r++;}else{r=0;}
i++;}
document.write('</ul>');document.write();};
//]]>
</script>.

2. Search kode <data:post.body/> (Yang Ketiga Biasanya), tapi jika tidak muncul coba satu persatu saja.

<div class='inline_wrapper' id='inline_wrapper'>
<div class='related-post-by-title'>
<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>
<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>

3. Agar tampilannya bisa di kustomisasi anda bisa menambahkan script CSS berikut ini pada template anda dengan cara copy scriptnya setelah itu letakkan sebelum kode ]]></b:skin>. Disini ada 3 desain yang akan saya berikan dan silahkan anda pilih desain yang mana yang sesuai untuk anda.

• Style 1

/* related and ads on middle postpage */
#inline_wrapper{display:block;padding:0;margin:0 auto}
.related_inline_wrapper{width:100%;display:block;overflow:hidden}
.related-post-by-title{width:60%;position:relative;display:block;border:1px solid #DDD;margin:20px 0}
.related-post-by-title ul{padding:7px;list-style:yes}
.related-post-by-title h4{display:inline-block;background:#fff;z-index: 99;padding:0 15px;margin:0;position:absolute;top:-12px;left:40px;font-size:15px;font-weight:700}
.related-post-by-title li a{font-size:14px;font-weight:700!important;margin-top:10px!important}
.ads_middle{margin:15px auto 0;padding:0;text-align:center;display:block;position:relative;}
.ads_middle span{background:#ddd;color:#999;display:none!important;margin:15px 0 0;padding:0 9px!important;float:left;font-size:12px;}
@media screen and (max-width:600px){.related-post-by-title{width:100%;}}

• Style 2

/* Related Post Style 2 */
.related-post-by-title{position:relative;padding:0;margin:15px auto;width:100%;}
.related-post-by-title h4{background:#3498db;padding:8px 12px;margin:0;font-size:15px;font-weight:400;color:#fff;border:1px solid #2e88c5}
.related-post-by-title ul{margin:0;padding:0}
.related-post-by-title 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-post-by-title ul li:nth-child(odd){background:#fefefe}
.related-post-by-title ul li:last-child{border-bottom:1px solid rgba(0,0,0,0.1)}
.related-post-by-title ul li:before{content:'\f138';font-family:fontawesome;position:absolute;margin:0 9px 0 4px;color:#2ecc71;overflow:hidden;transition:all .3s}
.related-post-by-title ul li:hover:before{content:'\f138';font-family:fontawesome;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
.related-post-by-title a{color:#0383d9;font-size:13px;margin:0 0 0 30px;}
.related-post-by-title a:hover{color:#0383d9;text-decoration:underline}
.related-post-by-title 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)}}

• Style 3

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

4. Silahkan Simpan template tapi jangan di tutup dulu, tunggu setelah anda melihat hasilnya sudah bekerja maka sudah bisa anda tutup.

Oke, Sekian saja tutorial or tips mengenai bagaimana cara membuat related artikel atau artikel terkait untuk di dalam postingan. Sebelumnya saya menutup, terima kasih kepada arlina deisgn yang jadi inspirator artikel ini.