Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Post Snippet Pengganti Script Auto Readmore Blogger

Post Snippet Pengganti Script Auto Readmore Blogger Post Snippet Pengganti Script Auto Readmore Blogger – 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:
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<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://lh5.googleusercontent.com/-mSufUJ214bg/Uo94DjMjnbI/AAAAAAAAGoA/1q7su-tZBkc/h120/no-image.jpg'/></a>
</div>
</b:if>
<data:post.snippet/>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' 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.

Berlangganan artikel via email

14 Response to "Post Snippet Pengganti Script Auto Readmore Blogger"

Pertamaxnya saya amanin dlu mas

Balas

mantap nih mas tutorialnya ..sangat membantu ..

Balas

Kalau tika cuma pake jump break mas, lebih simpel dan gak neko neko hehehe :)

Balas

mantap mas saya pengen langsung coba tapi di blog sudah pake snippet kayak nya cuma masih sederhana saja :D

Balas

jadi masih terlihat kurang rapi ya mas jika dibandingkan sama js

Balas

Cara yang simpel Mas, namun ya itu tadi ukuran gambar juga dihitung dalam karakter, sehingga mengurangi jumlah karakter text yg ditampilkan

Balas

Boleh dicoba nih mas keren banget

Balas

selamat malam mas andes...sy coba terapkan " Post Snippet Pengganti Script Auto Readmore Blogger " diblog sy tapi kok malah postingan sy jadi hilang semua ya? kira2 apanya yg salah pada template diblog sy? untungnya sudah sy beckup sblmnya. mohon pencerahannya ya mas...makasih mas. http://siwanataraja.blogspot.com/

Balas

kalo nampilin thumbnail doang seperti evotemplates gimana mas..
mohon pencerahannya

Balas

ikutan nyimak Gan...Terimakasih

Balas

cara bwt nya gmn ituu??

Balas

Oh iya cara ganti font read more nya gimana

Balas

Trimaksih mas sangat bermanfaat banget

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Post Snippet Pengganti Script Auto Readmore Blogger" ini bermanfaat, share ke jejaring sosial.
Konversi Kode