Membuat Auto Read More di Blogspot

Awal tahun 2022 ini saya akhirnya merombak ulang template Taruih Baraja. Semoga dengan template baru ini, saya jadi lebih semangat untuk ngeblog (dan pembaca jadi kerasan saat bertamu di Taruih Baraja).

Berbekal keiginan saya yang kuat untuk terus memakai platform blogger dengan segala kelebihan dan kekurangannya, serta keinginan untuk mengotak-atik blog dengan tangan sendiri (tidak mau pakai template yang sudah disediakan baik gratis maupun berbayar), ditambah kecintaan saya akan hal-hal yang sederhana dan minimalis, dan didukung oleh faktor minimnya pengetahuan soal coding, jadilah saya membuat catatan "Membuat Auto Read More di Blogspot (Januari 2022)" ini agar suatu saat saya (dan mungkin juga pembaca) bisa melihatnya dan mempelajarinya kembali.

Jadi, dalam mengubah template itu, saya terlebih dahulu memilih untuk menggunakan template bawaan blogger: template Simple yang warna background-nya dominan putih.

Selanjutnya saya mengatur tata letak komponen-komponen seperti sidebar, widget, bentuk tulisan, ukuran huruf, warna tulisan, dan lain sebagainya di bagian Theme dan Layout.

Lanjut, tibalah pada bagian Edit HTML untuk membuat auto read more.

Pertama, tempelkan script di bawah ini sebelum atau di atas </head> 

    <!-- AUTOREADMORE DENGAN MENAMBAHKAN KODE INI DI ATAS /HEAD-->
	<b:if cond='data:blog.pageType != &quot;item&quot;'>
      <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
        <style>
          .thumb img {display: none; float: right; margin: 0 20px 5px 0; width: 25%; height: auto; box-shadow: 0; border: 0; padding: 5; background: #fff}
          .post-body {font-size: 30px; line-height:1.5; position: relative;}
          .post-footer {display: none}
          .post {margin: 0 0 15px 0; border-bottom: 1px solid #f1f1f1; padding-bottom: 15px;}
        </style>
      </b:if>
    </b:if>
    <!-- END AUTOREADMORE -->

Setelah itu, cari <data:post.body/> yang kedua (saya gak tahu kenapa pakai yang kedua, di tutorial banyak bilang gitu, saya belum ngulik lebih lanjut), lalu ganti dengan ini:

      <!-- MENGGANTI <data:post.body/> UNTUK AUTOREADMORE -->
      <b:if cond='data:blog.pageType == &quot;static_page&quot;'> 
        <data:post.body/>
        <b:else/> 
        <b:if cond='data:blog.pageType != &quot;item&quot;'> 
          <b:if cond='data:post.snippet'> 
            <b:if cond='data:post.thumbnailUrl'> 
              <div class='thumb img'> 
                <img expr:src='data:post.thumbnailUrl'/> 
              </div> 
            </b:if> 
            <b:if cond='data:blog.pageType != &quot;item&quot;'> 
              <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
              </b:if>
            </b:if>
            <data:post.snippet/>
            <b:else/>
            <data:post.body/> 
          </b:if>
          <b:else/>
          <data:post.body/>
        </b:if>
      </b:if>
      <!-- END AUTOREADMORE -->

Setelah itu, simpan, dan lihatlah hasilnya.

Catatan:

Bagian yang berwarna oranye boleh diganti sesuai dengan keinginan. Untuk class .thumb img, hapus dulu kode display: none; karena saya ingin menghilangkan imagenya di snippet (tapi tidak menghapus kodingan di belakangnya supaya kalau mau menampilkan gambar thumbnailnya, saya akan lebih gampang mengaturnya).

FYI, di sini saya masih mencari cara bagaimana supaya snippet bisa muncul lebih dari 140 karakter. Saya masih belum begitu mengerti memakai "length" ataupun "longsnippet".

Oh ya, di dalam kodingan juga sengaja banget ditambah komen (<!-- -->) agar lebih mudah mengidentifikasinya.

Hasilnya:

Auto read more di www.taruihbaraja.com

Jika ingin menampilkan jumlah komentar dan label/kategori di bawah snippet atau cuplikan tulisan yang terpotong, maka ada tambahan pada script-nya, seperti ini:

      <!-- MENGGANTI <data:post.body/> UNTUK AUTOREADMORE -->
      <b:if cond='data:blog.pageType == &quot;static_page&quot;'> 
        <data:post.body/>
        <b:else/> 
        <b:if cond='data:blog.pageType != &quot;item&quot;'> 
          <b:if cond='data:post.snippet'> 
            <b:if cond='data:post.thumbnailUrl'> 
              <div class='thumb img'> 
                <img expr:src='data:post.thumbnailUrl'/> 
              </div>
            </b:if>
            <b:if cond='data:blog.pageType != &quot;item&quot;'> 
              <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
              </b:if>
            </b:if>
            <data:post.snippet/>
            <br/>
            <small><p>
              <dd> <!-- tag dd untuk tulisan menjorok ke dalam -->
            <span class='post-comment-link'> <!-- untuk komentar -->
            <b:include cond='data:blog.pageType not in {&quot;item&quot;,&quot;static_page&quot;} and data:post.allowComments' data='post' name='comment_count_picker'/>
            </span>
              </dd>
            <b:if cond='data:top.showPostLabels and data:post.labels'> <!-- untuk menunjukkan label atau kategori -->
             <data:postLabelsLabel/>
              <b:loop values='data:post.labels' var='label'>
               <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='not data:label.isLast'>,</b:if>
              </b:loop>
            </b:if>
            </p></small>
            <b:else/>
            <data:post.body/> 
          </b:if>
          <b:else/>
          <data:post.body/>
        </b:if>
      </b:if>
      <!-- END AUTOREADMORE -->

Hasilnya:

Auto read more di www.taruihbaraja.com

Sekian, semoga bermanfaat.

Baca juga:

Membuat Auto Read More di Blogspot dengan Javascript untuk gambar thumbnail yang tidak blur