Cara Menambahkan Isi Menu Pada TabView Widget

Browse » Home » HTML Tutorials » Cara Menambahkan Isi Menu Pada TabView Widget

Cara Menambahkan Isi Menu Pada TabView Widget

Ditulis oleh Kang eNeS Jumat, 30 Oktober 2009. 20.32
Label: HTML Tutorials komentar (47)

Menambahkan TabView pada sidebar blog memang dapat membantu mengatasi ruang pada halaman blog kita. Karena dengan TabView ini kita dapat memasukkan beberapa widget ke dalamnya sehingga ruang halaman blog kita dapat dioptimalkan. Namun pada saat mengisikan menu pada TabView tersebut ditemui kesulitan, terutama bagi sobat-sobat yang kurang begitu paham dalam menuliskan kode-kode HTML. Nah, tulisan kali ini akan menjelaskan bagaimana cara mengisi menu Tabview tersebut.

Jika sudah membaca Membuka Link Di Halaman Tab Baru, mungkin sobat sudah sedikit mengerti bagaimana cara mengisi menu TabView tersebut, khususnya yang menyangkut link blogroll. Tapi untuk menambahkan widget lainnya masih mengalami kesulitan. Untuk itu, bacalah contoh berikut agar sobat bisa lebih memamahaminya.

Pada contoh berikut saya akan memberikan penjelasan mengenai cara menambahkan Recent Posts, Recent Comments, dan Link Blogroll.

Setelah kamu melakukan langkah kedua pada petunjuk membuat TabView, maka gantilah hurup yang dicetak tebal sesuai keinginan

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 100%;" class="Tabs">
<a title="Keterangan Menu 1">Menu 1</a>
<a title="Keterangan Menu 2">Menu 2</a>
<a title="Keterangan Menu 3">Menu 3</a>
</div>
<div style="width: 100%; height: 200px;" class="Pages">

misalnya seperti ini:

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 100%;" class="Tabs">
<a title="Artikel Terbaru">Recent Post</a>
<a title="Komentar Terbaru">RC Comments</a>
<a title="Link Teman-teman">Link Sahabat</a>
</div>
<div style="width: 99%; height: 230px;" class="Pages">

Kemudian pada Menu 1 yang akan diisi Recent Posts

<!--Awal Menu 1-->
<div class="Page"><div class="Pad">
Isi Menu 1.1<br/>
Isi Menu 1.2<br/>
Isi Menu 1.dst<br/>
</div></div>
<!--Akhir Menu 1-->

ganti menjadi seperti ini:

<!--Awal Menu 1-->
<div class="Page"><div class="Pad">
<script style="text/javascript" src="https://sites.google.com/site/ruangsc/enes/rc-posts.js"></script>
<ul>
<script style="text/javascript">
var numposts = 25;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://ruangsc.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script>
</ul>
</div></div>
<!--Akhir Menu 1-->

Kamu dapat mengubah variabel-variabelnya sesuai keinginan. Kamu juga dapat menghapus <ul> dan </ul> jika tidak ingin menggunakan bullets. Dan jangan lupa, ganti ruangsc.blogspot.com dengan URL blog kamu sendiri.

Selanjutnya pada Menu 2 yang akan diisi Recent Comments

<!--Awal Menu 2-->
<div class="Page"><div class="Pad">
Isi Menu 2.1<br/>
Isi Menu 2.2<br/>
Isi Menu 2.dst<br/>
</div></div>
<!--Akhir Menu 2-->

ganti menjadi seperti ini:

<!--Awal Menu 2-->
<div class="Page"><div class="Pad">
<script style="text/javascript" src="https://sites.google.com/site/ruangsc/enes/rc-comments.js"></script>
<script style="text/javascript">
var numcomments = 15;
var showcommentdate = true;
var showposttitle = true;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://ruangsc.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments">
</script>
</div></div>
<!--Akhir Menu 2-->

Seperti pada Recent Post kamu juga dapat mengubah variabel-variabelnya.

Dan pada Menu 3 yang akan diisi Link Blogroll

<!--Awal Menu 3-->
<div class="Page"><div class="Pad">
Isi Menu 3.1<br/>
Isi Menu 3.2<br/>
Isi Menu 3.dst<br/>
</div></div>
<!--Akhir Menu 3-->

ganti menjadi seperti ini:

<!--Awal Menu 3-->
<div class="Page"><div class="Pad">
<ul>
<li><a href="http://sastraculun.blogspot.com" target="_blank" title="Coretan Kang eNeS">Sastra Culun</a></li>
<li><a href="http://anastalove.blogspot.com" target="_blank" title="Blog Punya Bunda">Anasta Love</a></li>
<li><a href="http://smpn1ckbr.blogspot.com" target="_blank" title="Blog NeSaCk">SMPN 1 Ckbr</a></li>
<li>Dan seterusnya sesuai link yang akan dimasukan</li>
</ul>
</div></div>
<!--Akhir Menu 3-->

Jika kamu tidak ingin menggunakan bullets, hapus saja <ul> dan </ul>-nya.

Segitu aja dulu ya, cape nih! Oya, jika kamu mau menambahkan menunya lebih dari 3 menu, cara mengisinya sama seperti itu. Selamat mencoba...

Jika kamu tidak ingin ribet, pake saja Tabview Section

Cara Menambahkan Isi Menu Pada TabView Widget

Artikel Terkait Dengan HTML Tutorials

47 komentar Posting Komentar

Tambahkan Komentar

10 Artikel Terbaru

10 Artikel Terpopuler

Blog Tutorials

Seputar SEO

HTML Tutorials

CSS dan Javascript

Komputer dan Internet

Agama

Politik

Sosial Budaya

Sekedar Coretan

Yang Baru Dari Sastra Culun

Direkomendasikan Teman Facebook

47 komentar
Posting Komentar