xml bloggerSedangkan 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 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 penggunaancss.
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>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<style>
.snippet-container {
height : 57px;
overflow: hidden;
}
</style>
</head>
<body>
<h3>
Perlebar dan perkecil area preview<br>
<small>Untuk melihat <code>css</code> bekerja</small>
</h3>
<div class="snippet-container">
Lorem ipsum dolor sit amet, at duo virtute legimus perfecto, no similique cotidieque mediocritatem usu. Mollis dignissim constituto mea te. Choro option delicatissimi ea has, in duis graece quaerendum duo. Quo oratio nemore vocibus no. Ea cum error commune liberavisse, vix ea enim assueverit.
Lorem ipsum dolor sit amet, at duo virtute legimus perfecto, no similique cotidieque mediocritatem usu. Mollis dignissim constituto mea te. Choro option delicatissimi ea has, in duis graece quaerendum duo. Quo oratio nemore vocibus no. Ea cum error commune liberavisse, vix ea enim assueverit.
Lorem ipsum dolor sit amet, at duo virtute legimus perfecto, no similique cotidieque mediocritatem usu. Mollis dignissim constituto mea te. Choro option delicatissimi ea has, in duis graece quaerendum duo. Quo oratio nemore vocibus no. Ea cum error commune liberavisse, vix ea enim assueverit.
</div>
<div class="read-more">
<a href="#">Read More...</a>
</div>
</body>
</html>
