Pengganti Script Auto Readmore Blogger dengan Post Snippet - banyak metode untuk memotong teks artikel yang ditampilkan pada homepage. Cara yang paling banyak digunakan dan popupler adalah menggunakan script auto read more, namun ada juga yang masih menggunakan cara manual dengan metode jump break yang disediakan pihak blogger pada area posting mode Compose dan tag <!--more--> pada posting mode HTML. Alternatife lain yang akan saya bahas pada tutorial ini adalah menggunakan metode data:post.snippet untuk memotong post artikel dan data:post.thumbnailUrl untuk memanggil gambar dari post tersebut. Cara ini menurut saya lebih simple karena tidak memerlukan javascript untuk memotong artikel secara otomatis. Namun setiap metode pasti memiliki kelemahan masing-masing, begitu pula dengan cara ini. Jika suatu post tidak memiliki thumbnail maka jumlah karakter yang akan ditampilkan adalah 140 karakter dan jika post yang memiliki thumbnail maka karakter yang ditampilkan adalah 100 karakter. Entah bagaimana untuk mengubah dan menentukan jumlah batasan karakter tersebut saya sendiri masih mencari tahu akan hal ini.
Untuk penerapannya kedalam template, sebagai patokan saya menggunakan default template blogger agar lebih mudah dan bisa dimengerti. Untuk yang sudah menggunakan script auto read more bisa menyesuaikan.
Langkahnya cari kode <b:includable id='post' var='post'> maka dibawahnya akan terdapat dua kode <data:post.body/>, kemudian replace kode <data:post.body/> yang kedua dengan kode berikut ini:
Untuk penerapannya kedalam template, sebagai patokan saya menggunakan default template blogger agar lebih mudah dan bisa dimengerti. Untuk yang sudah menggunakan script auto read more bisa menyesuaikan.
Langkahnya cari kode <b:includable id='post' var='post'> maka dibawahnya akan terdapat dua kode <data:post.body/>, kemudian replace kode <data:post.body/> yang kedua dengan kode berikut ini:
<data:post.body/> <b:else/> <b:if cond='data:blog.pageType == "static_page"'> <data:post.body/> <b:else/> <b:if cond='data:post.hasJumpLink'> <data:post.body/> <b:else/> <b:if cond='data:post.snippet'> <b:if cond='data:post.thumbnailUrl'> <div class='thumb'> <a expr:href='data:post.url' expr:title='data:post.title' expr:alt='data:post.title'><img expr:src='data:post.thumbnailUrl'/></a> </div> <b:else/> <div class='thumb'> <a expr:href='data:post.url' expr:title='data:post.title' expr:alt='data:post.title'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUDxxWxf5Gx2fUrujuT5L4AY29PbDj1xqzUbhaMTj7OZ0X5-jeJc6otYktfw2ToEQYCJ4aI1IovfecYXq9c7CetKlOzXnWnXva8IUmTZEHzCV1OPohqvLmS8xWaY30_E9B2FLyQH5bpxM/h120/no-image.jpg'/></a> </div> </b:if> <data:post.snippet/> <div class='jump-link'> <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a> </div> <b:else/> <data:post.body/> </b:if> </b:if> </b:if> </b:if>Untuk mengatur tampilannya anda bisa menambahkan kode CSS seperti dibawah ini dan taruh di atas kode ]]></b:skin>
.thumb img{float:left;margin-right:10px;width:72px;height:72px} .jump-link{display:inline;float:right;padding:5px;background:#ddd;margin-top:20px}
Diatas hanya dasarnya, untuk merubah tampilan lebih lanjut atur pada bagian CSS dengan penambahan background, border, dll agar lebih sesuai dengan yang di inginkan. Nah sekian postingan dari saya semoga artikel ini dapat berguna bagi pembaca khususnya sobat blogger semua.
NB: Jangan lupa tinggalkan komentar untuk postingan ini terima kasih :)
EmoticonEmoticon