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. .
Cara Membuat Menu Tab View ini adalah sbb. :
- Masuk ke Dashboard , Pilih Layout , lalu klik Edit HTML
- Backup template dulu dengan Download Full Template
- Kemudian cari kode ini ]]></b:skin>
- Untuk memudahkan pencarian , pakai saja Ctrl +F , terus ketik kata yang dicari dikotak yang disediakan, lalu klik next.
- 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 */
- Perhatikan text-text yang berwarna pink, silahkan disesuaikan ya.
- Selanjutnya pasang kode berikut ini sebelum kode </head>
<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/tabview.js' type="text/javascript"/>
- Jika sudah tinggal Save Templates
- Selesai … untuk langkah pertama,
- Langkah ke dua Silahkan masuk kemenu "Page Elements"
- Klik "Add a Gadget" , pilih "HTML/Javascript" ,
- 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
yups, selain cantik, menghemat tempat, blog jadi rapi...
ReplyDeletemakasih tutorialnya.
tutorial yg sangat bermanfaat.
ReplyDeletemakasih sharingnya.
Hallo teman,
ReplyDeleteSetiap saat saya berkunjung ke blog anda selalu mendapat informasi tambahan yang bermanfaat untuk pengembangan. Terima kasih.
makasih infonya sob...boleh nih...
ReplyDeleteLangkah ini dapat menghemat tempat, memudahkan pengunjung dan tampil lebih keren dan cantik. Trims tutorialnya.
ReplyDeleteWah keren sob, tp sidebarx hrus lebar y?
ReplyDeletedi template yang saya pake udah ada tab menunya... bikin template lebih ringkes.... makasih tutorialnya
ReplyDeletewah ada scrip japaskripnya :)
ReplyDeleteSimpan dulu ahhh...
ReplyDeleteOiya sob, nanti loadingnya jadi tambah berat apa gak?
keren nih sob, mau aq coba masih bingung mau aq isi apa
ReplyDeletewah 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@ Semuanya : makasih atas suportnya
ReplyDelete@ Rock : betul sob memang ada pengaruhnya thd loading nambah berat tapi dikit kok
tutorial kelas tinggi, nih.
ReplyDeletemusti baca pelan-pelan biar rada paham dan kapan2 bisa praktek
wah bagus kang tutorialna, dari dulu mau tanya tapi nggak sempat n malah sudah dibahas. tq mau praktek dulu. semoga aja bisa
ReplyDeleteiya. bisa menghemat sidebar ni mas :)
ReplyDeleteok, nnti saya pake triknya.
thanks!
sobat lama
ReplyDeleteLIBE BE BETTER
http://dw86.blogspot.com
ada award untuk anda dan menjadi urutan ke 2 y
wah bener mas dengan menggunakan tab view lebih hemat tempat selain itu juga lebih menarik mas
ReplyDeletethanks buat sharingnya mas..
Sukses Slalu!
waaah kayaknya seru juga ya digituin... heheheh
ReplyDeleteinfo yang menarik, tapi saya sekarang lebih suka pake wordpress
ReplyDeleteAgar Postingan Tak Bisa Dikomentari:
ReplyDelete1. 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)
@ semua sobat : makasih ya..
ReplyDelete@ Marsudiyanto : thanks berat sob angsung praktek nih
kemarin saya pasang banner saungweb di blogku...ternyata gambarna gk muncul...
ReplyDeleteeh kmrn saya perbaiki..banner dh bs muncul he...
makasih gan
lama offline ternyata banyak pelajaran yang tertinggal nih...
ReplyDeletesangat bermanfaat dan langsung ijin copas ya..
ReplyDeletesukses terus ni mas
@ Disc Box : sama2 sob
ReplyDelete@ sabirinnet
@ rumah Blogger
Wah selamat kembali ke dunia maya sob.. lama absen ya
dulu saya jg pernah pasang..
ReplyDeletepengen pasang lagi, eh lupa gmn caranya.. haha
thx om.. ^^
blog aku terasa berat dan tidak bisa ganti template
ReplyDeletemakasih infonya
ReplyDelete@ blogger Ceria : sama2 bos
ReplyDelete@ direktorat LPK : yups memang kayaknya agak berat bos.. itu karena banyak widget berbentuk foto. coba aja timbang di posyandu disini
mantap, tampilannya menarik...
ReplyDeleteKlo di WP ada panduannya gak
ReplyDeleteBos cara masukkin judul postingannya kok ga di ajarkan sekalian...???
ReplyDeleteBos 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
ReplyDeleteBoz pusing juga nich otak-atik code html nya...?
ReplyDeleteTab 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...???
semakin cantik menu tab akan semakin bagus blog kita
ReplyDeleteNarutopedia Express is exclusive encyclopedia about everything in naruto anime like character biographies, jutsu, hidden village, handseal, jinchuriki, akatsuki, and other skills
ReplyDeleteNarutopedia Express is exclusive encyclopedia about everything in naruto anime like character biographies, jutsu, hidden village, handseal, jinchuriki, akatsuki, and other skills
ReplyDeleteNarutopedia Express is exclusive encyclopedia about everything in naruto anime like character biographies, jutsu, hidden village, handseal, jinchuriki, akatsuki, and other skills
ReplyDeleteNarutopedia Express is exclusive encyclopedia about everything in naruto anime like character biographies, jutsu, hidden village, handseal, jinchuriki, akatsuki, and other skills
ReplyDeleteNarutopedia Express is exclusive encyclopedia about everything in naruto anime like character biographies, jutsu, hidden village, handseal, jinchuriki, akatsuki, and other skills
ReplyDeletemakasi gan...
ReplyDeleteini sangat berguna buat saya
Nah ini dia yang ane cari,
ReplyDeletethanks bangget nih gan atas artikelnya,
bagus bangget. . .
salam kenal yaa gan.
http://asenk-ptc.co.nr
mas, q agak kesulitan dalam nyari kode-kode warnanya.. mas, pnya referensi gk bwt ngebantu kesulitan q.. trims
ReplyDeleteterima kasih infonya...
ReplyDeletejd nambah ilmu apalagi baru belajar nich
mantap gan...
ReplyDeleteIni yang ane cari2..keren punya infonya..totor ini termasuk bikin sub menu Kan Ya?
ReplyDelete@ seemua : silahkan kan sobat2 utk dicoba kalu berminat ya
ReplyDeletekalo bkin menu "home | about me" seperti diatas pake widget apa bang? apa harus oprek manual templatenya?
ReplyDeletemakasih,nice tips
ReplyDeletekeren juga bro....sebagai blogger pemula ni info berguna banget........mampir ya ke blog saya,,,, hehehehe
ReplyDeleteThanks buat sobat semua atas kunjungannya
ReplyDeleteterimaksih infonya...
ReplyDeletetapi saya masih bingung... dah nyoba gagal maning... saya jadi isin sendiri..
Bang,trus ngelinknya gmana tuw??? Biar bisa nyampe di daftar isi gtu contohnya...kasih petunjuk yaa....
ReplyDeletekeren sob, thank untuk infonya ^ ^
ReplyDelete@ sobat2 : makasih deh atas kunjungannya ya..
ReplyDeletebos ana mau tanya kalo mau kasih menu gmn..???
ReplyDeleteada tampilan home-about me-pge.tutorial..
gmn sihh...
terima kasih ya kak...
Bagus bro tipsnya...
ReplyDeletebanyak yang saya pelajari disini, makasih gan,.
ReplyDeletecara ini yang saya cari-cari dari dulu..
ReplyDeletethanks anyway..
Makasih y kak ilmunya.
ReplyDeleteKalo tiap berkunjung dapet selalu oleh-oleh berharga, sapa yang ga pengen datang lagi...orang baik tidak pernah bosan berbagi ilmu... setuju kan...trims ya...
ReplyDelete------------------------------------------------
Cooking Recipes
thx y sob..
ReplyDeleteane praktekin..
Keren tutorialnya gan,,, blognya memang tambah cantik...
ReplyDeleteThanx gan
ReplyDeleteoya 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..
keren jga nie info'y, patut dicoba.. oia, Gan.. klo tutorial cra bikin sub menu di menu header dh diposting lm?? pengen eungg, hHEe..
ReplyDeletetq
Free Anime Blogger Template|Blogger Skin|Blogger Themes|Layout For Blogspot
ReplyDeleteFree Download Blogger Template|Free Download Template Blogger|Template For Blogspot
ReplyDeleteFree Blogspot Themes|Template XML|Layout For Blogspot|Blogger Layout
ReplyDeleteFree Blogspot Layout|Layout Blogspot Free|Template XML Blogspot|Blogger XML Theme
ReplyDeleteLayout Blogspot Free|Template XML Blogspot|Free Blogspot Layout|Blogger XML Theme
ReplyDeleteFree Blog Template|Template Blogger|Layout Blogspot|Blogspot Layout
ReplyDeleteLayout Blogspot Free|Template XML Blogspot|Free Blogspot Layout|Blogger XML Theme
ReplyDeleteTemplate XML Blogspot|Free Blogspot Layout|Blogger XML Theme|Layout Blogspot Free
ReplyDeleteDownload Template Blogger|Blogspot Themes|Template XML|Layout For Blogspot
ReplyDeleteGan 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?
ReplyDeletethx, aa_elko@yahoo.com
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?
ReplyDeletethx, aa_elko@yahoo.com / urang3rut.blogspot.com
►► selain cantik, menghemat tempat, blog jadi rapi...
ReplyDeletemakasih tutorialnya.
Thanks tutorialnya...
ReplyDeletewahh,, boleh di coba juga nich...
ReplyDeletekayanya cukup sulit juga nich caranya..!!
ReplyDeleteboleh di coba nich, biar blog ku tambah cantik,, hehehe
ReplyDeleteMasih Kesulitan Kang Tolong Buatkan langsung sms aja ke 085242267427 uuntuk komunikasi email dan paswornya, matur nuon baru mulai blajar ini ini
ReplyDeleteTutorial yang mantap...
ReplyDeleteDicoba dulu
Makasih...
Naruto 546|Naruto Manga 547|Naruto Shippuden Manga 548|Naruto 549 Manga|Naruto 550 Spoiler
ReplyDeleteNaruto 546|Naruto Manga 547|Naruto Shippuden Manga 548|Naruto 549 Manga|Naruto 550 Spoiler
ReplyDeleteNaruto 546|Naruto Manga 547|Naruto Shippuden Manga 548|Naruto 549 Manga|Naruto 550 Spoiler
ReplyDeletethanks atas infonya mas
ReplyDeletesalam kenal mas
ReplyDeletethanks infonya mas
ReplyDeletewah keren banget tuh baru saya dapat infonya....
ReplyDeleteakan saya praktekkan....
jangan lupa kunjungan balik ya....
wah dafat ilmu baru nih sob, aku langsung cek ke tkp deh, semoga bermanfaat yah
ReplyDeletemaksih om....
ReplyDeletesalam kenal.....
ReplyDeleteMAKASIH ILMUNYA,,,IZIN CPY YAH?,,,SALAM
ReplyDeleteTERIMA KASIH ILMUNYA SAUDARAKU,,,MOHON IZIN MENCOPY DI BLOG INI,,, SALAM
ReplyDeletejadi tampil cantik dan menarik!!
ReplyDeletetampil cantik dan ganteng??
ReplyDeleteTrimakazih gan infonya paz banget dengan yang zaya cari
ReplyDeleteCemerlang Postingan dan Infonya.boleh dicoba. ditunggu info berikutnya. Terimaksih
ReplyDeleteTerima Kasih, Tulisan yang sangat membantu. Salam Sukses!
ReplyDeletehemmh,,saya emang lagi nyari postingan ini,,gak tahu namanya ternyata page view ya,,heheh,,
ReplyDeleteterima kasih gan,,bakal di coba,, semoga berhasil
bagus juga nich tampilannya...
ReplyDeleteakhirnya ketemu juga cara bikin page view..
ReplyDeletemaksih ya mas..
langsung di praktekin deh..
klu ntr gak work saya balik lagi..
izin bookmark ya mas
wow, produk bru nih..
ReplyDeletewah keren, langsung nyoba deh..
ReplyDeletevery interesting article, very useful to increase my knowledge and a lot of people ..
ReplyDeletethank you
info yang menarik
ReplyDeletesetelah saya coba, kok gak bisa menemukan artikel yang sayal buat kenapa mas? apa ada yang perlu di edit lagi?
ReplyDeletewah mantap banget nih, tips nya. boleh di coba tuh..
ReplyDeleteNice share broo.. :D
ReplyDeleteKeep posting yaa..
Terapi Ion Elektrik Rendam Kaki Detox
Peluang Usaha Rumahan
Terapi Ion
Manfaat Terapi Ion Elektrik
Terapi Ion Elektrik
Terapi Kesehatan Murah
Peluang Usaha Modal Kecil
Wah keren banget nih menu tab view nya..
ReplyDeletebikin template jadi lemot gak yah pake gituan??
ReplyDeleteIjin Nyimak and Salam Kenal....
ReplyDeleteSINAROS
Thanks gan infonya :)
ReplyDelete