Blog Inspirasi Digital

Blog Inspirasi Digital

Tutorial Mikrotik, Hotspot, Blog, SEO, WEB 2.0, HTML, CSS, Javascript dan Inspirasi Digital

Menampilkan Thumbnail yang Berbeda Pada Halaman Home

Saya kurang tau apakah wordpress menggunakan plugin untuk menampilkan thumbnail yang berbeda pada halaman home, tapi itu bisa dilakukan dengan lebih mudah di blogger. Cukup dengan conditional Tag.



Thumbnail ini akan digunakan pada halaman home untuk memberikan gambaran tentang isi artikel, dan akan hilang setelah visitor masuk ke artikel. Salah satu blog yang menerapkan system ini adalah bloggerplugin. Disini saya akan menjelaskan pengaplikasiannya.


Kita akan menggunakan conditional tag yang mengatur penampakan pada halaman artikel (item).

<b:if cond='data:blog.pageType == &quot;item&quot;'>

Untuk membungkus Class tertentu. Class ini akan diletakkan pada HTML gambar yang ingin dijadikan thumbnail.


Berikut total kode:


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>

.thumb {display:none}

</style>
</b:if>
 

Letakkan kode tersebut diatas </head>


***


Masuk kehalaman posting & saat memasukkan gambar ke artikel, akan muncul kode berikut:


<a class="thumb" onblur="try
{parent.deselectBloggerImageGracefully();} catch(e) {}"
href="...s1600/anonymous.png"><img style="display:block; margin:0px
auto 10px; text-align:center;cursor:pointer; cursor:hand;width:
35px; height: 35px;" src="...s400/anonymous.png" border="0"
alt=""id="BLOGGER_PHOTO_ID_5529584144433618498" /></a>


Atau,


<img class="thumb" src="...s1600/anonymous.png" alt="" />


Tambahkan kode yang berwarna merah seperti yang ditunjukkan pada kode HTML diatas. Intinya adalah pada class="thumb". Commons ini yang mengatur bahwa thumbnail/gambar dihidden jika masuk ke halaman artikel.


Penulis dibalik Artikel ini:
Biyan
 | hhttp://www.dzignine.com

Trik ini juga bisa dilakukan untuk mengobati thumbnail yang jelek pada auto read more, tentu saja selain dengan melakukan cropping pada gambar.



134 komentar:

  1. andre5/12/10

    thanks gan sangat bermanfaat..

    BalasHapus
  2. terima kasih om :D
    langsung saya coba..

    BalasHapus
  3. menarik.....
    jadi kita perlu paling tidak lebih dari satu gambar biar kelihatan lebih menarik... bukan begitu

    BalasHapus
  4. jadi setelah masuk ke read more atau halaman posting full, gambarnya ilang, gt kan om

    BalasHapus
  5. wah gagal pertamaxx nih T_T

    BalasHapus
  6. wah boleh juga neh om...bisa di coba neh caranya....hihi

    BalasHapus
  7. terima kasih om ... tutornya sudah di coba dan hasilnya mantap :D

    BalasHapus
  8. langsung praktek ah... Thanks ya!

    BalasHapus
  9. alangkah baiknya jika di home gak ada, pas masuk ke postingan malah ada...hihihi
    permainan tag kode default blogger dan css inline nih, mantap :thumbsup:

    BalasHapus
  10. mau saya coba dulu OM.. semoga berhasil ya.. salam..

    BalasHapus
  11. langsung praktek..... dicoba dulu
    gambar tumbnya jadi ilang yah....
    makasih tipsnya :)

    BalasHapus
  12. maturnuwun tutorial tumbnailnya bung

    BalasHapus
  13. Mantafff... Sangat bermanfaat... I like it...

    BalasHapus
  14. dapat diberlakukan disemua template ?

    BalasHapus
  15. Menariik... setuju ama beben tuh.. mestinya ada pas d postingan full

    BalasHapus
  16. saya coba dulu nih. mudah-mudahan sukses n tambah bagus hasilnya. makasih infonya...

    BalasHapus
  17. terus terang saya blon ngerti, apa mesti pake gambar dulu or gmn, mohon pncerahanny..?

    makasih sebelumny..

    BalasHapus
  18. mantab om thanks ya om

    BalasHapus
  19. Makasih om. Langsung praktek..

    BalasHapus
  20. Tutorial yang mantab. Om, kalau boleh tanya, bagaimana cara menampilkan feeds per label yang disertai thumbnail dan resume posting terbaru (pada blogger). Misalnya di Indonesiaoptimis.com
    Terima kasih

    Salam ukhuwah

    BalasHapus
  21. kl d wordpress lebh mudah om, pk plugin dah jadi :D

    BalasHapus
  22. Save page dulu, belum butuh

    BalasHapus
  23. wah ide yang inovatif, pantas dicoba..thanks gans

    BalasHapus
  24. coba ahm trims boss

    BalasHapus
  25. gud, kyknya cocok nih ma template sy, mksdnya gitu ya? tak coba boss..thnks infonya.

    BalasHapus
  26. saya sudah cukup kayaknya dengan fitur yang ada, om...

    BalasHapus
  27. Kalau utk wp gimana om?

    BalasHapus
  28. Wah posting baru, ilmu baru..Ditunggu postingan berikutnya bung!

    BalasHapus
  29. thumbnail pada artikel memang sangat membantu kita untuk menarik pengunjung untuk dapat mengunjungi blog kita

    BalasHapus
  30. Thanks buat ilmunya oom..
    sukses terus...
    Mohon nitip link, mudah-mudahan berkenan:
    Aku Menulis Untuk Semua

    Blog Muhammad wali

    Muhammad Wali UMY

    BalasHapus
  31. nice info om,tapi apakah akan mempengaruhi loading blog?

    BalasHapus
  32. Kalo di wordpress ruwet bro...susahnya minta ampun nampilin thumbnail di homepage....! ada yg tau ga' ajarin dunk?

    BalasHapus
  33. Thanks beradt neh, jadi banyak ilmu, hidup blogspot.. kekekeke

    BalasHapus
  34. Makasih ya abang,,,,

    BalasHapus
  35. Blogger memang fleksibel bro...semuanya bisa dilakukan hanya dengan sedikit koding html, tapi kalo mo nampilin gambar thumbnail di wordpress gimana yach, blogku homepagenya teks doank nieh, tolongin donk...?? thx's

    BalasHapus
  36. Blogger sama wordpress sama saja om. Soalnya wordpress juga bisa nampilin gambar thumbnail seperti cara om diatas tanpa plugin. Tinggal kasih fungsi


    Kode CSS

    BalasHapus
  37. Jah ko ga keluar fungsi-nya...wkwkwkwkwk

    tes lagi om :

    <?php if ( is_home() ) { ?>

    <style type='text/css'>

    KODE CSS

    </style>

    <?php } ?>

    BalasHapus
  38. Boleh juga, tapi kurang sip dech keknya kalo sampe ngilangin gambar yang telah di unggah. apalagi kalo gambarnya bagus banget, sayang kan? mending di percantik lagi di halaman posting dengan style-style yang canggih... :D

    BalasHapus
  39. Test dulu ke blog baru om...

    BalasHapus
  40. Wah kan sayang banget gambarnya ampe ilang...tapi ga apa lah om nice info...

    BalasHapus
  41. Cucok mas...siap di cuba

    BalasHapus
  42. seperti punyaku ya maz, tapi sekarng sudah aq ubah lagi, supaya lebih simpel

    BalasHapus
  43. mantabs mas tricknya. asli loh

    BalasHapus
  44. Hmmmmm.....
    Patut dicoba nih

    BalasHapus
  45. saya sudah mencoba cra yg satu ini ckup lma, hanya untuk mmperbaiki tampilan thumbnail pda javascript auto readmore... cuma agak sedikit repot memang...

    BalasHapus
  46. Belum dibahasnya menampilkan thumbnail utk wordpress

    BalasHapus
  47. Anonim17/12/10

    terimakasih tas postingnya
    semoga sukses selalu..
    Butuh tulisan-tulisan seputar peternakan,
    silahkan kunjungi
    REPOSITORY UNAND

    BalasHapus
  48. terima kasih tutornya om . ,

    memang kebanyakan trik ini saya lihat ada di wordpress . ,

    ternyata bisa di blogger . , kebetulan saya juga pake auto readmore . , makasii infonya . ,

    BalasHapus
  49. oh iya om . ,

    kalo kode itu saya pasang sekarang , postingan yg dulu apakah gambarnya akan tdk muncul jika postingan dibaca ??

    kan belum saya edit "thumb"-nya postingan yg dulu . ,

    apa saya yg bingung sendiri yah ?? hehe . , makasii om . ,

    BalasHapus
  50. oke , sudah saya coba dan berhasil . , utk pertanyaan saya di atas ternyata saya salah paham , . makasii om . ,

    BalasHapus
  51. berhasil mas... thanks yah////

    BalasHapus
  52. Wow, semakin banyak koding semakin enak dilihat, tapi juga semakin berat loadingnya.

    BalasHapus
  53. mantap ilmunya gan..., moga ilmunya bertambah dan klw ilmunya bertambah jangan lupa di share lagi ya gan....
    akhir kata thank's y gan...moga sukses selalu

    BalasHapus
  54. langsung dicoba ya

    BalasHapus
  55. Wah wah.... ini nih yang aq tunggu tunggu gan, nice guys finish last :D

    BalasHapus
  56. trm ksh ilmunya mas oom...

    BalasHapus
  57. Pasang juga dong om di blog ini :D

    BalasHapus
  58. ngapain pake plugin? WordPress Theme cuma perlu ditambahin kode seperti di situs berikut
    http://codex.wordpress.org/Post_Thumbnails

    BalasHapus
  59. tips ini sangat tidak cocok dengan blog saya dimana gambar harus ada disetiap postingan, bukannya menghilang.

    BalasHapus
  60. Sangat bermanfaat juga di bisnis OL yang memerlukan banyak bambar tapi tidak semua mesti ditampilkan.
    Makasih Oom ... Tambah sukses

    BalasHapus
  61. Thank you, sangat bermanfaat segera di coba nih om :)

    BalasHapus
  62. Anonim1/2/11

    Menarik juga

    BalasHapus
  63. menarik banget cmn ... itu makeknya manual ya ... gk otomatis seperti di wp ... ya ??>?

    BalasHapus
  64. tak cb dulu om, terima kasih atas tutorialnya ...

    BalasHapus
  65. ikut nyoba OM....keren kayaknya

    BalasHapus
  66. blogger baru masih bingung,., :(

    BalasHapus
  67. om saya newbie masih bingung

    BalasHapus
  68. Nice info ikut share gan http://www.om-yudi.net/

    BalasHapus
  69. luar biasa. mampir ke tempat kami ya......

    BalasHapus
  70. Makasih mas ilmunya banyak sekali

    BalasHapus
  71. Agak susah ya, prakteknya, tapi Akan saya coba suatu hari nanti.

    BalasHapus
  72. makasih om ilmunya.slam kenal

    BalasHapus
  73. mas , mau nanya nih ? ada ga ya cara yang otomatis gitu . soal nya setiap artikel pingin saya rubah semua . kan capek kalo harus edit satu-satu setiap artikel . :)

    BalasHapus
  74. thanks informasinya gan.... ^_^

    ghoffar
    www.menuju-success.co.cc

    BalasHapus
  75. Kayaknya ada yang kurang ya kok saya gak paham....
    Belum ada komentar yang berhasil...
    Saya belum berani coba......

    BalasHapus
  76. Mantap..

    Langsung di coba ,, :)

    BalasHapus
  77. naaah yang ini dah yang saya cari....
    http://www.videootube.com/2011/08/nissan-leaf-electric-sport-car-from.html

    BalasHapus
  78. Wah terima kasih Kang, dapet ilmu baru hari ini

    BalasHapus
  79. Saya baca-baca dulu aja sebagai tambaha pengetahuan tapi tidak akan saya praktekkan untuk saat ini.
    Terima kasih sudah berbagi.

    BalasHapus
  80. mantapz O-om.,.
    Lngsung Praktek sambil Ngopi .,..
    Smoga sukses.,.

    BalasHapus
  81. Utak-Utik sebentar langsung jadi O-om.,.
    Makasih O-om,.,

    BalasHapus
  82. Makasih mas ilmunya banyak sekali

    BalasHapus
  83. sungguh hebat ni tips nya

    dicoba ah..

    trimakasih ya om..

    BalasHapus
  84. makasih nya om. langsung praktek????

    BalasHapus
  85. makasih ya o-om....banyak banget ilmunya disini ya,,boleh cpy nggak.??

    BalasHapus
  86. wah infonya bagus...mau coba ya..trimakasih..

    BalasHapus
  87. This is fantastic information for the blog. I really love the way infomration Presented in your post. I have added to you in my social bookmarking ... and i am waiting for your next post.

    BalasHapus
  88. ane udah nyoba om, mempercepat loadingan juga

    BalasHapus
  89. Thankz O-oM...........

    BalasHapus
  90. saya coba guru...makasih

    BalasHapus
  91. sepertinya asik juga dijajal ne...thanks oom

    BalasHapus
  92. Info menarik dan boleh sekali dicoba, Makasih buat infonya dan sukses selalu.

    BalasHapus
  93. Terima kasih untuk tipsnya, saya mau coba semoga juga.

    BalasHapus
  94. Saya cari dibeberapa website dan dapat tipsnya di website ini, terima kasih, mau dicoba oleh saya.

    BalasHapus
  95. Amazing artikel…. Semoga saya bisa praktekan tipsnya dan berhasil

    BalasHapus
  96. Terima Kasih, Tulisan yang sangat membantu. Salam Sukses!

    BalasHapus
  97. Terima kasih atas pencerahannya, tulisannya menarik juga. Saya akan coba

    BalasHapus
  98. aku paling senang dengan semua pengetahuan ini, terima kasih sudah berbagi ilmu

    BalasHapus
  99. Setelah membaca Info dan Artikel, saya jadi ingin mencoba. Salam Sukses

    BalasHapus
  100. wahhh kayaknya masih2 punya kelebihan sendiri yach antara wordpress dan blog...kalau diwordpress lebih kental dengan adanya plugin yach.....

    BalasHapus
  101. kalau wordpress biasanya itu lebih mengandalkan plugin atau bisa juga melalui php tp kalau blog lebih ke HTML dan penuh dengan script....

    BalasHapus
  102. Bermanfaat banget buat ngajarin kakakku nih :D. Thx :D

    BalasHapus
  103. Nice Info !! :) Do not forget to visit Sekilas Info Aneh

    BalasHapus
  104. salam kenal oom dari tiang anak lombok di Belajar SEO dan Bisnis Online di tunggu kunjungannya oom dan mohon sarannya

    BalasHapus
  105. pemasukan yang bagus,aku coba dulu

    BalasHapus
  106. akan ku coba.trimakasih

    BalasHapus
  107. info yang menyegarkan buat saya om.teimakasih atas info nya.

    BalasHapus
  108. Kalau blogspot gmana om??

    BalasHapus
  109. Ini Hanya Untuk Postingan Berbetik Readmore OM??

    BalasHapus
  110. Makasih banyak gan buiat tips nya, ini sangat membantu buat yang tidak tahu menampilkan thumbnail.

    BalasHapus
  111. Makasih banyak gan buat tips nya, kebetulan saya tidak tahu cara nya menampilkan thumbnail. Dengan tips dari agan mungkin bisa membantu saya.

    BalasHapus
  112. Oh jadi begitu gan cara menampilkan thumbnail , , baru tahu nih. makasih banyak gan buat tips nya, Tulisan nya ini sangat bermanfaat.

    BalasHapus
  113. ane baru tahu nih caranya bikin thumbnail . makasih banyak gan buat tips dan cara bikin thumbnailnya

    BalasHapus
  114. oom emang keren dah blognya. dari newbie sampe master harus baca blognya o-om dlu

    BalasHapus
  115. Dahsyat om. Semoga menjadi amal jariah buat bekal diakhirat ilmu ilmunya

    BalasHapus
  116. Terimakasih infonya, blog yang penuh tips begini pasti ramai

    BalasHapus
  117. Lanjutkan oom tips tipsnya, bikin semangat untuk trus belajar

    BalasHapus
  118. Thanks informasinya sangat berharga untuk blog ane yang masih muda belia ini.

    BalasHapus
  119. Wah berguna banget nih om! Jadi postingan yang gak bergambar, bisa dibuat bergambar sementara di halaman homepage! THANKS :)

    BalasHapus
  120. wah..mantap nih artikelnya, menambah wawasan

    BalasHapus
  121. makasih banyak kang agus, saya udah banyak nari di google tentang tutorial thumbnail tp yg paling saya paham cuma tutorial dari o-om.. maksih bnyak sekali lagi ;)

    BalasHapus
  122. Bagus banget om artikelnya sorry ana nyepam di sini ..

    BalasHapus

Silahkan beri komentar dengan bijak dan sesuai dengan topik artikel, karena semua komentar akan saya moderasi terlebih dahulu sebelum ditampilkan. Thanks :)

 

Back to Top