Related Post Anitoki Versi Blogger

Tutorial kali ini ane akan membagikan Bagaimana Cara Membuat Related Post Anitoki Versi Blogger, artikel ini ane buat dengan beberapa fitur seperti responsive dan sudah otomatis, tutorial ini bisa diibaratkan makanan cepat saji, karena kamu tinggal pasang langsung jadi.

Fungsi related post adalah untuk mempermudah pengunjung blog melihat artikel atau isi blog tanpa harus kembali kehalaman awal. Related post blogger memiliki banyak model, seperti menggunakan related post thumbnail, related post simple, related post blogger ditengah post. Related Post Anitoki Versi Blogger memiliki model yang beda dari blog yang lain, karena artikel ini ane edit sendiri. Ok kita mulai saja tutorial ini.

1. Buka Blogger > Tema > Edit HTML, Cari <b:includable id='postQuickEdit' var='post'>...</b:includable>
2. Simpan HTML berikut dibawahnya

      <b:includable id='related-post_arlethdesign' var='post'>
<style>/*<![CDATA[*/
/* Related Post Anitoki Versi Blogger by Arlethdesign
   =================================================== */
#related-postz{background:#fefefe;margin:5px auto;clear:both;overflow:hidden;padding:10px;}
#related-postz .rel-left{float:left;width:49.5%;overflow:hidden}
#related-postz .rel-left .rel-left-img{float:left;overflow:hidden;margin-right:10px}
#related-postz .rel-left .rel-left-img img{height:171px;max-width:116px;border:1px solid #ccc;}
#related-postz .rel-left-inf{overflow:hidden}
#related-postz .rel-left-inf span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;margin:.3em 0;line-height:21px;}
#related-postz .rel-left-inf p{margin:auto;font-size:12px;white-space:normal}
#related-postz .rel-right{float:right;width:49.5%;}
#related-postz .rel-right ul,#related-post .rel-right li{list-style:none!important}
#related-postz .rel-right ul{margin:auto;padding:0}
#related-postz .rel-right li{margin:auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border-bottom:1px solid #ccc;}
#related-postz .rel-right li a{color:#333;overflow:hidden;text-overflow:ellipsis;display:block;padding:6.7px 6px;background:#f1f1f1;font-weight:500;font-size:12px;text-decoration:none;}
#related-postz .rel-right li a:hover{background:#2693f1;color:#fff;transition:.2s linear;-moz-transition:.2s linear;-webkit-transition:.2s linear;}
#related-postz .rel-right li{display: block;}
@media screen and (max-width:640px){
#related-postz .rel-left,#related-postz .rel-right{float:none;width:auto;}
#related-postz:before{content:'Related Post';font-weight:700;font-size:15px;margin-bottom:13px;padding-bottom:5px;display:block;text-align:center;border-bottom:2px solid #333}
#related-postz .rel-left-inf p{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;}}
/*]]>*/</style>
<div id='related-postz'>
<div class='rel-left'>
<b:if cond='data:post.thumbnailUrl'>
  <div class='rel-left-img'>
    <a expr:href='data:post.url'>
    <img expr:alt='data:post.title' expr:title='data:post.title' expr:src='resizeImage(data:post.thumbnailUrl, 190, &quot;1:1&quot;)'/>
    </a>
  </div>
  <b:else/>
  <b:if cond='data:post.firstImageUrl'>
    <div class='rel-left-img'>
      <a expr:href='data:post.url'>
      <img expr:alt='data:post.title' expr:title='data:post.title' expr:src='data:post.firstImageUrl'/>
      </a>
    </div>
    <b:else/>
    <div class='rel-left-img'>
      <a expr:href='data:post.url'>
      <img expr:alt='data:post.title' expr:title='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTg_MoP1Kjq8wjOFeDhzAEvIWxHKl4-0UOu1A49dn49YgkON2F_5HXR4cVTKyJ5skwi57ai2gVwdC2qsNdffQUXFCv7aEkoowNk67A550UR3aX3_F-GePeVC4KVX8h1H-TpI-iKsy7r9Sl/w110-c-h190/no-thumbnail.png'/>
      </a>
    </div>
  </b:if>
</b:if>
<div class='rel-left-inf'>
  <span><b>Tag :</b> <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>, </b:if></b:loop></b:if></span>
  <span><b>Sinopsis :</b><p><data:post.snippet/></p></span>
</div>
</div>
<div class='rel-right'>
<script type="text/javascript">//<![CDATA[
var max_posts=5;var readpost=true;function reading_post(e){for(var d=0;d<max_posts;d++){var f=e.feed.entry[d];var c=f.title.$t;var b;if(d==e.feed.entry.length){break}for(var a=0;a<f.link.length;a++){if(f.link[a].rel=="alternate"){b=f.link[a].href;break}}c=c.link(b);if(readpost){document.write("<li>")}document.write(c)}if(readpost){document.write("</li>")}};
//]]></script>
<ul><b:loop index='x' values='data:post.labels' var='label'><b:if cond='data:x==0'>
<script type='text/javascript' expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?orderby=published&amp;alt=json-in-script&amp;callback=reading_post&amp;max-results=5&quot;'></script></b:if>
</b:loop></ul>
</div>
</div>
      </b:includable>



3. Contohnya Cek gambar dibawah ini



4. Kemudian simpan HTML berikut untuk menampilkannya

<b:include cond='data:blog.pageType in {&quot;item&quot;}' data='post' name='related-post_arlethdesign'/>
<div class='clear'/>



5. Kalian bisa simpan diantara <b:includable id='post' var='post'>...</b:includable>, lebih tepatnya dibawah share button atau ganti related post blogger kalian.


6. Cari </body> atau &lt;!--</body>--&gt;&lt;/body&gt;, simpan javascript berikut diatasnya, jika sudah save Tema.

<b:if cond='data:blog.pageType in {&quot;item&quot;}'>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function() {$('#related-postz .rel-left .rel-left-img img').attr('src', function(i, src) {return src.replace( 'w190-h190-p-k-no-nu', 'w115-h170-p-k-no-nu' );});});
//]]></script>
</b:if>

Ok sekian tutorial Cara Membuat Related Post Anitoki Versi Blogger, jangan lupa untuk bertanya dan tinggalkan komentar, terima kasih.