Seperti kita tahu bersama bahwa Tab view adalah salah widget berguna terutama untuk menghemat halaman blog sobat. Widget ini sifatnya seperti menyembunyikan widget yang kemudian bisa tampil kembali jika kita mengkliknya. contohnya bisa sobat lihat di bagian footer sebelah kiri dari blog ini.
Cara ini ini sebenarnya sudah banyak yang posting tapi sembari menunggu hujan berhenti tak apa lah, siapa tahu makin banyak follower blog nya, iya toh???? hehehe. Sobat yang tertarik untuk memasang widget menu tabview tanpa edit HTML silahkan ikuti tutorialnya.
Cara Membuat Menu Tab View Tanpa Edit HTML
1. Log in ke akun blog sobat.
2. Klik Rancangan -->Elemen laman --> Tambah Gadget --> pilih HTML/Javascript
3. Masukkan kode berikut ke dalam konten dan jangan beri nama widgetnya.
<style type="text/css">
.tabber {
padding: 0px !important;
border: 0 solid #bbb;
}
.tabber h2 {
float: left;
margin: 0 1px 0 0;
font-size: 12px;
padding: 3px 5px;
border: 1px solid #bbb;
margin-bottom: -1px; /*--Pull tab down 1px--*/
overflow: hidden;
position: relative;
background: #e0e0e0;
cursor:pointer;
-moz-border-radius:5px 5px 0 0;
border-radius:5px 5px 0 0;
}
html .tabber h2.active {
background: #fff;
border-bottom: 1px solid #fff; /*--"Connect" active tab to its content--*/
}
.tabber .widget-content {
border: 1px solid #bbb;
padding: 10px;
background: #fff;
clear:both;
margin:0;
}
.codewidget, #codeholder {
display:none;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bloggertabs0.1_min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#codeholder').bloggerTabber ({
tabCount : 3
});
});
</script>
<!-- to make sure the widget works, do not alter the code below -->
<div id='codeholder'><p>Get this <a href="http://christiantatelu.blogspot.com/2012/02/cara-membuat-menu-tab-view-tanpa-edit.html" target="_blank">widget</a></p></div>
.tabber {
padding: 0px !important;
border: 0 solid #bbb;
}
.tabber h2 {
float: left;
margin: 0 1px 0 0;
font-size: 12px;
padding: 3px 5px;
border: 1px solid #bbb;
margin-bottom: -1px; /*--Pull tab down 1px--*/
overflow: hidden;
position: relative;
background: #e0e0e0;
cursor:pointer;
-moz-border-radius:5px 5px 0 0;
border-radius:5px 5px 0 0;
}
html .tabber h2.active {
background: #fff;
border-bottom: 1px solid #fff; /*--"Connect" active tab to its content--*/
}
.tabber .widget-content {
border: 1px solid #bbb;
padding: 10px;
background: #fff;
clear:both;
margin:0;
}
.codewidget, #codeholder {
display:none;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bloggertabs0.1_min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#codeholder').bloggerTabber ({
tabCount : 3
});
});
</script>
<!-- to make sure the widget works, do not alter the code below -->
<div id='codeholder'><p>Get this <a href="http://christiantatelu.blogspot.com/2012/02/cara-membuat-menu-tab-view-tanpa-edit.html" target="_blank">widget</a></p></div>
4. Klik save dan lihat hasilnya
53 comments
Write commentstks gan sudah berbagi
Replynice share tamang....:)
Reply@Koko Botamakase bos!!!!
Replymksih nih ats infonya, ane mau langsung bljr,,,
Replymantab banget dahh ilmunya mas...
Replysaya coba deh yaa...
ijin copas kodenya...
Terima kasih sahabat atas berbagi pengetahuannya ini.
ReplyBlog saya masih baru jadi mungkin belum perlu banyak memasang widget.
Tetapi mungkin nanti hal ini saya butuhkan.
Ijin Bookmark dulu ya sahabat
wah asyik nih gan, kapan2 ane coba deh, ukurannya yang diganti berapa ya gan kira2
Replynice informasi, salam kenal
Replythis worked,
Replythankyou
Thankz gan atas infonya,,,
Replygak muncul apa2 pun setelah add kode tu ke HTML/java scrip...
ReplyKeren infonya
ReplyThanks ya mas
Mampir ke dulida.com ya
sering aq cb buat tab ,,tp kok gak bisa muncul ya ,,padahal semua langkah2 dah q cb,,,,,
Replysering aq cb buat tab ,,tp kok gak bisa muncul ya ,,padahal semua langkah2 dah q cb,,,,,
Replysering aq cb buat tab ,,tp kok gak bisa muncul ya ,,padahal semua langkah2 dah q cb,,,,,
Replynice info bung.. mampir ya http://reezeet.blogspot.com/
Replykalo cara bikin recent poss(pos terbaru) berjalan gimana ka...
Replydi blog aq koq gk ngefek ya gan??
Replyini dia yang dicari,,ini edit sendiri ya bro,,??
Replymakasi nih bro info,a,,!?
keran banget bro...
Replymakasih yah infonya...
wahh makasih teman atas postingannya
Replymantap tutorialnya gan....
ReplyWah, ane baru ngerti yg namanya Tab View ^^ hehehe Mampir ke blog ane ya ViperGoy Blog
Replymantab mas bro . . . . kunungan baliknya ditunggu ya . . .
ReplyTas Seminar Murah
gan g mna cara nya untuk mengesi Menu Tab View dengan postingan supaya postinganya banyak...
Replypas saya coba hnya bisa satu nga bisa banyakk..
mohon bantuanya.....
thanks sob, dicoba dulu moga sukses
Replymengunjungi blog yang bagus dan penuh dengan informasi yang menarik tentang cara membuat tab view tanpa edit adalah merupakan kebahagiaan tersendiri.... teruslah berbagi informasi
ReplyMas tolong bantuannya saya baru bgt di dunia blog, mau tahu caranya bikin Menu yang ada sub menu vertikal kaya punya mas itu gmna caranya. thanks
Replyminta izin mas,,, mau saya coba di blog saya.
ReplySudah dicoba di blok ane. Thks
ReplyThanks gan ijin copy kodenya...salam blogger
Replygak bisa
Replyterimakasih gan, gilir mampir blog ane
Replywww.dedihardres.blogspot.com
terima kasih tutorialnya gan sangat membantu aku yang newbie..
ReplySangat membantu Gan .....
Replymampir ke blog saya jg yach
http://klipingsungerajeh.blogspot.com
Thanks ya gan infonya,kunjungi blog ane ya http://alternatifmasadepanpras.blogspot.com
ReplyWahh keren Mas...
Replypengen coba dulu ya...
tutorialnya bagus mas mudah dimengerti ,, pokony 2 jempol buat yang punya blog... kapan kapan mampir ke tempatq mas :)
Replyini mau nampilin blog,apa chat Box-nya?
Replygak niat sih bikin blog
by Blog Agus Murod
It’s really a great post..I would like to appreciate your work and I am going to recommend it to my friends. Thanks for sharing..
ReplyBlog bagus bosss, banyak ilmu dipat disini....Link boss udah sya pasang di blog aku. tinggal link saya mohon dipasang juga di blog boss.
ReplyMantab nih tab view menu nya! :)
ReplyMksh info'x gan sangat membantu sekali..
Replythanks tutorialnya ya sob.......mampir t4 gw http://portalogic.blogspot.com
Replysekarang udh g berfungsi ya gan, ko ane coba maalah ga muncul apa2..
Replykok gak muncul yah menu tab nya ??
Replymantap gan ... ane coba dulu ...
Replysaya coba dulu ya sob, terima kasih buat tutornya
Replykok enggak bisa ya sob. diblog saya enggak mau tampil
ReplyKok nggk bisa sob
ReplyWaaah langsung mencobanya saja,salam kenal dan terimakasih banyak atas informasinya...!
ReplyIzin coba ya sob :)
ReplyEmoticonEmoticon