30.11.14
44
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

Black red image


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:

Black color image



DEMO SHOW        GET IN CODE

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= 2 Desain Daftar Isi Untuk Blog Bernuansa Hitam
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

44 komentar

  1. cocok nih buat sy pasang di blog sy yg laen ,,, eh, klo untul rubah bakcgroun jadi warna putih gmn nih ,,,, heheh

    BalasHapus
    Balasan
    1. disana kan saya beri 2 desain model, yang mana dulu yang akan mas ubah warna backgroundnya.

      Hapus
    2. heeeee .... wokeh dah, sambil belajr pasang sekrup ,,, eh salah mksudnya skrip ,,,hehe

      Hapus
  2. Kalau saya lebih suka yang nomer 1 dengan membuang gradasi pada warna merahnya. Mantep mbak devi! go devi go devi go! (h)

    BalasHapus
    Balasan
    1. silahkan mas ary, devy sengaja tidak meringkas kodenya menjadi script PHP, tujuannya agar sahabat yang ingin memodifikasi akan dengan bebas melakukannya., semua tampilan ada pada CSS-editing.

      Hapus
  3. Lebih bagus yg warna merah memang..

    BalasHapus
  4. kunjungan yang sudah lama ni mbak, maaf jika lama sekali tidak jalan-jalan ke sini :D

    BalasHapus
  5. mau koment apaan coba kalau ngeliat kodenya aja dah pusing duluan :p

    BalasHapus
    Balasan
    1. kang jum bisa aja, selalu aja pusing tiap kali devy share tentang script seperti ini, padahal kan bukan untuk di edit, semuanya sudah siap pakai, tinggal diCOPY, hehe..

      Hapus
    2. pusing menerapkannya mbak cz sudah gada kompinya.
      yang ada cuman android :p

      Hapus
  6. pusing menerapkannya mbak cz sudah gada kompinya.
    yang ada cuman android :p

    BalasHapus
  7. Wah, ada yang pintar CSS nih. Bisa belajar banyak dong disini

    BalasHapus
  8. warna hitam merupakan warna kesukaan saya makanya untuk desain blog saya lebih memilih warna hitam sebagai warna pilihan, mungkin untuk blog yang satunya akan mencoba dengan template warna hitam diatas thx infonya mbak

    BalasHapus
  9. kunjungan pertama saya nih mbak :D ,, keren2 desain bloggnya :) .. salam kenalll hehhe

    BalasHapus
  10. ini daftar isi seperti sebelumnya kan mbak. yang pernah mbak devy share.. mantap ah mbak sudah di modif lagi dengan tampilan Blacknya... (h)

    BalasHapus
    Balasan
    1. benar sekali mas, karena banyak sahabat lain yang menggunakan template blog yang dominan berwarna hitam, jadi sedikit berbagi buat mereka,, (devy baik hati kan..!!) hehe...

      Hapus
    2. iya sih mbak.. setiap kali saya berkunjung ke blog temen-temen mereka lebih menggunakan warna black, dan tampilan yang simple, ini adalah solusi terbaik banget mbak... [mbak devy kan mang baik sekali saya kasih bunga deh (f)]

      Hapus
  11. Blog saya bernuansa cerah nih, bisa diganti ga background warna nya...

    BalasHapus
    Balasan
    1. saya menggunakan background yang berbeda dalam setiap pengaturan, jika hanya mengganti backgroundnya saja dengan cerah atau white misalnya, maka background title dan read-more juga harus disesuaikan,
      mas Adi bisa edit tampilannya pada pengaturan CSS-nya

      atau lebih simple-nya mas bisa gunakan ini saja yang sudah siap pakai,
      Daftar Isi Tema Diary atau yang ini

      Daftar Isi Tampilan Halaman Facebook

      kalau seandainya tidak mau repot-repot lagi mengubah tampilannya.

      Hapus
  12. Mbak Devy, boleh minta script anti klik kanan nggak?

    BalasHapus
    Balasan
    1. Sebenarnya sih kurang pantes hal ini ditanyakan disini, tetapi tidak apa-apa dech, cuma devy mau tanya kembali neh, scriptnya mau untuk keseluruhan halaman atau untuk halaman tertentu saja mas.?

      kalau untuk keseluruhan halaman gunakan script ini:

      <script type="text/Javascript">
      function clickIE4(){if (event.button==2){alert(message);return false;}}
      function clickNS4(e){if (document.layers||document.getElementById&&!document.all){if (e.which==2||e.which==3){alert(message);return false;}}}
      if (document.layers){document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS4;}
      else if (document.all&&!document.getElementById){document.onmousedown=clickIE4;}
      document.oncontextmenu=new Function("alert(message);return false")
      </script>


      atau bisa kita tambahkan kode variable message seperti ini:

      var message="Hayooo...!!!!!, Mau KLIK KANAN ya, mohon maaf, Klik Kanan Anda tidak berlaku Disini";

      Jadi jika ada visitor yang mau melakukan KLIK Kanan, maka akan klik kanan tersebut akan menampilkan pesan seperti diatas.

      Dan kalau untuk halaman tertentu saja, mas Imron boleh pelajari tutorialnya disini:

      Menonaktifkan Fungsi Copy Paste Dengan Klik Kanan

      Hapus
    2. buat apa mas imron... anti klik kanan. biar jangan di kopas yaa artikel mas imrannya... :d

      Hapus
  13. saya suka warna hitam, pas banget blog saya yg dominan hitam
    makasih mba :))

    BalasHapus
  14. keren banget tuh yang warna hitam,,,,,soalnya saya termasuk penyuka warna HITAM,,,,ok terimakasih untuk tutornya,,,,

    BalasHapus
  15. buat yang design white dong gan, template ane putih soalnya :)

    BalasHapus
    Balasan
    1. sudah devy share kok, dan sudah banyak juga yang pakai, silahkan Anda pilih disini:

      Sitemap Blogger Design Theme

      Hapus
    2. oke sist. terimakasih :)

      Hapus
  16. keren nih demonya, bisa dipraktekkan di blog saya satunya yg berwarna hitam x-)

    thanks sharingnya mbak :)

    BalasHapus
    Balasan
    1. sama-sama mbak Indri :p
      hehe....
      (sekali-kali jadi admin sahabat blogger 77)
      hehe......

      Hapus
  17. yang saya suka itu warna Black Red seperti warna rock n roll banget.. warnanya sangat menantang banget... :)

    BalasHapus
  18. Yang desain biru nya nanti di posting juga yaaa :D

    BalasHapus
    Balasan
    1. suka warna biru ya,hehe...

      Ok dech mbak, kalau ada kesempatan, nanti saya buatkan lagi desain blue, ditunggu ya.

      Hapus
    2. kaalau saya sukanya warna FOFFFF mbak :p

      Hapus
  19. ga perlu blognya kali mbak, yang bernuansa hitam.
    orangnya saja sudah hitam kogk.
    hehe....

    BalasHapus
  20. Ternyata Mbak Ini Pinter Kode2an Juga Ya.. Hehehe..
    Izin Coba Mbak :)

    BalasHapus
    Balasan
    1. mau coba kedua-duanya kah mas, bukannya kenapa-kenapa sih, takutnya mereka brantem lagi di blognya mas Aldi, hehe..

      Hapus
    2. makanya diakrabkan dulu...kalau gak salah satu ngalah ya mbak? heheee

      Hapus
  21. mau pasang tapi kodenya panjang banget. ga bisa lewat hp. hehe.

    BalasHapus
  22. Sangat bermanfaat gan

    BalasHapus
  23. lebih berkarakter dan tegar desain daftar isinya mbak....tapi bukan tegar vokalis lho ya...hanya satu kata ... muantab.....

    BalasHapus
  24. Gan saya pemula belajar blog gimana cara pasang desai daftar isi tolong diajari

    BalasHapus
    Balasan
    1. Tentukan dahulu model daftar isi mana yang akan Anda pasang, misal Anda memilih ingin memasang daftar isi model Elegant Black Color

      Lihat kodenya pada tombol Get In Code
      lalu bungkus kode CSS dengan atribut <style> seperti ini:

      <style type="text/css">
      ....
      letakkan kode CSS disini
      ..
      </style>
      //lalu letakkan kode scriptnya disini (dibawah </style> penutup)

      Hapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK