Mecha versi 2.6.4 sudah dirilis!

Posting Auto Read-More Tanpa JavaScript

Tabel Konten
  1. Mengambil Ringkasan Posting 
  2. Mengambil Thumbnail Posting 
  • Masalah Interpretasi Tag HTML 
  • Posting ini sekaligus sebagai sanggahan dari pernyataan Saya mengenai tidak adanya tag khusus dari Blogger untuk memproduksi ringkasan artikel pada Optimasi Thumbnail pada Auto Read-More Link dan Widget Blogger

    Posting Auto Read-More Tanpa JavaScript
    Posting Read-More dengan thumbnail berukuran 72 × 72 piksel dan karakter ringkasan sebanyak 100 karakter.

    Versi posting auto read-more link yang satu ini adalah murni menggunakan tag data dari Blogger untuk mengambil ringkasan artikel dan thumbnail posting. Kita akan menggunakan ke dua elemen ini untuk menyisipkan ringkasan dan gambar:

    Mengambil Ringkasan Posting 

    <data:post.snippet/>

    Mengambil Thumbnail Posting 

    <img expr:src='data:post.thumbnailUrl'/>

    Selama ini Saya tidak menyadarinya, tapi jika kita melihat isi dari widget Posting Populer, maka kita akan menemukan kedua data tersebut di dalamnya (sedikit berbeda pada data:post.thumbnailUrl). Mereka berdua digunakan untuk menampilkan ringkasan artikel sebanyak 100 karakter dan thumbnail berukuran 72 × 72 piksel seperti yang biasanya kita lihat pada widget Posting Populer bawaan dari Blogger - Referensi

    <!-- (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 class='clear' style='clear: both;'/>

    Jika Anda saat ini telah memakai versi auto read-more link script, Anda bisa dengan mudah memodifikasinya. Pada formulir HTML Temlpate, temukan kode ini:

    <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
    <script>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>

    Ganti menjadi seperti ini:

    <b:if cond='data:post.thumbnailUrl'>
      <a expr:href='data:post.url'><img class='post-thumbnail' alt='thumbnail' expr:src='data:post.thumbnailUrl'/></a>
    <b:else/>
      <a expr:href='data:post.url'><img class='post-thumbnail' alt='thumbnail' src='http://reader-download.googlecode.com/svn/trunk/images/no-image-72x72.png'/></a>
    </b:if>
    <div class='post-snippet'><data:post.snippet/></div>

    Setelah itu temukan kode ini:

    ]]></b:skin>

    Letakkan kode CSS ini di atasnya untuk mengatur posisi thumbnail:

    .post-thumbnail {
      width:72px;
      height:72px;
      float:left;
      margin:2px 10px 0 0;
    }

    Terakhir, Anda bisa membuang script auto read-more link yang biasanya terletak di atas </head>

    Klik Simpan Template.

    Jika posting Anda masih berupa posting biasa, carilah kode ini:

    <data:post.body/>

    Ganti dengan kode ini:

    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
      <b:if cond='data:blog.pageType != &quot;item&quot;'>
        <b:if cond='data:post.thumbnailUrl'>
          <a expr:href='data:post.url'><img class='post-thumbnail' alt='thumbnail' expr:src='data:post.thumbnailUrl'/></a>
        <b:else/>
          <a expr:href='data:post.url'><img class='post-thumbnail' alt='thumbnail' src='http://reader-download.googlecode.com/svn/trunk/images/no-image-72x72.png'/></a>
        </b:if>
        <div class='post-snippet'>
          <data:post.snippet/>
        </div>
        <div class='rm-button-wrap'>
          <a class='button' expr:href='data:post.url'>Baca Selengkapnya</a>
        </div>
      </b:if>
    </b:if>
    
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <data:post.body/>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
      <data:post.body/>
    </b:if>

    Klik Simpan Template.

    Masalah Interpretasi Tag HTML 

    <data:post.snippet/> memiliki sikap yang tidak lazim jika dilihat dari segi perannya di dalam menampilkan ringkasan artikel. Dia akan memparse semua kode HTML yang pernah kita ketik di dalam posting menjadi apa adanya. Sehingga hal-hal aneh semacam ini mungkin akan Anda alami terutama jika Anda memiliki posting dengan kumpulan kode HTML di dalamnya:

    Blogger sepertinya sudah memperbaiki masalah ini.

    Tag HTML tetap Diinterpretasikan Sebagai Apa Adanya Tag HTML
    Tag HTML yang telah kita parse di dalam posting tetap diinterpretasikan sebagai apa adanya tag HTML, sehingga hal ini seringkali akan membuat posting Anda menjadi berantakan dan tidak valid (banyak kode yang tidak lengkap dan tidak seharusnya berada di dalam posting).

    Kita bisa saja menggunakan JavaScript untuk menghilangkan semua tag HTML di dalamnya, tapi di sini Saya ingin merealisasikan isi artikel sesuai dengan judulnya (tanpa JavaScript). Jadi untuk kasus ini Saya akan menggunakan CSS Pseudo-Element.

    Kita tidak akan meletakkan data:post.snippet sebagai elemen apa adanya seperti halnya saat kita menuliskan kode <data:post.snippet/>, tapi kita akan memasukkannya ke dalam atribut seperti ini:

    <div class='post-snippet' expr:data-snippet='data:post.snippet'></div>

    Dengan cara di atas, maka deskripsi posting akan tersimpan di dalam atribut data-snippet. Dan untuk menampilkan nilai atribut tersebut sebagai teks, kita bisa menggunakan CSS Pseudo-Element :before atau :after seperti ini:

    .post-snippet:before {
      content:attr(data-snippet);
    }

    81 Komentar

    Syakir Rahman

    Akhirnya, setelah dicari-cari ketemu jugaa.. terima kasih mas!

    gtrslnc

    mas, cara mengatur jumlah post snippetnya gimana mas??

    Admin

    Mas Taufik, kalau buat thumbnail sejajar dengan judul artikel gimana yah ?
    SS nya dibawah ini, terima kasih sebelumnya :-bd

    Taufik Nurrohman

    Saya cuma bisa bantu sampai sebatas ini: http://jsfiddle.net/zojqesgL/1/

    NB: Pakai URL gambar yang asli, jangan pakai URL gambar versi berbagi. Lain kali gambarnya diunggah ke Picasa saja lalu set ke mode publik.

    Unknown

    mas gimana untuk memunculkan thumbnail video youtube di homepage, soalnya jika sebuah posting tidak menggunakan gambar bisa muncul thumbnail yang no image. tapi kalo menggunakan video youtube gak muncul thumbnail apapun di homepage mas. tapi saya lihat di widget populer post bisa muncul thumbnailnya dari video youtube tersebut. saya mencoba kode ini expr:src='data:post.thumbnailUrl' saya ganti dengan kode ini expr:src='data:post.thumbnail' seperti pada widget populer post tapi tetap saja tidak bisa :'(

    Unknown

    ow sudah bisa mas ternyata masalahnya gara2 saya tambahin kode ini <b:if cond='data:post.firstImageUrl'> jadi tidak muncul. sekarang sudah bisa \o/ :-bd

    Febri Tri Harmoko

    kang taufik saya mau tanya..
    kalau misal saya memperpanjang tulisan pada postingan hompage nya bisa kagak ? apa kalau kita menggunakan tutor ini. tidak bisa mengatur jumlah kata yang tampil dalam homepage ?
    saya mau mengatur sebanyak 250kata yg tampil pada homepage saja. apakah bisa seperti itu?

    Cheesy Martabak

    Nggak bisa om, kecuali pakai cara yang satunya yang ada di blog ini.

    http://www.dte.web.id/2013/01/konsep-auto-read-more-dengan-bantuan.html

    Nazril Ilham

    asslm bisa bantu saya,, saya mencoba artikel ini dan hasilnya blog saya jadi berantakan,, silahkan cek jagodesain.com

    Unknown

    salam kenal sebelummnya mas, maaf saya mau tanya kalau ini namanya javascript apa ya

    var atag=_$_7fc8[0],imgtag=_$_7fc8[1],ifrtag=_$_7fc8[2],xab=_$_7fc8[3],nW=_$_7fc8[4],/gi],elmt=document.getElementById(_$_7fc8[5]+nW+xab),sLg=$(_$_7fc8[6]).length?$(_$_7fc8[6]).attr(_$_7fc8[7]):100,fMn=$(_$_7fc8[8]).length&&_$_7fc8[9]==$(_$_7fc8[8]).attr(_$_7fc8[7])?!1:!0,sMn=$(_$_7fc8[10]).length&&_$_7fc8[9]==$(_$_7fc8[10]).attr(_$_7fc8[7])?!1:!0,SSp=$(_$_7fc8[11]).length?$(_$_7fc8[11]).attr(_$_7fc8[7]):5e3,NPp=$(_$_7fc8[12]).length?$(_$_7fc8[12]).attr(_$_7fc8[7]):20,raB=$(_$_7fc8[13]).length&&_$_7fc8[9]!=$(_$_7fc8[13]).attr(_$_7fc8[7])?$(_$_7fc8[13]).attr(_$_7fc8[7]):_$_7fc8[14],hAu=$(_$_7fc8[15]).length&&_$_7fc8[16]==$(_$_7fc8[15]).attr(_$_7fc8[7])?!1:!0,ntx=$(_$_7fc8[17]).length&&

    Apa itu java script asli, atau hasil dari yang sudah di pack, kemudian bagaimana cara membuatnya, kalau itu bukan kode asli, bagaimana cara melihat kode aslinya.

    terima kasih

    Taufik Nurrohman

    Itu sudah di-pack. Cara membuatnya, definisikan nama variabel yang tidak enak untuk dibaca sebagai array, lalu isi array tersebut dengan data-data berupa string atau integer seperti ini:

    // sebelum
    $('body').html('<div>abc</div>');
    // sesudah
    var $_abhxZ_567 = ['body','html','<div>abc</div>'];
    $($_abhxZ_567[0])[$_abhxZ_567[1]]($_abhxZ_567[2]);