earth

Guestbook

/* Iklan google ads */

Cara Menambahkan Isi Menu Pada TabView Widget

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="http://enes-sc.googlecode.com/files/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="http://enes-sc.googlecode.com/files/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

  • Artikel Terkait Dengan HTML Tutorials

    Terimakasih sudah membaca artikel SC Community's Blog

    48 komentar

    Alhamdulillah...Makasih pisan A udah direspon langsung pertanyaan saya. Jadi malu, hehehe
    Langsung coba aja ya,,,
    Ke mun aya nanaon di kontek deui. (Euh, maneh mah dedeuien cenah, hehe)
    Sekali lagi hatur tenkyu kang!!!

    30 Oktober 2009 21.02  

    macana oge eneg...uyuhan daek mostingna ieu...wkwkwkwkwkw....ebat ebat rajin pisan...keep posting semangaaaaTTTT

    30 Oktober 2009 21.07  

    Beres kang ah...
    Jadi dihuapan kieu ieu teh nya..hehe
    Tnx lur...

    30 Oktober 2009 21.53  

    salam sobat
    wah pingin sih menambah isi menu pada tab,.
    tapi takut kalau kebanyakan jadi berat blognya...atau loadingnya lama.
    benar ngga siih,,,?

    30 Oktober 2009 22.52  

    bang,smentara aku tampilin menu-menu blog ini ke blog aku yaaa...lg bljar nihhh...maaf msh bngung ttg tab view,heee

    12 Desember 2009 19.21  

    terima kasih boz atas artikel tab viewnya
    "LANJUTKAN"

    29 Desember 2009 22.15  

    mo tanya nich, gmn cara menglink pada Menu dari postingan baru.misalnya menu jurusan,biar ada isi dari jurusan ini gmn.thanks sblmnya

    10 Januari 2010 11.54  

    sangat bermanfaat kang....ku coba dulu, tapi bgm mengisinya dengan tautan postingan kita? dan ganti warna tulisannya gimana kang?

    21 Januari 2010 00.18  

    sob..... mau nanya...
    aku mau ngisi menu atas pada templateku
    HOME PROFIL PHOTOS...
    tp koq blum ketemu cara na....
    kayak na template ku yg susah deh..

    segera yaaaa...

    liat ajah templte blogku
    langitsenja...

    OK...ok

    23 Januari 2010 13.52  

    Ok sob....
    nah utk ngisi kode css nya gmana,,,?
    biar langsung link ke laman profil baru
    misal klw di klik profilenya..
    langsung ke buka tentang profil lengkapku...?

    tuliskan aja kodenya....
    Ok..

    24 Januari 2010 09.58  

    trimakasih mas, artikelnya sangat membantu. Itu td kan memasukkan recent post, recent comments dan link. Tp bagaimana jima memasukkan per label. seperti dalam blog ini kan ada menu TIPS Blogging. Apakah cara memasukkannya sama seperti memasukkan daftar link. Atau ada caranya tersendiri mas. kalau sama dengan daftar link berarti sangat lama untuk memasukkan artikel per kategoro spt punya blog ini yang di menu TIPS BLOgging

    13 Februari 2010 11.30  

    mantap kang infonya, oh ia kalo recent post dibuat terbalik bisa ga kang?
    kan biasanya recent post urutannya dari paling baru ke yang lama, dibuat jadi terbalik.
    soalnya punya q recent post nya sekalian tak buat daftar isi, jadi ngirit javascript

    20 April 2010 11.31  

    terima kasih atas infonya mas.....salam sukses

    16 Mei 2010 19.35  

    Bermanfaat sekali nich artikelnya...
    tapi ku masih bingung sob... kalo ricent post diganti dengan artikel pposting codennya digantai apa? thank's ya boz

    19 Mei 2010 14.36  

    Buat yang masih blajar seperti saya, postingan ini sangat membantu kang

    26 Mei 2010 21.34  

    kalau untuk nampilin rss berita gimana? misalnya dari berita liputan6 gimana cara buatnya? tolong bantuannya email ke loginpress@gmail.com ditunggu

    7 Juni 2010 13.12  

    salam kang tos lami teu tepang abdi nuju mempelajari ruang tanya jawab alias ruang riung heheh sugan wae tiasa heheh

    9 Juli 2010 10.19  

    mantap gan.. akhir nya blog q seperti yang ku mau

    14 Oktober 2010 13.17  

    cara ganti warna pada isi blog menu di dalam tab view itu gmana ya sobb..
    thanks ya..

    4 Desember 2010 01.42  

    mau tanya nih, bagaimana ya caranya agar postingan kita masuk pada teb view?

    2 Maret 2011 08.36  

    makasih mas, saya coba ternyata berhasil. salam kenal dan terus berkarya..

    17 Maret 2011 02.04  

    gmana cra ny klo mw mengisi dengan widget asli blogger,.. mohn di blz , scptny

    14 April 2011 03.57  

    Makasih ya... butuh waktu lagi untuk belajar .... thank

    26 Oktober 2011 10.20  

    makasih gan, sangat membantu banget artikelnya. terutama yang awam kayak saya. :)

    13 Desember 2011 00.13  

    Terima kasih materinya sangat memmbantu saya sebagai pemula dalam membuat blog...salam sukses
    budisipit-pemalang

    26 Juli 2012 14.16  

    bos mau nanya ni saya buat menu blog cara isi menunya gemana? trims coba liat bos ..baru belajar

    30 Juli 2012 01.13  

    Keren Coy
    Kunjungi Balik Ya
    www.radiolosta.com

    21 Januari 2013 15.20  

    saya sudah buat tab. tapi saya bingung bagaimana cara memasukan artikel kedalam tab. mohon jawabnnya..

    21 Februari 2013 12.21  

    masih bingung bang?
    makasih infonya,,

    28 Februari 2013 21.23  

    waduh sy pemula sekali di blog, tolong ajarin cara mempos video yg bukan dari you tube . tapi video yang kita buat lewat HP atau handy cam
    thank ya bang

    25 April 2013 16.17  

    ibol
    ane orang awam gimana caranya memasukkan postingan ke dalam menu

    3 Juli 2013 21.27  

    Asalamualaikum,makasih infonya sobat, saya lagi bingung cara isi tabview -- tips nya akan saya coba -- dari widgets newsreel, mudah2an berhasil, doain ya...hehehe.... Wasalam

    17 Oktober 2013 16.22  

    wow ini memang yang saya cari moga aja saya berhasil, thanks ya sobat

    27 November 2013 00.26  

    kurang jelas om.. pusing sendiri jadinya kalo tanpa Pictute hasil jadinyah

    20 November 2015 21.10  

    gan cara membuang link di situ gimana nih

    4 Desember 2015 09.31  

    Masih mencoba memahami . smg bisa dipraktakkan.
    salam rahayu
    www.laatansabelajar.blogspot.com

    9 Maret 2016 21.47  

    kereeeen.
    silahkan mampir
    https://trenkren.blogspot.co.id/

    4 Desember 2016 17.35  

    Tambahkan Komentar

    • Dimohon untuk tidak mencantumkan link aktif pada komentar sobat.
    • Gunakan Ruang Tanya pada TabView Menu, jika ingin menanyakan sesuatu yang tidak ada kaitannya dengan artikel di atas.
    Kang eNeS

    Terimakasih atas semua apresiasi yang sobat berikan.

    10 Artikel Terbaru

    10 Artikel Terpopuler