KEBEBASAN BERPIKIR
Home » » Cara membuat Menu Tab View keren dengan Efek jQuery

Cara membuat Menu Tab View keren dengan Efek jQuery

Written By dan ipul climber on Jumat, 19 Juli 2013 | 00.59


Disini saya akan memberikan cara membuat Menu Tab View seperti yang ada di Blog saya ini.
Atau lihat gambar di atas. Kurang lebih nya seperti itulah tampilannya nanti.

Cara membuat Menu Tab View keren dengan Efek jQuery:

  • Buka Dasbor Blog anda.
  • Pilih menu tata Letak


Cara membuat Menu Tab View keren dengan Efek jQuery


  • Tambah Widget HTML/JavaScript.
  • Kemudian Copy Paste Kode dibawah ini kedalam Widget HTML/JavaScript tersebut:

<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: #0000FF;
     cursor:pointer;
     -moz-border-radius:5px 5px 0 0;
     border-radius:5px 5px 0 0;
    }
    html .tabber h2.active {
     background: #000000;
     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></div>

  • Simpan.
Catatan: Untuk menampilkan Menu seperti Popular Post, Category, Random Post dll. Silahkan anda letakkan Widget widget tersebut dibawah Widget Menu Tab View ini.

Share this article :

0 komentar:

Posting Komentar

 
Support : Your Link | Your Link | Your Link
Copyright © 2013. 543598 - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger