rozikin blog

Berbagi Pengalaman Online

Wednesday, January 4, 2012

Cara Membuat Widget Menu Tab View Pada Blog

Cara membuat Widget Menu Tab View ini adalah cara termudah yang bisa sobat pake. Mudah dalam penerapannya dan langsung berhasil tentunya. Silahkan sobat copy kode di bawah ini di widget sobat. Ini bukan karya saya, ini karya temen blogger saya yang tentunya memang mahir dalam pembuatan srcipt - script semacam ini.

Ini adalah caranya membuat widget tab view di sidebar Blogger:
  • Masuk ke dashboard blogger.
  • Pilih Rancangan > Tata Letak > Tambah gadget > Pilih (HTML/JavaScript).
  • Copy kode script yang ada dibawah ini dan paste-kan pada gadget HTML/Javascript.
     <style type="text/css">
    .tabber {
     padding: 0px !important;
     border: 0 solid #bbb;
    }
    .tabber h2 {
     float: left;
     margin: 0 1px 0 0;
     font-size: 12px;
     padding: 3px 5px;
     border: 1px solid #bbb;
     margin-bottom: -1px;
     overflow: hidden;
     position: relative;
     background: #e0e0e0;
     cursor:pointer;
     -moz-border-radius:5px 5px 0 0;
     border-radius:5px 5px 0 0;
    }
    html .tabber h2.active {
     background: #fff;
     border-bottom: 1px solid #fff;
    }
    .tabber .widget-content {
     border: 1px solid #bbb;
     padding: 10px;
     background: #fff;
     clear:both;
     margin:0;
    }
    .codewidget, #codeholder {
     display:none; {
    </style>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bloggertabs0.1_min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
     $('#codeholder').bloggerTabber ({
      tabCount : 3
     });
    });
    </script><!-- Jangan hapus kode dibawah, agar widget bisa berfungsi --><div id='codeholder'><a href="http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html" target="_blank"></a><p>Dapatkan Widget Ini <a href="http://rozikinblog.blogspot.com/2013/03/cara-membuat-widget-menu-tab-view-pada.html" target="_blank"><blink>widget</blink></a></p></div>
  • Klik simpan.
  • Atur penempatan menu yang mau di tampilkan pada widget menu tab view blog sobat. Jumlah tab yang akan tampil adalah tiga, jadi susun tiga menu yang akan di tampilkan tepat di bawah widget tab view ini.
widget tab view

Back To Top