tRikSonic
Tema
  • Original
  • Translate

Mengatur snippet artikel yang panjang agar terlihat pendek

Terakhir diperbarui : 28 Mei 2018 - 21.58
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.
Mengatur Snippet Artikel Blogger - Blogger Tutorial

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>
<!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

3 komentar

illvart
illvart7/03/2018ReplyBalas Komentar ini
Bro share template ini dong, mau ngambil bagian variant hehe, kalau boleh. Atau kirim lewat email emiralrashid@gmail.com
Adi Jaya
Adi Jaya7/16/2018
:-D
Dedi MM Kom
Dedi MM Kom2/21/2019
Gan ane punya nih, template yg ini. tinggal ente edit2 sedikit biar gk sama banget kayak ini.
Tar ane kirim ke email emiralrashid@gmail.com
Comment Form

Posting Komentar

  1. Untuk menyisipkan sebuah link atau tautan gunakan <i rel="link=//example.com">teks disini</i>
    • Tanpa menggunakan https: dan http:
  2. Untuk menyisipkan sebuah kode yang pendek gunakan <i rel="code">kode disini</i>
  3. Untuk menyisipkan sebuah kode yang panjang gunakan <i rel="pre">kode disini</i>
  4. Untuk menyisipkan sebuah teks Tebal gunakan <strong>teks tebal disini</strong>
  5. Untuk menyisipkan sebuah teks Miring gunakan <em>teks miring disini</em>
  6. Untuk menyisipkan sebuah gambar gunakan <i rel="image">url gambar disini</i>

Ketentuan Komentar

  • Pengguna yang dapat berkomentar adalah pengguna yang memiliki akun google
  • Guna mengurangi komentar yang bersifat spam, maka akan diberlakukan langkah verifikasi kata.
  • Pengguna bertanggung jawab atas komentar yang dikirim
  • Admin dan penulis blog mempunyai hak untuk menampilkan, menghapus, menandai spam, pada komentar yang dikirim
  • Dengan mengirimkan sebuah komentar, maka pengguna dianggap menyetujui semua ketentuan diatas

Poin ketentuan diatas tidak bersifat tetap, dan dapat berubah kapan saja

Konversi Kode
Kode yang ingin dikonversi

Loading.....
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.