Membuat Label Blogger Accordion Efek Tabulasi

Membuat Label Blogger Accordion Efek Tabulasi - Membuat sebuah tulisan/postingan sudah pasti diberi judul, begitu juga dengan jumlah keseluruhan postingan pada blog yang kita rangkum dalam satu judul, judul inilah yang disebut "LABEL". Dalam satu judul ada satu tulisan, sedangkan dalam 1 label bisa mencapai puluhan bahkan ratusan judul, sehingga membuat rangkuman pada keseluruhan postingan blog sangat penting untuk membuat label disetiap postingan, agar nantinya kita dengan mudah menemukan tulisan tersebut dengan nama label yang telah kita beri tanda.

Untuk Tampilan Label pada tutorial kali ini memang sepintas mirip dengan desain sebelumnya tentang Cara Membuat Daftar Isi Blogger Terbaru Dengan Efek Sortir. Kesempatan kali ini, saya sudah menyiapkan tutorial hangat buat sahabat semua pecinta SAHABAT BLOGGER 77 dengan Cara Membuat Label Blogger Accordion Efek Tabulasi seperti ini:

Yuk..! Baca juga - Cara Menonaktifkan Fungsi Copy Paste Pada Area Tertentu


Menggunakan Perintah element CSS-target dengan sistem accordion desain pada link-hover, menggunakan warna link-focus untuk meng-hover url-menu label, dan saya bungkus dengan model tabulasi sebagai tampilan label dan menghasilkan efek seperti ini:




DEMO SHOW



PENERAPAN KE BLOG
1.1 Element CSS.

- Pada dahsboard, pilih menu Template
- Edit Template
- Temukan kode ]]></b:skin>
- Copy lalu letakkan kode dibawah ini diatasnya

#sb77-label .list-wrap {
  background:#eee;
  background:linear-gradient(left top, #eee 40%, #d0e0e3);
  border-left:inset 8px rgba(224,0,0,.5);
  padding: 10px;
  margin: 0 auto;}

#sb77-label .nav {overflow:hidden;margin:-6em 0 -10px -5px;}
#sb77-label .nav li {width:118px;float:left;margin:0 5px 0 0;}
#sb77-label .nav li a:hover {background-color:#111;}
#sb77-label .nav li.last {margin-right:0;}
#sb77-label .nav li a {
  display:block;
  padding:5px;
  background:#959290;
  color:white;
  font:normal 12px/normal Verdana,serif;
  text-align:center; border: 0;}

#sb77-label ul {list-style:none;padding:0 10px 15px 5px;}
#sb77-label ul li a:hover {background:#fe4902;color:white;}
#sb77-label ul li a {
  display:block;
  padding:3px;
  color:#666;
  border-bottom:1px dotted #666;}

#sb77-label ul li.nav-one a.current,
#sb77-label ul#desain-template li a:hover {background-color:#0575f4;color:white;}
#sb77-label ul li.nav-two a.current,
#sb77-label ul#efek-gambar li a:hover {background-color:#d30000;color:white;}
#sb77-label ul li.nav-three a.current,
#sb77-label ul#css-widget li a:hover {background-color:#8d01b0;color:white;}

2.1 Script jQuery.

Pastikan template Anda sudah menggunakan jQuery ini (kode yang saya beri warna Merah), jika sudah terpasang di template Anda, abaikan saja, namun jika belum copy script berikut lalu tempatkan pada area </head>.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type='text/javascript'>
    $(function() {
        $("#sb77-label").organicTabs();       
        $("#sb77-demo").organicTabs({
            "speed": 200
        });
    });
</script>
<script src="https://s-blogger77.googlecode.com/svn/trunk/accordion-tab-of-blogger-label.js"></script>

3.1 HTML Markup.

Anda cukup tempatkan HTML berikut pada area dimana label blogger ini akan Anda tampilkan pada blog Anda, namun jang lupa ganti teks label yang saya beri warna Biru dengan nama label blog Anda seperti ini:

<div id="sb77-label">
   <ul class="nav">
      <li class="nav-one"><a href="#desain-template" class="current">Desain Template</a></li>
      <li class="nav-two"><a href="#efek-gambar">Efek Gambar</a></li>
      <li class="nav-three last"><a href="#css-widget">CSS Widget</a></li>
   </ul>
     <div class="list-wrap">
      <ul id="desain-template">
       <ol>
        <li><a href="#">Your Title</a></li>
        <li><a href="#">Your Title</a></li>
        <li><a href="#">Your Title</a></li>
        <li><a href="#">Your Title</a></li>
        <li><a href="#">Your Title</a></li>
       </ol>
      </ul>

      <ul id="efek-gambar" class="hide">
       <ol>
        <li><a href="#">Your Title</a></li>
        <li><a href="#">Your Title</a></li>
        <li><a href="#">Your Title</a></li>
        <li><a href="#">Your Title</a></li>
        <li><a href="#">Your Title</a></li>
       </ol>
      </ul>

      <ul id="css-widget" class="hide">
       <ol>
        <li><a href="#">Your Title</a></li>
        <li><a href="#">Your Title</a></li>
        <li><a href="#">Your Title</a></li>
        <li><a href="#">Your Title</a></li>
        <li><a href="#">Your Title</a></li>
       </ol>
      </ul>
     </div>
</div>

Jika sudah tidak ada masalah, saya tunggu ucapan terima kasih Anda pada kolom komentar dibawah.

Happy Blogging, semoga dapat bermanfaat.!

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Membuat Label Blogger Accordion Efek Tabulasi
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 >>

http://sahabatblogger77.blogspot.com/2014/08/membuat-label-blogger-accordion-efek-tabulasi.html

= TERIMA KASIH =

Devy Indriyani

Join To Sahabat Blogger 77