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

    • Unknown

      Wah ajib bener asikkkk aku segera coba kalau begitu bang, keren abis

    • Yopi Hasopa

      ini nih yang saya tunggu.... :-bd

      saya coba dulu mas ^_^

    • Taufik Nurrohman

      Versi auto read-more ini memiliki kelebihan dan kekurangan: Kelebihannya, halaman akan menjadi lebih cepat termuat karena kita tidak perlu mengakses semua isi posting seperti versi sebelumnya (Harap bedakan antara data:post.snippet dan data:post.body).
      Kekurangannya, ringkasan artikel dibatasi hanya sebanyak 100 karakter, dan ukuran thumbnail dibatasi hanya 72 × 72 piksel :'(
      Tapi Saya rasa ukuran thumbnail masih bisa diperbesar dengan cara yang pernah Saya jelaskan di artikel optimasi thumbnail *=p

      • Ariana

        sebenarnya thumbnailnya bisa diakali dengan mengambil first post image url ya mas, tapi kekurangannya no image thumbnail jadi tidak berguna. karena setiap post yang ada gambarnya pasti diambil sebagai thumbnail. nah kurangnya lagi klo post tanpa image. pasti tidak ada gambarnya sama sekali :D

        • Taufik Nurrohman

          <b:if cond='data:post.firstImageUrl'>
          <img expr:src='data:post.firstImageUrl'/>
          <b:else/>
          <b:if cond='data:post.thumbnailUrl'>
          <img expr:src='data:post.thumbnailUrl'/>
          <b:else/>
          <img src='no-image.png'/>
          </b:if>
          </b:if>
      • Uji Coba

        Apakah cara pembuatan readmore hanya bisa dengan java script dan tanpa java script ini saja?

    • Unknown

      @Taufik Nurrohman ukuran gak jadi masalah cuman aku lagi pengen nyari celah untuk di modifikasi tapi belum nemu :D

    • Taufik Nurrohman

      @system of blog Selain di blog ini, teknik auto read-more versi non-JavaScript ini juga sudah Saya terapkan di blog Awesome Layout coba dikunjungi. Sekarang loadingnya sudah kayak kilat. Efek-efek berkedip karena kode CSS yang Saya letakkan di bawah posting juga sekarang sudah menghilang dan sembuh total! HWEHEHEHEHEEHEE... (-.-,) (-.-,) (-.-,)
      Resolusi thumbnailnya juga sudah Saya ubah dari resolusi s72-c menjadi s300 menggunakan JQuery .attr() <:)

    • Unknown

      @Taufik Nurrohman Yeah kapan2 aku utak atik deh, sebenarnya memang masih banyak rahasia di balik kode kode html di blogger tapi aku gak pernah nemu karena ilmu masih terbatas :)

    • Unknown

      Ajiib bener tapi ane belum minat untuk pasang auto read more cuma judul doang aja biar loadX cepet..

    • Unknown

      Mas, sebenernya kode CSS ini untuk apa?

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

      Bukannya tanpa kode itu pun sudah jadi 72x72px?

      Mohon penjelasannya.

    • Unknown

      Oh, sudha mas. Sudah tahu saya. Terima kasih. :D

    • Beben Koben

      makanya jangan main terus css3/jquery...
      yang beginian kok baru tahu!!!
      kalo gak salah trik ini dipake pada editor baru

      kabuuurrr....

    • Rudy Azhar

      +1 4 u,
      tapi sedikit terganggu dengan notifikasi yang tiba-tiba muncul saat saya ingin menulis komentar. :p

      yang menjadi pertanyaan saya jika postingan tersebut tidak ada gambarnya maka tumbnail akan berisi ruang kosong atau menghilang ? :\

      Dan satu lagi, kenapa tidak ada isian nama dan url pada select profil komentar ini ?

    • Taufik Nurrohman

      @Rudy Azhar Akan muncul gambar cadangan, yaitu yang ada di bawah kondisi <b:else />

      <img class='post-thumbnail' alt='thumbnail' src='http://reader-download.googlecode.com/svn/trunk/images/no-image-72x72.png'/>

      Referensi selengkapnya bisa dilihat di sini: http://blog.duypham.info/2011/01/auto-readmore-for-blogger-no-javascript.html

      Saya sendiri juga merasa terganggu dengan notifikasi yang Saya buat. Tapi itu demi kerapihan area diskusi. Kebanyakan mereka akan menulis komentar balasan begitu saja di bawah diskusi yang seharusnya harus dilanjutkan. Menuliskan pesan di atas formulir saja Saya rasa belum cukup memberi peringatan (bahkan notifikasi seperti inipun tidak terlalu) :'(

      Saya tidak menyertakan pilihan profil Nama dan URL secara manual karena itu membuat foto profil menjadi tidak tampil. Kalau bisa Saya ingin melihat foto profil pada setiap komentator dengan jelas, karena Saya lebih mudah mengingat wajah dibandingkan nama <=)

    • artimes

      mas bro, ada tidak cara menambah karakter pada post.snippetnya??

    • Taufik Nurrohman

      @artimes Nggak bisa mas bro... :drummer:

    • artimes

      mas tolong buatin modifikasi java srciptnya auto read more donk, dengan thumbnail pake "data:post.thumbnail" biar karakternya bisa ditambahin, krn kalo konsep optimize auto read more gak ngaruh untuk image yang di upload ke imageshack..

    • Unknown

      wahhhh nice share nih..q mau nanya taufik kalau untuk menampilkan jumlah komentar di setiap postingn gimana sob seperti gambar di atas

    • agilcr

      nice post sob,, ane bnar terbantu!! :yaya:

    • Taufik Nurrohman

      @Metal-xp Taruh kode ini di sekitar tulisan Read-More:

      <b:if cond='data:post.numComments &gt; 0'>
      <b:if cond='data:post.numComments == 1'>
      1 <data:commentLabel/>:
      <b:else/>
      <data:post.numComments/> <data:commentLabelPlural/>:
      </b:if>
      </b:if>

      [note]Terkait: Struktur Label dan Status Komentar[/note]

    • JKT48IDFans

      Apa kh auto read morenya harus di hapus ?

    • Taufik Nurrohman

      @MrUqhiLCST •° Ya, harus dihapus semua.

      • Unknown

        Pak,kok di saya katanya di ulang ya ?
        nih SSnya

        • Taufik Nurrohman

          Kalau sudah memakai elemen <data:post.snippet/> tidak perlu mengeset atribut data-snippet. Pilh salah satu saja.

    • Ijal Fauzi

      Mas, saya berhasil terapin, cuma saya kok kebingungan nyari bungkus dari elemen postingan, biasanya saya .post tapi ko beda ya :/ hmm

    • Ijal Fauzi

      @Ijal Fauzi Wah udah bisa mas, ternyata jadi .date-outer masa :/

    • Taufik Nurrohman

      @Ijal Fauzi .date-outer itu lebih jauh lagi. Ada di luar .post-outer. Tapi sebenarnya tidak terlalu jadi masalah sih. Yang penting setiap pembungkus masih ada dalam lingkup satu posting tunggal.

      [note]Terkait: Posting Dua Kolom[/note]

    • Putra

      yeah, berhasil :-bd
      mas, itu yang Masalah Interpretasi Tag HTML
      maksudnya gmn? masih bingungs? terus masangnya juga dimana :D

    • Putra

      oiiiaa, ada yg ketinggalan. Seharusnya page statis saya berhasil muncul, tp kok nggak muncul yah? cek: http://underground404.blogspot.com/p/site-map.html
      udah nyerah saya cari kemana2 di templatenya :p

    • Anonim

      mantab banget coba praktek langsung berhasil

    • Taufik Nurrohman

      @Alam Perwira Kalau tidak terbiasa menulis artikel berupa tag-tag HTML pada paragraf awal seperti Saya tidak masalah. Posting Anda masih aman :D
      Untuk menerapkan versi aman Saya, ganti kode ini:

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

      dengan ini:

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

      Terakhir tambahkan kode CSS ini di atas ]]></b:skin>:

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

      @Alam Perwira Sama seperti yang Saya katakan berkali-kali. Kalau tidak ada kodenya tidak akan tahu masalahnya. Kalau bisa paste saja kode elemen postingmu dimulai dari <div class='post hentry'> sampai </div> di sini (di dalam tag PRE) =(

    • Putra

      @Taufik Nurrohman oalah nggerrr, kesimpulannya dibawah ternyata :D
      jadi gak bisa di seleksi di homepage :D tapi berhasil yoa ;)

    • Putra

      @Taufik Nurrohman SIAP pak \o/ trims sudah ngerespon baaaaaanyaaaaaaak bgt pertanyaan saya dr dulu ;)

      HTML Anda tidak bisa diterima: Harus paling banyak dalam 4.096 karakter
      saya upload disini pak ~> https://dl.dropbox.com/u/79777322/postingankuuu.txt

    • Taufik Nurrohman

      @Alam Perwira Hehe. Dipanggil pak lagi *=p Sebenarnya cuma kurang tag kondisional halaman statis saja kok Saya rasa. Ganti kode ini:

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

      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' expr:data-snippet='data:post.snippet'></div>
      </b:if>
      </b:if>
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <data:post.body/>
      <b:else/>
      <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
      <data:post.body/>
      </b:if>
      </b:if>

      Selebihnya Saya kurang tahu apa masalahnya kalau cara ini tetap tidak bisa diterapkan.

    • Putra

      @Taufik Nurrohman Patut dipanggil Pak :D
      yeah, berhasil lagi! ;) Terimakasih Pak Taufik sudah membantu pertanyaan banyak saya dari dulu :)

    • Setio Aji

      Berarti untuk summary post nggak bisa ditambahi ya mas..?
      Ada solusi lain mungkin, biar summary agak panjang masih tanpa javascript.
      Soalnya saya lihat summary post disini malah lebih sedikit dari popular post sendiri

    • Ijal Fauzi

      Mas, saya dapet masalah baru disini. Memang sudah berhasil menerapkan ini, tapi saat di akhir penerapan saya liat ada yang ngga rapi, yaitu banyaknya karakter dalam snippet itu yang bikin elemen lain (post-outer sebelahnya) ngga beraturan, seperti screenshoot dibawah ini :

      ada solusi ngga mas? mungkin ngatur banyaknya karakter kaya auto readmore pake javascript dulu? ditunggu :-bd

    • Taufik Nurrohman

      @Ijal Fauzi Tinggi postingnya harus ditentukan juga. Supaya semuanya punya tinggi seragam:

      /* Tambahkan CSS ini pada kondisi pengingkaran halaman item dan statis */
      .post-body {
      height:450px; /* Misalnya */
      }

      Posting blog Saya juga diset tinggi default-nya. Cek kalau tidak percaya :drummer:

    • Ijal Fauzi

      @Taufik Nurrohman Iya mas memang bisa tadi juga saya coba set default heightnya, tapi jadi ngga rapi dong? misal tombol "lanjut baca" dan "komentar" nya bisa diluar post-outer? :/

    • Taufik Nurrohman

      @Ijal Fauzi Pake posisi absolut mas hahaha!!! :D ⇒ http://jsfiddle.net/tovic/kw7LD/9/

    • Ijal Fauzi

      @Taufik Nurrohman weh pantesan aja, wkwk sip lah !

      • Anonim

        nah kejawab juga masalah saya, tapi masalh baru muncul, pas saat layar di resize (diperbesar) isi posting bertumpuk dengan .post-footer.
        gmana yah solusinya??

    • damas amirul karim

      makasi mas, sekarang blog saya lebih ringan.

    • Sodikin Kurniawan

      Tambahan kalau mau besarin gambarnya tapi tambahan sedikit Javascrit .. hehhehe...

      
      <script type='text/javascript'>
      //<![CDATA[
      function redimthumb(url,title,image,size){
      var imagen=image;
      var devolver ='<a href="'+url+'"><img src="'+imagen.replace('/s72-c/','/s'+size+'-c/')+'" title="" alt="'+title+'"/></a>';
      if(imagen!="") return devolver; else return "";
      }
      //]]>
      </script>
      

      Kode gambar thumbnail

      
      <b:if cond='data:post.thumbnailUrl'>
      <div class='post-thumbnail'>
      <script type='text/javascript'>document.write(redimthumb(&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&quot;,&quot;<data:post.thumbnailUrl/>&quot;,250));</script>
      </div>
      </b:if>
      

      Jadi judul auto readmore sedikit java script wkwkwkwkwkwk....

      • Taufik Nurrohman

        <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
        <script type='text/javascript'>
        //<![CDATA[
        function resizeThumb(parentID, size) {
        var parent = document.getElementById(parentID),
        image = parent.getElementsByTagName('img');
        for (var i = 0; i < image.length; i++) {
        image[i].src = image[i].src.replace(/\/s72\-c/, "/s" + size + "-c");
        image[i].width = size;
        image[i].height = size;
        }
        }
        resizeThumb('main-wrapper', 200);
        //]]>
        </script>
        </b:if>
        </b:if>

    • Anonim

      mas sedikit agak berbeda. di blog saya supaya thumbnailnya di center/ditengah gmana yah? :)

    • Unknown

      wah keren banget mas... teliti banget sama fungsi htmlnya...
      langsung tokcer :-D

    • Anonim

      oia apa bedanya ini <div class='post-snippet' expr:data-snippet='data:post.snippet'></div> dengan kode ini mas <data:post.snippet/> saya sudah coba ga ada bedanya..

      • Taufik Nurrohman

        Bedanya, kalau yang langsung dituliskan sebagai tag akan menampilkan deskripsi sebagai teks secara langsung:

        <div class='post-snippet'>
        Lorem ipsum dolor sit amet...
        </div>

        Sedangkan yang versi atribut, ringkasan posting disimpan dulu ke dalam atribut data-snippet, kemudian kontennya ditampilkan menggunakan CSS pseudo-element:

        <div class='post-snippet' data-snippet='Lorem ipsum dolor sit amet...'></div>

        Intinya tetap sama: menampilkan ringkasan posting.

    • Unknown

      Gan, kalo layout kita ganti, kan asalnya uda ada autoreadmoreny . . Nah karena mainin layout, tiba-tiba ilang. . padahal script dan panggilannya masih sm-sm aja . . gak diubah . . dan di tmpt sama . . klo dipindahkan soalnya, post kita pasti kosong klo menuju page. . jadi ane bingung nih. .
      gara-gara layout dipindahin dikit, jadi amburadul gak bekerja lagi :(

      kira-kira slh dmn biasanya tuh gan klo dah mainin layout, jadi gt. makasih

      • Taufik Nurrohman

        Lain kali backup dulu templatenya sebelum melakukan modifikasi. Selain itu bagian yang dimodifikasi juga tidak akan jauh-jauh dari area .post-body:

        <div class='post-body entry-content'>
        <!-- Modifikasi dilakukan di sekitar sini -->
        </div>

        Jadi jangan sampai jauh-jauh dari area itu.

    • Admin

      Pak, postingan saya ada gambarnya. Tapi ko image thumbnailnya ga ada. Malah jadi gambar yang "no-image"-nya :'(

      • Taufik Nurrohman

        Thumbnail harus berasal dari Blogger/harus diunggah melalui Blogger/Picasa.

      • Ivan

        coba ganti jadi data:post.thumbnailUrl jadi data:post.firstImageUrl
        kalo ane si bisa :D

        • Saeful Rahman

          meluruskan, sama aja mas. Itu fungsinya untuk mengambil gambar pertama pada halaman pos, walaupun ada gambar pada halaman pos tetap tidak akan muncul jika gambar tidak di upload di blogger. Seperti mas Taufik bilang
          Thumbnail harus berasal dari Blogger/harus diunggah melalui Blogger/Picasa.

    • Unknown

      saya sudah pasang ini tapi dengan tampilan yang berbeda...
      yang saya tanyakan gimana cara nya mengembalikan seperti semula mas???
      thanks

      • Unknown

        silahkan di cek etsyteamnfcr.blogspot.com

    • Unknown

      kayaknya ini html udh tidak work ._.
      saya udh nerapin htmlnya tapi gambarnya tidak nongol di homepage

    • Unknown

      Mas saya punya masalah readmorenya tidak sejajar rata berikut screenshotnya:

      • Uji Coba

        ASK: Gan, cara buat readmore kayak agan gimana?

    • Aozon

      Terimakasih ilmunya, sudah saya terapkan.

    • Uji Coba

      ASK: Gan, ini untuk yang pernah pasang script? kalau untuk yang gak pernah, apa aja yang harus di copy?

    Komentar telah ditutup.