Cara Membuat Menu Tab View Tanpa Edit HTML

Cara Membuat Menu Tab View Tanpa Edit HTML - Apa kabar sobat blogger?? wah.. jarang - jarang nich christian tatelu posting 2 artikel sehari, mudah- mudahan bisa begitu terus.. heheh. Setelah sebelum telah memposting tentang cara mengetahui blog dofollow atau nofollow, kali ini saya aka kasih tahu pada sobat blogger bagaimana cara membuat memasang menu tab view tanpa harus edit html.


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>

4. Klik save dan lihat hasilnya

Previous
Next Post »

58 comments

Write comments
Koko Bota
AUTHOR
08:37:00 delete

nice share tamang....:)

Reply
avatar
Christian
AUTHOR
15:24:00 delete

@Koko Botamakase bos!!!!

Reply
avatar
00:10:00 delete

mksih nih ats infonya, ane mau langsung bljr,,,

Reply
avatar
09:23:00 delete

mantab banget dahh ilmunya mas...
saya coba deh yaa...
ijin copas kodenya...

Reply
avatar
04:07:00 delete

Terima kasih sahabat atas berbagi pengetahuannya ini.
Blog saya masih baru jadi mungkin belum perlu banyak memasang widget.
Tetapi mungkin nanti hal ini saya butuhkan.
Ijin Bookmark dulu ya sahabat

Reply
avatar
Ahmad Maryuki
AUTHOR
09:54:00 delete

wah asyik nih gan, kapan2 ane coba deh, ukurannya yang diganti berapa ya gan kira2

Reply
avatar
Rudy Hartono
AUTHOR
21:04:00 delete

nice informasi, salam kenal

Reply
avatar
Anonymous
AUTHOR
08:38:00 delete

this worked,
thankyou

Reply
avatar
Eko Setiawan
AUTHOR
22:29:00 delete

Thankz gan atas infonya,,,

Reply
avatar
ukifahlevy
AUTHOR
09:39:00 delete

gak muncul apa2 pun setelah add kode tu ke HTML/java scrip...

Reply
avatar
raden wijaya
AUTHOR
12:46:00 delete

Keren infonya
Thanks ya mas
Mampir ke dulida.com ya

Reply
avatar
20:46:00 delete

sering aq cb buat tab ,,tp kok gak bisa muncul ya ,,padahal semua langkah2 dah q cb,,,,,

Reply
avatar
Argiea
AUTHOR
21:01:00 delete

sering aq cb buat tab ,,tp kok gak bisa muncul ya ,,padahal semua langkah2 dah q cb,,,,,

Reply
avatar
Argiea
AUTHOR
21:01:00 delete

sering aq cb buat tab ,,tp kok gak bisa muncul ya ,,padahal semua langkah2 dah q cb,,,,,

Reply
avatar
14:49:00 delete

nice info bung.. mampir ya http://reezeet.blogspot.com/

Reply
avatar
17:50:00 delete

kalo cara bikin recent poss(pos terbaru) berjalan gimana ka...

Reply
avatar
Eka Rachmi
AUTHOR
20:40:00 delete

di blog aq koq gk ngefek ya gan??

Reply
avatar
Surya.C.G
AUTHOR
10:14:00 delete

ini dia yang dicari,,ini edit sendiri ya bro,,??
makasi nih bro info,a,,!?

Reply
avatar
22:53:00 delete

keran banget bro...

makasih yah infonya...

Reply
avatar
23:33:00 delete

wahh makasih teman atas postingannya

Reply
avatar
PHOTOGRAPHY
AUTHOR
16:45:00 delete

mantap tutorialnya gan....

Reply
avatar
ViperGoy
AUTHOR
00:45:00 delete

Wah, ane baru ngerti yg namanya Tab View ^^ hehehe Mampir ke blog ane ya ViperGoy Blog

Reply
avatar
21:17:00 delete

mantab mas bro . . . . kunungan baliknya ditunggu ya . . .

Tas Seminar Murah

Reply
avatar
03:03:00 delete

gan g mna cara nya untuk mengesi Menu Tab View dengan postingan supaya postinganya banyak...
pas saya coba hnya bisa satu nga bisa banyakk..
mohon bantuanya.....

Reply
avatar
Ali Bloggers
AUTHOR
18:31:00 delete

thanks sob, dicoba dulu moga sukses

Reply
avatar
02:46:00 delete

mengunjungi blog yang bagus dan penuh dengan informasi yang menarik tentang cara membuat tab view tanpa edit adalah merupakan kebahagiaan tersendiri.... teruslah berbagi informasi

Reply
avatar
Anonymous
AUTHOR
17:37:00 delete

Mas 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

Reply
avatar
09:08:00 delete

minta izin mas,,, mau saya coba di blog saya.

Reply
avatar
19:54:00 delete

Sudah dicoba di blok ane. Thks

Reply
avatar
07:24:00 delete

http://plazaunic.blogspot.com/

Reply
avatar
iBlogger Ku
AUTHOR
22:38:00 delete

Thanks gan ijin copy kodenya...salam blogger

Reply
avatar
Zamrud Hijau
AUTHOR
21:15:00 delete

Info yang baguz sekali untuk disimak.....
Bermanfaat sekali untuk saya....

Mohon kunjungan baliknya yaa....
Dan saya juga sangat berterima kasih sekali kalau anda berkenan FOLLOW dan Backlink Blog sederhana saya.... :-)

Title: Zamrud News
( zamrudnews.blogspot.com )

Reply
avatar
Anonymous
AUTHOR
03:47:00 delete

terimakasih gan, gilir mampir blog ane
www.dedihardres.blogspot.com

Reply
avatar
uustea
AUTHOR
07:22:00 delete

http://uustea.blogspot.com/

Reply
avatar
03:54:00 delete

terima kasih tutorialnya gan sangat membantu aku yang newbie..

Reply
avatar
Dewa Petir
AUTHOR
03:55:00 delete

Sangat membantu Gan .....
mampir ke blog saya jg yach
http://klipingsungerajeh.blogspot.com

Reply
avatar
prashopzz
AUTHOR
16:42:00 delete

Thanks ya gan infonya,kunjungi blog ane ya http://alternatifmasadepanpras.blogspot.com

Reply
avatar
23:18:00 delete

Wahh keren Mas...
pengen coba dulu ya...

Reply
avatar
21:24:00 delete This comment has been removed by the author.
avatar
jepri mustika
AUTHOR
03:16:00 delete

So Simple.. pngin nyobak dlu.. haa

Reply
avatar
gnz brainer
AUTHOR
09:21:00 delete

tutorialnya bagus mas mudah dimengerti ,, pokony 2 jempol buat yang punya blog... kapan kapan mampir ke tempatq mas :)

Reply
avatar
agus murod
AUTHOR
06:03:00 delete

ini mau nampilin blog,apa chat Box-nya?
gak niat sih bikin blog
by Blog Agus Murod

Reply
avatar
23:16:00 delete

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..

Reply
avatar
Kacam S.
AUTHOR
22:49:00 delete

Blog bagus bosss, banyak ilmu dipat disini....Link boss udah sya pasang di blog aku. tinggal link saya mohon dipasang juga di blog boss.

Reply
avatar
15:50:00 delete

Mantab nih tab view menu nya! :)

Reply
avatar
Frank
AUTHOR
01:30:00 delete

Mksh info'x gan sangat membantu sekali..

Reply
avatar
portalogic
AUTHOR
01:18:00 delete

thanks tutorialnya ya sob.......mampir t4 gw http://portalogic.blogspot.com

Reply
avatar
psdink
AUTHOR
18:27:00 delete

sekarang udh g berfungsi ya gan, ko ane coba maalah ga muncul apa2..

Reply
avatar
Mila Zhuka
AUTHOR
20:07:00 delete

kok gak muncul yah menu tab nya ??

Reply
avatar
Ic Creem
AUTHOR
00:25:00 delete

mantap gan ... ane coba dulu ...

Reply
avatar
eLzhe
AUTHOR
00:31:00 delete

thx for helping me

Reply
avatar
adnan
AUTHOR
02:15:00 delete

saya coba dulu ya sob, terima kasih buat tutornya

Reply
avatar
Moch Adnan
AUTHOR
02:26:00 delete

kok enggak bisa ya sob. diblog saya enggak mau tampil

Reply
avatar
Sauqi Syahtia
AUTHOR
20:10:00 delete

Kok nggk bisa sob

Reply
avatar
20:36:00 delete

Waaah langsung mencobanya saja,salam kenal dan terimakasih banyak atas informasinya...!

Reply
avatar
05:30:00 delete

Izin coba ya sob :)

Reply
avatar