Cara Memasang Artikel Terkait dengan Gambar dan Deskripsi di Blog

Cara Memasang Artikel Terkait dengan Gambar dan Deskripsi di Blog | Memasang widget artikel terkait diblog merupakan salah satu langkah penting agar pengunjung blog betah. Sementara itu, menurut beberapa blogger senior, memasang artikel terkait atau related post juga dapat menambah seo.

Beranjak dari pentingnya memasang related post di sebuah blog, kali ini saya akan berbagi tips atau cara memasang artikel terkait dengan gambar dan deskripsi di blog yang pastinya keren. Untuk cara pemasangannya simak baik-baik yaw.
1. Masuk dasbor blog sobat
2. Klik template dan klik edit HTML
3. Cari kode ]]></b:skin> untuk mempermudah pencarian gunakan CTRL+F
4. Setelah ketemu, copy dan pestekan kode di bawah ini tepat di atas kode ]]></b:skin>

/* ==== Related Post Widget Start ==== */
.related-post {
margin:14px 0 8px;
font:normal normal 11px/1.4 Arial,Sans-Serif;
}
.related-post h4 {
font-family:"Oswald",Verdana,Sans-serif;
font-weight:normal;
text-transform:uppercase;
margin:0 0 4px;
font-size:14px;
color:#666;
}
/* Style 2 */
ul.related-post-style-2 {
padding:0 0 0 0 !important;
}
.related-post-style-2,
.related-post-style-2 li {
margin:0 0 0 0;
padding:0 0 0 0;
list-style:none;
}
.related-post-style-2 li {
padding:6px 0;
border-top:1px dotted #eee;
overflow:hidden;
}
.related-post-style-2 li:first-child {border-top:none}
.related-post-style-2 .related-post-item-thumbnail {
width:40px;
height:40px;
max-width:none;
max-height:none;
background-color:transparent;
border:none;
padding:0;
float:left;
margin:2px 6px 0 0;
}
.related-post-style-2 .related-post-item-title {
font-weight:bold;
font-size:110%;
}
.related-post-style-2 .related-post-item-summary {
display:block;
overflow:hidden;
}
.related-post-style-2 .related-post-item-more {}
/* ==== Related Post Widget End ==== */

5. Selanjutnya cari kode <data:post.body/> atau <div class='post-body'> setelah itu copy dan pastekan kode dibawah ini tepat di bawah code <data:post.body/> atau <div class='post-body'>

<b:if cond='data:blog.pageType == "item"'>
<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'>
          "<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if>
      </b:loop></b:if>];
  var relatedPostConfig = {
      homePage: "<data:blog.homepageUrl/>",
      widgetTitle: "<h4>
Related Post:</h4>
",
      numPosts: 5,
      summaryLength: 100,
      titleLength: "auto",
      thumbnailSize: 40,
      noImage: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBLhKlhEgHGkLEwltoPbjHT3Aw8pMuMp3QBWUjq1cCUlX0EIrX0zi-mEyVuPdQFE73bDI4O23SLHZtLMpfu16xTdZ02Dr4-rDlUBGRFBYoasSTbB3X0t5IgCXPyvpp0RNj3c81yyDNvFA/s40/picture_not_available.png",
      containerId: "related-post",
      newTabLink: false,
      moreText: "Read More",
      widgetStyle: 2,
      callBack: function() {}
  };
  </script>
  <script src='https://dl.dropboxusercontent.com/u/122336262/JavaScript/related-post.min.js' type='text/javascript'/>
</b:if>

6. Klik save, artikel terkait dengan gambar dan deskripsi sudah jadi.

Mudah bukan sobat cara memasang artikel terkait dengan gambar dan deskripsi di blog, semoga cara di atas dapat bermanfaat. Selamat mencoba!!

Tag artikel : Cara Memasang Artikel Terkait dengan Gambar dan Deskripsi di Blog, Cara memasang widget related post bergambar dengan deskripsi singkat di blogspot, artikel terkait keren dan elegan di blog