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:

label blogger tab image


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 Indriyani
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 =

10 komentar

  1. tutorrialnya sederhana...namun mudah dipahami....luarbiasa....keep happy blogging always...salam dari Makassar :-)

    BalasHapus
  2. benar-benar keren sekali label blogger accroding efek tabulasi ini, jadi misah per label nya

    BalasHapus
  3. sangat menarik dan mudah diterapkan..
    terima kasih sahrenya ijin copy untuk diterapkan diblog sy yg lain ... :)

    BalasHapus
  4. iya, tutorialnya sederhana tapi ngena. bisa langsung diterapin kalo mau :)

    BalasHapus
  5. saya simpan dulu yambak,nanti kalau mau pakai nggak bingung nyari

    BalasHapus
  6. wah mantap juga tutorialnya mba,ijin bookmark dulu...:)

    BalasHapus
  7. waahhh, ini cocok untuk merapihkan label diblog, agar pengunjung mudah melihatnya ;) terimakasih tutorialnya ... sangat membantu

    BalasHapus
  8. Masih di pikir mau naruk dimana, ijin bookmark dulu ya !

    BalasHapus
  9. makasih banyak atas ilmunya.... dan izin safe ya biar mudah mengingatnya

    BalasHapus

  • 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