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

Posted By Sameera Chathuranga

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation test link ullamco laboris nisi ut aliquip ex ea commodo consequat contact me

Thank You