Membuat Auto Readmore dengan Gambar Diatas Teks - THEBOEGIS ™
Auto Readmore dengan Gambar Diatas Teks
Blogger sebenarnya sudah memiliki fungsi readmore (baca selengkapnya) sendiri. Hal ini juga telah pernah kita ulas panjang lebar di Stresmikir (Baca Cara 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 cara diatas sedikit merepotkan. Namun bagi sebagian orang hal itu bukanlah masalah besar. Tapi bagi sebagian lagi mengatakan, perlu ada terobosan baru agar fungsi readmore ini tidak melulu disematkan saat membuat postingan. Itulah lahir istilah auto readmore.

Ada banyak pilihan untuk membuat auto readmore ini. 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.

Kali ini kita akan mempelajari Cara Membuat Auto Readmore dengan Gambar Diatas Teks Tanpa Javascript.

Membuat Auto Readmore Tanpa Javascript

Seperti yang saya katakan diatas, auto readmore ini sama sekali tidak menggunakan javascript sehingga loading blog Anda tetap akan cepat seperti biasa. Ini karena kita hanya menggunakan perintah internal blogger, dengan memanggilnya sesuai peruntukannya. Dengan menggunakan metode ini pula, kesalahan bisa diminimalisir.

Cara membuatnya ikuti langkah-langkah berikut ini :
  • Pastikan Anda sudah login ke dashboard blogspot. Pilih Template lalu Edit HTML. 
  • Ada dua script yang akan kita tanam ke mode HTML. Pertama merupakan perintah CSS. Copy script dibawah ini tepat 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 kode <data:post.body/>. Pada tamplate baru bawaan blogger, kode ini terdapat tiga buat. 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='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 jika belum yakin, bisa lihat perubahannya melalui tampilan pratinjau).


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

Masih banyak lagi script auto readmore yang bisa kita gunakan untuk blog kita. Silahkan dipilih metode mana yang akan digunakan dan paling sesuai dengan gaya Anda.

Membuat Auto Readmore dengan Gambar Diatas Teks

Auto Readmore dengan Gambar Diatas Teks
Blogger sebenarnya sudah memiliki fungsi readmore (baca selengkapnya) sendiri. Hal ini juga telah pernah kita ulas panjang lebar di Stresmikir (Baca Cara 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 cara diatas sedikit merepotkan. Namun bagi sebagian orang hal itu bukanlah masalah besar. Tapi bagi sebagian lagi mengatakan, perlu ada terobosan baru agar fungsi readmore ini tidak melulu disematkan saat membuat postingan. Itulah lahir istilah auto readmore.

Ada banyak pilihan untuk membuat auto readmore ini. 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.

Kali ini kita akan mempelajari Cara Membuat Auto Readmore dengan Gambar Diatas Teks Tanpa Javascript.

Membuat Auto Readmore Tanpa Javascript

Seperti yang saya katakan diatas, auto readmore ini sama sekali tidak menggunakan javascript sehingga loading blog Anda tetap akan cepat seperti biasa. Ini karena kita hanya menggunakan perintah internal blogger, dengan memanggilnya sesuai peruntukannya. Dengan menggunakan metode ini pula, kesalahan bisa diminimalisir.

Cara membuatnya ikuti langkah-langkah berikut ini :
  • Pastikan Anda sudah login ke dashboard blogspot. Pilih Template lalu Edit HTML. 
  • Ada dua script yang akan kita tanam ke mode HTML. Pertama merupakan perintah CSS. Copy script dibawah ini tepat 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 kode <data:post.body/>. Pada tamplate baru bawaan blogger, kode ini terdapat tiga buat. 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='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 jika belum yakin, bisa lihat perubahannya melalui tampilan pratinjau).


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

Masih banyak lagi script auto readmore yang bisa kita gunakan untuk blog kita. Silahkan dipilih metode mana yang akan digunakan dan paling sesuai dengan gaya Anda.


Jika Anda merasa bahwa artikel-artikel di blog ini bermanfaat, Anda bisa memberikan donasi melalui    aypal   atau dengan
Pulsa:  085399960147  Dana hasil dari donasi akan digunakan untuk meningkatkan update wapkita.net - Terima kasih. 
 PIN : W13NDHY

Catatan Sebelum Berkomentar

1. Dilrang Gombal 😂
2. Dilarang Melarang 😏
3. Dilarang Memasang Togel 😎
4. Dilarang Menghina dan P*M
5. Komentar Harus Sesuai Dengan Artikel Di atas
EmoticonEmoticon Download TeamViewer Untuk Setting Online