Cara Mudah Membuat Menu Tab View

Cara Mudah Membuat Menu Tab View - Kali ini saya akan berbagi Tutorial Blog yaitu Cara Mudah Membuat Menu Tab View Menu Tab View ini berfungsi untuk menghemat Ruang Sidebar Blog Kamu, dengan Memasang Menu Tab View ini juga memberikan kesan Cantik, biasanya jika kita mencari Cara Membuat Menu Tab View Ini cara membuatnya sangatlah Rumit, tapi kali ini Tidak begitu rumit Caranya Mudah Gampang dan Pasti Bisa Di Pahami, baiklah langsung aja Cara Membuatnya.

1. Login Ke Blog Kamu.

2. Pilih Rancangan Lalu Pilih Edit HTML.

3. Cari Kode </head> lalu Copy Script dibawah ini tepat diatas Kode </head>.

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

4. Simpan.
5. Lalu Pilih Rancangan Lagi, Terus Pilih Add Gadget.
6. Pilih HTML JavaScript.
7. 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 #ff0000;overflow: hidden;position: relative;background: #e0e0e0;cursor:pointer;}
html .blogtabs h2.active {background: #000;}
.blogtabs .widget-content {border: 1px solid #ff0000;padding: 10px;-moz-box-shadow: 1px 1px 10px #888;
-webkit-box-shadow:1px 1px 10px #888;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;;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://infonetmu.googlecode.com/files/SimpleTabViewJQuery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#showtabs').simpleBlogTab ({organictabs: 3});
});
</script>
<div id="showtabs"></div>

8. Perhatikan Gambar Dibawah Ini.

9. Perhatikan Huruf Tab View itu adalah Kode Nomer 7.

10. Lalu Tab 1,Tab 2,Tab 3 Isi dengan Widget lainnya seperti Recent Post, Random Post, Label dan Lain-lainnya. Maka secara Otomatis 3 Widget yang Berada Di Bawah Kode Tab View akan terseret jadi Tab View. Kaya Gambar Dibawah Ini.

Gimana Sob lebih mudahkan, semoga Sobat dapat memahaminya dan jika ada kesalahan dan tidak paham Coba Tinggalkan Pesan Di Kotak Kometar.

SELAMAT MENCOBA

UNIK

Translate

Cara Mudah Membuat Menu Tab View

BACA JUGA YANG INI :