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

Ditulis Oleh : christian angkouw ~ Cara Bikin Blog

Christian angkouw Sobat sedang membaca artikel tentang Cara Membuat Menu Tab View Tanpa Edit HTML. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya

:: Get this widget ! ::

58 comments

tks gan sudah berbagi

08:37:00

nice share tamang....:)

15:24:00

@Koko Botamakase bos!!!!

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

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

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

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

nice informasi, salam kenal

this worked,
thankyou

Thankz gan atas infonya,,,

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

Keren infonya
Thanks ya mas
Mampir ke dulida.com ya

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

21:01:00

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

21:01:00

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

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

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

di blog aq koq gk ngefek ya gan??

10:14:00

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

keran banget bro...

makasih yah infonya...

wahh makasih teman atas postingannya

mantap tutorialnya gan....

00:45:00

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

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

Tas Seminar Murah

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

thanks sob, dicoba dulu moga sukses

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

17:37:00

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

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

Sudah dicoba di blok ane. Thks

http://plazaunic.blogspot.com/

Thanks gan ijin copy kodenya...salam blogger

gak bisa

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 )

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

07:22:00

http://uustea.blogspot.com/

terima kasih tutorialnya gan sangat membantu aku yang newbie..

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

16:42:00

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

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

So Simple.. pngin nyobak dlu.. haa

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

ini mau nampilin blog,apa chat Box-nya?
gak 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..

22:49:00

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

Mantab nih tab view menu nya! :)

01:30:00

Mksh info'x gan sangat membantu sekali..

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

18:27:00

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

kok gak muncul yah menu tab nya ??

00:25:00

mantap gan ... ane coba dulu ...

00:31:00

thx for helping me

02:15:00

saya coba dulu ya sob, terima kasih buat tutornya

kok enggak bisa ya sob. diblog saya enggak mau tampil

Kok nggk bisa sob

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

Izin coba ya sob :)

Poskan Komentar

Silahkan tinggalkan komentar sobat dan dapatkan backlink satu arah langsung ke blog sobat dengan widget top komentator yang saya pasang di sidebar blog ini. Caranya dengan menjadi pemberi komentar terbanyak di blog ini, tapi mohon jangan Nyepam ya..! Komentar dengan menyertakan LINK / ANCHOR TEXT atau promosi produk tertentu akan saya hapus karena blog ini bukan tempat untuk mempromosikan produk yang dijual di blog anda.