Mohon Tunggu Proses Memuat Konten Halaman

Terbaru

16
Tgl. 24 Januari 2013

Cara Membuat Atau Memberi Efek Latar Gradasi Warna-Warni Pada Daftar Artikel Populer Blog

Sobat Blogger, sebenarnya sudah cukup lama saya ingin berbagi trik ini dengan Sobat sekalian. Namun, dikarenakan keterbatasan waktu dan t...

Contoh Daftar Artikel Atau Lis Item Latar Gradasi Warna-warni
Sobat Blogger, sebenarnya sudah cukup lama saya ingin berbagi trik ini dengan Sobat sekalian. Namun, dikarenakan keterbatasan waktu dan tenaga, akhirnya saya baru dapat menyusun artikel ini dan kemudian menerbitkannya. Oke, bila dalam artikel sebelumnya yang berjudul ‘Cara Menambahkan Efek Hover Warna Latar Gradasi Pada List Item Entri Populer Blog’ telah saya uraikan cara yang digunakan untuk memberikan efek warna tertentu yang akan ditampilkan ketika daftar artikel disorot dengan menggunakan mouse pointer, maka dalam artikel ini akan saya uraikan tentang cara menambahkan efek warna-warni pada background list item daftar artikel populer (dalam hal ini adalah seperti yang tampak pada gambar di atas).

Menambahkan efek berwarna pada background entri populer sebenarnya bukanlah suatu hal yang baru, karena menurut sepengetahuan saya telah ada banyak tutorial yang menguraikan tentang hal tersebut. Namun demikian (masih menurut sepengetahuan saya), tutorial yang menyajikan tentang hal tersebut rata-rata adalah tutorial yang menguraikan cara membuat daftar artikel warna-warni dengan memanfaatkan gambar sebagai background. Padahal seperti yang kita tahu bersama bahwasanya penggunaan gambar yang berlebih dapat mengakibatkan lambatnya penayangan halaman, terutama apabila sambungan atau bandwidth internet yang dipakai oleh pengguna tidak terlalu tinggi.

Nah, oleh sebab itulah saya rasa tidak ada salahnya bila kita menggunakan trik CSS untuk membuat list item berwarna, karena dengan cara ini bisa jadi tidak akan memperberat penayangan halaman walau sambungan atau bandwidth internet yang dipakai oleh pengguna tidak terlalu tinggi sekalipun.

Untuk keperluan ini caranya tidaklah terlalu rumit. Anda dapat melakukannya secara mudah, yaitu dengan cara mengerjakan langkah-langkah berikut ini secara berurutan.

Pertama, buka editor template dengan cara mengeklik menu ‘Template>Edit HTML’.
Kedua, tambahkan CSS berikut ini dalam area skin. Atau untuk lebih mudahnya cari ]]></b:skin> dan kemudian sisipkan CSS berikut ini tepat di atasnya.
.PopularPosts .widget-content ul li,
.PopularPosts .widget-content ul li+li+li,
.PopularPosts .widget-content ul li+li+li+li+li,
.PopularPosts .widget-content ul li+li+li+li+li+li+li,
.PopularPosts .widget-content ul li+li+li+li+li+li+li+li+li{
  background: #EBFFF5;
  background: -moz-linear-gradient(left center , #EBFFF5 0%, #FFF0F0 50%, #FFF0F0 0%, #EBFFF5 100%);
  background: -webkit-linear-gradient(left, #EBFFF5 0%,#FFF0F0 50%,#FFF0F0 0%,#EBFFF5 100%);
  background: -o-linear-gradient(left, #EBFFF5 0%,#FFF0F0 50%,#FFF0F0 0%,#EBFFF5 100%);
}

.PopularPosts .widget-content ul li+li,
.PopularPosts .widget-content ul li+li+li+li,
.PopularPosts .widget-content ul li+li+li+li+li+li,
.PopularPosts .widget-content ul li+li+li+li+li+li+li+li,
.PopularPosts .widget-content ul li+li+li+li+li+li+li+li+li+li{
  background: #FAFFFF;
}

Keterangan:
Rangkaian CSS yang pertama digunakan untuk memberi warna pada list item dengan urutan ganjil, sedangkan rangkaian yang kedua dipakai untuk memberi warna pada list item urutan genap.
Ketiga, simpan template.

Lantas bagaimana jika kita ingin menambahkan efek seperti di atas pada daftar artikel lainnya atau dengan hanya menggunakan dua buah warna yang berbeda? Anda dapat melakukannya dengan cara menggunakan CSS yang serupa dengan CSS di atas, dalam hal ini adalah dengan cara menentukan setelan untuk ID atau Class terdekat dari list item yang akan diberi warna latar selang-seling.

Sebagai contoh misalnya adalah efek warna latar selang-seling yang digunakan pada daftar artikel terkait blog ini. Jika diperhatikan maka warna background yang digunakan sangatlah berbeda dengan warna yang dipakai pada daftar artikel populer, karena bagian tersebut memang menggunakan CSS yang berbeda. Dalam hal ini CSS yang digunakan untuk bagian tersebut (daftar artikel terkait) adalah sebagai berikut.
.web-related-posts-area ul li,
.web-related-posts-area ul li+li+li,
.web-related-posts-area ul li+li+li+li+li,
.web-related-posts-area ul li+li+li+li+li+li+li,
.web-related-posts-area ul li+li+li+li+li+li+li+li+li {
  background: #eeeeee;
}

.web-related-posts-area ul li+li,
.web-related-posts-area ul li+li+li+li,
.web-related-posts-area ul li+li+li+li+li+li,
.web-related-posts-area ul li+li+li+li+li+li+li+li,
.web-related-posts-area ul li+li+li+li+li+li+li+li+li+li {
  background: #fafafa;
}

Dapat dilihat pada CSS di atas bahwasanya class yang digunakan adalah .web-related-posts-area, karena memang class inilah yang terdekat dengan list item untuk daftar artikel terkait. Sehingga bila diterapkan pada blog yang Anda kelola, maka tentu saja bagian tersebut harus disesuaikan terlebih dulu dengan class terdekat yang dipakai untuk list item yang akan diganti warna latarnya. Dan dapat dilihat pula bahwa dalam kode CSS di atas hanya menggunakan 2 (dua) macam kode warna untuk background, karena kode CSS di atas memang hanya digunakan untuk membuat background dengan menggunakan 2 (dua) buah warna solid yang berbeda sehingga akhirnya menghasilkan tampilan seperti yang tampak pada gambar di bawah ini.
Contoh Daftar Artikel Terkait Dengan Background Warna-warni

Nah, bagaimana, tidak sulit bukan? Selamat mencoba untuk menerapkannya pada blog yang Anda kelola. Dan apabila Anda mengalami kendala atau kesulitan dalam mengimplementasikannya, maka silakan ajukan pertanyaan tentang kendala atau kesulitan yang Anda alami dengan cara mengeposkan komentar dalam artikel ini.

Semoga berguna dan bermanfaat.
Salam.


Ad

Suka? Bagikan artikel ini kepada teman - jaringan Anda.
Label: , .
Silakan klik di sini untuk mengeposkan komentar Anda. Jika Anda ingin membaca artikel lain yang terdapat pada blog ini, maka dapat Anda lakukan dengan cara membuka laman daftar isi. Catatan: Komentar balasan hanya diprioritaskan untuk pertanyaan dan atau pernyataan yang diposkan dengan memakai formulir komentar Blogger.
Admin
Terdapat 16 komentar untuk artikel ELTELU yang berjudul Cara Membuat Atau Memberi Efek Latar Gradasi Warna-Warni Pada Daftar Artikel Populer Blog .
24/01/13 14.17 O

ia sob benar, menggunakan css dengan bandwidth internet yang rendah sangat diperlukan, karena tidak membuat loading halaman berat dan kemudian tutorial diatas mudah dipahami. saya ijin belajar menggunakan trik ini sob.

Terima kasih.

24/01/13 18.21 O

@Kraeng FranciscoSama-sama Sobat. Silakan jika ingin mencoba menggunakan teknik yang saya uraikan di atas. :)

Mantap kang informasinya.
kapan-kapan saya coba kang..

28/01/13 09.11 O

@Ahmad Lukman NulhakimSilakan Sob. :)

23/02/13 10.07 O

mas kalo mau buat artikel popules sam kayak punya mas gimana caranya.. apa pake wodget atau ada tambahan script ya...
sy pengen coba buat efek latar gradasi... tutorial mas

02/03/13 05.40 O

@Asih Budi AriyantiUntuk membuat daftar artikel populer seperti itu, dapat langsung dengan menggunakan widget yang telah disediakan oleh Blogger, Sob.

Hanya saja agar di belakang judul artikel muncul gambar tautan untuk membuka artikel tersebut di tab baru, memang perlu ditambahkan script tertentu di dalam template.

03/03/13 07.01 O

wah, tutorial yang bermanfaat bgt...
Saya mau coba dulu ya

04/03/13 08.05 O

asih boleh minta scripnya mas... apa langsung pake tutorial di atas

04/03/13 14.00 O

@jona rendraSilakan Sob. Semoga saja benar dapat diambil guna dan manfaatnya.

04/03/13 14.16 O

@Asih Budi AriyantiBoleh sekali Sob. Akan tetapi untuk saat ini sepertinya belum ada cukup waktu bagi untuk menyusun dan kemudian menerbitkan artikelnya.

Yang pasti pada saatnya nanti akan saya susun dan kemudian menerbitkan artikelnya agar dapat Sobat terapkan dan juga agar dapat digunakan olah Sobat Blogger yang lain.

Dan kemudian terkait dengan script di atas, itu hanyalah dipakai untuk memberikan efek warna-warni pada list item artikel saja.

mas kalau dipassang dipost gimana...

18/04/13 22.24 O

@mencintai dengan sederhanaCaranya seperti contoh yang kedua, Sob. Jadi intinya tinggal disesuaikan saja dengan id atau class bagian yang akan diberi efek tersebut.

AYAHE MELA udah aku coba mas..gak jadi jadi mungkin penempatannya salah atau gimana..kalau bisa coba mas lihat blog saya ntar sama mas tunjukan kodenya tempati dimana.....

20/04/13 06.02 O

@mencintai dengan sederhanaHwaduh Sob, sepertinya memang agak repot nih. Sebab setelah saya cek sepertinya Sobat banyak menggunakan inline style untuk CSS pada tiap-tiap bagian.

Padahal untuk menerapkan teknik di atas kan lebih mudah bila mengacu pada ID atau Class CSS-nya.

Sebagai contoh saja misalnya ketika saya menerapkan pada artikel terkait, di situ saya mengacu pada class .web-related-posts-area, tapi kalau yang di blog Sobat tidak ada class spesifik untuk bagian tersebut.

07/03/14 09.09 O

Keren Mas Semar, izin Nyimak yooh :D

09/03/14 23.12 O

@Fajri Andaviar Silakan Sob. Akan tetapi kalau misalnya Sobat ingin mencoba menerapkannya juga tidak apa-apa kok. :)

o

  • .Ragam Tumbuhan
  • .Unik & Langka
  • .Aneka Buah
  • .Produk Sederhana
  • .Karya Seni
  • .Tempat Wisata
  • .Ragam Kegiatan
  • .Aneka Bunga
  • .Hewan & Serangga
GALERI
KIRIM MASUKAN
E L T E L U
Semar Bingung's Weblog