Cara Membuat Auto Readmore Tanpa Java Script

Cara Membuat Auto Readmore Tanpa Java Script

Blogger sudah menyediakan fasilitas yang satu ini, namun kebanyakan orang menilai readmore bawaan blogger tidak efisien, dikarenakan kita harus memasang readmore setiap kali kita membuat suatu konten.

Namun bagi sebagian orang hal itu bukanlah masalah besar, tapi bagi sebagian lagi mengatakan perlu ada terobosan baru agar fungsi readmore ini tidak selalu disematkan saat membuat sebuah konten. Dan karena itu jugalah sekarang kita mengenal istilah Auto Readmore.

Untuk fungsi Auto Readmore sendiri ada banyak pilihan dalam membuatnya, ada yang menggunakan javascript murni dan ada pula yang tidak. Bahkan ada beberapa pula yang menggunakan jQuery dan aplikasi lain, dimana setiap varian itu punya dampak bagi kecepatan loading blog.

Pada kesempatan kali ini saya akan membahas tentang Cara Membuat Auto Readmore Tanpa Java Script, untuk langkah – langkahnya silahkan dibaca dibawah ini.

  • Pastikan Anda sudah login ke dashboard blogspot. Pilih Template lalu Edit HTML
  • Copy script dibawah ini lalu letakan tepat diatas ]]></b:skin>
.auto-readmore{margin-bottom:20px;border:1px solid #ccc;box-shadow:0 0 transparent inset,0 5px 0 -4px #fff,0 5px 0 -3px #ccc;padding:10px 0;width:100%;height:90px;text-align:center}
.auto-readmore img{border:0;padding:0;max-width:96%;max-height:90px}
.auto-readmore span{font-size:26px;line-height:70px;font-weight:bold}
  • Lalu cari kode <data:post.body/>. Pada tamplate baru bawaan blogger, kode ini bisa saja lebih dari satu. Copy script dibawah ini dan ganti seluruh <data:post.body/> tersebut.
<b:if cond=’data:blog.pageType != &quot;item&quot;’>
 <b:if cond=’data:blog.pageType != &quot;static_page&quot;’>
  <div class=’auto-readmore’>
   <b:if cond=’data:post.firstImageUrl’>
    <img expr:alt=’data:post.title’ expr:src=’data:post.firstImageUrl’/>
   <b:else/>
    <b:if cond=’data:post.thumbnailUrl’>
     <img expr:alt=’data:post.title’ expr:src=’data:post.thumbnailUrl’/>
    <b:else/>
     <span>No thumbnail</span>
    </b:if>
   </b:if>
  </div>
  <data:post.snippet/>
 <b:else/>
  <data:post.body/>
 </b:if>
<b:else/>
 <data:post.body/>
</b:if>
  • Setelah itu Simpan dan Refresh blog Anda.

Sekarang blog Anda sudah memiliki Auto Readmore Tanpa Java Script yang mana penggunaan Java Script terlalu banyak dinilai dapat memperlambat loading dari blog itu sendiri.