Mengganti Gambar Noimage Related Posts DTE

Gambar Noimage Related Posts DTE
Beraneka ragam cara para blogger dalam membuat postingan. Ada yang membuat postingan dengan teks dan gambar, ada yang hanya menggunakan gambar saja, namun ada juga yang hanya menggunakan teks di dalam postingannya. Jika Anda membuat postingan tanpa menyertakan gambar dan kebetulan menggunakan related post dari DTE yang menampilkan thumbnails, maka akan ada thumbnail kosong dengan background abu-abu. Nah jika Anda ingin menggunakan gambar noimage sendiri, silahkan ikuti caranya.

Untuk related posts sendiri saya selalu menyarankan untuk menggunakan related posts dari DTE karena ini tidak error pada validasi HTML5. Anda juga bisa memodifikasi tampilannya dan juga melengkapinya dengan title tag yang bisa Anda simak pada postingan berikut.
Dan related post ini juga saya gunakan pada template Kompi Banget dan template Kompi Males. Jadi jika Anda menggunakan kedua template tadi dan ternyata related postnya kosong untuk postingan yang tidak ada gambarnya dan ingin menggantinya dengan gambar Anda sendiri, silahkan perbaiki dengan cara di bawah ini.

Sebetulnya alasan menggunakan background abu-abu untuk noimage pada related posts DTE ini adalah agar loadingnya ringan karena sebenarnya background abu-abu ini hanya berupa titik 1px X 1px. Namun bagi Anda yang tidak nyaman dengan background ini, Anda bisa menggantinya dengan gambar noimage Anda sendiri. Related Posts DTE dengan background abu-abu noimage itu sendiri seperti pada gambar di bawah ini.

Mengganti Gambar Noimage Related Posts DTE


Silahkan Anda buat gambar noimage Anda sendiri, usahakan size gambarnya sekecil mungkin namun tampilannya tetap bagus bisa dengan dimensi default blogger 72px x 72px.
Kemudian silahkan cari kode berikut pada javascript pertama:


noImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",

Dan juga cari kode di bawah ini pada javascript kedua:


noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC"

Nah silahkan Anda ganti hanya kode gambarnya saja yang berikut ini dari kedua kode di atas:


data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC

Silahkan Anda ganti dengan gambar Anda sendiri, misalnya saya ganti dengan gambar dengan kode html di bawah ini:


http://3.bp.blogspot.com/-KbMVIo_1WPQ/Uww0_LWeM_I/AAAAAAAAbTw/0O75mM8WYEc/s72-c/default.png

Sehingga secara lengkap kode javascriptnya menjadi seperti ini:

Javascript pertama:


  <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;Related Post:&lt;/h4&gt;&quot;,
      numPosts: 4,
      summaryLength: 370,
      titleLength: &quot;auto&quot;,
      thumbnailSize: 80,
      noImage: &quot;http://3.bp.blogspot.com/-KbMVIo_1WPQ/Uww0_LWeM_I/AAAAAAAAbTw/0O75mM8WYEc/s72-c/default.png&quot;,
      containerId: &quot;related-post&quot;,
      newTabLink: false,
      moreText: &quot;Read More&quot;,
      widgetStyle: 3,
      callBack: function() {}
  };
  </script>

Javascript kedua:


<script type='text/javascript'>
//<![CDATA[
var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>Artikel Terkait:</h4>",widgetStyle:1,homePage:"http://www.dte.web.id",numPosts:7,summaryLength:370,titleLength:"auto",thumbnailSize:72,noImage:"http://3.bp.blogspot.com/-KbMVIo_1WPQ/Uww0_LWeM_I/AAAAAAAAbTw/0O75mM8WYEc/s72-c/default.png",containerId:"related-post",newTabLink:false,moreText:"Baca Selengkapnya", ....................
............................
............................
//]]>
  </script>

Dan saya sarankan untuk mengubah kode gambanya menjadi base64 agar loadingnya lebih ringan. 

Dan hasil related post noimage-nya akan tampak seperti gambar di bawah ini.

Gambar Noimage Related Posts DTE Setelah Diperbaiki

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments