Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Blogger

Mengatur Snippet Artikel Yang Panjang Supaya Terlihat Pendek

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

Sedangkan bahasan kali ini yaitu bagaimana mengatur sebuah snippet yang panjang supaya terlihat menyerupai snipet artikel yang pendek.
Cara ini sangat elok dipakai untuk diterapkan pada blog agan-agan semua dalam hal perayapan robot search engine.

Cara yang akan dijelaskan kali ini kita memfokuskan pada penggunaan css.
Tutorial kali ini kelanjutan dari artikel sebelumnya yaitu Mengatur snippet artikel yang panjang supaya terlihat pendek

Cara Penerapan

kali ini aku memakai metode berikut, anda semua dapat menyesuaikan dengan metode mana yang digunakan, kunjungi link berikut untuk memilih metode mana yang ingin dipakai 5 cara Mengatur Snippet Artikel Blogger pada dasarnya 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 abjad maksimal sebanyak 750

css

.snippet-container {   height : 57px;   overflow: hidden; }
Harap diperhatikan css diatas, css yang ada diatas tidak mutlak menyerupai yang ada, anda dapat ngaturnya kembali sesuai dengan keperluan, baik penambahan css ataupun yang lainnya.

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

Silahkan ganti .snippet-container dengan nama kelas yang dipakai 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>
Selamat berkreasi dan semoga bermanfaat