Lompat ke konten Lompat ke sidebar Lompat ke footer

Membuat Menu Tab View

Membuat Menu Tab View
Ingin blognya lebih rapi lagi? pakai saja navigasi yang satu ini, yaitu Menu Tab View.Dengan menu tab view, kita akan menghemat lebih banyak tempat, dengan sedikit space kita bisa menampilkan banyak piliha. Misalnya kita bisa menampilkan menu tulisan Terbaru, Komentar, dan Terpopuler. Langsung saja akan kita pelajari bersama cara membuat menu tab view, seperti yang saya pakai sekarang ini.

Untuk membuat tab view yang kita pelajari ini cukup mudah, tidak perlu mengedit template, tapi hanya menambahkan script saja di HTML/JavaScript.

Cara Membuat Menu Tab View
1. Login ke blogger
2. Pilih Rancangan kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode script berikut ini:

<div><style type="text/css">
    div.TabView div.Tabs
    {height: 30px;overflow: hidden}
    div.TabView div.Tabs a {float:left; display:block; width: 77px; /* Lebar Menu Utama Atas */
    text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */
    padding-top:8px; vertical-align:middle; border:1px solid #BDBDBD; /* Warna border Menu Atas */
    border-bottom-width:0; text-decoration: none; font-family: "Verdana", Serif; /* Font Menu Utama Atas */
    font-weight:bold; color:#000; /* Warna Font Menu Utama Atas */ -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px}
    div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #333333; /* Warna background Menu Utama Atas */ }
    div.TabView div.Pages {clear:both; border:1px solid #BDBDBD; /* Warna border Kotak Utama */ overflow:hidden; background-color:#333333; /* Warna background Kotak Utama */ }
    div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden}
    div.TabView div.Pages div.Page div.Pad {padding: 5px 5px}
    </style>
    <script type='text/javascript'>
    //<![CDATA[
    function tabview_aux(TabViewId, id)
    {
      var TabView = document.getElementById(TabViewId);
      // ----- Tabs -----
      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);
      // ----- Pages -----
      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);
    }
    // ----- Functions -------------------------------------------------------------
    function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
    function tabview_initialize(TabViewId) { tabview_aux(TabViewId,  1); }
    //]]>
    </script>
    <form action="tabview.html" method="get">
    <div id="TabView" class="TabView">
    <div style="width: 240px;" class="Tabs">
    <a>Terbaru</a>
    <a>Komentar</a>
    <a>Iklan</a>
    </div>
    <div style="width:240px; height:300px; " class="Pages">
    <div class="Page">
    <div class="Pad">
   
<script style="text/javascript" src="http://duniaanda.googlepages.com/typoxp-recentposts.js">
</script>
<script style="text/javascript">
var numposts = 10;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://kurniasepta.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts">
</script>

    </div>
    </div>

    <div class="Page">
    <div class="Pad">
<script style="”text/javascript”" src="http://duniaanda.googlepages.com/typoxp-recentcomments2.js">
</script>
<script style="text/javascript">
var numcomments = 10;
var showcommentdate = true;
var showposttitle = true;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://kurniasepta.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments">
</script>

       </div>
    </div>

    <div class="Page">
    <div class="Pad">
   <script src="http://kumpulblogger.com/sca.php?b=6024" type="text/javascript"></script>
    </div>
    </div>
    </div>
    </div>
    </form>
    <script type="text/javascript">
    tabview_initialize('TabView');
    </script><div></div></div>

Ada beberapa yang harus kita ketahui dari script di atas:
  • Itu ada adalah tab view yang Belajar Ngeblog di BLOG gunakan, silahkan mengganti beberapa kode warna yang sesuai dengan blog Anda. Misalnya ganti 333333 dan 000000 dengan FFFFFF jika warna dasar blog anda adalah putih.
  • Anda dapat mengganti lebar dan tinggi menu tab view dengan merubah width:240px; height:300px sesuai  dengan sidebar blog Anda.
  • Dan juga Anda harus mengganti script di masing-masing tab ( yang miring ) dengan script yang Anda inginpasang di tab view, atau jika tidak mau susah-susah ganti saja kurniasepta dengan sub domain blog Anda.

34 komentar untuk "Membuat Menu Tab View"

  1. yang HTML paling bawah yang merah itu di ganti dengan ap y?

    thx...

    BalasHapus
  2. dan klo mau ganti warna di Iklan gmana ?
    ato menghapusnya... ??
    THX

    BalasHapus
  3. sangat bermanfaat... makasih kk septa...
    blog saya http://rendyblogblog.blogspot.com/

    BalasHapus
  4. @gado-gadoyang yang merah itu adalah script iklan, kalau mau menghilangkan iklannya ya dihapus saja kode merah itu diganti yang yang lain.

    BalasHapus
  5. Abang kurnia septa klo mo nampilin link2 postingan didalam Tab Viewnya gmna?terimakasih

    BalasHapus
  6. @hatebangar
    kan tinggal ganti yang kurniasepta dengan subdomain blog kamu.

    BalasHapus
  7. barti hanya 2 saja y yg d ganti?klo yg "http://duniaanda.googlepages.com/ harus d ganti jg ga sma subdomain kita sendiri?

    BalasHapus
  8. thanks boy..tp btw low mau rubah tab yang isi coment jadi archive gmn ye??? please help me boy..

    BalasHapus
  9. http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gifhttp://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif

    BalasHapus
  10. thank mas brow tas cmua aplikasi buat blog q cmkn cntik :p:p:p

    BalasHapus
  11. Cara menambahkan Postingan dlam Tab View macam mna .. ?

    BalasHapus
  12. di atas Tab itu ada yang mengikuti korsur tuh gmna ka buat nya>??? :-0

    BalasHapus
  13. bro thank ats informasinya yaaaaaaa =)) :))

    BalasHapus
  14. mantab bro gwo jadi di borong blogger :))

    BalasHapus
  15. itu copy pastenya di mana ?
    html bagian apa ?? :-o

    BalasHapus
  16. yang kotak iklan diganti jadi random post,gimana gan?

    BalasHapus
  17. bang kalo kayak punya abang tuh kan random, gimana tuh bang..?
    folow ya bang
    iglooe.blogspot.com

    BalasHapus
  18. sangat bermanfaat artikelnya

    BalasHapus
  19. untuk dijadikan 4 kolom gimana gan?

    BalasHapus
  20. wah gx bgitu rumit, mulai di coba..

    BalasHapus
  21. makasih mas bro,
    kalo bisa di tambah ya artikel tentang ini.

    BalasHapus
  22. Thanks Mas Tips-nya, it works and look perfect

    BalasHapus
  23. KK Klo Cara nya Ganti Warna nya Gimana,Warnanya Gelap niicccchhhhhh :-/

    BalasHapus
  24. haduh gak pernah berhasil :(

    BalasHapus
  25. msh blm paham nih
    tp patut dicoba

    mksh om ..

    BalasHapus

Berlangganan via Email