Cara Membuat Widget Menu TAB View - Hallo sahabat Didhiksty Blog, Pada Artikel yang anda baca kali ini dengan judul Cara Membuat Widget Menu TAB View, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Java Script, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Cara Membuat Widget Menu TAB View
link : Cara Membuat Widget Menu TAB View

Cara Membuat Widget Menu TAB View

Menu TAB view adalah widget tambahan yang berbentuk tab. Dengan cara ini tab view kita dapat menghemat sidebar pada blog kita sehingga  tidak perlu lagi menambahkan banyak widget yang akan memberatkan loading pada blog. Dengan cara ini diharapkan akan memberi warna tersendiri karena belum disediakan oleh tempelate bawaan dari blogger.

Untuk membuat widget ini ikuti langkah langkahnya sebagai berikut:

1.	Login ke blog.
2.	Masuk ke template lalu pilih edit HTML
3.	Sebaiknya backup dulu tempelate anda.
4.	Silahkan cari kode ]]></b:skin>  dengan cara Tekan CTRL+F untuk mengeluarkan kotak pencarian.
5.	Letakkan kode dibawah ini di atas kode ]]></b:skin>

/* tab model 2 ateonsoft.com */ div.Tabateonsoft div.TFs {height: 30px; overflow: hidden;} div.Tabateonsoft div.TFs a {float: left; display: block; text-align: center; text-decoration: none; font: normal 12px arial; padding:3px 5px 3px 3px; margin:0 5px 0 0;letter-spacing:-0.07em; background:#f0f0f0; color: #333; border-top:1px solid #CCCCCC; border-right:1px solid #999999; border-bottom:1px solid #999999; border-left:1px solid #cccccc; -moz-border-radius-bottomright: 10px; -moz-border-radius-topright: 0px; } div.Tabateonsoft div.TFs a:hover { background: #E8E8E8; border-top:1px solid #999999; border-right:1px solid #cccccc; border-bottom:1px solid #cccccc; border-left:1px solid #999999;} div.Tabateonsoft div.TFs a.Active { background: #333; color: #000000; border-top:1px solid #999999; border-right:1px solid #cccccc; border-bottom:1px solid #cccccc; border-left:1px solid #999999; font-weight:bold; color: #ffffff;} div.Tabateonsoft div.Pages { clear: both; overflow: hidden; height:333px; border:1px solid #EFF0F1; padding:0;background: #222222; -moz-border-radius:5px;} div.Tabateonsoft div.Pages div.Page {height: 100%;padding: 0px; overflow: hidden; } div.Tabateonsoft div.Pages div.Page div.floor { font-size:12px;padding: 3px 5px; text-align:left;}

6. Letakkan kode dibawah ini diatas kode </head>

<script src='http://zuazz.googlecode.com/files/ateonsoft_tab.js' type='text/javascript'/>

7. Save template

8. Masuk ke tab Elemen laman

9. Tambahkan widget HTML/JavaScript  Letakkan kode dibawah ini di dalam widget HTML/JavaScript

<form action="tabateonsoft.html" method="get"><div class="Tabateonsoft" id="Tabateonsoft"><div class="TFs"><a>tab1</a><a>tab2</a><a>tab3</a><a>tab4</a></div><div class="Pages"><div class="Page"><!-- Tab --><div class="floor">Disini letakkan kode untuk tab 1 anda </div></div><!-- end Tab --><div class="Page"><!-- Tab -->Disini letakkan kode untuk tab 2 anda </div><!-- end Tab --><div class="Page"><!-- Tab --><div class="floor">Disini letakkan kode untuk tab 3 anda </div></div><!-- end Tab --><div class="Page"><!-- Tab --><div class="floor">Disini letakkan kode untuk tab 4 anda </div></div><!-- end Tab --></div></div></form><script type="text/javascript">tabateonsoft_name('Tabateonsoft');</script>

Simpan perubahan dan lihat hasilnya, selesai.

Demikian langkah demi langkah yang bisa saya sampaikan semoga bermanfaat.

Sumber: http://cwiter.blogspot.com

Demikianlah Artikel Cara Membuat Widget Menu TAB View

Sekianlah artikel Cara Membuat Widget Menu TAB View kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Cara Membuat Widget Menu TAB View dengan alamat link https://didhiksty.blogspot.com/2016/08/cara-membuat-widget-menu-tab-view_18.html