• 1. 6 Alasan Pengunjung Membenci Blog Anda
  • 2. Cara Menigkatkan Trafik Dan Pagerank Dengan Jutaan Pengunjung
  • 3. Cara Meningkatkan Pagerank Dan Jumlah Pengunjung Dengan Link Refferal
  • 4. 7 Cara Agar Website Muncul di Halaman Pertama Google
  • 5. Tips Gratis Meningkatkan Traffic Blog
  • 6. Blog paling di benci pengunjung dan google
  • 7. 8 Alasan Pengunjung Menyukai Blog Anda
  • 8. Cara Memasang Widget Live Traffic Feed Feedjit di Blogger
  • 9. Cara Memasang Widget Histats di Blogger
  • 10. 4 Cara Agar Blog Ramai Pengunjung
  • 11. Cara Membuat Blog Dofollow (Untuk blogger yang ingin meningkatkan posisi SERP blog mereka)
  • 12. Dofollow (backlink yang bisa membantu sebuah web/blog untuk meningkatkan pagerank)
  • 13. Membuat Tab View Sederhana Di Sidebar
  • 14. Cara membuat Kotak Tukaran Link / Link Excange di Blog
  • 15. 5 Keuntungan Membacklink Postingan Orang Lain
  • 16. Rahasia Blog Berbahasa Indonesia Go Internasional
  • 17. Rahasia Mendapatkan 100 Pengujung Blog Perhari
  • 18. Perbedaan Blog Dofollow dan Blog Nofollow
  • 19. Meratatengahkan Judul Pada Widget Blog
  • 20. Menyatukan Beberapa Widget Dalam Satu Tempat Dengan Efek Marquee
  • 21. Cara Membuat Kotak Kode HTML Dengan Warna Pada Postingan
  • 22. Daftar Adsense tanpa Blog
  • 23. Membuat Menu Navigasi Slide Horizontal Blogspot
  • 24. Cara Agar klik kanan disable atau NO COPAS
  • 25. Tips Mendongkrak Alexa Rank Blog Anda
  • 26. Tampilan Baru Blogger
  • 27. Cara Mengembalikan Permanen Link yang Asli
  • 28. Cara Menambahkan Judul Posting dibelakang Baca Selanjutnya(Read More) di Blogger
  • 29. Cara Membuat Gadget "Follow by Email" di Blogger
  • 30. Cara Membuat Kotak "Like" Facebook Di bawah Postingan Pada Blogspot
  • 31. Cara Membuat Related Posts Untuk Blogger

  • Tuesday, August 16, 2011

    Membuat Tab View Sederhana Di Sidebar


    Tab view bagi saya merupakan tab yang sangat berguna untuk meminimalisir jumlah gadget di sidebar blog kita, sebagai contoh, bila anda mempunyai beberapa gadget yang penting tetapi bila sendainya anda pasang di semua tempat di sidebar anda, tentunya akan membuat panjang sidebar blog anda, maka dari itu tab view ini sangat berguna. Untuk membuat script yang ada utk menjadikan beberapa tab dalam satu gadget di sidebar anda, jadi intinya anda dapat menghemat ruangan pada blog anda sehingga blog andapun jadi tampak lebih rapi. Bagaimana cara membuat Menu Tab View di Blog anda, tanpa harus merubah atau mengutak-atik HTML template blog yang bisa berisiko merusak blog kita apabila tidak berhati2 dalam mengedit. Ada cara yang lebih aman, namun cara ini membuat anda harus rajin - rajin update memasukan links posting ke dalam script, karena masih dengan cara manual.

    Contoh Tampilan Menu Tab View seperti diatas :
    Bila anda tertarik membuatnya, berikut langkah-langkah yang dapat anda lakukan dalam membuat tab viewnya, Langsung aja. Caranya  seperti biasa,  Login ke blogger. Kemudian Pilih Rancangan/Design >> Element Laman >> setelah itu anda Tambah/add gadget lalu pilih Html/Javascript, Nah tinggal copy paste script di bawah ini ke dalamnya :
    <style type="text/css">
        div.TabView div.Tabs
        {height: 30px;overflow: hidden}
        div.TabView div.Tabs a {float:left; display:block; width: 198px; /* 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: #E6E6E6; /* Warna background Menu Utama Atas */ }
        div.TabView div.Pages {clear:both; border:1px solid #BDBDBD; /* Warna border Kotak Utama */ overflow:hidden; background-color:#E6E6E6; /* 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: 600px;" class="Tabs">
        <a>Tips Blog</a>
        <a>Renungan</a>
        <a>Tips Kesehatan</a>
        </div>
        <div style="width:600px; height:250px; " class="Pages">
        <div class="Page">
        <div class="Pad">
    <li><a href="http://showgan.blogspot.com/2011/08/6-alasan-pengunjung-membenci-blog-anda.html">6 Alasan Pengunjung Membenci Blog Anda</a></li>
        </div>    </div>
        <div class="Page">
        <div class="Pad">
    <li><a href="http://showgan.blogspot.com/2011/08/filosofi-pohon.html">Filosofi Pohon</a></li>
        </div>    </div>
        <div class="Page">
        <div class="Pad">
    <li><a href="http://showgan.blogspot.com/2011/08/info-pengobatan-untuk-asam-urat.html">Info Pengobatan untuk Asam Urat</a></li>
        </div>    </div>
        </div>
        </div>
        </form>
        <script type="text/javascript">
        tabview_initialize('TabView');
    </script>
    Sebelum disimpan, ganti dulu url dan huruf berwarna  MERAH sesuaikan dengan links posting blog anda. Saya rasa sekian, Selamat mencoba dan semoga bermanfaat. Jangan lupa tinggalkan pesan bila artikel ini bermanfaat untuk anda yah :)

    10 komentar:

    Error Shinobi said...

    oh ya sob.. kalo buat 2 tabview dalam satu halaman blog... kira2 bisa nggak yaa???..

    Ijal Fauzi said...

    saya lebih suka jquery slick tab dibanding ini. hehe, +1 deh. salam kenal :)

    Berbagi Ilmu Pengetahuan said...

    @shinobi : bisa dunkz :D

    @ijal : tiap org punya selera sendiri2 gan :)

    Ary_Putra said...

    mantap gan infonya. Bisa di coba tuh. Thx

    Abi Says Drunk said...

    Ntar kalo ane ol dikompi dicobain deh gan

    panji hidayat said...

    ayo kunjungi blog sya di football nasional indonesia dn yang ngefans bola

    Cara Cepat Menghilangkan Penyakit Asam Lambung said...

    Terimaksih ya untuk informasinya...semoga formasi berikutnya lebih menarika lagi..

    Pengobatan Tradisional Penyakit Radang Otak said...

    Saya ikut nyimak info yang ini, saya setuju dengan info ini karena dapat memberi informasi dan pengetahuan bagi pembaca, terimakasih telah berbagi informasi.

    Anonymous said...

    This paragraph provides clear idea in support of the new visitors of
    blogging, that actually how to do blogging and site-building.


    Also visit my web site; geometry Dash hack

    cody.id said...

    thanks min artikelnya, sangat bermanfaat sekali...
    http://cody.id/

    Post a Comment

    Blog ini sudah dofollow silakan komentar di bawah ini

    TUKAR LINK
    Silahkan bagi sobat blogger yang berminat tukar link dengan blog ini, tinggal copas aja kode yang ada di bawah ini. Untuk syarat2nya bisa dibaca di sini, bagi para sobat blogger yg ingin ngecek linknya silahkan lihat di bawah ini :



     

    Blog'e Cah Nganjuk Copyright © 2011 -- Template Powered by Blogger