16.10.14
22
Membuat Menu Daftar Isi Blog Efek Transisi - Jika membahas tentang bagaimana cara membuat Daftar Isi Blog mungkin sudah banyak yang mengetahui cara membuatnya, karena setiap blog sudah pasti memiliki menu daftar isi yang Anda sematkan pada menu navigasi, hanya bentuk tampilan yang berbeda dengan menu daftar isi blog efek transisi pada tutorial kali ini. Dengan adanya menu ini, akan membantu mempermudah pengunjung dalam menjelajah keseluruhan isi blog Anda.

Agar tampilannya terlihat keren, saya memisahkan semua label dengan 3 tab menjadi seperti ini:
  • Tab 1 Tombol Daftar Isi
  • Tab 2 Label Title
  • Tab 3 Judul Artikel


Open/Close menu Image


Konsep Url Referensi -
Cara Membuat Site Map Terbaru | Daftar Isi Blog
Membuat Label Blogger Accordion Efek Tabulasi
Memahami Dengan Mudah Bentuk Kinerja CSS Animasi





//bentuk tampilan tab-1
.menu_opener_label {
  background: #f1c40f;
  width: 150px;
  height:40px;
  display: block;
  cursor: pointer;
  position: absolute;
  top: 200px;text-align:center;
  z-index: 10;font:bold 20px/40px Roboto;}

Tab -1 akan tampil sebagai default icon tombol dengan title="daftar isi" dengan perintah KLIK. Sehingga saat Anda ingin menampilkan menu Label (Untuk melihat Tab 2) akan terlebih dahulu dengan melakukan KLIK pada tab-1.


//bentuk tampilan tab-2
.title {
  text-align:center;font:bold 13px/35px Roboto;
  width: 150px;position: absolute;
  height:35px;color:#111;
  display: block;
  top: 202px;left:0px;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;}

Pada tampilan Tab-2 saya beri efek transisi-out, yang jika tab-1 di KLIK maka label title pada tab-2 akan tampil disebelah kanan tab-1 dengan efek animasi-out. Dan akan kembali keawal setelah tab-1 diklik lagi untuk menutup Daftar Isi, sedangkan pada-

Tab -3 adalah menu link untuk menampilkan judul artikel per label. Sedangkan untuk tampilannya saya beri efek animasi fade-in dengan perintah HOVER pada tab-2 seperti ini:

//bentuk tampilan tab-3
.link:hover span {
  margin:0 0 0 19px;
  position:absolute;
  display: inline;
  width:350px;border-left:4px dotted #111;
  background:#ddd;color:#222;
  -webkit-animation:aniload 2s;
  -moz-animation:aniload 2s;
  -ms-animation:aniload 2s;
  -o-animation:aniload 2s;
  animation:aniload 2s;}

Hasilnya...





DEMO SHOW






Sekarang saatnya menggabungkan deklerasi tahapan kode diatas menjadi satu fungsi tampilan untuk Membuat Menu Daftar Isi Blog Efek Transisi dengan penerapan kode lengkapnya seperti ini:



.container {display: block;margin:auto;}
.menu_opener {display: none;}
.menu_opener:checked ~ .link1 {top: 65px;left:200px;}
.menu_opener:checked ~ .link2 {left: 200px;top:105px;}
.menu_opener:checked ~ .link3 {top: 145px;left:200px;}
.menu_opener:checked ~ .link4 {left: 200px;top:185px;}
.menu_opener:checked ~ .link5 {left: 200px;top:225px;}
.menu_opener:checked ~ .link6 {left: 200px;top:265px;}
.menu_opener:checked ~ .link7 {left: 200px;top:305px;}
.menu_opener:checked ~ .link8 {left: 200px;top:345px;}

.link2:hover span {margin:0 0 0 32px;}
.link3:hover span {margin:0 0 0 38px;}
.link4:hover span {margin:0 0 0 27px;}
.link5:hover span {margin:0 0 0 24px;}
.link6:hover span {margin:0 0 0 28px;}
.link7:hover span {margin:0 0 0 27px;}
.link8:hover span {margin:0 0 0 46px;}

.menu_opener_label {
  background: #f1c40f;
  width: 150px;
  height:40px;
  display: block;
  cursor: pointer;
  position: absolute;
  top: 200px;text-align:center;
  z-index: 10;font:bold 20px/40px Roboto;}

.title {
  text-align:center;font:bold 13px/35px Roboto;
  width: 150px;position: absolute;
  height:35px;color:#111;
  display: block;
  top: 202px;left:0px;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;}

.link1, .link2, .link3, .link4,
.link5, .link6, .link7, .link8 {background: #f1c40f;}
.link1 span, .link2 span, .link3 span, .link4 span,
.link5 span, .link6 span, .link7 span, .link8 span {
  display: none;
  text-align:left;
  padding:10px 10px;
  font:bold 11.5px/9px Arial,sans-serif;}

.link1:hover span, .link2:hover span, .link3:hover span, .link4:hover span,
.link5:hover span, .link6:hover span, .link7:hover span, .link8:hover span {
  margin:0 0 0 19px;
  position:absolute;
  display: inline;
  width:350px;border-left:4px dotted #111;
  background:#ddd;color:#222;
  -webkit-animation:aniload 2s;
  -moz-animation:aniload 2s;
  -ms-animation:aniload 2s;
  -o-animation:aniload 2s;
  animation:aniload 2s;}

@import url(http://fonts.googleapis.com/css?family=Roboto);
@-webkit-keyframes aniload {
  from {-webkit-transform:translate(1000px, 0px)}
  to   {-webkit-transform:translate(0px, 0px)}}

@-moz-keyframes aniload {
  from {-moz-transform:translate(1000px, 0px)}
  to   {-moz-transform:translate(0px, 0px)}}

@-ms-keyframes aniload {
  from {-ms-transform:translate(1000px, 0px)}
  to   {-ms-transform:translate(0px, 0px)}}

@-o-keyframes aniload {
  from {-o-transform:translate(1000px, 0px)}
  to   {-o-transform:translate(0px, 0px)}}

@keyframes aniload {
  from {transform:translate(1000px, 0px)}
  to   {transform:translate(0px, 0px)}}

.link1 a, .link2 a, .link3 a, .link4 a,
.link5 a, .link6 a, .link7 a, .link8 a {
   border-bottom:1.8px dotted #999;
   display:block;
   padding-bottom:5px;}


Sebagai contoh, saya hanya menampilkan 8 label. Jika ingin menambahkan beberapa label lagi, cukup tambahkan kode link9, link10,..dan seterusnya pada pengaturan CSS pada kelas masing-masing link. Tahap akhir dengan memanggil semua fungsi CSS diatas dengan penggunaan HTML seperti ini:


<div class="container">
<input class="menu_opener" id="menu_opener_id" type="checkbox" />
<label class="menu_opener_label" for="menu_opener_id">DAFTAR ISI</label>
   <label class="link1 title">DESAIN TEMPLATE
      <span>
        <a href="#">Text Link</a>
        <a href="#">Text Link</a>
        <a href="#">Text Link</a>
      </span>
   </label>
   <label class="link2 title">EFEK GAMBAR
      <span>
        <a href="#">Text Link</a>
        <a href="#">Text Link</a>
        <a href="#">Text Link</a>
      </span>
   </label>
   <label class="link3 title">CSS WIDGET
      <span>
        <a href="#">Text Link</a>
        <a href="#">Text Link</a>
        <a href="#">Text Link</a>
      </span>
   </label>
   <label class="link4 title">MENU NAVIGASI
      <span>
        <a href="#">Text Link</a>
        <a href="#">Text Link</a>
        <a href="#">Text Link</a>
      </span>
   </label>
   <label class="link5 title">EFEK COLECTION
      <span>
        <a href="#">Text Link</a>
        <a href="#">Text Link</a>
        <a href="#">Text Link</a>
      </span>
   </label>
   <label class="link6 title">TUTORIAL BLOG
      <span>
        <a href="#">Text Link</a>
        <a href="#">Text Link</a>
        <a href="#">Text Link</a>
      </span>
   </label>
   <label class="link7 title">INFORMASI SEO
      <span>
        <a href="#">Text Link</a>
        <a href="#">Text Link</a>
        <a href="#">Text Link</a>
      </span>
   </label>
   <label class="link8 title">CSS CODE
      <span>
        <a href="#">Text Link</a>
        <a href="#">Text Link</a>
        <a href="#">Text Link</a>
      </span>
   </label>
</div>

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Membuat Menu Daftar Isi Blog Efek Transisi
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 =

22 komentar

  1. Menarik nih Mbak Devy Daftar isinya dengan Effects Transisi jadi nambah
    Tampilan daftar isi ini semakin atraktf dan menawan ya Mbak. tapi link
    Artikelnya kita pasang secara manual ya Mbak? lumayan juga installasinya
    Namun akan terbayar dengan hasil yang bagus dan indah daftar isi ini, makasih Mbak :)

    BalasHapus
    Balasan
    1. tinggal kita hubungkan secara langsung dengan perintah js untuk menampilkan daftar label untuk fingsi otomatis, namun lumayan cukup berat mas loadingnya,
      akhirnya saya menghapus js tersebut dan menggantikannya dengan tampilan transisi-effect seperti ini dengan CSS

      Hapus
  2. Yess berhasil deh Mbak. makasih atas tutorial daftar isi keren ini juga Pertamaxnya (h)

    BalasHapus
  3. efectnya keren
    makasih tutornya mba.. :))

    BalasHapus
  4. jadinya mesti menulis dulu label yg mau ditampilin yambak,tp hasilnya lebih keren dan lebih ringan..
    ini nggak pakai JS kan mbak?

    BalasHapus
    Balasan
    1. tadinya saya menggunakan js untuk tampilan otomatis, namun saya cek pada 3 peramban berbeda, butuh 5menit untuk membuka halaman, (loading sangat berat) jadi, saya putuskan menghapus scriptnya dan menggantikannya dengan transisi-animasi.

      dan hasilnya sangat ringan jika dibanding menggunakan js.

      Hapus
    2. betul, sangat ringan saya coba demonya

      Hapus
  5. perlu dicoba nih soalnya lain daripada yang lain mbak

    BalasHapus
    Balasan
    1. tampilan menggunakan desain menu navigasi, hanya disetiap tab saya balut dengan efek yang berbeda-beda. jadi hasilnya lain daripada yang lain hehe...

      Hapus
  6. wah,mantap-mantap ni bahasannya,..minta ijin ya untuk mempelajari ilmunya,..kalau diperbolehkan,...terimakasih banyak sis yang cantik dan pinter

    BalasHapus
  7. Wah jadi lebih hidup neh blognya y kalo dipasang menu seperti ini? Coba deh...

    BalasHapus
  8. wah boleh nih dicoba, biar praktis dikasi daftar isi

    BalasHapus
  9. Bisa coba di pelajari. Soalnya daftar isi blog ku, biasa aja

    BalasHapus
  10. saya lihat di demo nya kayaknya ringan di loading nih, punya saya berat..ah saya coba punyanya mbak devi ini ah, sapa tahu sippp :D

    BalasHapus
  11. eh mbak, share juga dung dftar isinya njenengan, gimana cara mbuatnya...saya suka tampilannya tuh :D

    BalasHapus
    Balasan
    1. Kalau daftar isi pada halaman HOME tutorialnya lihat disini mas.

      Modifikasi Daftar Isi Blog

      Hapus
  12. ringan ya mabk demonya, saya akan coba dulu ya :D

    BalasHapus
  13. demonya bagus banget mba.. scriptnya lumaya ya

    BalasHapus
  14. Wah.. makasih atas share ilmunya kak.
    Cuma mau nanya aja neh.
    itu kan ada 8 link tittle.. kalo misalnya cuma mau 4 saja gimana ya kak.
    udah saya coba hapus class link 5, 6, 7, dan 8. kok tittle-nya gak pas di tengah dari daftar isi ya? masih nongol dari atas.
    mohon bantuannya kak. arigatou.

    BalasHapus
    Balasan
    1. pengaturan pada masing-masing URL-label, perhatikan kode CSS berikut:

      .menu_opener:checked ~ .link1 {top: 65px;left:200px;}
      .menu_opener:checked ~ .link2 {left: 200px;top:105px;}
      .menu_opener:checked ~ .link3 {top: 145px;left:200px;}
      .menu_opener:checked ~ .link4 {left: 200px;top:185px;}
      .menu_opener:checked ~ .link5 {left: 200px;top:225px;}
      .menu_opener:checked ~ .link6 {left: 200px;top:265px;}
      .menu_opener:checked ~ .link7 {left: 200px;top:305px;}
      .menu_opener:checked ~ .link8 {left: 200px;top:345px;}

      .link2:hover span {margin:0 0 0 32px;}
      .link3:hover span {margin:0 0 0 38px;}
      .link4:hover span {margin:0 0 0 27px;}
      .link5:hover span {margin:0 0 0 24px;}
      .link6:hover span {margin:0 0 0 28px;}
      .link7:hover span {margin:0 0 0 27px;}
      .link8:hover span {margin:0 0 0 46px;}


      Nah..tinggal disesuaikan nilai tampilnya pada jarak top,left dan right.

      Hapus
  15. aku kan nubie mbaa..
    bisa dijelskan kode2 itu harus diletakkan dimana?

    BalasHapus
    Balasan
    1. Buat sebuah artikel, namun tuliskan dalam formulir laman page, selanjutnya letakkan semua kode diatas kedalam formulir mode tulis HTML. namun bungkus kode CSS diatas dengan tag pembuka &ltstyle type="text/css">
      Contoh seperti ini:

      <style type="text/css">
      ...
      Letakkan semua kode CSS disini
      ....
      </style>
      // Selanjutnya letakkan HTML disini..

      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