cara pasang realeted post tumb plus title

Sahabat- hari jumat ini anna berbagi dengan sahabat cara membuat realeted post dengan hanover bergambar.
apa sih realeted post?
realeted post adalah artikel terkait muncul di dalam postingan sahabat tentunya yang sudah di beri category atau label. nah dari  perbedaan kali ini yang telah anna posting yang sebelumnya baca juga sahabat Artikel terkait nah kali ini ketika mause bersentuhan dengan link maka akan ada efek tumbl dan title post
lihat gambar di bawah ini sahabat

setelah sahabat melihat gambar di atas mau menggunkanya ya untuk mencoba saja sahabat gimana?
langsung ajja g usah pikir-pikir lagi
login ke blog sahabat.
lalu ke layout klik tamplate dan ediet HTML.
temukan kode ]]></b:skin> setelah ketemu kodenya silahkan sahabat tempelkan kode di bawah ini tepat di atasnya atau sebelumya kode tersebut.

.related-post { margin:2em auto 0; font:normal normal 11px/1.4 Arial,Sans-Serif; }
.related-post h3 { font-size:150%; margin:0 0 .5em;font-family: 'Fugaz One', cursive; }
.related-post-style-6 li {position:relative}
.related-post-style-6 .related-post-item-thumbnail { width:80px; height:80px; max-width:none; max-height:none; background-color:transparent; border:none; padding:0; -webkit-border-radius:0px; -moz-border-radius:0px; border-radius:0px; float:left; margin:0 10px 0 0; }
.related-post-style-6 .related-post-item-title { display:block; font-weight:bold; }
.related-post-style-6 .related-post-item-summary { display:block; overflow:hidden; font-size:11px; }
.related-post-style-6 .related-post-item-tooltip { position:absolute; bottom:100%; left:-10px; z-index:999; margin-bottom:10px; border:1px solid #bbb; background-color:white; padding:10px; width:90%; height:auto; -webkit-box-shadow:0 1px 3px rgba(0,0,0,.2); -moz-box-shadow:0 1px 3px rgba(0,0,0,.2); box-shadow:0 1px 3px rgba(0,0,0,.2); -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px; display:none; }
.related-post-style-6 .related-post-item-tooltip:before, .related-post-style-6 .related-post-item-tooltip:after { content:""; display:block; width:0; height:0; border:10px solid transparent; border-top-color:inherit; position:absolute; top:100%; left:35px; }
.related-post-style-6 .related-post-item-tooltip:after { border-top-color:white; border-width:9px; margin-left:1px; }
.related-post-style-6 li:hover .related-post-item-tooltip {display:block}
.related-post a{color:#68363e;font:12px Tahoma}
.related-post li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJD6E63AQkQNjZYFzdoicGWi8og_2cpDvRbgVCsLrwF8Ow9YrDkyvbEenUXzlzIDMB8CzvMN5SOGsYN2r4M_Mk5lRvzFImlmIIScmmEjWk9DBdXB2M0bCQlQjo01V2ug-AuYrduRGDzaLO/s1600/ngaceng2.png) no-repeat 0 10px;text-indent:0;line-height:1.2em;border-bottom:0px dashed #222;margin:0;padding:5px 0 3px 12px}
.related-post a:hover{color:#333;text-decoration:none}
.related-post .widget{margin:0;padding:0}
.related-post ul{list-style:none;margin:0;padding:0}

lalu sahabat temukan kode data:post.body/ setelah ketemu sahabat kan ada bebera kode silahkan sahabat pakai yang terakhir dan letekan kode di bawah ini tepat di bawahnya

<b:if cond="data:blog.pageType == &quot;item&quot;">
  </b:if><br />
<div class="related-post" id="related-post">
<script type="text/javascript">
  var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
          &quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
      </b:loop></b:if>];
  var relatedPostConfig = {
      homePage: &quot;<data:blog.homepageUrl/>&quot;,
      widgetTitle: &quot;&lt;h4&gt;BERITA TERKAIT:&lt;/h4&gt;&quot;,
      numPosts: 7,
      summaryLength: 370,
      titleLength: &quot;auto&quot;,
      thumbnailSize: 80,
      noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,
      containerId: &quot;related-post&quot;,
      newTabLink: false,
      moreText: &quot;Read More&quot;,
      widgetStyle: 6,
      callBack: function() {}
  };
  </script>
  <script src="http://blogger-json-experiment.googlecode.com/svn/resources/related-post/related-post.min.js" type="text/javascript">
</b:if>

    <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
</b:if>

setelah itu silahkan sahabat SAVE dan lihat hasilnya untuk melihat hasilnya silahkan sahabat buka salah satu postingan sahabat atau bisasilahkan sahabat  buka blog yang satu ini