Membuat Auto Readmore Dengan Gambar Diatas Teks

Blogger bahwasanya sudah memiliki fungsi readmore (baca selengkapnya) sendiri. Hal ini juga telah pernah kita ulas panjang lebar di bloGoooblok (Baca Caranya Membuat 'Baca Selanjutnya' di Postingan Blogspot). Hanya saja readmore bawaan dari blogger mengharuskan kita memasangnya setiap kali membuat postingan.

Jika dinilai dari segi efesiensi, mungkin trik diatas sedikit merepotkan. Namun bagi sebagian orang hal itu bukanlah problem besar. Tapi bagi sebagian lagi mengatakan, perlu ada terobosan gres supaya fungsi readmore ini tidak melulu disematkan Saat membuat postingan. Itulah lahir istilah auto readmore.

Ada banyak pilihan untuk membuat auto readmore ini. Ada yg Memakai javascript murni dan ada pula yg tidak. Bahkan ada beberapa pula yg Memakai jQuery dan aplikasi lain, dimana setiap varian itu punya imbas bagi kecepatan loading blog.

Kali ini kita bakal mempelajari Caranya Membuat Auto Readmore dengan Gambar Diatas Teks Tanpa Javascript. 

Ini pola auto readmore yg bakal kita buat :

Membuat Auto Readmore Tanpa Javascript

Seperti yg aku katakan diatas, auto readmore ini sama sekali tidak Memakai javascript sehingga loading blog Anda tetap bakal cepat ibarat biasa. Ini sebab kita hanya Memakai perintah internal blogger, dengan memanggilnya sesuai peruntukannya. Dengan Memakai metode ini pula, kesalahan sanggup diminimalisir.

Caranya membuatnya ikuti langkah-langkah berikut ini :

• Pastikan Anda sudah login ke dashboard blogspot. Pilih Template kemudian Edit HTML. 
• Ada dua script yg bakal kita tanam ke mode HTML. Pertama merupakan perintah CSS. Copy script dibawah ini sempurna diatas ]]></b:skin> (cari dengan gunakan tombol Ctrl F)

.dp-thumbnail{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}
.dp-thumbnail img{border:0;padding:0;max-width:96%;max-height:90px}
.dp-thumbnail span{font-size:26px;line-height:70px;font-weight:bold}

• Lalu cari arahan <data:post.body/>. Pada tamplate gres bawaan blogger, arahan ini terdapat tiga buat. Copy script dibawah ini dan ubah 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='dp-thumbnail'>
   <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 (namun bila belum yakin, sanggup lihat perubahannya melalui tampilan pratinjau).

Kini blog Anda memiliki auto readmore yg sama sekali tidak Memakai javascript. Mengapa demikian, sebab banyak blogger menilai penggunaan terlalu banyak javascript memang mempercantik tampilan tapi memperlambat loading.

Masih banyak lagi script auto readmore yg sanggup kita gunakan untuk blog kita. Silahkan dipilih metode mana yg bakal dipakai dan paling sesuai dengan gaya Anda. Cieeee...

Tweet