Mengganti Gambar Noimage Related Posts DTE

Mengganti Gambar Noimage Related Posts DTE

Bola Hero Gawai

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

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

19 Comments Add Comment

Selamat sore Kang Adhy wah jadinya tidak ada gambar postingan yah Kang
Tapi load blog akan mendai lebih ringan tentunya makasih Kang ijin coba :-bd

Balas

Iya kang sebenarnya seperti itu, namun ada juga yang kurang pas dengan itu sehingga ingin menggunakan background image yang ada gambarnya hehehee.

Balas

Nambah ilmu lagi nch Mas Adhy... mkasih udh share ilmunya...

Balas

Sama-sama mas semoga bisa dimengerti :)

Balas

Malam mas. Tutorialnya simple tp keren

Balas

kalau saya pribadi lebih suka yang nggak pakai gambar kang,agar lebih wuss loading blognya,dan dengan artikel ini jadi semakin banyak pilihan ya kang adhy

Balas

Yah Kang makasih atas penjelasanya, tapi saya suka dengan
Tampilan related posts yang ada gambarnya seperti yang ada
Di Template Kompi Males, mungkin saya akan ganti template
Saya dengan template Kompi Males. Ijin pake template nya Kang

Balas

Malam juga mas :)
Terima kasih

Balas

Betul mas biar tambah variasinya :)

Balas

sepertinya mas adhy kehabisan ide untuk membuat postingan nih hehehe :-d

Balas

Gambarnya jadi bisa di sesuaikan ya Kang :)
Saya kemarin baca artikel luar katanya gambar juga sangat berpengaruh terhadap Seo, apa lagi kalo di dalamnya di tanamkan juga kata kuncinya :)

Balas

Hehhehe iya sis cukup susah cari ide fresh :) jadi membuat postingannya dari pertanyaan-pertanyaan pengunjung. Daripada menjawab di komentar dengan cukup panjang mending sekalian dibikinin postingan hehehe :)

Balas

Sudah saya perbaiki Kang ..
Teng Yu .. :-d

Balas

Iya kang biar bisa membuat gambar noimage sesuai keinginan :)
Betul kang, dalam gambar bisa kita tanamkan kata kunci, karena itulah perlunya alt tag dalam gambar, selain agar gambar vallid html5 juga seo friendly dan akan lebih bagus lagi jika dilengkapi title tag.

Balas

Wah terimakasih mas tutornya. Kebetulan saya juga pake template kompi males mas adhy.. Hehehe

Balas

play around to your blog is the best experience of my life, here I am in suguhkan icon icon quite charming and very elegant look, nice :-d

Balas

Ohh, jadi begitu ya bang cukup mudah juga :D

Balas

Wah dapet ilmu lagi nih dari Mas Adhy. Wah terimakasih mas

Balas

saya bisa....saya bisa...ganti gambar niimage nya...hahay :p

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • 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 Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×