Cara Membuat Related Post Dan Iklan Berdampingan

Cara Membuat Related Post Dan Iklan Berdampingan, Related Post atau Artikel Terkait adalah posting atau artikel yang berhubungan dengan artikel lainnya berdasarkan atas kesamaan nama kategori atau label postingan. Berbeda dengan widget Related Post yang lainnya, disini related post saya buat menyatu dengan iklan dan menggunakan Thumbnail atau gambar. Dimana widget ini dibuat sedemikian rupa agar terlihat lebih rapih sehingga penggunjung tidak bosan untuk melihat artikel-artikel yang ada pada blog Anda.

Baca juga : Membuat Responsive Tampilan Video Youtube

Tutorial ini terinspirasi dari salah satu pertanyaan teman pada blog tetangga yang menginginkan related post dengan iklan berdampingan. Sebenarnya sudah banyak yang membuat tutorial ini namun sedikit berbeda dengan yang akan saya bagikan hari, seperti yang telah saya jelaskan di atas.

Silahkan simak cara pembuatannya di bawah ini :

1. Letakkan CSS berikut di atas ]]></b:skin> atau di dalam </style>

#related-redat {
  margin:0;
  padding:15px;
  background:#fff;
  border:1px solid #e8e8e8;
}

.related-box-left {
  width:55%;
  display:inline;
  color:#999;
  min-height:253px;
  background-color:#fff;
  padding:3px;
  border:1px solid #e8e8e8;
}

.related-box-right {
  width:40.5%;
  display:inline;
  color:#999;
  min-height:211px;
  padding:3px;
}

.related-box-left {
  float:right;
  margin:0 0 0 1%;
}

.related-box-right {
  float:left;
  margin:0 1% 0 0;
}

.related-box-left h4,
.related-box-right h4 {
  font-size:100%;
  font-weight:bold;
  line-height:26px;
  text-transform:uppercase;
  text-align:center;
  position:relative;
  z-index:4;
  color:#555;
  padding:2px 0 0;
  margin:0;
}

.related-post {
  margin:0 auto;
  padding:0 0 0 10px;
}

.related-post {
  margin:1.5em auto 0;
  font:normal normal 10px/1.2 Arial,Sans-Serif;
  text-align:center;
  color:#333;
}

.related-post-style-3,
.related-post-style-3 li {
  margin:0;
  padding:0;
  list-style:none;
  word-wrap:break-word;
  overflow:hidden;
}

.related-post-style-3 .related-post-item {
  display:block;
  float:left;
  width:110px;
  height:80px;
  padding:5px;
  margin-right:10px;
  margin-bottom:10px;
  margin-top:0;
  background-color:#fff;
  border:1px solid #e8e8e8;
}

.related-post-style-3 .related-post-item:focus {
  outline:none;
}

.related-post-style-3 .related-post-item-thumbnail {
  display:block;
  margin:0 0 10px;
  width:100%;
  height:40px;
  max-width:none;
  max-height:none;
  background-color:transparent;
  border:none;
  padding:0;
  border-radius:0;
}

.related-post-style-3 .related-post-item-title {
  font-weight:normal;
}

2. Kemudian letakkan code pemanggilnya di bawah ini tepat di bawah <data:post.body/> jika kode tersebut terdapat 2 maka letakkan pada code yang kedua

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-redat'>
<div class='related-box-right' id='rc-post'>

----letakkan kode iklan Anda disini----

</div>
<div class='related-box-left'>
<h4>RELATED POSTS</h4>
<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;,
      numPosts: 6,
      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: 3,
      callBack: function() {}
  };
  </script>
<script async='async' src='https://googledrive.com/host/0B0gvaxdyU-3BNkxFUnVJQlhVak0' type='text/javascript'/>
</div>
<div style='clear: both;'/>
</div>
</b:if>

Catatan : Jika Anda menggunakan iklan Adsense silahkan PARSE terlebih dahulu, kemudian masukkan pada kode yang telah saya blok di atas.

3. Simpan dan lihat hasilnya