Cara membuat snippet, thumbnail, read more di Blogspot dengan mudah

Anda dapat dengan mudah merubah tampilan blog Anda untuk versi desktop dibuat seperti versi mobile, dengan halaman depan hanya terlihat snippet artikel, thumbnail, serta link Read More.

Snippet Thumbnail Read More Blogspot

Jika Anda melihat blog Anda di Blogspot melalui ponsel tentunya akan berbeda tampilannya dengan versi desktop. Tampilan blog versi mobile memang terlihat lebih sederhana karena untuk mempercepat loading halaman web di ponsel. Pada halaman depan terlihat hanya tampilan summary/snippet dari suatu artikel blog Anda. Jika artikel Anda memuat gambar, maka akan terlihat gambar yang otomatis berukuran kecil (thumbnail) beserta ringkasan artikel (snippet) Anda.

Anda dapat dengan mudah merubah tampilan blog Anda untuk versi desktop menjadi seperti versi mobile, di mana halaman depan (homepage) hanya terlihat summary artikel, thumbnail, serta link Read More (dalam bahasa Indonesia: baca selengkapnya) untuk menuju ke artikel yang lengkap (full article).

Link Read More ini bukanlan read more yang Anda sisipkan pada saat membuat postingan di blog Anda, melainkan read more yang otomatis tampil pada saat Anda menyisipkan kode di template Anda nantinya.

Berikut tutorial cara membuat snippet, thumbnail serta read more di Blogspot dengan mudah:

  1. Masuk melalui template editor Anda.
  2. Berikan tanda centang Expand Widget Templates dan temukan kode
    <data:post.body/>
    
  3. Ganti kode di atas dengan kode berikut:
    <!-- Tampilan static page dalam artikel lengkap -->
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <data:post.body/>
    
    <b:else/>
    
    <!-- Tampilan halaman selain halaman postingan/artikel lengkap akan membentuk snippet, thumbnail dan readmore -->
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    
    <b:if cond='data:post.thumbnailUrl'>
                  <div class='item-thumbnail'>
                    <img expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' height='72px' width='72px'/>
                  </div>
    </b:if>
    <data:post.snippet/>
    <b:if cond='data:post.jumpLink != data:post.hasJumpLink'>
          <div class='jump-link'>
            <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
          </div>
    </b:if>
    
    
    <b:else/>
    <data:post.body/>
    </b:if>
    </b:if>
    
  4. Save template Anda.

Jika tampilan thumbnail tidak sesuai dengan yang Anda inginkan, misalnya Anda menginginkan thumbnail berada pada posisi kiri snippet artikel, Anda dapat memberikan kode tambahan css di template Anda.

Cara mudah menambahkan CSS di template Blogspot

  1. Pada menu template, klik tombol Sesuaikan (Customize).
    Customize Template Blogger
  2. Akan tampil Perancang Template Blogger. Pilih menu Tingkat Lanjut > Tambahkan CSS.
    Advance Add CSS Blogger
  3. Pada kotak kosong Tambahkan CSS khusus, sisipkan kode css berikut untuk memposisikan gambar di sebelah kiri snippet:
    .item-thumbnail {
    float: left;
    margin: 0 5px 5px 0;
    }
    

    Optional. Jika Anda ingin menambahkan shadow/bayangan pada thumbnail, sisipkan lagi kode css berikut di bawah kode css di atas.

    .post-body .item-thumbnail img {
    padding: 5px;
    background: #FFF;
    -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
    box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
    }
    
  4. Klik tombol di kanan atas, Terapkan ke Blog (Apply to Blog).Selesai!.

Tutorial ini tanpa penggunaan kode javascript dalam menentukan ukuran thumbnail. Thumbnail secara otomatis terbentuk pada saat Anda mengupload gambar. Ukuran thumbnail 72 x 72 pixel.

Update 23-09-2012
Penambahan data alt, height, dan width pada thumbnail (SEO Analyzer Bing Webmaster Tool)

Baca juga cara terbaru membuat meta descriptions dengan gampang di Blogger.

Author: Jevuska

Rachmanuddin Chair Yahya a.k.a Jevuska is the founder of Jevuska.Com, a qualified web about offering medical articles, blogging, tips, and tutorial of WordPress. Having written for Jevuska since 2007.

5 thoughts on “Cara membuat snippet, thumbnail, read more di Blogspot dengan mudah”

Leave a Reply

Your email address will not be published. Required fields are marked *

Use tag [php] to add code, e.g. [php]<?php echo $var; ?>[/php]