Cara Pasang Read More Otomatis Tanpa Javascript

\ \ 2 comments
Assalamu 'alaikum wr.wb
Blogger Modification Tutorial

Semua Blogger pasti sudah tak asing lagi dengan yang namanya Read More ini, sebenarnya kalau kata Blogger sendiri lebih menjorok ke nama Jump Link tapi ternyata lebih populer dengan nama Read More.

Read More sendiri sebenarnya udah ada 3 versi setau saya, dan ini adalah versi yang ke-3. Sebelumnya blog ini juga menggunakan Read More versi ke-2, tetapi setelah membaca beberapa kekurangan Read More versi ke-2 akhirnya saya putuskan untuk upgrade ke versi yang sekarang ini. Sedikit saya singgung dulu, apa sih kekurangan Read More versi yang saya pakai sebelumnya.
  • Yang pertama, karena Read More yang versi ke-2 menggunakan javascript sehingga akan menambah waktu loading blog.
  • Read More tersebut hanya menipu pandangan mata kita saja, padahal sebenarnya semua tampilan posting dihalaman Homepage terload semuanya, tetapi dipaksa javascript untuk menampilkan beberapa baris kalimat saja.
  • Intinya Read More yang versi ke-2, hanya memberikan harapan palsu bagi sobat yang menginginkan menambah kecepatan loading blog dengan menggunakan Read More versi ini.
Sedangkan untuk Read More yang versi ke-3 ini semua kekurangan di atas sudah dapat tertutupi, tetapi  kita tidak dapat mengatur berapa  jumlah karakter huruf yang mesti ditampilkan, karena semuanya sudah diatur sama yang punya (dalam kasus ini yang punya tentu saja Blogger).

Cukup sampai di sini dulu basa-basinya, langsung menuju ke tutorialnya.
Masuk ke design template ==> centang Expand Template Widget

Langsung aja cari kode <data: post.body/>  , kalau muncul lebih dari satu maka cari yang paling dekat dengan kode <div class='post-header-line-1'/> lalu tandai dan ganti dengan kode berikut
<b:if cond=" data:blog.pagetype="="><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='Image thumb'>
<img expr:src='data:post.thumbnailUrl'/>
</div>
</b:if>
<data:post.snippet/>
<b:if cond='data:post.jumpLink != data:post.hasJumpLink'>
<div class='jump-link' style='float:right'>
<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>
</b:if> 
Lalu tambahkan kode di bawah sebelum kode </b:skin>
.thumb img {
float: left;
margin: 0 10px 10px 0;
}

Simpan template sobat.

Semoga tutorial ini bermanfaat bagi sobat semua. Salam Blogger.
Wassalamu 'alaikum wr.wb

2 comments: