Memperbaiki Thumbnails Pada Popular Posts

Memperbaiki Thumbnails Pada Popular Posts

Bola Hero Gawai

Memperbaiki Thumbnails Pada Popular Posts

Popular Posts
Sebenarnya postingan ini adalah sanggahan untuk pernyataan saya sendiri pada postingan Trik Menaikan Nilai SEO Blog lalu. Pada postingan itu saya mengatakan untuk menghindari pemakaian popular posts dengan menggunakan thumbnails karena akan mengurangi nilai SEO blog ketika dicek di Chkme.

Nah kebetulan siang tadi mas Andre Wedhos menanyakan cara menambahkan atribut tinggi dan lebar pada thumbnail popular post. Pas saya lihat script popular posts, saya jadi ingat bahwa thumbnails pada popular posts bisa diperbaiki untuk menjaga nilai SEO blog.

Setelah beberapa kali saya cek di GTmetrik, ternyata thumbnails pada popular post tidak terdetek image dimensionsnya. Namun untuk tag alt dan titlenya masih terdetek di Chkme sebagai image dengan missing description dan title.

Secara defult, thumbnail posts blogger mempunyai ukuran baku yaitu 72px X 72px. Begitu juga dengan thumbnail pada popular post menggunakan ukuran baku thumbnail posts blogger yaitu 72x72. Nah bagi Anda yang blognya menggunakan thumbnail pada popular posts-nya, bisa menggunakan trik di bawah ini agar tidak mengurangi nilai SEO blog Anda. Kalau dilihat, script popular posts akan tampak seperti di bawah ini.

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == &quot;false&quot;'>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
  </div>
</b:includable>
</b:widget>

Perhatikan kode yang berwarna merah, itu adalah link pada opular posts, silahkan tambahkan kode expr:title='data:post.title' dan kode yang berwarna biru adalah thumbnail pada popular post, silahkan tambahkan juga tag titlenya seperti pada link tadi dan untuk tag alt-nya silahkan isikan misalnya dengan thumbnails. Sehingga penampakannya setelah diperbaiki akan seperti di bawah ini.

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == &quot;false&quot;'>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank' expr:title='data:post.title'>
                    <img alt='thumbnails' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize' expr:title='data:post.title'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank' expr:title='data:post.title'>
                    <img alt='thumbnails' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize' expr:title='data:post.title'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
  </div>
</b:includable>
</b:widget>

Nah jika Anda ingin merubah ukuran thumbnail popular post, silahkan ganti kode biru di atas dengan kode di bawah ini.

<img alt='thumbnails' height='90' expr:src='data:post.thumbnail' width='90' expr:title='data:post.title'/>

Perhatikan kode yang berwarna merah, itu akan menggantikan ukuran lebar dan tinggi thumbnail default blogger 72px X 72px menjadi 90px X 90px. Silahkan ganti pada angka-angkanya sesuai yang Anda kehendaki.

Nah demikian postingan cara memperbaiki thumbnail pada popular post agar tidak mengurangi nilai SEO blog. Semoga dapat dimengerti dan bermanfaat.

Share this:

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

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

46 Comments Add Comment

Pertamaxx om,,,

Widgetnya keren.. Salut lama lama om Kompi jago koding..hehe

Balas

langsung saya praktekkan mas adhy, bongkar lagi :D

Balas

sudah saya terapkan mas, mohon di liahat sudah benar apa belum :)
www.rosianto.com

Balas

Bisa karena biasa mas Ardi...hehehe... tar mas Ardi juga bisa kalau biasa lihat kodi hehehe...mungkin malah nanti bisa lebih dari saya...

Balas

Silahkan mas Rosianto ...

Balas

Ya sudah betul mas...tinggal benahi widget popularnya. Itukan panjang ke bawah, coba pakai scroll bial nggak terlalu ke bawah. coba pakai trik ini http://www.kompiajaib.com/2012/03/cara-membuat-fungsi-scroll-pada-widget.html

Balas

Iya mas tadi lupa saya pasang scrollnya, sekarang sudah saya perbaiki.
Terima kasih ilmunya mas.

Oya, cara menggeser tulisan " 0 komentar:

Poskan Komentar" yang ada di bawah posting itu gmana ya mas? (coba lihat post saya yg nggak ada/belum ada komentarnya). Saya pengen geser ke kanan sedikit biar rapi gitu, saya cari kode padding marginnya nggak ketemu.

Terimakasih banyak kalau mas adhy berkenan menjawab lagi :)

Balas

Pindahkan semua kode CSS komentar ke atas ]]></b:skin>

Cari kode <b:includable id='threaded_comment_css'> nah di bawahnya kan ada kode css untuk komentar di antara kode <style> dan </style> nah pindahkan semua kode itu ke atas ]]></b:skin> jangan lupa hapus kode <style> dan </style>.

Balas

terimakasih banyak mas, sudah bisa..
mas adhy emang top :D

Balas

kalau cara beri title pada popular post mas ?

Balas

Ya, yang di atas sekaligus memberi title pada link popular post...

Balas
This comment has been removed by the author.

ahirnya....! selama berminggu-minggu cari jawabanya dan bikin kepala botak, ternyata jawabanya cuma di kompiajaib.

mator sembah nuwon mas....! dan maaf kalau pertayaan saya bikin repot mas adhy.

sekarang tinggal mikirin ngolah kodi buat sise img post homepege, soal'e kodi sy dan kodi dari mas adhy ngak berfungsi

Balas

Ya memang begitu, tiap template kadang kodinya berbeda, tapi asal kita teliti pasti ketemu dan bisa mas...

Balas

Keren mas widgetnya sudah saya terapkan di blog saya,,,
Oya mas saya chek di validator.w3.org oke 100 % valid HTML5 tp di cek di Meta Tag Analyzer malah blank gak ada rincianya sama skali apanya yang salah ya??
apa karna blognya baru umur seminggu??
kalo boleh tolong di bantu chek mas ni blog saya maaf ngerepotin..
http://devisoftshare.blogspot.com/

Balas

Saya coba pada bebarapa Meta Tag Analyzer tampaknya baik-baik saja, title, deskripsi, keyword dan lain2 terdetek. coba saja sekarang mungkin tadi ada gangguan koneksi...

BTW blognya keren Aki hehehe...

Balas

kalo koneksi jelas lelet mas he,,he,,,,maklum paket goceng,,
tp klo cek yang lain normal cuman hasil blog yang ini kayak gini mas,,
https://lh5.googleusercontent.com/-LRpap880SSc/Ubmr6eUpg3I/AAAAAAAAB60/2hvlMQhCC8s/w499-h554-no/13-Jun-13+18-15-43.png
oya mas kholis kemana ya mas kok websitenya gak pernah update,,,

Balas

Bisa minta URL ebsite meta tag analizernya biar dicoba daari sini...

Balas

http://www.seocentro.com/tools/search-engines/metatag-analyzer.html

itu mas alamatnya,,,duh ngerepotin ya,,,makasih mas sebelunya,,

Balas

Iya Ki saya coba beberapa kali di tool ini memang seperti itu untuk blog Aki, Iya mungkin karena masih baru, saya coba di search di Google juga deskripsi blognya belum keluar...mungkin perlu waktu lagi...

Balas

nah itu dia mas,,,
sabar aja dech he,,,soalnya blog saya yang satu lagi nggak pernah kayak gini.
Oke mas makasih sudah membantu.
"I love Kompi Ajaib"

Balas

Atau bisa dicoba dengan membuat deskripsi homepage dan postpage seperti di sini http://kompiside.blogspot.com/2013/02/membuat-deskripsi-postingan-agar-bisa-share-di-google-dan-facebook.html
Saya juga pakai yang itu, biasanya deskripsinya langsung terdetek...dicoba aja...

Balas

mas kompi kapan ya mau buat template lagi?
keren deh postingannya!

Balas

wah baru mampir lagi nih... perkembangan nya makin jauh om..hehehehh

Balas

Nanti kalau udah ada saya share lagi...

Balas

Iya ke mana aja? Lagi sibuk persiapan template baru ya? Hehehehe....

Balas

trimakasih y mas, akhirnya stlah 4jm lbih saya tlusuri di gugel dapat jg tutorialnya di blog mas..
alhmdllah sudah SEO 91%, tggl cari 9% lg supaya genap 100% kyk blog mas :D

Balas

alhamdulillah bs mas, thank's a lot!
saya mw tanya mas kompi, pada label saya sisipkan mini icon seperti yg dibahas disini http://www.krtutorplus.com/2007/09/sisipkan-mini-icon-pada-label.html
tapi nilai SEO jd berkurang krna g ada deskripsi pada gambarnya..
prtanyaannya, gimana biar gambar itu mempunyai deskripsi sesuai judul label tsb ?
trimakasih atas waktunya mas, suksess sllu :)

Balas

Saya jawab di sini mas...
http://www.kompiajaib.com/2013/07/memperbaiki-mini-icon-pada-label-agar.html

Balas

sukses saya terapkan di blog saya mas :)

Balas

keren mas, makasih atas infonya

Balas

Nah ini dia Kang Artikel yang saya tunggu-tunggu, setelah sekian minggu
Saya bermasalah dengan populer posts, Thumbnails nya mengurangi nilai SEO
Tapi script ini termasuk valid HTML5 juga yah Kang Adhy? karena yang saya tau
Popular posts yang pakai thumbnails, itu mengurangi SEO, Juga penyumbang
Error pada W3C Validasi Html5,.

Saya coba yah Kang? terima kasih atas Artikel nya, sukses Kang Adhy

Balas
This comment has been removed by the author.

hehe berhasil kang, trima kasih banyak kang adhy. tapi kang, klo di chkme.com title thumnailnya udh gk ada masah, tpi deskripsi thumbnailnya masih brmasalah, nah saya coba2 tambahin expr:alt='data:post.title' , hasilnya deskripsi thumbnailnya udh gk ada maslah lgi di chkme.com. apakah gk apa2 kang klo saya tambahin kode expr:alt='data:post.title' ?

Balas

Untuk scriptnya valid html5 namun memang thumbnailnya mengurangi skor seo. Nah coba ikuti trik di atas agar tidak mengurangi skor seo.

Balas

Iya mas ga apa2 seperti itu juga betul =D

Balas

kok punya saya gk berubah ya ukurannya??

Balas

Untuk merubah ukuran thumbnail perhatikan poin terakhir, jika masih belum berubah harus periksa kode yang lainnya barangkali ada CSS atau javascript yang mengtur size thumbnail popular post-nya.

Balas

terimakasih mas. ini yg saya cari
dari sekian banyak tutorial blog, web ini yg paling mudah dimengerti saya yg masih newbie.

Balas

Makasih mas triknya, akhirnya bebas juga dari missing images popular post, Alhamdulillah..

Balas

untuk mengatasi Images: 10 images and 5 missing titles di chkme gimana mas?
padahal udah klik properties-->title & altnya sudah saya isikan..

Balas

gan gimana carax mengisih tombol blog, maklum gan masih pemulah mohon petunjukx :)

Silakan gan liat sendiri blog saya http://sutrisman-rpl2.blogspot.com

Balas

harusnya nama blognya jangan kompi ajaib mas tapi tutorial GA PAKE Ribet, soalnya enak banget mempraktekannya dan gampang di mengerti. wkwkwkwkwk terimakasih

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!

×
×
×