Jumat, 17 Januari 2014

Memotong Post Snippet Auto Readmore Blog

Memotong Post Snippet Auto Readmore Blog - Bahasan kali ini bukan membahas tentang auto readmore menggunakan snippet tapi lebih pada jumlah karakter dari artikel yang terbentuk. Biasanya jumlah karakter pada sebuah auto readmore yang menggunakan post snippet berjumlah 140 karakter. Berbeda dengan auto readmore yang menggunakan javascript, kita dengan mudah menambahkan dan mengurangi jumlah karakter tersebut dan karena auto readmore menggunakan post snippet, maka jumalah 140 karakter tersebut secara langsung tidak bisa di ganti karena ia sudah otomatis terbentuk. Pertanyaannya, bisakah 140 karakter tersebut di kurangi?(kalau ditambahi seperti tidak bisa) Untuk itulah, artikel memotong post snippet auto readmore blog ini saya buat :)

Artikel ini merupakan artikel khusus yang beberapa hari yang lalu saya telusuri di search engine dan tidak ditemukan, malahan saya menemukan artikel sejenis namun beda target yaitu artikel blog miliknya Kang Ismet yang terbit tahun 2012 lalu - Memotong Snippet Popular Post di Blogger - bedanya adalah jika di blognya KI memotong snippet popular post dan di blog ini memotong post snippet auto readmore. Pertanyaan keduanya adalah kenapa harus memotong post snippet auto readmore blog? Bukankah karakter yang ditampilkan sudah sangat minimal? Betul, tapi tidak dengan blog saya ini...

Blog ini memang menggunakan auto readmore dengan snippet post tapi karena kemarin tepatnya 2 hari yang lalu (15-01-14) saya melakukan pengeditan terhadap template blog ini untuk diganti dengan yang baru dan karena tampilan lebarnya lebih mini dari template sebelumnya, ternyata auto readmore di halaman depan tidak sesuai harapan, yaitu ringkasan artikelnya terlalu banyak dan tampilannya seperti gambar berikut ini

Memotong Post Snippet Auto Readmore Blog

Dan setelah memotong post snippet auto readmore tersebut, maka hasilnya seperti tampilan gambar berikut ini, atau bisa Anda lihat di halaman depan blog ini

Memotong Post Snippet Auto Readmore Blog

Berikut Cara Memotong Post Snippet Auto Readmore Blog

Javascript
  1. Cari kode </body> didalam template blog dan salin kode berikut diatas kode </body>
  2. <script type='text/javascript'>
    //<![CDATA[
    $('.post .item-snippet').each(function(){
      var txt=$(this).text().substr(0,50);
      var j=txt.lastIndexOf(' ');
      if(j>42)
         $(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));
    });
    //]]>
    </script>
  3. Untuk mengatur jumlah karakter, ganti 50 menjadi lebih kecil atau tidak lebih besar dari 140
  4. Kalau sudah, Simpan dan lihat hasilnya
Itulah cara memotong post snippet auto readmore yang sangat mudah untuk dipasang, terimakasih banyak buat +Kang Ismet  atas artikelnya

Memotong Post Snippet Auto Readmore Blog Rating: 4.5 Diposkan Oleh: ana sriwahyuni

17 komentar:

  1. pertamax mbak, :)

    boleh langsung di coba nih mbak

    BalasHapus
  2. Makasih mbakk,, ini yang saya cari untuk mengurrangi teks pada artikel blog

    BalasHapus
  3. ini seperti mengurangi angka summary nya.

    BalasHapus
    Balasan
    1. iya betul mas tapi tidak seperti dalam auto readmore yang menggunakan javascript

      Hapus
  4. saya nyimak aja deh soalnya belum ngerti yang beginian

    BalasHapus
  5. Saya udah coba, tapi ga bisa.. gimana cara nambah khusus readmore aj dibgaian kiri bawah posting, karena di template saya ga ada readmorenya.. tx :)

    BalasHapus
    Balasan
    1. kalau tidak ada readmore snippetnya tidak bisa :)
      untuk pemasangan auto readmore dengan snippet belum saya buatkan panduannya mas, dan untuk selanjutnya silahkan googling, maaf ya :)

      Hapus
  6. setelah saya intip kode templatenya, blognya mas hari menggunakan auto readmore javascript. untuk memasang Readmore, silahkan cari kode berikut ini:

    <b:if cond='data: blog.pageType != &quot;item&quot;'>
    <div expr:id='&quot;summary&quot; + data: post.id'><data: post.body/></div>
    <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data: post.id/>&quot;);</script>
    </b:if>
    <b:if cond='data: blog.pageType == &quot;item&quot;'><data: post.body/></b:if>
    <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

    lalu jadikan seperti ini

    <b:if cond='data: blog.pageType != &quot;item&quot;'>
    <div expr:id='&quot;summary&quot; + data: post.id'><data: post.body/></div>
    <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data: post.id/>&quot;);</script>
    <span class='rmlink' style='float:left'> <a expr:href='data: post.url'>Read more...</a></span>
    </b:if>
    <b:if cond='data: blog.pageType == &quot;item&quot;'><data: post.body/></b:if>
    <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

    BalasHapus
    Balasan
    1. Saya udah cari kode tersebut yang sama persis ga ketemu mba, masih bingung, dimana mau ditambahin :D

      Hapus
  7. mbak, it doesn't work. tetep panjang juga snippetnya. mala gak sama lagi. padhl sama2 ada gambar. mohon pencerahan.

    BalasHapus
    Balasan
    1. blog saya ini masih menggunakan script tersebut mas dan masih bekerja dengan baik..
      saya lihat di templatenya mas Nasution belum terpasang script jQuery,,,

      Hapus
  8. makasih turorialnya mbak
    tapi aku sudah coba sesuai petunjuk, aku ganti berapapun koq tetap nggak berubah yaa mbak?
    mohon pencerahannya :-)

    BalasHapus
  9. mbak ana..
    saya sudah coba ternyata ('.post .item-snippet') nya diganti dengan ('.popular-posts ul li .item-snippet') baru ada perubahannya :-)
    yang menjadi pertanyaan saya sekarang kalau untuk mengubah lebar dan tinggi kolom snippet-nya itu gimana ya mbak?
    biar nggak terlalu panjang ke bawah gitu
    terima kasih :-)

    BalasHapus
  10. ganti di code cssnya mas, coba cari kode .mas-elemen dan atur ulang untuk margin dan padding

    BalasHapus
  11. Terimakasih Gan...sudah berbagi, tp masih bingung nih....

    BalasHapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia