4/15/10

Tampil Cantik Dengan Menu Tab View


Postingan tentang Tampil Cantik Dengan Menu Tab View  ini untuk menjawab beberapa sobat yang bertanya seperti ini “ Kang, gimana caranya bikin widget seperti Daftar Isi, Comment, Services dan Others yang disidebar itu ??, kasih tahu doong,”  katanya.,

Memang dengan Menu Tab View bisa menghemat tempat di sidebar karena dalam satu widget bisa menyimpan beberapa menu sesuai kehendak kita , bukan itu saja tampilannyapun tampak cantik dan terkesan profesional, seperti tampilan di bawah ini. .

Menu Tab View

Cara Membuat Menu Tab View ini adalah sbb. :

  1. Masuk ke Dashboard , Pilih Layout , lalu klik Edit HTML
  2. Backup template dulu dengan  Download Full Template
  3. Kemudian cari kode ini ]]></b:skin>
  4. Untuk memudahkan pencarian , pakai saja Ctrl +F , terus ketik kata yang dicari dikotak yang disediakan, lalu klik next. 
  5. Kemudian masukkan kode berikut ini sebelum kode ]]></b:skin>

    /* Menu Tab View
    ----------------------------------------------- */
    div.TabView div.Tabs {widht:100%;
    padding-top: 0px;
    height: 24px;
    overflow: hidden;
    }
    /* Menu Utama */
    div.TabView div.Tabs a {
    float: left;
    display: block;
    width: 110px; /* ukuran lebar menu */
    text-align: center;
    height: 30px; /* ukuran tinggi menu */
    padding-top: 7px;
    margin-right:4px; /* jarak antarmenu */
    vertical-align: middle;
    border: 1px solid #ccc; /* warna border menu */
    border-bottom-width: 0;
    margin:0px;
    padding: 5px 0;
    font-family:Arial,Helvetica,sans-serif;
    font-size:12px;
    font-weight:bold;; /* besar hurup menu */
    background-color: #4c4c4c; /* warna latar menu */
    color: #FFFFFF; /* warna hurup menu */
    -moz-border-radius-topleft:15px;
    -moz-border-radius-topright:15px;
    -webkit-border-top-left-radius:15px;
    -webkit-border-top-right-radius:15px;
    }
    div.TabView div.Tabs a.Active {
    background-color: #FFFFFF; /* warna background menu aktif */
    color: #000000;
    }
    div.TabView div.Tabs a:hover {
    background-color: #999999; /* warna background menu hover */
    color: #FFFFCC;
    font-weight: bold;
    }
    /* Kotak Utama */
    div.TabView div.Pages {
    clear: both;
    border: 1px solid #CCC; /* warna border kotak utama */
    overflow: hidden;
    background:#FFFFFF; /* background kotak utama */
    }
    div.TabView div.Pages div.Page {
    height: 100%;
    padding: 7px;
    overflow: hidden;
    }
    div.TabView div.Pages div.Page div.Pad {
    padding: 5px 0px;
    font-size: 12px; /* besar hurup kotak utama */
    }

    /* tabview css end */

  6. Perhatikan text-text yang berwarna pink, silahkan disesuaikan ya.
  7. Selanjutnya pasang kode berikut ini sebelum kode </head>

    <script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/tabview.js' type="text/javascript"/>

  8. Jika sudah tinggal Save Templates
  9. Selesai …  untuk langkah pertama,
  10. Langkah ke dua Silahkan masuk kemenu "Page Elements"
  11. Klik  "Add a Gadget" ,  pilih "HTML/Javascript"  ,
  12. Kemudian copy paste kode dibawah ini :

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 260px;">

<a>Menu 1</a>
<a>Menu 2</a>
<a>Menu 3</a>

</div>
<div class="Pages" style="width: 256px; height: 270px;">
<div class="Page">
<div class="Pad">

Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />

</div></div>
<div class="Page">
<div class="Pad">

Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />

</div></div>
<div class="Page">
<div class="Pad">

Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />

</div></div>
</div></div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

Catatan :

  • Angka warna pink adalah tinggi dan lebar tab view, silahkan disesuaikan
  • Kode yang berwarna Biru Adalah text  Menu utama
  • Kode yang berwarna merah adalah isi dari tab view tsb.
  • Saya juga pernah posting Membuat Dropdown Navigation Menu atau Tutorial Blog lainnya .

Nah bagaimana ??,  apakah sobat juga mau  Tampil Cantik Dengan Menu Tab View ??.

Sumber :  Disarikan dari beberapa sumber , diantaranya :  Amatullah83

Tag Technorati: {grup-tag},


  1. Thanks telah mampir, yo kita saling vote dan comment..
  2. Bila berkenan tolong bagikan dengan tombol share di atas.
  3. Gratis langganan artikel blog ini, silahkan klik Disini, atau masukan email disidebar yg telah disediakan

Sobat sedang membaca artikel Tampil Cantik Dengan Menu Tab View, bila berkenan silahkan share artikel ini dengan tombol share di atas. Bila mau COPAS untuk di blog sobat, dimohon meletakkan link aktif sebagai Sumbernya dengan copy kode di bawah ini.

Related Post:

117 comments:

  1. yups, selain cantik, menghemat tempat, blog jadi rapi...
    makasih tutorialnya.

    ReplyDelete
  2. tutorial yg sangat bermanfaat.
    makasih sharingnya.

    ReplyDelete
  3. Hallo teman,
    Setiap saat saya berkunjung ke blog anda selalu mendapat informasi tambahan yang bermanfaat untuk pengembangan. Terima kasih.

    ReplyDelete
  4. makasih infonya sob...boleh nih...

    ReplyDelete
  5. Langkah ini dapat menghemat tempat, memudahkan pengunjung dan tampil lebih keren dan cantik. Trims tutorialnya.

    ReplyDelete
  6. Wah keren sob, tp sidebarx hrus lebar y?

    ReplyDelete
  7. di template yang saya pake udah ada tab menunya... bikin template lebih ringkes.... makasih tutorialnya

    ReplyDelete
  8. Simpan dulu ahhh...
    Oiya sob, nanti loadingnya jadi tambah berat apa gak?

    ReplyDelete
  9. keren nih sob, mau aq coba masih bingung mau aq isi apa

    ReplyDelete
  10. wah pelajaranya oke banget mas, jadi pengin blajar script-script deh, tapi kayaknya aku masih belum perlu, karena juga baru belajar, posting aja masih blepotan apalagi ketik script, he he he he

    ReplyDelete
  11. @ Semuanya : makasih atas suportnya
    @ Rock : betul sob memang ada pengaruhnya thd loading nambah berat tapi dikit kok

    ReplyDelete
  12. tutorial kelas tinggi, nih.
    musti baca pelan-pelan biar rada paham dan kapan2 bisa praktek

    ReplyDelete
  13. wah bagus kang tutorialna, dari dulu mau tanya tapi nggak sempat n malah sudah dibahas. tq mau praktek dulu. semoga aja bisa

    ReplyDelete
  14. iya. bisa menghemat sidebar ni mas :)
    ok, nnti saya pake triknya.
    thanks!

    ReplyDelete
  15. sobat lama

    LIBE BE BETTER

    http://dw86.blogspot.com

    ada award untuk anda dan menjadi urutan ke 2 y

    ReplyDelete
  16. wah bener mas dengan menggunakan tab view lebih hemat tempat selain itu juga lebih menarik mas
    thanks buat sharingnya mas..
    Sukses Slalu!

    ReplyDelete
  17. waaah kayaknya seru juga ya digituin... heheheh

    ReplyDelete
  18. info yang menarik, tapi saya sekarang lebih suka pake wordpress

    ReplyDelete
  19. Agar Postingan Tak Bisa Dikomentari:
    1. Masuk ke edit posting
    2. Di kiri bawah ada tulisan OPSI ENTRI warnanya biru. Klick disitu
    3. Tandai pilihan "Jangan diizinkan"
    4. Simpan Kembali (SAVE)

    ReplyDelete
  20. @ semua sobat : makasih ya..
    @ Marsudiyanto : thanks berat sob angsung praktek nih

    ReplyDelete
  21. kemarin saya pasang banner saungweb di blogku...ternyata gambarna gk muncul...
    eh kmrn saya perbaiki..banner dh bs muncul he...
    makasih gan

    ReplyDelete
  22. lama offline ternyata banyak pelajaran yang tertinggal nih...

    ReplyDelete
  23. sangat bermanfaat dan langsung ijin copas ya..
    sukses terus ni mas

    ReplyDelete
  24. @ Disc Box : sama2 sob
    @ sabirinnet
    @ rumah Blogger
    Wah selamat kembali ke dunia maya sob.. lama absen ya

    ReplyDelete
  25. dulu saya jg pernah pasang..
    pengen pasang lagi, eh lupa gmn caranya.. haha
    thx om.. ^^

    ReplyDelete
  26. blog aku terasa berat dan tidak bisa ganti template

    ReplyDelete
  27. @ blogger Ceria : sama2 bos
    @ direktorat LPK : yups memang kayaknya agak berat bos.. itu karena banyak widget berbentuk foto. coba aja timbang di posyandu disini

    ReplyDelete
  28. Bos cara masukkin judul postingannya kok ga di ajarkan sekalian...???

    ReplyDelete
  29. Bos dah kucoba dan berhasil tapi ada satu yang gagal.. setelah ku masukkan judul posting ke Tab View tersebut ga bisa di klik cuman muncul judul aja...??? trus cara masukkin jidul postingan agar bisa di klik gimana??? balas za bos... thanks

    ReplyDelete
  30. Boz pusing juga nich otak-atik code html nya...?
    Tab 1.1
    Tab 1.2
    Tab 1.3
    dan seterussnya diganti dengan code apa???
    Maklum bos blogger pemula nich...
    huft busyet bikin pusing tuch...

    dah kumasukkin judul artikel postingnya ga bisa di klik cuman keluar judul aza biar bisa diklik tuch judul posting artikelnya gimana caranya...???

    ReplyDelete
  31. semakin cantik menu tab akan semakin bagus blog kita

    ReplyDelete
  32. Narutopedia Express is exclusive encyclopedia about everything in naruto anime like character biographies, jutsu, hidden village, handseal, jinchuriki, akatsuki, and other skills

    ReplyDelete
  33. Narutopedia Express is exclusive encyclopedia about everything in naruto anime like character biographies, jutsu, hidden village, handseal, jinchuriki, akatsuki, and other skills

    ReplyDelete
  34. Narutopedia Express is exclusive encyclopedia about everything in naruto anime like character biographies, jutsu, hidden village, handseal, jinchuriki, akatsuki, and other skills

    ReplyDelete
  35. Narutopedia Express is exclusive encyclopedia about everything in naruto anime like character biographies, jutsu, hidden village, handseal, jinchuriki, akatsuki, and other skills

    ReplyDelete
  36. Narutopedia Express is exclusive encyclopedia about everything in naruto anime like character biographies, jutsu, hidden village, handseal, jinchuriki, akatsuki, and other skills

    ReplyDelete
  37. makasi gan...
    ini sangat berguna buat saya

    ReplyDelete
  38. Nah ini dia yang ane cari,
    thanks bangget nih gan atas artikelnya,
    bagus bangget. . .

    salam kenal yaa gan.
    http://asenk-ptc.co.nr

    ReplyDelete
  39. mas, q agak kesulitan dalam nyari kode-kode warnanya.. mas, pnya referensi gk bwt ngebantu kesulitan q.. trims

    ReplyDelete
  40. terima kasih infonya...
    jd nambah ilmu apalagi baru belajar nich

    ReplyDelete
  41. Ini yang ane cari2..keren punya infonya..totor ini termasuk bikin sub menu Kan Ya?

    ReplyDelete
  42. @ seemua : silahkan kan sobat2 utk dicoba kalu berminat ya

    ReplyDelete
  43. kalo bkin menu "home | about me" seperti diatas pake widget apa bang? apa harus oprek manual templatenya?

    ReplyDelete
  44. keren juga bro....sebagai blogger pemula ni info berguna banget........mampir ya ke blog saya,,,, hehehehe

    ReplyDelete
  45. Thanks buat sobat semua atas kunjungannya

    ReplyDelete
  46. terimaksih infonya...
    tapi saya masih bingung... dah nyoba gagal maning... saya jadi isin sendiri..

    ReplyDelete
  47. Bang,trus ngelinknya gmana tuw??? Biar bisa nyampe di daftar isi gtu contohnya...kasih petunjuk yaa....

    ReplyDelete
  48. @ sobat2 : makasih deh atas kunjungannya ya..

    ReplyDelete
  49. bos ana mau tanya kalo mau kasih menu gmn..???
    ada tampilan home-about me-pge.tutorial..
    gmn sihh...
    terima kasih ya kak...

    ReplyDelete
  50. banyak yang saya pelajari disini, makasih gan,.

    ReplyDelete
  51. cara ini yang saya cari-cari dari dulu..
    thanks anyway..

    ReplyDelete
  52. Kalo tiap berkunjung dapet selalu oleh-oleh berharga, sapa yang ga pengen datang lagi...orang baik tidak pernah bosan berbagi ilmu... setuju kan...trims ya...
    ------------------------------------------------
    Cooking Recipes

    ReplyDelete
  53. Keren tutorialnya gan,,, blognya memang tambah cantik...

    ReplyDelete
  54. Thanx gan
    oya dah ane terapin ilmunya,, emang mantab gan...

    izin share ama copynya...

    maen-maen dunk gan ke blog ane..

    http://emousic.blogspot.com/

    Thanx be 4..

    ReplyDelete
  55. keren jga nie info'y, patut dicoba.. oia, Gan.. klo tutorial cra bikin sub menu di menu header dh diposting lm?? pengen eungg, hHEe..
    tq

    ReplyDelete
  56. Free Anime Blogger Template|Blogger Skin|Blogger Themes|Layout For Blogspot

    ReplyDelete
  57. Free Download Blogger Template|Free Download Template Blogger|Template For Blogspot

    ReplyDelete
  58. Free Blogger Skin|Blogger Template|Template Blogger|Anime Blogger Template

    ReplyDelete
  59. Free Blogspot Layout|Layout Blogspot Free|Template XML Blogspot|Blogger XML Theme

    ReplyDelete
  60. Layout Blogspot Free|Template XML Blogspot|Free Blogspot Layout|Blogger XML Theme

    ReplyDelete
  61. Layout Blogspot Free|Template XML Blogspot|Free Blogspot Layout|Blogger XML Theme

    ReplyDelete
  62. Template XML Blogspot|Free Blogspot Layout|Blogger XML Theme|Layout Blogspot Free

    ReplyDelete
  63. Download Template Blogger|Blogspot Themes|Template XML|Layout For Blogspot

    ReplyDelete
  64. Gan bisa gak jumlah tab nya lebih dari 2?, soalnya saya sudah coba script di atas hasilnya cuma 2 tab. kalau bisa apanya yang mesti di rubah?
    thx, aa_elko@yahoo.com

    ReplyDelete
  65. Gan bisa gak jumlah tab nya lebih dari 2?, soalnya saya sudah coba script di atas hasilnya cuma 2 tab. kalau bisa apanya yang mesti di rubah?
    thx, aa_elko@yahoo.com / urang3rut.blogspot.com

    ReplyDelete
  66. ►► selain cantik, menghemat tempat, blog jadi rapi...
    makasih tutorialnya.

    ReplyDelete
  67. kayanya cukup sulit juga nich caranya..!!

    ReplyDelete
  68. boleh di coba nich, biar blog ku tambah cantik,, hehehe

    ReplyDelete
  69. Masih Kesulitan Kang Tolong Buatkan langsung sms aja ke 085242267427 uuntuk komunikasi email dan paswornya, matur nuon baru mulai blajar ini ini

    ReplyDelete
  70. Tutorial yang mantap...
    Dicoba dulu
    Makasih...

    ReplyDelete
  71. Naruto 546|Naruto Manga 547|Naruto Shippuden Manga 548|Naruto 549 Manga|Naruto 550 Spoiler

    ReplyDelete
  72. Naruto 546|Naruto Manga 547|Naruto Shippuden Manga 548|Naruto 549 Manga|Naruto 550 Spoiler

    ReplyDelete
  73. Naruto 546|Naruto Manga 547|Naruto Shippuden Manga 548|Naruto 549 Manga|Naruto 550 Spoiler

    ReplyDelete
  74. wah keren banget tuh baru saya dapat infonya....

    akan saya praktekkan....

    jangan lupa kunjungan balik ya....

    ReplyDelete
  75. wah dafat ilmu baru nih sob, aku langsung cek ke tkp deh, semoga bermanfaat yah

    ReplyDelete
  76. MAKASIH ILMUNYA,,,IZIN CPY YAH?,,,SALAM

    ReplyDelete
  77. TERIMA KASIH ILMUNYA SAUDARAKU,,,MOHON IZIN MENCOPY DI BLOG INI,,, SALAM

    ReplyDelete
  78. Trimakazih gan infonya paz banget dengan yang zaya cari

    ReplyDelete
  79. Cemerlang Postingan dan Infonya.boleh dicoba. ditunggu info berikutnya. Terimaksih

    ReplyDelete
  80. Terima Kasih, Tulisan yang sangat membantu. Salam Sukses!

    ReplyDelete
  81. hemmh,,saya emang lagi nyari postingan ini,,gak tahu namanya ternyata page view ya,,heheh,,
    terima kasih gan,,bakal di coba,, semoga berhasil

    ReplyDelete
  82. akhirnya ketemu juga cara bikin page view..
    maksih ya mas..

    langsung di praktekin deh..
    klu ntr gak work saya balik lagi..

    izin bookmark ya mas

    ReplyDelete
  83. very interesting article, very useful to increase my knowledge and a lot of people ..
    thank you

    ReplyDelete
  84. setelah saya coba, kok gak bisa menemukan artikel yang sayal buat kenapa mas? apa ada yang perlu di edit lagi?

    ReplyDelete
  85. wah mantap banget nih, tips nya. boleh di coba tuh..

    ReplyDelete
  86. Wah keren banget nih menu tab view nya..

    ReplyDelete
  87. bikin template jadi lemot gak yah pake gituan??

    ReplyDelete

Bagi sobat-sobat silahkan comment disini, Insya Allah saya comment balik di blog anda. Trims atas kerjasamanya

Langganan Artikel

Artikel Gtais : :

Enter your email address:

Delivered by FeedBurner

Total Kunjungan

 

Copyright 2008 All Rights Reserved Revolution Two Church theme !, Converted into Blogger Template by Bloganol dot com ! Modified by Saung Web ! , On Blogger