Auto readmore tanpa menggunakan javascript

Auto readmore tanpa menggunakan javascript

Trik

Dengan banyaknya posting blog yang dibuat, readmore untuk setiap posting sangat perlu dan penting. Auto readmore javascript digunakan untuk menampilkan hanya sebagian artikel melalui fungsi document.write agar posting yang muncul di halaman index/label arsip tidak terlalu panjang, sedangkan isi artikel masih bisa di telusuri oleh peramban. Kelemahannya adalah tidak ramahnya dengan mesin pencari dan alat terjemahan online, ada pula masalah artikel terlalu panjangn dalam posting maka akan mendapatkan error pada paging pagination Blogger. kali ini saya akan memperkenalkan auto readmore tanpa javascript yang ramah untuk mesin pencari juga tidak terlalu berat untuk load karena hanya memuat kutipan dari isi artikel.
bagamana membuat readmore ini?

Langkah-langkahnya adalah:

Langkah 1: Tambahkan kelas untuk menampilkan post-thumbnail. Ada 2 jenis gambar yang ditampilkan di sebelah kiri atau kanan.

1. Menampilkan gambar di sebelah kiri:

Tambahkan kode berikut di atas kode ]]> </ b: skin>:

.post-thumbnail{float:left;margin-right:20px}

2. Menampilkan gambar di sebelah kanan:

Tambahkan kode berikut di atas kode ]]> </ b: skin>:

.post-thumbnail{float:right;margin-left:20px}

Langkah 2: Tambahkan Kode auto readmore. Ada 4 jenis untuk memilih readmore otomatis.

1. Auto readmore dengan foto:

Ganti  kode <data:post.body/> dengan kode berikut:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <div>
   <b:if cond='data:post.thumbnailUrl'>
    <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
   </b:if>
   <data:post.snippet/>
  </div>
  <div class='jump-link'>
   <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
  </div>
 <b:else/>
  <data:post.body/>
 </b:if>
<b:else/>
 <data:post.body/>
</b:if>

2. Auto readmore dengan gambar dan menampilkan gambar default untuk posting tanpa gambar:

Ganti kode <data:post.body/> dengan kode berikut:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <div>
   <b:if cond='data:post.thumbnailUrl'>
    <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
   <b:else/>
    <img class='post-thumbnail' alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtPIlMlp7enDj7mMUotVby_FesoFS41K-jwpmdmp11Fmk60Nr_8T045XQ02CjyE-AFQs8GmdWcQT4a6Vl6wjRjVPQCw5c_Ibld6yhSbtRj3vUeYnR1r9DmsM1pvXZJBNm9kBwHs3ijS0qN/' width='72px' height='72px'/>
   </b:if>
   <data:post.snippet/>
  </div>
  <div class='jump-link'>
   <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
  </div>
 <b:else/>
  <data:post.body/>
 </b:if>
<b:else/>
 <data:post.body/>
</b:if>

3. Auto readmore dengan gambar. Tidak readmore dengan artikel terbaru:

Ganti <data:post.body/> dengan kode berikut:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
   <b:if cond='data:post.isFirstPost == &quot;true&quot;'>
    <data:post.body/>
     <b:if cond='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/>
    <div>
     <b:if cond='data:post.thumbnailUrl'>
      <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
     </b:if>
     <data:post.snippet/>
    </div>
    <div class='jump-link'>
     <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
    </div>
   </b:if>
  <b:else/>
   <div>
    <b:if cond='data:post.thumbnailUrl'>
     <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
    </b:if>
    <data:post.snippet/>
   </div>
   <div class='jump-link'>
    <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
   </div>
  </b:if>
 <b:else/>
  <data:post.body/>
 </b:if>
<b:else/>
 <data:post.body/>
</b:if>

4. Auto readmore dengan gambar dan menampilkan gambar default untuk posting tanpa gambar. Tidak readmore dengan artikel terbaru:

Ganti <data:post.body/> dengan kode berikut:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
   <b:if cond='data:post.isFirstPost == &quot;true&quot;'>
    <data:post.body/>
     <b:if cond='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/>
    <div>
     <b:if cond='data:post.thumbnailUrl'>
      <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
     <b:else/>
      <img class='post-thumbnail' alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtPIlMlp7enDj7mMUotVby_FesoFS41K-jwpmdmp11Fmk60Nr_8T045XQ02CjyE-AFQs8GmdWcQT4a6Vl6wjRjVPQCw5c_Ibld6yhSbtRj3vUeYnR1r9DmsM1pvXZJBNm9kBwHs3ijS0qN/' width='72px' height='72px'/>
     </b:if>
     <data:post.snippet/>
    </div>
    <div class='jump-link'>
     <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
    </div>
   </b:if>
  <b:else/>
   <div>
    <b:if cond='data:post.thumbnailUrl'>
     <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
    <b:else/>
     <img class='post-thumbnail' alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtPIlMlp7enDj7mMUotVby_FesoFS41K-jwpmdmp11Fmk60Nr_8T045XQ02CjyE-AFQs8GmdWcQT4a6Vl6wjRjVPQCw5c_Ibld6yhSbtRj3vUeYnR1r9DmsM1pvXZJBNm9kBwHs3ijS0qN/' width='72px' height='72px'/>
    </b:if>
    <data:post.snippet/>
   </div>
   <div class='jump-link'>
    <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
   </div>
  </b:if>
 <b:else/>
  <data:post.body/>
 </b:if>
<b:else/>
 <data:post.body/>
</b:if>

Kode <data:post.snippet/> adalah kode potongan jumlah dan panjang cuplikan posting.
Seperti yang telah disebutkan dalam posting saya sebelumnya kutipan dari posting berjumlah 140 karakter karena (Blogger telah memperbarui jumlah karakter dalam widget <data:post.snippet/> sekarang kurang dari jumlah karakter <data:post.snippet/> di widget PopularPosts), karakter cukup untuk mengisi ruang kosong agar sesuai dan tidak kosong.

Gambar yang muncul melalui perintah Data: post.thumbnailUrl.
Ini adalah gambar artikel default blogger yang telah diubah, ukurannya 72x72  dalam ukuran piksel. Perlu diperhatikan bahwa gambar harus di upload melalui Insert gambar pada tool posting Blogger, atau melalui alamat url gambar, agar gambar posting dapat muncul. Prosedur di atas adalah alt atribut judul artikel untuk gambar, hal ini membantu meningkatkan SEO untuk blog Anda.

Sebelum melakukan prosedur ini, Anda perlu menghapus auto readmore yang telah sobat buat dan semoga sukses.

Artikel Terkait

  • Membuat Responsive pada ADSENSE
    Mengatasi masalah iklan dari google yang tidak responsive adalah satu trik menyesuaikan tampilan blog agar tampil bagus di resolusi berbeda dan hal ini perlu kita lakukan apa lagi bagi sobat yang memasang di blognya. pada awal Agustus 2013, Google Adsense resmi support untuk dukungan iklan dengan Style Responsive. Untuk saat ini memang masih d…
  • Membuat ucapan terimakasih di bawah komentar
    Pagi sobat blogger lagi liburan buat posting hiasan untuk blogger, kali ini saya mau share cara dan trik untuk membuat pesan ucapan terimakasih di bawah kotak komentar.   Triknya cukup mudah tinggal menambahkan css dan sedikit kode html di template sobat, langsung aja berikut ini caranya Buka editor template blogger anda sperti bias…
  • Menandai komentar admin dengan css
    Buat sahabta blogger yang masih bertanya tanya tentang cara membuat tanda pada komentar admin untuk mempermudah pengunjung mencari mana komentar admin kali ini saya beri trik dan caranya. blogger tidak memberikan ijin secara penuh untuk melakukan modifikasi penuh komentar admin, lalu bagaimana jika kita ingin membuat tampilan komentar yang ber…
  • Memasang meta viewport
    Membahas responsive memang agak panjang lebar, dan perlu di pelajari satu persatu. untuk itu kali ini saya akan berbagi tentang kegunaan menggunakan meta tag viewport dalam responsive. Dalam Responsive Meta Tag Viewport sangat penting karena meta tag ini berguna untuk menentukan tata letak tampilan Mobile. ketika blog kita di akses lewat Brows…
  • CSS widget label cloud blogger
    Memperbagus tampilan widget label blogger dengan css, dengan css ini tampilan widget label akan memiliki warna background berbeda di setiap link label tergantung dari color yang kita terapkan di dalam css. untuk menerapakannya ikuti langkah di bawah ini: 1. Masuk Dasboard Blogger 2. Pilih Template 3. Kemudain Pilih Edit HTML 4. Salin CSS be…
  • Membuat thumbnail hanya tampil di homepage
    Untuk sahabat yang belum tahu bagaimana menerapkan trik dan cara ini mungkin sering punya pertanyaan, kok bisa ya ketika di halaman beranda/depan/homepage blog image/gambarnya muncul tetapi ketika di halaman posting kok hilang...?, mungkin ini bukan bahasan baru lagi, hanya saja saya menulis ini untuk sobat yang ingin tahu trik dan caranya. ji…

Tidak ada komentar :


Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>

Konversi KodeOOT

Back to Top
Loading...