Mengganti Gambar Noimage Related Posts Dte

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

Untuk related posts sendiri aku selalu menyarankan untuk memakai related posts dari DTE alasannya yakni ini tidak error pada validasi HTML5. Anda juga dapat memodifikasi tampilannya dan juga melengkapinya dengan title tag yang dapat Anda simak pada postingan berikut.

• Baca juga: Memodifikasi Dan Menambahkan Title Tag Thumbnails Related Posts DTE

Dan related post ini juga aku gunakan pada template Kompi Banget dan template Kompi Males. Kaprikornus kalau Anda memakai 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 memakai background abu-abu untuk noimage pada related posts DTE ini yakni supaya loadingnya ringan alasannya yakni gotong royong background abu-abu ini hanya berupa titik 1px X 1px. Namun bagi Anda yang tidak nyaman dengan background ini, Anda dapat menggantinya dengan gambar noimage Anda sendiri. Related Posts DTE dengan background abu-abu noimage itu sendiri ibarat pada gambar di bawah ini.

Silahkan Anda buat gambar noimage Anda sendiri, usahakan size gambarnya sekecil mungkin namun tampilannya tetap cantik dapat dengan dimensi default blogger 72px x 72px.

• Baca juga: Membuat Gambar Dengan Size Kecil Dan Kualitas Bagus

Kemudian silahkan cari isyarat berikut pada javascript pertama:

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

Dan juga cari isyarat di bawah ini pada javascript kedua:

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

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

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

Silahkan Anda ganti dengan gambar Anda sendiri, contohnya aku ganti dengan gambar dengan isyarat html di bawah ini:

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAgmmpqWdNHQ842LZZDx6ZrZuUiA_96cnOT_7ax_0N-jGJpvLT3irs7hK5vtClBUQ-6lsHeKN3e9fpsryplavLck8mJ9x8h6xsP5nQNb6r0sLTkV24D1K5jBy5LXzZgH8mD44MgXcVzVsq/s72-c/default.png

Sehingga secara lengkap isyarat javascriptnya menjadi ibarat 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;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAgmmpqWdNHQ842LZZDx6ZrZuUiA_96cnOT_7ax_0N-jGJpvLT3irs7hK5vtClBUQ-6lsHeKN3e9fpsryplavLck8mJ9x8h6xsP5nQNb6r0sLTkV24D1K5jBy5LXzZgH8mD44MgXcVzVsq/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:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAgmmpqWdNHQ842LZZDx6ZrZuUiA_96cnOT_7ax_0N-jGJpvLT3irs7hK5vtClBUQ-6lsHeKN3e9fpsryplavLck8mJ9x8h6xsP5nQNb6r0sLTkV24D1K5jBy5LXzZgH8mD44MgXcVzVsq/s72-c/default.png",containerId:"related-post",newTabLink:false,moreText:"Baca Selengkapnya", ....................
 ............................
 ............................
 //]]>
   </script>
 

Dan aku sarankan untuk mengubah isyarat gambanya menjadi base64 supaya loadingnya lebih ringan. 

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

Sumber https://www.kompiajaib.com/

Share this post