Memotong Snippet Popular Post Dengan CSS

Sebelum melangkah, artikel ini pertama saya dapatkan dari salah seorang teman blogger saya, Sodikin Kurniawan dalam postingannya yang berjudul: Memotong Snippet Popular Post Dengan CSS. Tentunya ini sangat menarik buat dipublis kembali disini. Baiklah, tidak usah berlama-lama. Mari kita lanjut tutorialnya.

Perhatikan gambar berikut!

Tertarik untuk mengaplikasikannya di blog Anda? Silakan ikuti langkah-langkah berikut.

1. Buatlah widget Popular Posts terlebih dahulu dengan cara masuk ke Page Element ~> Add widget ~> Popular Post. Silahkan sesuaikan kebutuhan dengan menyesuaikan cek list yang ada, misalnya gambar, snippet, dan jumlah populat post yang tampil.

2. Lalu, lakukan langkah-langkah berikut!

Sebenarnya CSS untuk memotong kalimat ini ada 2 model, yakni satu tanpa titik (Clip) dan dua dengan titik (Ellipsis).

Dengan menggunakan kode CSS Ellipsis

Untuk menerapkan style di atas dan ini juga trik yang hampir sama jadinya jika memakai java script.

.PopularPosts .item-snippet {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-moz-binding: url('assets/xml/ellipsis.xml#ellipsis');
}

Kode CSS diatas masukkan saja diatas kode ]]></b:skin>

Menggunakan kode CSS Clip

Jika memakai clip maka tidak terdapat titik di bagian akhirnya, jadi kelihatan kurang rapi.

.PopularPosts .item-snippet {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: clip;
}

Kode CSS di atas masukkan saja di atas kode ]]></b:skin>

Nah, bagaimana? Mudah bukan?

Selamat mencoba.

Lebih lengkap: www.w3schools.com

- Reviewer: Unknown - ItemReviewed: Memotong Snippet Popular Post Dengan CSS