Kamis, 17 Juni 2010

Cara Membuat Tab View

Cara membuat tab view- Kali ini kita akan membahas cara membuat tabview yang standart (biasa) dulu aja ya,.,.,.. Kadang kita bingung kehabisan tab/widget pada suatu blog karena saking banyaknya widget. Blog kita akan semakin rumit dan berat atau kadang tidak karuan. Nah apabila kita gunakan tab view inie tempat widget yang biasanya 1 sampai 4 bisa
di hemat dengan menggunakan 1 tempat widget dengan 4 tab saja.. Lagian apa bila menggunakan tab view widget kita tidak Pathing ndrembel (Kalau orang jawa bilang).  Nih sebagai contoh pengguna'an Tab view di blog ini :
                    Kalo tampilan tab view nya kurang jelas bisa diliat di bagian atas bawah header blog ini                               
Akan terliat lebih simple kan bila pake tab view ??? Tidak Pathing drembelkan ?? Bisa liat keseluruhan blog ini enak tidak di liat kan ??

Tertarik mau membuat tab view ini,.. sebenarnya gampang-gampang sulit buat Tab view ini
Yah,.,., langsung aja ya ke cara memberi tab view
                                 Cara memberi Tab View :
1. Login Blogger anda
2. Rancangan >> Edit HTML >> Centang Explain Widget
3. Copy Paste kode berikut di atas  </head>
        <script src='http://tabaji.googlecode.com/files/ajinoortabview.js' type='     text/javascript'/>
4. Kalau sudah, letakkan kode berikut di atas kode  ]]></b:skin>



div.Tabaji div.TFs
{height: 30px; overflow: hidden;}
div.Tabaji div.TFs a
{float: left; display: block; text-align: center; text-decoration: none; font: normal 12px arial; padding:3px 5px 3px 3px; margin:0 5px 0 0;letter-spacing:-0.07em;
background:#0174DF;
color: #333;
border-top:1px solid #CCCCCC;
border-right:1px solid #999999;
border-bottom:1px solid #999999;
border-left:1px solid #cccccc;
-moz-border-radius-bottomright: 10px;
}
div.Tabaji div.TFs a:hover
{ background: #FF8000;
border-top:1px solid #999999;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-left:1px solid #999999;-moz-box-shadow: 0 0 13px;}
div.Tabaji div.TFs a.Active
{ background: #E8E8E8;
color: #000000;
border-top:1px solid #999999;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-left:1px solid #999999; font-weight:bold;}
div.Tabaji div.Pages
{ clear: both; overflow: hidden; height:240px; border:1px solid #EFF0F1; padding:0;background: #ffffff; -moz-border-radius:5px;}
div.Tabaji div.Pages div.Page
{height: 100%;padding: 0px; overflow: hidden; }
div.Tabaji div.Pages div.Page div.floor
{ font-size:11px;padding: 3px 5px; text-align:left;}
#toc {  border: 0px solid #000000;  background: #ffffff;  padding:2px; width:495px;  margin-top:10px;}
5. Klik Simpan template dan Sekarang menuju ke Elemen laman
6. Klik Tombol Tambah gadget >> HTML/Javascript

7. Letakkan kode berikut dalam content:
<form action="tabarji.html" method="get">
<div class="Tabaji" id="Tabaji">
<div class="TFs">
<a>tab1</a>
<a>tab2</a>
<a>tab3</a>
<a>tab4</a>
</div>
<div class="Pages">
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 1 anda
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
Disini letakkan kode untuk tab 2 anda
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 3 anda
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 4 anda
</div>
</div><!-- end Tab -->
</div>
</div>
</form>
<script type="text/javascript">tabaji_name('Tabaji');</script>


8. Simpan dan insya allah berhasil

CATATAN :

......             :Ganti dengan Judul tab ( Terserah hati anda )
......             :Ganti dengan ISI yang akan anda isikan pada suatu tab,, bisa script, tulisan atau semacamnya

Demikian Cara membuat Tab view Kalau ada ketidak berhasilan silahkan tanya atau komen
DeMikian juga Script Yang ada dari sumbernya

Anda tertarik dengan artikel kami? Mau berlanganan artikel menarik setiap bulan ?. Gratis!

untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di ajinoor.blogspot.com Dan semoga dengan ada layanan ini, anda bisa lebih betah dan lebih cinta dengan Ajinoor. Terima Kasih
Masukan Alamat email Anda


Artikel Terkait:

COMMENTS :

Don't Porn,Don't Spam Here Kurang Jelas Dengan Artikel Di atas ?? Silahkan Bertanya Lewat Komentar Ini Insyaallah Saya akan Segera Membalas (Komentar Yang Berbau Kotor Dan Pornografi Akan Segera Di Hapus tanpa sepengerahuan ANDA)

56 Komentar to “Cara Membuat Tab View”

Siaaaapa yang jadiii yang pertamaxxxx >??
komen setelah ini ??

Aji Nur Sanyoto mengatakan...
on 

Peertamaxxxxx.,, atau keduaxxxx ???
Yang penting nice info nya jik.,.,

o'o mengatakan...
on 

Heh bajigur, kakang adi royokan panggon

Ega-Priatma mengatakan...
on 

Eh, jadi yang keempat

Ega-Priatma mengatakan...
on 

Eh, sorry bukan nyepam lho. kan konco sak kelas. ben ketok akeh komentare

Ega-Priatma mengatakan...
on 

@ ega

Kwi ra royokan.,., terah di rencanakan..,,.

Aji Nur Sanyoto mengatakan...
on 

@ ega lagi.,.

yoooo ga terus terus no nek we komentar.,.

Bek2ono kono.,.,
wakakwaka

Aji Nur Sanyoto mengatakan...
on 

kayaknya keren nih sob buat d coba, tp saya masih bingng mau saya isi apa nantinya, ok deh sementara saya save dulu yah, d tunggu coment dan follow baliknya jika berkenan

Rizky2009 mengatakan...
on 

MANTEP MAS. . .

Damar mengatakan...
on 

patut di coba mas,,, tanks atas infonya,, nice post mas...

afey aja mengatakan...
on 

aku juga mau coba ..moga ga berantakan he..he..

mila mengatakan...
on 

Ya.,, sob.,., monggo,, hehehe
moga aja gag berantakan.,.,

Aji Nur Sanyoto mengatakan...
on 

Aku bookmark dulu sob,, buat nambah2 referensi tutorial,,,
Nice inpoh :)

Eka mengatakan...
on 

Tab view memang perlu di masa sekarang. Lebih membantu para pengunjung. Media online profesional sudah banyak yang memakainya, termasuk jawa pos, inilah.com, dll

Salam ukhuwah

BeDa mengatakan...
on 

@ Eka..,, Yaaa,,. silahkan sob,.,.

Aji Nur Sanyoto mengatakan...
on 

@ BeDa.. Betul mas.,,

Aji Nur Sanyoto mengatakan...
on 

harus di CTRL + D dulu ni. .

Muhammad Chandra mengatakan...
on 

Yaaa mas,,, siilahkan aja monggo.,.,
heheheh

Aji Nur Sanyoto mengatakan...
on 

dulu pernah pake tapi tak copot lagi :)

secangkir teh dan sekerat roti mengatakan...
on 

Kenapa di copot mas ??

Aji Nur Sanyoto mengatakan...
on 

Maaampir sob.,.,.,

khidir mengatakan...
on 

mantap nih tutornya sobb

ipin mengatakan...
on 

Dari manakah anda mendapat script-script tutorial blog, yang biasanya anda posting??? sedangkan, anda masih kecil. Saya yakin anda anda pasti menculik script itu dari blog yang lain. Apakah anda bangga dengan semua hasil tersebut??? Apakah anda bangga dengan colongan??? Apalagi jika tidak di sertai dengan source-nya. Syukur-syukur anda bisa membuat script sendiri, murni ciptaan anda sendiri, pasti anda akan lebih merasa bangga.
Terserah, anda mau menghapus komentar ini. Tapi insya Allah komentar ini sangat bermanfaat. Dan silahkan belajar dari yang mudah jangan belajar langsung ke bagian sulit terima kasih.

Anonim mengatakan...
on 

Terimakasih atas kritik dan sarannya mas,,,
Memang kelihatannya saya masih kecil,, Tapi belum tentu saya tidak bisa apa2,, Dulu pun belum banyak yang saya ketahui,, Tapi saya terus belajar,, Apakah anda menganggap anak kecil itu adalah kecil dan penuh ketidak bisaan ?? Coba anda liat beberapa tutorial lain,, apakah mereka yang sudah dewasa kebanyakan bikin script sendiri ?? (COBA JAWAB....)

Aji Nur Sanyoto mengatakan...
on 

nICE INFONYA sob.,.,.

o'o mengatakan...
on 

Wah, ternyata ada yang marah-marah pakai anonim. Kita perlu bijak sebagai blogger. Sabar, dan terus melangkah. (Sstt... mungkin dia merasa scriptnya diculik Mas Aji ^_^)

Salam ukhuwah

BeDa mengatakan...
on 

@ BeDa... Terimakasih masukannya mas.,, ya,, mungkin aja dia kesal scriptnya di culik Tp aku selalu kasih Link asal scrpit itu aku Copy.,.,

Aji Nur Sanyoto mengatakan...
on 

Tap View itu gmn contoh nya,,, yah,,,,,

pasang iklan gratis mengatakan...
on 

Makasih Sob...

Mas - Sandi mengatakan...
on 

saya mau coba nich, dari dulu tapi loading blog saya lambat banget waktu kemaren2 juga
gimana ya
kalo yang ini berat gk???

CongCot mengatakan...
on 

@ Sandy>> Tuh di gambar ada,, ya,,klo tdak jelas widget di blog ini yang berjudul Menu,.,.

Aji Nur Sanyoto mengatakan...
on 

Aku Dach coba.,.,.
Ciamick sob..,..,.,.

o'o mengatakan...
on 

Yaaa,..... selamat sob.,.,

Aji Nur Sanyoto mengatakan...
on 

Nice info gan . . . . .

khidir mengatakan...
on 

makasih Share Tutornya
Sangat bermanfaat
Sukses selalu

Lulus Sutopo mengatakan...
on 

@ Congcot.,.,>> Tab view jenis ini nggak terlalu berat kok.,,,.,. Tp kalo yang jenisnya jquery mungkin sangat berat.,, intinya tab view yang di postingn ini nggak terlalu berat dech.,.,

Aji Nur Sanyoto mengatakan...
on 

wah patut dicoba nich
ia dech dicoba-dicoba

silahkan berkunjung ke <a href="http://www.congcot.co.cc><b>congcot</b></a>

congcot mengatakan...
on 

saya pernah nyoba beberapa kali membuat tab view buat blog saya yang www.harrypermadi.co.cc, tapi tampilannya gagal terus gan, mungkin templatenya ga cocok sama widget tabview.. hehe..

Harry mengatakan...
on 

mantab sob,, aq udh coba nih..
goodluck yya kawan

Gieterror mengatakan...
on 

@ Harry>> yaaa mungkin aja sob,,.. emang nggak cocoknya gmana ???

Aji Nur Sanyoto mengatakan...
on 

@ Gieterror>> ya sob mantab,,. aku juga dah liat,.,

Aji Nur Sanyoto mengatakan...
on 

Bener bangat dengan adanya tab view keliatannya blog kita lebih simpel dan bisa mengurangi loading blog juga...

saya sendiri pakek tapi bukan persi ini.
makasih karna saling berbagi informasi.
salam sukses...

jaya mengatakan...
on 

aq da punya tp yang ini lebih keren!!

Adib from kompinter mengatakan...
on 

info yang menarik sobb...aku coba dulu..thanks

AZ COMSOFT mengatakan...
on 

buktinya anda tidak mencantumkan sumbernya ,Saya punya screenshot nya kalau anda tidak mencantumkan sumbernya , tetapi sapa tahu kalau sudah anda ganti.....

Anonim mengatakan...
on 

Yaaaa lah,,... yang penting saya sudah mencantumkan sumbernya,.. .Kurang apa lagi ??

Aji Nur Sanyoto mengatakan...
on 

Nah setelah saya ingatkan ,anda langsung merubah nya, apakah anda tidak mengakui kesalahan anda???

Anonim mengatakan...
on 

Ya,, saya sangat mengakuinya, memang sebelumnya sayamemang lupa memberi sumber seperti tutorial saya sebelum2nya.. Saya memang baru belajar jadi saya sangat berterimakasih atas adanya kritikan ini....

Aji Nur Sanyoto mengatakan...
on 

ada konflik nih,,.. sabaraja sob..

o'o mengatakan...
on 

Ok kawan....

Aji Nur Sanyoto mengatakan...
on 

okelah kawan.... thanx

Aji Nur Sanyoto mengatakan...
on 

oklah kawan....

Aji Nur Sanyoto mengatakan...
on 

yaaa thanx sob

Aji Nur Sanyoto mengatakan...
on 

oke kawan thanx

Aji Nur Sanyoto mengatakan...
on 

tes

test mengatakan...
on 

pas di tahap 7 tuh gimana sih ???

kok punyaq jadinya cman tulisan aja

Dark-Nezz mengatakan...
on 

Poskan Komentar

Ayooo Bnnyak-Banyak BERkomentar....
Jangan Hanya baca.. Bila Anda Paling
banyak KOMNETAR anda akan Dapet Back LInk GRATIS!!

 

Copyright © 2009 ajinoor | .blogspot | .co.cc | All is my Site | Modifed ByNoorsificationetwork '12