Cara Mudah Membuat Menu Multi Tab Di Blog

Hahihuheho - Kali ini saya akan membagikan tips mempercantik blog.
Yaitu tips Membuat Menu Multi Tab Di Blog. 
Tapi sebelumnya sekedar informasi untuk sobat bahwa artikel terbaru dari blog ini adalah Cara Memasang Search Box Di Blog.

Langsung kepermasalahan. Bagi sobat yang mau memasang Menu Multi Tab di Blog ikuti langkah langkah di bawah ini


Cara Mudah Membuat Menu Multi Tab Di Blog :



1. Login keakun blog sobat
2. Pilih  Template --> Edit HTML
3. Cari kode </head>
4. Copy Kode dibawah ini tepat diatas kode</head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

5. Simpan!

• Kemudian Pilih Tata Letak --> Tambahkan Gadget
• Pilih HTML/JavaScript
• Copy kode dibawah ini 

<style type="text/css">

        .blogtabs {padding: 0px !important;border: 0 solid #bbb;}

        .blogtabs h2 {float: left;margin: 0 2px 4px 0;font-size: 12px;padding: 3px 5px;border:1px solid #bbb;overflow: hidden;position: relative;background: #e0e0e0;cursor:pointer;}

        html .blogtabs h2.active {background: #fff;}

        .blogtabs .widget-content {border: 1px solid #bbb;padding: 10px;background:#fff;clear:both;margin:0;}

        .btab, #showtabs {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://ayriyzone.googlecode.com/files/SimpleTabViewJQuery.js"></script>

        <script type="text/javascript">

        $(document).ready(function() {

        $('#showtabs').simpleBlogTab ({organictabs: 3});

        });

        </script>

        <div id="showtabs"></div>

Ket : Kode berwarna biru adalah kode warna

Kode berwarna hijau adalah kode ukuran

Kode Berwarna merah adalah jumlah tab yang akan digabungkan

Ganti sesuai keinginan sobat

• Simpan!

Letakkan widget yang akan digabungkan tepat dibawah widget yang baru saja dibuat 

Selesai deh, dan lihat hasilnya!

loading...