Rabu, 04 Desember 2013

Membuat Tab View Menu dengan Animasi jQuery

بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم
Junior Iqfar Blog's - Membuat Tab View Menu dengan Animasi jQuery. Alhamdulillah, pada pagi ini saya akan menulis artikel tentang Bagaimana Cara Membuat Animasi Tab View Menu di Blog dengan Animasi jQuery seperti pada sidebar blog saya ini. Mungkin pada dasarnya tab view menu ini sama dengan tab view yang lainnya, hanya saja saya menambahkan animasi dengan bantuan jQuery untuk memperindah tampilannya.

Mungkin untuk sobat sekalian yang sudah menggunakan tab view menu ini, maka sobat hanya menammbahkan kode jQuerynya saja. Demo dari Cara Membuat Tab View Menu dengan Animasi jQuery bisa sobat coba pada sidebar sebelah kanan dari blog ini, kira-kira seperti itulah tampilan dari Tab View Menu ini.

Memasang Kode CSS
  1. Pertama-tama sobat harus login ke akun Blogger
  2. Kemudian setelah pada menu utama blogger, selanjutnya sobat masuk ke Template, lalu Edit HTML
  3. Kemudian salin kode di bawah ini
    4. div.TabView div.Tabs {
  padding-top: 0px;
  height: 24px;
  overflow: hidden;
}

div.TabView div.Tabs a {
  float: left;
  display: block;
  text-align: center;
  height: 24px;
  padding: 0px 10px;
  font-size: 12px;
  background: transparent;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

div.TabView div.Tabs a.Active {
  background: #00ccff;
  color: #fff;
}

div.TabView div.Tabs a:hover {
  background: rgba(231, 25, 20, 1);
  color: #fff;
}
div.TabView div.Pages {
  clear: both;
  overflow: hidden;
}

div.TabView div.Pages div.Page {
  height: 100%;
  padding: 0px;
  overflow: hidden;
}

div.TabView div.Pages div.Page div.Pad {
  padding: 3px;
  font-size: 12px;
  color: #fff;
}
  4. Kemudian sobat letakkan sebelum kode ini
    5. ]]></b:skin>
  5. Simpan template sobat.
    Sampai disini kode CSS dari Tab View Menu dengan Animasi jQuery sudah selesai, kemudian lanjut ke langkah berikutnya yaitu memasang kode HTML.

Memasang Kode HTML
  1. Selanjutnya sobat masuk ke Tata Letak
  2. Setelah berada pada Tata Letak, lalu klik Tambahkan Gadget
  3. Kemudian akan muncul popup, lalu sobat cari HTML/Javascript
  4. Nah disini tempatnya untuk meletakkan kode HTML dari Tab View Menu ini
  5. Pada tampilan tersebut ada kotak yang bertuliskan Judul, untuk judul silahkan isi sesuka sobat.
    Kemudian ada Konten, letakkan kode HTML pada kotak ini.
  6. Salin kode HTML di bawah ini
    7. <form action="tabview.html" method="get">
  <div id="TabView" class="TabView">
    <div style="width: 100%;" class="Tabs">
      <a title="Keterangan Menu 1">Menu 1</a>
      <a title="Keterangan Menu 2">Menu 2</a>
      <a title="Keterangan Menu 3">Menu 3</a>
    </div>
    <div style="width: 100%; height: 200px;" class="Pages">
      <!--Awal Menu 1-->
      <div class="Page">
        <div class="Pad">
          Isi Tab View Menu
          Isi Tab View Menu
        </div>
      </div>
      <!--Akhir Menu 1-->

      <!--Awal Menu 2-->
      <div class="Page">
        <div class="Pad">
          Isi Tab View Menu
          Isi Tab View Menu
        </div>
      </div>
      <!--Akhir Menu 2-->

      <!--Awal Menu 3-->
      <div class="Page">
        <div class="Pad">
          Isi Tab View Menu
          Isi Tab View Menu
        </div>
      </div>
      <!--Akhir Menu 3-->
    </div>
  </div>
</form>
<script type="text/javascript">tabview_initialize('TabView');</script>
  7. Letakkan pada kotak Konten
  8. Simpan.
    Sampai disini langkah memasang HTML sudah selesai. Selanjutnya memasang Javascript untuk Tab View Menu ini.

Memasang Kode Javascript
  1. Setelah masuk ke Tata Letak, sekarang saatnya kembali ke Edit HTML lagi. Caranya hampir sama dengan yang diatas, klik Template pada tab yang ada di sebelah kiri, kemudian pilih Edit HTML
  2. Kemudian salin kode javascript di bawah ini
    3. <script type='text/javascript'>
function tabview_aux(TabViewId, id){
  var TabView = document.getElementById(TabViewId);
  var Tabs = TabView.firstChild;
  while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
  var Tab = Tabs.firstChild;
  var i = 0;
  do{
    if (Tab.tagName == "A"){
      i++;
      Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
      Tab.className = (i == id) ? "Active" : "";
      Tab.blur();
    }
  }
  while (Tab = Tab.nextSibling);
  var Pages = TabView.firstChild;
  while (Pages.className != 'Pages') Pages = Pages.nextSibling;
  var Page = Pages.firstChild;
  var i = 0;
  do{
    if (Page.className == 'Page'){
      i++;
      if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
      Page.style.overflow = "auto";
      Page.style.display = (i == id) ? 'block' : 'none';
    }
  }
  while (Page = Page.nextSibling);
}

function tabview_switch(TabViewId, id){
  tabview_aux(TabViewId, id);
}

function tabview_initialize(TabViewId){
  tabview_aux(TabViewId, 1);
}
</script>
    Untuk sobat blogger yang tidak mau rumit dengan kode javascript di atas, sobat bisa menggunakan file yang saya miliki pada hosting Google Drive. Jika sobat sudah meletakkan kode javascript di atas, maka sobat hapus dahulu. Jika sudah tidak ada kode tersebut maka salin kode di bawah ini (Pilih salah satu saja)
    <script src='http://junioriqfar.gweb.io/TabViewMenu/script.js' type='text/javascript'/>
    Atau ini 
    <script src='http://gdriv.es/iqfar/TabViewMenu/script.js' type='text/javascript'/>
  3. Kemudian letakkan sebelum kode ini
    4. </head>
  4. Simpan template sobat.
    Pada proses ini sebenarnya Tab View Menu sobat sudah bisa dijalankan namu masih belum terdapat animasi karena jQuery belum digunakan. Bila sobat ingin menggunakan animasi silahkan sobat melanjutkan langkah berikutnya namun jika sobat tidak memerlukan animasi maka sobat boleh berhenti sampai disini saja.

Memasang jQuery
  1. Masih sama seperti sebelumnya masih berada di Edit HTML
  2. Tambahkan Framework jQuery pada template blog sobat.
    Jika pada template sobat sudah terdapat framework jQuery, maka abaikan saja langkah memasang ini. Namun jika pada template sobat belum terdapat framework jQuery maka silahkan sobat salin kode di bawah ini
    3. <script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
  3. Dan letakkan sebelum kode ini
    4. </head>
  4. Kemudian salin kode di bawah ini
    5. <script type='text/javascript'>
$(document).ready(function(){
  $(&quot;.widget-content&quot;).slideUp(10000);
  $(&quot;h2&quot;).click(function(){
    $(this).next(&quot;.widget-content&quot;).slideToggle(500);
  });
  $(&quot;.Tabs&quot;).click(function(){
    $(this).next(&quot;.Pages&quot;).slideUp(300);
    $(this).next(&quot;.Pages&quot;).slideDown(300);
  });
  $(&quot;.flip&quot;).click(function(){
    $(this).next(&quot;.panel&quot;).slideToggle(500);
  });
});
</script>
  5. Dan letakkan sebelum kode ini
    6. </head>
  6. Simpan template sobat

Alhamdulillah selesai juga artikel tentang Cara Membuat Tab View Menu dengan Animasi jQuery di Blog. Bila sobat merasa bingung atau merasa kurang paham, silahkan sobat meninggalkan komentar di bawah ini.
ٱلۡحَمۡدُ لِلَّهِ رَبِّ ٱلۡعَـٰلَمِينَ

Artikel Terkait


, ,

0 komentar:

Posting Komentar

Jangan Lupa komentar apabila terdapat penulisan kata, kalimat atau yang lainnya. Terima kasih telah berkunjung ke sini.