2 Desain Daftar Isi Untuk Blog Bernuansa Hitam

2 Desain Daftar Isi Untuk Blog Bernuansa Hitam - Melakukan penjelajahan untuk mengetahui serta mencari semua informasi pada sebuah blog, hanya akan lebih mudah jika blog tersebut telah membuat rangkuman keseluruhan artikelnya dengan tampilan daftar isi. Biasanya pemilik blog menuliskan text dengan link "Daftar Isi, Sitemap Blog" dan lain sebagainya yang ditampilkan dalam bentuk URL pada menu navigasi, tujuannya hanya untuk mempermudah pengunjung dalam mencari dan mengetahui apa saja informasi atau artikel yang mengisi blog tersebut sebagai tempat untuk berbagi dan bertanya.

Bahkan demi memberikan kepuasan pengunjung, banyak pemilik blog yang selalu berupaya mendesain tampilan blog mereka agar terlihat menarik, seperti menyisipkan beberapa widget pada sidebar page dengan Membuat Menu Blogger Dengan Target Gambar, atau mengubah tampilan casing blog dengan balutan warna border yang beragam warna. Namun tidak sedikt juga sahabat lain yang memilih untuk memodifikasi tampilan blog mereka dengan tampilan blog yang bernuansa warna hitam, dari warna cover, background body-posting yang semuanya bernuansa hitam.

2 Desain Daftar Isi kali ini akan sangat cocok untuk menghias tampilan blog sahabat semua pecinta SAHABAT BLOGGER 77 yang memiliki desain blog bernuansa hitam dengan 2 desain berikut:

1. Black Red Light Theme
2. Elegan Black Color

1. Black Red Light Theme

Desain warna hitam samar, tidak terlalu pekat agar tidak membuat mata perih saat melihatnya berlama-lama. Sedangkan untuk teks judul artikel saya beri warna white-smoke dengan efek embos yang saya balut dengan background merah menggunakan elemen linear-gradient agar tampilannya terlihat seakan menyala (light) dengan kode CSS seperti ini:


.span {
  background-color:#981216;
  background:-webkit-linear-gradient(#FD0303 0%, #B20207 50%, #981216 51%, #B20207 100%);
  background:-moz-linear-gradient(#FD0303 0%, #B20207 50%, #981216 51%, #B20207 100%);
  background:-ms-linear-gradient(#FD0303 0%, #B20207 50%, #981216 51%, #B20207 100%);
  background:-o-linear-gradient(#FD0303 0%, #B20207 50%, #981216 51%, #B20207 100%);
  background:linear-gradient(#FD0303 0%, #B20207 50%, #981216 51%, #B20207 100%);

Jika tampilan warna diatas kurang menarik, Anda bisa sesuaikan tampilan background warnanya disni - Mengenal Lebih Jauh Tentang CSS3 Linear Gradient. Untuk desain menu seperti tanggal terbit, jumlah komentar dan link read more (Selengkapnya..) saya balut dengan efek cembung bulat dengan model gulungan kertas dengan elemen seperti ini:


.span {
  background-image:-webkit-linear-gradient(#333, #444, #333, #222);
  background-image:-moz-linear-gradient(#333, #444, #333, #222);
  background-image:-ms-linear-gradient(#333, #444, #333, #222);
  background-image:-o-linear-gradient(#333, #444, #333, #222);
  background-image:linear-gradient(#333, #444, #333, #222);

Hasilnya:



DEMO SHOW        GET IN CODE




2. Elegan Black Color

Tidak jauh berbeda dengan tampilan Black Red Light Theme pada desain pertama, namun untuk desain daftar isi model ke-2 kali ini tampilannya sekilas berbentuk Klise Roll Film. Sedangkan untuk keseluruhan tampilan menggunakan background yang sama warna hitam, namun untuk thumbanail gambar posting saya bentuk dengan border-radius untuk membuat bentuk lingkaran.

Dan yang terpenting adalah, 2 Desain Daftar Isi Blog ini sudah saya lengkapi dengan link pagination-page, sehingga akan mempermudah pengunjung dalam menavigasi halaman sebelumnya dan berikutnya dengan efek focus pada halaman yang telah dikunjungi dengan warna aktif seperti ini:

DEMO SHOW        GET IN CODE