Mengatur snippet artikel yang panjang agar terlihat pendek

Tutorial kali ini kelanjutan dari artikel sebelumnya yaitu 5 cara Mengatur Snippet Artikel Blogger, ada baiknya silahkan kunjungi link tersebut untuk mempelajari tentang bagaimana membuat sebuah ringkasan artikel atau snippet artikel hanya dengan menggunakan xml blogger

Sedangkan bahasan kali ini adalah bagaimana mengatur sebuah snippet yang panjang agar terlihat seperti snipet artikel yang pendek.

Cara ini sangat bagus digunakan untuk diterapkan pada blog agan-agan semua dalam hal perayapan robot search engine.

Cara yang akan dijelaskan kali ini kita memfokuskan pada penggunaan css.

Cara Penerapan

kali ini saya menggunakan metode berikut, anda semua bisa menyesuaikan dengan metode mana yang digunakan, kunjungi link berikut untuk menentukan metode mana yang ingin digunakan 5 cara Mengatur Snippet Artikel Blogger intinya disini kita hanya fokus pada penggunaan css.

Contoh XML

<div class="snippet-container">
  <b:eval expr='snippet(data:posts.snippets.long, {length: 750)'/>
</div>

Kode diatas akan menghasilkan snippet artikel dengan jumlah karakter maksimal sebanyak 750

css

.snippet-container {
  height : 57px;
  overflow: hidden;
}

Harap diperhatikan css diatas, css yang ada diatas tidak mutlak seperti yang ada, anda bisa ngaturnya kembali sesuai dengan keperluan, baik penambahan css ataupun yang lainnya.

Yang paling penting adalah sesuaikan kembali dengan css yang digunakan pada template/tema yang digunakan baik besar font yang digunakan line-height yang digunakan (ini penting agar tampilan sesuai harapan)

Silahkan ganti .snippet-container dengan nama kelas yang digunakan dan sesuaikan kembali nilai pada height sesuai dengan tampilan yang diinginkan.

Demo Penggunaan

Silahkan pelajari melalui live demo berikut untuk mempelajari bagaimana css tersebut bekerja.

<style>
.snippet-container {
    height : 57px;
    overflow: hidden;
}
</style>

<div class="snippet-container">
 <!-- long text -->
</div>

<div class="read-more">
  <a href="#">Read More...</a>
</div>

Selamat berkreasi dan semoga bermanfaat